test

Author: AlemTuzlak

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

@@ -1,3 +1,4 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { constructCoreClass } from './class'
 
@@ -28,22 +29,22 @@ describe('constructCoreClass', () => {
   })
   it('should export DevtoolsCore and NoOpDevtoolsCore classes and make no calls to Solid.js primitives', () => {
     const [DevtoolsCore, NoOpDevtoolsCore] = constructCoreClass(
-      '@test/devtools-mock-package',
+      () => <div>Test Component</div>,
     )
     expect(DevtoolsCore).toBeDefined()
     expect(NoOpDevtoolsCore).toBeDefined()
     expect(lazyImportMock).not.toHaveBeenCalled()
   })
 
   it('DevtoolsCore should call solid primitives when mount is called', async () => {
-    const [DevtoolsCore, _] = constructCoreClass('@test/devtools-mock-package')
+    const [DevtoolsCore, _] = constructCoreClass(() => <div>Test Component</div>)
     const instance = new DevtoolsCore()
     await instance.mount(document.createElement('div'), 'dark')
     expect(renderMock).toHaveBeenCalled()
   })
 
   it('DevtoolsCore should throw if mount is called twice without unmounting', async () => {
-    const [DevtoolsCore, _] = constructCoreClass('@test/devtools-mock-package')
+    const [DevtoolsCore, _] = constructCoreClass(() => <div>Test Component</div>)
     const instance = new DevtoolsCore()
     await instance.mount(document.createElement('div'), 'dark')
     await expect(
@@ -52,13 +53,13 @@ describe('constructCoreClass', () => {
   })
 
   it('DevtoolsCore should throw if unmount is called before mount', () => {
-    const [DevtoolsCore, _] = constructCoreClass('@test/devtools-mock-package')
+    const [DevtoolsCore, _] = constructCoreClass(() => <div>Test Component</div>)
     const instance = new DevtoolsCore()
     expect(() => instance.unmount()).toThrow('Devtools is not mounted')
   })
 
   it('DevtoolsCore should allow mount after unmount', async () => {
-    const [DevtoolsCore, _] = constructCoreClass('@test/devtools-mock-package')
+    const [DevtoolsCore, _] = constructCoreClass(() => <div>Test Component</div>)
     const instance = new DevtoolsCore()
     await instance.mount(document.createElement('div'), 'dark')
     instance.unmount()
@@ -69,7 +70,7 @@ describe('constructCoreClass', () => {
 
   it('NoOpDevtoolsCore should not call any solid primitives when mount is called', async () => {
     const [_, NoOpDevtoolsCore] = constructCoreClass(
-      '@test/devtools-mock-package',
+      () => <div>Test Component</div>,
     )
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')
@@ -81,7 +82,7 @@ describe('constructCoreClass', () => {
 
   it('NoOpDevtoolsCore should not throw if mount is called multiple times', async () => {
     const [_, NoOpDevtoolsCore] = constructCoreClass(
-      '@test/devtools-mock-package',
+      () => <div>Test Component</div>,
     )
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')
@@ -92,15 +93,15 @@ describe('constructCoreClass', () => {
 
   it('NoOpDevtoolsCore should not throw if unmount is called before mount', () => {
     const [_, NoOpDevtoolsCore] = constructCoreClass(
-      '@test/devtools-mock-package',
+      () => <div>Test Component</div>,
     )
     const noOpInstance = new NoOpDevtoolsCore()
     expect(() => noOpInstance.unmount()).not.toThrow()
   })
 
   it('NoOpDevtoolsCore should not throw if unmount is called after mount', async () => {
     const [_, NoOpDevtoolsCore] = constructCoreClass(
-      '@test/devtools-mock-package',
+      () => <div>Test Component</div>,
     )
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')

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

@@ -1,5 +1,7 @@
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
+import type { JSX, } from 'solid-js'
+
 /**
  * Constructs the core class for the Devtools.
  * This utility is used to construct a lazy loaded Solid component for the Devtools.
@@ -9,14 +11,14 @@
  * @param importPath The path to the Solid component to be lazily imported
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
-export function constructCoreClass(importPath: string) {
+export function constructCoreClass(Component: () => JSX.Element) {
   class DevtoolsCore {
     #isMounted = false
     #dispose?: () => void
     #Component: any
     #ThemeProvider: any
 
-    constructor() {}
+    constructor() { }
 
     async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
       const { lazy } = await import('solid-js')
@@ -26,7 +28,8 @@ export function constructCoreClass(importPath: string) {
       }
       const mountTo = el
       const dispose = render(() => {
-        this.#Component = lazy(() => import(/** @vite-ignore */ importPath))
+        // eslint-disable-next-line @typescript-eslint/require-await
+        this.#Component = lazy(async () => ({ default: Component }))
         const Devtools = this.#Component
         this.#ThemeProvider = lazy(() =>
           import('@tanstack/devtools-ui').then((mod) => ({
@@ -61,8 +64,8 @@ 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
 }