test

Author: AlemTuzlak

packages/devtools-utils/src/react/panel.test.tsx

@@ -27,22 +27,21 @@ export function createReactPanel<
     mount: (el: HTMLElement, theme: 'light' | 'dark') => void
     unmount: () => void
   },
->(devtoolsPackageName: string, importName = 'default') {
+>(
+  CoreClass: new () => TCoreDevtoolsClass
+) {
   function Panel(props: TComponentProps) {
     const devToolRef = useRef<HTMLDivElement>(null)
     const devtools = useRef<TCoreDevtoolsClass | null>(null)
     useEffect(() => {
       if (devtools.current) return
 
-      import(/* @vite-ignore */ devtoolsPackageName).then(
-        ({ [importName]: Core }) => {
-          devtools.current = new Core()
+      devtools.current = new CoreClass()
+
+      if (devToolRef.current) {
+        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+      }
 
-          if (devToolRef.current && devtools.current) {
-            devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
-          }
-        },
-      )
 
       return () => {
         devtools.current?.unmount()

packages/devtools-utils/src/react/panel.tsx

@@ -16,7 +16,7 @@ export function constructCoreClass(importPath: string) {
     #Component: any
     #ThemeProvider: any
 
-    constructor() {}
+    constructor() { }
 
     async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
       const { lazy } = await import('solid-js')
@@ -61,8 +61,10 @@ export function constructCoreClass(importPath: string) {
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
-    unmount() {}
+    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') { }
+    unmount() { }
   }
   return [DevtoolsCore, NoOpDevtoolsCore] as const
 }
+
+export type ClassType = ReturnType<typeof constructCoreClass>[0]

packages/devtools-utils/src/solid/class.tsx

@@ -1,21 +1,21 @@
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
 import { onCleanup, onMount } from 'solid-js'
+import type { ClassType } from './class'
 
 export interface DevtoolsPanelProps {
   theme?: 'light' | 'dark'
 }
 
 export function createSolidPanel<
   TComponentProps extends DevtoolsPanelProps | undefined,
->(importPath: string, importName = 'default') {
+>(CoreClass: ClassType) {
   function Panel(props: TComponentProps) {
     let devToolRef: HTMLDivElement | undefined
 
-    onMount(async () => {
-      const devtools = await import(/* @vite-ignore */ importPath).then(
-        (mod) => new mod[importName](),
-      )
+    onMount(() => {
+      const devtools = new CoreClass()
+
       if (devToolRef) {
         devtools.mount(devToolRef, props?.theme ?? 'dark')