@lithent/hmr-parser 0.2.2 → 0.2.3

package/src/tests/mark.test.ts

@@ -1,191 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '@babel/parser';
 import { transformWithMarker } from '../markerParse';
 
-const createDefaultMarkerRegex = () =>
-  new RegExp(
-    '/\\*\\s*lithent:hmr-boundary(?:\\s+([A-Za-z0-9_,\\s]+))?\\s*\\*/'
-  );
+const transform = (code: string) =>
+  transformWithMarker({
+    code,
+    markerRegex: /\/\*\s*lithent:hmr-boundary(?:\s+([A-Za-z0-9_,\s]+))?\s*\*\//,
+    boundaryImportSpecifier: 'lithent/devHelper',
+    tagFunctionImportSpecifier: 'lithent',
+  });
 
-const markerSourceDefault = `
+describe('explicit component markers', () => {
+  it('wraps local and exported components independently and guards render calls', () => {
+    const result = transform(`
 'use client';
-import { render, mount } from 'lithent';
-
+import {mount, render} from 'lithent';
 /* lithent:hmr-boundary default */
-
-const App = mount((renew, props: { title: string }) => {
-  return () => <div>{props.title}</div>;
-});
-
-const Secondary = mount((renew, props: { subtitle: string }) => {
-  return () => <p>{props.subtitle}</p>;
-});
-
+const App = mount(() => {return () => <Secondary/>;});
+const Secondary = () => <span/>;
+render(<App/>, document.body);
 export default App;
-`;
-
-const markerSourceNamed = `
-"use client";
-import type { TagFunction } from 'lithent';
-import { createBoundary } from 'lithent/devHelper';
-import { render, mount } from 'lithent';
-
-/* lithent:hmr-boundary Counter, Another */
-
-export const Counter = mount((renew, props) => {
-  return () => <span>{props.value}</span>;
-});
-
-export const Another = mount((renew, props) => {
-  return () => <span>{props.value}</span>;
-});
-`;
-
-const defaultResult = transformWithMarker({
-  code: markerSourceDefault,
-  markerRegex: createDefaultMarkerRegex(),
-  boundaryImportSpecifier: 'lithent/devHelper',
-  tagFunctionImportSpecifier: 'lithent',
-});
-
-const namedResult = transformWithMarker({
-  code: markerSourceNamed,
-  markerRegex: createDefaultMarkerRegex(),
-  boundaryImportSpecifier: 'lithent/devHelper',
-  tagFunctionImportSpecifier: 'lithent',
-});
-
-console.log('[marker] transformed default:', defaultResult.transformed);
-console.log('[marker] transformed named:', namedResult.transformed);
-console.log('[marker] code default:', defaultResult.code);
-console.log('[marker] code named:', namedResult.code);
-
-if (!import.meta.vitest) {
-  const defaultPre = document?.getElementById('marker-default');
-  if (defaultPre) {
-    defaultPre.textContent = defaultResult.transformed
-      ? defaultResult.code
-      : 'transform skipped';
-  }
-
-  const namedPre = document?.getElementById('marker-named');
-  if (namedPre) {
-    namedPre.textContent = namedResult.transformed
-      ? namedResult.code
-      : 'transform skipped';
-  }
-}
-
-if (import.meta.vitest) {
-  const { describe, it, expect } = import.meta.vitest;
-
-  describe('transformWithMarker', () => {
-    it('replaces marker comment with HMR bootstrap and injects helpers', () => {
-      expect(defaultResult.transformed).toBe(true);
-      expect(defaultResult.code).not.toMatch(/lithent:hmr-boundary/);
-      expect(defaultResult.code).toContain(
-        "import { createBoundary } from 'lithent/devHelper';"
-      );
-      expect(defaultResult.code).toContain('import.meta.hot');
-      expect(defaultResult.code).toContain(
-        "import { mountCallback, getComponentKey } from 'lithent';"
-      );
-      expect(defaultResult.code).toContain(
-        'const __lithentModuleId = new URL(import.meta.url).pathname;'
-      );
-      expect(defaultResult.code).toContain(
-        'const __lithentHmrTargets = ["App","Secondary"];'
-      );
-      expect(defaultResult.code).toContain('const knownNames = new Set([');
-      expect(defaultResult.code).toContain('...["App","Secondary"]');
-      expect(defaultResult.code).toContain('...__lithentHmrTargets');
-      expect(defaultResult.code).toContain(
-        'const __lithentHotComponent_App = App;'
-      );
-      expect(defaultResult.code).toContain(
-        '__lithentModuleHotStore["App"] = __lithentHotComponent_App;'
-      );
-      expect(defaultResult.code).toContain(
-        'const __lithentHotComponent_Secondary = Secondary;'
-      );
-      expect(defaultResult.code).toContain(
-        '__lithentModuleHotStore["Secondary"] = __lithentHotComponent_Secondary;'
-      );
-      expect(defaultResult.code).toContain(
-        'const __lithentRenderOnce = (factory)'
-      );
-      const registerMatches =
-        defaultResult.code.match(/counterBoundary\.register\(compKey\)/g) ?? [];
-      const unregisterMatches =
-        defaultResult.code.match(
-          /mountCallback\(\(\) => \(\) => unregister\(\)\)/g
-        ) ?? [];
-      expect(registerMatches).toHaveLength(2);
-      expect(unregisterMatches).toHaveLength(2);
-    });
+`);
+    expect(result.transformed).toBe(true);
+    expect(result.code).not.toContain('/* lithent:hmr-boundary');
+    expect(result.code).toContain('__lithentWrapComponent("App", mount(');
+    expect(result.code).toContain('__lithentWrapComponent("Secondary",');
+    expect(result.code).toContain('__lithentRenderOnce(0, () => render(');
+    expect(() =>
+      parse(result.code, {
+        sourceType: 'module',
+        plugins: ['typescript', 'jsx'],
+      })
+    ).not.toThrow();
+  });
 
-    it('respects explicit export names declared in the marker', () => {
-      expect(namedResult.transformed).toBe(true);
-      expect(
-        namedResult.code.match(
-          /import { createBoundary } from 'lithent\/devHelper';/g
-        )
-      ).toHaveLength(1);
-      expect(namedResult.code).toContain(
-        'const __lithentHmrTargets = ["Counter","Another"];'
-      );
-      expect(namedResult.code).toContain('import.meta.hot');
-      expect(namedResult.code).toContain('const knownNames = new Set([');
-      expect(namedResult.code).toContain('...["Counter","Another"]');
-      expect(namedResult.code).toContain('...__lithentHmrTargets');
-      expect(namedResult.code).toContain(
-        'const __lithentHotComponent_Counter = Counter;'
-      );
-      expect(namedResult.code).toContain(
-        '__lithentModuleHotStore["Counter"] = __lithentHotComponent_Counter;'
-      );
-      expect(namedResult.code).toContain(
-        'const __lithentHotComponent_Another = Another;'
-      );
-      expect(namedResult.code).toContain(
-        '__lithentModuleHotStore["Another"] = __lithentHotComponent_Another;'
-      );
-      const namedRegisters =
-        namedResult.code.match(/counterBoundary\.register\(compKey\)/g) ?? [];
-      const namedUnregisters =
-        namedResult.code.match(
-          /mountCallback\(\(\) => \(\) => unregister\(\)\)/g
-        ) ?? [];
-      expect(namedRegisters).toHaveLength(2);
-      expect(namedUnregisters).toHaveLength(2);
+  it('does not rely on unaliased lifecycle imports or snippet text', () => {
+    const result = transform(`
+import {createBoundary} from 'lithent/devHelper';
+import {mount, getComponentKey as key} from 'lithent';
+const snippet = "import {mountCallback} from 'lithent'";
+/* lithent:hmr-boundary Counter */
+export const Counter = mount(() => {return () => <span/>;});
+`);
+    const ast = parse(result.code, {
+      sourceType: 'module',
+      plugins: ['typescript', 'jsx'],
     });
+    const boundaryImports = ast.program.body.filter(
+      node =>
+        node.type === 'ImportDeclaration' &&
+        node.source.value === 'lithent/devHelper'
+    );
+    expect(boundaryImports).toHaveLength(2);
+    expect(result.code).toContain('createBoundary as __lithentCreateBoundary');
+    expect(result.code).toContain(
+      'getComponentKey as __lithentGetComponentKey'
+    );
+    expect(result.code).toContain('mountCallback as __lithentMountCallback');
+  });
 
-    it('still injects helpers when code includes snippet text mentioning mountCallback', () => {
-      const sourceWithSnippet = [
-        "'use client';",
-        "import { mount } from 'lithent';",
-        '',
-        'const doc = "import { h, mountCallback } from \'lithent\';";',
-        '',
-        '/* lithent:hmr-boundary default */',
-        '',
-        'const Demo = mount(() => {',
-        '  return () => <div>demo</div>;',
-        '});',
-        '',
-        'export default Demo;',
-        '',
-      ].join('\n');
-
-      const snippetResult = transformWithMarker({
-        code: sourceWithSnippet,
-        markerRegex: createDefaultMarkerRegex(),
-        boundaryImportSpecifier: 'lithent/devHelper',
-        tagFunctionImportSpecifier: 'lithent',
-      });
-
-      expect(snippetResult.transformed).toBe(true);
-      expect(snippetResult.code).toContain(
-        "import { mountCallback, getComponentKey } from 'lithent';"
-      );
-    });
+  it('initializes wrappers before declarations even when the marker follows them', () => {
+    const result = transform(`
+export const Badge = () => <span/>;
+/* lithent:hmr-boundary Badge */
+`);
+    expect(result.code.indexOf('const __lithentWrapComponent')).toBeLessThan(
+      result.code.indexOf('export const Badge')
+    );
   });
-}
+});

package/src/tests/nomark.test.tsx

@@ -1,98 +1,119 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '@babel/parser';
 import { transformWithoutMarker } from '../noMarkerParse';
 
-const source = `
-'use client';
-import { render, mount } from 'lithent';
-
-const Demo = mount((_renew, props: { message: string }) => {
-  return () => ({ type: 'div', props: {}, children: [props.message] } as any);
-});
-
-const Another = mount((_renew, props: { id: number }) => {
-  return () => ({ type: 'span', props: {}, children: [String(props.id)] } as any);
-});
-
-const root = document.getElementById('app');
-if (root) {
-  render(Demo({ message: 'hello' }), root as any);
-  render(Another({ id: 1 }), root as any);
-}
-`;
+const transform = (code: string) =>
+  transformWithoutMarker({
+    code,
+    boundaryImportSpecifier: 'lithent/devHelper',
+    tagFunctionImportSpecifier: 'lithent',
+  });
 
-const result = transformWithoutMarker({
-  code: source,
-  boundaryImportSpecifier: 'lithent/devHelper',
-  tagFunctionImportSpecifier: 'lithent',
-});
+describe('component discovery without a marker', () => {
+  it.each([
+    [
+      'expression arrow',
+      'export const Badge = ({label}) => <span>{label}</span>;',
+    ],
+    [
+      'block arrow',
+      'export const Badge = ({label}) => { return <span>{label}</span>; };',
+    ],
+    [
+      'function declaration',
+      'export function Badge({label}) { return <span>{label}</span>; }',
+    ],
+    [
+      'function expression',
+      'export const Badge = function ({label}) { return <span>{label}</span>; };',
+    ],
+    [
+      'named default',
+      'export default function Badge({label}) { return <span>{label}</span>; }',
+    ],
+    [
+      'lowercase named default',
+      'export default function badge() { return <span/>; }',
+    ],
+    ['null output', 'export const Empty = () => null;'],
+    [
+      'JSX list',
+      'export const List = ({items}) => items.map(item => <span>{item}</span>);',
+    ],
+    [
+      'returned local',
+      'export const Badge = () => {const output = <span/>; return output;};',
+    ],
+    ['anonymous default', 'export default ({label}) => <span>{label}</span>;'],
+    [
+      'anonymous default function',
+      'export default function ({label}) { return <span>{label}</span>; }',
+    ],
+  ])('discovers and produces valid syntax for %s', (_name, code) => {
+    const result = transform(code);
+    expect(result.transformed).toBe(true);
+    expect(result.code).toContain('__lithentWrapComponent(');
+    expect(() =>
+      parse(result.code, {
+        sourceType: 'module',
+        plugins: ['typescript', 'jsx'],
+      })
+    ).not.toThrow();
+  });
 
-console.log('[no-marker] transformed:', result.transformed);
-console.log('[no-marker] code:', result.code);
+  it('discovers automatic JSX runtime calls and leaves ordinary helpers alone', () => {
+    const result = transform(`
+import {jsx as _jsx} from 'lithent/jsx-runtime';
+export const Badge = props => _jsx('span', {children: props.label});
+export const Format = value => String(value);
+export const Handle = () => () => _jsx('span', {});
+`);
+    expect(result.code).toContain('__lithentWrapComponent("Badge",');
+    expect(result.code).not.toContain('__lithentWrapComponent("Format",');
+    expect(result.code).not.toContain('__lithentWrapComponent("Handle",');
+  });
 
-if (!import.meta.vitest) {
-  const pre = document?.getElementById('output');
-  if (pre) {
-    pre.textContent = result.transformed ? result.code : 'transform skipped';
-  }
-}
+  it('handles aliased mount, lmount, and multiple declarations', () => {
+    const result = transform(`
+import {mount as make, lmount} from 'lithent';
+export const A = make(function () {return () => <span/>;}), B = lmount(() => () => <div/>);
+`);
+    expect(result.code).toContain('__lithentWrapComponent("A", make(');
+    expect(result.code).toContain('__lithentWrapComponent("B", lmount(');
+    expect(() =>
+      parse(result.code, {
+        sourceType: 'module',
+        plugins: ['typescript', 'jsx'],
+      })
+    ).not.toThrow();
+  });
 
-if (import.meta.vitest) {
-  const { describe, it, expect } = import.meta.vitest;
+  it('recognizes namespace imports and typed expressions', () => {
+    const result = transform(`
+import * as core from 'lithent';
+import * as runtime from 'lithent/jsx-runtime';
+export const A = core.mount(() => () => core.h('span', {}));
+export const B = props => runtime.jsx('span', {children: props.label});
+export const C = (() => null) satisfies () => null;
+`);
+    for (const name of ['A', 'B', 'C'])
+      expect(result.code).toContain(`__lithentWrapComponent("${name}",`);
+  });
 
-  describe('transformWithoutMarker (integration)', () => {
-    it('should mark transform as successful and inject HMR bootstrap + boundary registration', () => {
-      const expectedSnippet =
-        'const __lithentModuleId = new URL(import.meta.url).pathname;';
+  it('does not treat imports from other frameworks as Lithent components', () => {
+    const result = transform(
+      "import {jsx} from 'react/jsx-runtime'; export const Badge = () => jsx('span', {});"
+    );
+    expect(result.transformed).toBe(false);
+  });
 
-      expect(result.transformed).toBe(true);
-      expect(result.code.includes(expectedSnippet)).toBe(true);
-      expect(
-        result.code.includes(
-          "import { createBoundary } from 'lithent/devHelper'"
-        )
-      ).toBe(true);
-      expect(
-        result.code.includes(
-          "import { mountCallback, getComponentKey } from 'lithent'"
-        )
-      ).toBe(true);
-      expect(result.code.includes('const compKey = getComponentKey();')).toBe(
-        true
-      );
-      expect(
-        result.code.includes('const __lithentHmrTargets = ["Demo","Another"];')
-      ).toBe(true);
-      expect(result.code.includes('const knownNames = new Set([')).toBe(true);
-      expect(result.code.includes('...["Demo","Another"]')).toBe(true);
-      expect(result.code.includes('...__lithentHmrTargets')).toBe(true);
-      expect(
-        result.code.includes('const __lithentHotComponent_Demo = Demo;')
-      ).toBe(true);
-      expect(
-        result.code.includes(
-          '__lithentModuleHotStore["Demo"] = __lithentHotComponent_Demo;'
-        )
-      ).toBe(true);
-      expect(
-        result.code.includes('const __lithentHotComponent_Another = Another;')
-      ).toBe(true);
-      expect(
-        result.code.includes(
-          '__lithentModuleHotStore["Another"] = __lithentHotComponent_Another;'
-        )
-      ).toBe(true);
-      expect(
-        result.code.includes('const __lithentRenderOnce = (factory)')
-      ).toBe(true);
-      expect(/__lithentRenderOnce\(\(\) =>\s*render\(/.test(result.code)).toBe(
-        true
-      );
-      const registerMatches =
-        result.code.match(/counterBoundary\.register\(compKey\)/g) ?? [];
-      const unregisterMatches =
-        result.code.match(/mountCallback\(\(\) => \(\) => unregister\(\)\)/g) ??
-        [];
-      expect(registerMatches).toHaveLength(2);
-      expect(unregisterMatches).toHaveLength(2);
-    });
+  it('does not discover JSX side effects, async functions, or generators', () => {
+    for (const source of [
+      'export const Handle = () => {const ignored = <span/>; return 42;};',
+      'export const Badge = async () => <span/>;',
+      'export function* Badge() {yield <span/>;}',
+    ]) {
+      expect(transform(source).code).not.toContain('__lithentWrapComponent(');
+    }
   });
-}
+});