fix: support @knighted/jsx type-only imports in DOM mode. (#39)

Author: knightedcodemonkey

playwright/diagnostics.spec.ts

@@ -208,6 +208,45 @@ test('typecheck error reports diagnostics count in button and details in drawer'
   await expect(page.getByText(/TS\d+/)).toBeVisible()
 })
 
+test('dom mode typecheck resolves @knighted/jsx type-only imports', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+
+  await page.getByRole('combobox', { name: 'Render mode' }).selectOption('dom')
+  await setComponentEditorSource(
+    page,
+    [
+      "import type { JsxChildren } from '@knighted/jsx'",
+      '',
+      'type DrawerProps = {',
+      '  children?: JsxChildren',
+      '}',
+      '',
+      'const Drawer = ({ children }: DrawerProps) => {',
+      '  return <div className="drawer">{children}</div>',
+      '}',
+      '',
+      'const App = () => {',
+      '  return (',
+      '    <Drawer>',
+      '      <p>drawer</p>',
+      '    </Drawer>',
+      '  )',
+      '}',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No TypeScript errors found.',
+  )
+
+  const diagnosticsText = await page.locator('#diagnostics-component').innerText()
+  expect(diagnosticsText).not.toContain("Cannot find module '@knighted/jsx'")
+})
+
 test('component diagnostics rows navigate editor to reported line', async ({ page }) => {
   await waitForInitialRender(page)
 

playwright/rendering-modes.spec.ts

@@ -40,6 +40,41 @@ test('transpiles TypeScript annotations in component source', async ({ page }) =
   ).toContainText('typed')
 })
 
+test('dom mode supports type-only imports without runtime export syntax errors', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await page.getByLabel('ShadowRoot').uncheck()
+  await page.getByRole('combobox', { name: 'Render mode' }).selectOption('dom')
+
+  await setComponentEditorSource(
+    page,
+    [
+      "import type { JsxChildren } from '@knighted/jsx'",
+      '',
+      'type DrawerProps = {',
+      '  children?: JsxChildren',
+      '}',
+      '',
+      'const Drawer = ({ children }: DrawerProps) => {',
+      '  return <div className="drawer">{children}</div>',
+      '}',
+      '',
+      'const App = () => {',
+      '  return <Drawer><button type="button">typed children import</button></Drawer>',
+      '}',
+    ].join('\n'),
+  )
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(page.locator('#preview-host pre')).toHaveCount(0)
+  await expect(
+    page.getByRole('region', { name: 'Preview output' }).getByRole('button'),
+  ).toContainText('typed children import')
+})
+
 test('react mode typecheck loads types without malformed URL fetches', async ({
   page,
 }) => {

src/modules/render-runtime.js

@@ -313,6 +313,9 @@ export const createRenderRuntimeController = ({
     return output
   }
 
+  const stripEmptyExportStatements = code =>
+    code.replace(/(?:^|\n)\s*export\s*\{\s*\}\s*;?\s*(?=\n|$)/g, '\n')
+
   const buildRuntimeImportPlan = imports => {
     const preamble = []
     const unsupportedSources = new Set()
@@ -790,9 +793,10 @@ export const createRenderRuntimeController = ({
         transformedResult.code,
         importAnalysisResult.imports,
       )
+      const sanitizedRuntimeCode = stripEmptyExportStatements(runtimeCode)
       const executableUserCode = runtimeImportPlan.preamble.length
-        ? `${runtimeImportPlan.preamble.join('\n')}\n${runtimeCode}`
-        : runtimeCode
+        ? `${runtimeImportPlan.preamble.join('\n')}\n${sanitizedRuntimeCode}`
+        : sanitizedRuntimeCode
 
       const moduleFactory = createUserModuleFactory(executableUserCode)
 

src/modules/type-diagnostics.js

@@ -22,13 +22,29 @@ const isAbsoluteUrlReference = reference => {
 }
 
 const domJsxTypes =
+  "declare module '@knighted/jsx' {\n" +
+  '  export type JsxRenderable =\n' +
+  '    | Node\n' +
+  '    | DocumentFragment\n' +
+  '    | string\n' +
+  '    | number\n' +
+  '    | bigint\n' +
+  '    | boolean\n' +
+  '    | null\n' +
+  '    | undefined\n' +
+  '    | Iterable<JsxRenderable>\n' +
+  '  export type JsxChildren = JsxRenderable | JsxRenderable[]\n' +
+  '  export type JsxComponent<Props = Record<string, unknown>> = (\n' +
+  '    props: Props & { children?: JsxChildren }\n' +
+  '  ) => JsxRenderable\n' +
+  '}\n' +
   'declare namespace React {\n' +
   '  type Key = string | number\n' +
   '  interface Attributes { key?: Key | null }\n' +
   '}\n' +
   'declare namespace JSX {\n' +
-  '  type Element = unknown\n' +
-  '  interface ElementChildrenAttribute { children: unknown }\n' +
+  "  type Element = import('@knighted/jsx').JsxRenderable\n" +
+  "  interface ElementChildrenAttribute { children: import('@knighted/jsx').JsxChildren }\n" +
   '  interface IntrinsicAttributes extends React.Attributes {}\n' +
   '  interface IntrinsicElements { [elemName: string]: Record<string, unknown> }\n' +
   '}\n'