@lithent/hmr-parser 0.2.0 → 0.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@lithent/hmr-parser",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Lithent HMR parser utilities for build tools",
   "main": "./dist/lithentHmrParser.umd.js",
   "module": "./dist/lithentHmrParser.mjs",
@@ -40,7 +40,7 @@
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-dts": "^4.2.1",
     "vitest": "^2.1.5",
-    "lithent": "1.20.0"
+    "lithent": "1.20.2"
   },
   "volta": {
     "node": "20.3.0",

package/src/tests/mark.test.ts

@@ -157,5 +157,35 @@ if (import.meta.vitest) {
       expect(namedRegisters).toHaveLength(2);
       expect(namedUnregisters).toHaveLength(2);
     });
+
+    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';"
+      );
+    });
   });
 }

package/src/transform/componentRegister.ts

@@ -9,8 +9,12 @@ export const stitchComponentRegistration = (
 ) => {
   if (!mounts.length) return;
 
-  const needsMountCallback = !/import\s+{[^}]*mountCallback/.test(code);
-  const needsGetComponentKey = !/import\s+{[^}]*getComponentKey/.test(code);
+  const importStatements = extractImportStatements(code);
+  const needsMountCallback = !hasNamedImport(importStatements, 'mountCallback');
+  const needsGetComponentKey = !hasNamedImport(
+    importStatements,
+    'getComponentKey'
+  );
 
   if (needsMountCallback || needsGetComponentKey) {
     const pieces: string[] = [];
@@ -48,3 +52,263 @@ if (__lithentModuleHotStore) {
     }
   }
 };
+
+type ScannerState =
+  | 'code'
+  | 'single'
+  | 'double'
+  | 'template'
+  | 'lineComment'
+  | 'blockComment';
+
+const extractImportStatements = (source: string): string[] => {
+  const imports: string[] = [];
+  let i = 0;
+  let state: ScannerState = 'code';
+  let templateDepth = 0;
+
+  while (i < source.length) {
+    const ch = source[i];
+    const next = source[i + 1];
+
+    switch (state) {
+      case 'code':
+        if (ch === '/' && next === '/') {
+          state = 'lineComment';
+          i += 2;
+          continue;
+        }
+        if (ch === '/' && next === '*') {
+          state = 'blockComment';
+          i += 2;
+          continue;
+        }
+        if (ch === "'") {
+          state = 'single';
+          i++;
+          continue;
+        }
+        if (ch === '"') {
+          state = 'double';
+          i++;
+          continue;
+        }
+        if (ch === '`') {
+          state = 'template';
+          templateDepth = 0;
+          i++;
+          continue;
+        }
+        if (
+          ch === 'i' &&
+          isImportKeyword(source, i) &&
+          !isDynamicImport(source, i)
+        ) {
+          const end = findImportStatementEnd(source, i);
+          imports.push(source.slice(i, end));
+          i = end;
+          continue;
+        }
+        i++;
+        break;
+
+      case 'single':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === "'") {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'double':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === '"') {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'template':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === '`') {
+          if (templateDepth === 0) {
+            state = 'code';
+            i++;
+            continue;
+          }
+          templateDepth--;
+          i++;
+          continue;
+        }
+        if (ch === '$' && next === '{') {
+          templateDepth++;
+          i += 2;
+          continue;
+        }
+        if (ch === '}' && templateDepth > 0) {
+          templateDepth--;
+        }
+        i++;
+        break;
+
+      case 'lineComment':
+        if (ch === '\n') {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'blockComment':
+        if (ch === '*' && next === '/') {
+          state = 'code';
+          i += 2;
+          continue;
+        }
+        i++;
+        break;
+    }
+  }
+
+  return imports;
+};
+
+const hasNamedImport = (imports: string[], name: string): boolean => {
+  const pattern = new RegExp(`\\b${escapeRegExp(name)}\\b`);
+  return imports.some(statement => {
+    const [clause] = statement.split(/from\s+/i);
+    return pattern.test(clause);
+  });
+};
+
+const escapeRegExp = (value: string): string =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const isImportKeyword = (source: string, index: number): boolean => {
+  if (!source.startsWith('import', index)) {
+    return false;
+  }
+
+  const prev = source[index - 1];
+  if (prev && /\w/.test(prev)) {
+    return false;
+  }
+
+  const next = source[index + 'import'.length];
+  if (next && /\w/.test(next)) {
+    return false;
+  }
+
+  return true;
+};
+
+const isDynamicImport = (source: string, index: number): boolean => {
+  const nextChar = source[index + 'import'.length];
+  return nextChar === '(' || nextChar === '.';
+};
+
+const findImportStatementEnd = (source: string, start: number): number => {
+  let i = start;
+  let state: ScannerState = 'code';
+
+  while (i < source.length) {
+    const ch = source[i];
+    const next = source[i + 1];
+
+    switch (state) {
+      case 'code':
+        if (ch === ';') {
+          return i + 1;
+        }
+        if (ch === '/' && next === '/') {
+          state = 'lineComment';
+          i += 2;
+          continue;
+        }
+        if (ch === '/' && next === '*') {
+          state = 'blockComment';
+          i += 2;
+          continue;
+        }
+        if (ch === "'") {
+          state = 'single';
+          i++;
+          continue;
+        }
+        if (ch === '"') {
+          state = 'double';
+          i++;
+          continue;
+        }
+        if (ch === '`') {
+          state = 'template';
+          i++;
+          continue;
+        }
+        if (ch === '\n' && source[i + 1] === '\n') {
+          return i + 1;
+        }
+        i++;
+        break;
+
+      case 'single':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === "'") {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'double':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === '"') {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'template':
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === '`') {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'lineComment':
+        if (ch === '\n') {
+          state = 'code';
+        }
+        i++;
+        break;
+
+      case 'blockComment':
+        if (ch === '*' && next === '/') {
+          state = 'code';
+          i += 2;
+          continue;
+        }
+        i++;
+        break;
+    }
+  }
+
+  return source.length;
+};