@lithent/hmr-parser 0.2.0 → 0.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@lithent/hmr-parser",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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/strings.ts

@@ -12,6 +12,7 @@ export const createHmrBootstrapBlock = (
 const __lithentModuleId = new URL(import.meta.url).pathname;
 const __lithentBoundaryStoreKey = \`__lithent_hmr_boundary__\${__lithentModuleId}\`;
 const __lithentDisposeStoreKey = \`__lithent_hmr_dispose__\${__lithentModuleId}\`;
+const __lithentInvalidateCountKey = \`__lithent_hmr_invalidate_count__\${__lithentModuleId}\`;
 const __lithentGlobalStore =
   typeof globalThis === 'object'
     ? globalThis
@@ -85,6 +86,44 @@ const __lithentModuleHotStore =
 
 const __lithentHmrTargets = ${serializedTargets};
 
+const __lithentGetInvalidateCount = () => {
+  return (__lithentGlobalStore && __lithentGlobalStore[__lithentInvalidateCountKey]) || 0;
+};
+
+const __lithentIncrementInvalidateCount = () => {
+  if (__lithentGlobalStore) {
+    const current = __lithentGetInvalidateCount();
+    __lithentGlobalStore[__lithentInvalidateCountKey] = current + 1;
+    return current + 1;
+  }
+  return 0;
+};
+
+const __lithentResetInvalidateCount = () => {
+  if (__lithentGlobalStore) {
+    __lithentGlobalStore[__lithentInvalidateCountKey] = 0;
+  }
+};
+
+const __lithentSafeInvalidate = (reason) => {
+  const MAX_INVALIDATE_ATTEMPTS = 3;
+  const count = __lithentIncrementInvalidateCount();
+
+  if (count >= MAX_INVALIDATE_ATTEMPTS) {
+    console.warn(
+      \`[Lithent HMR] 전체 리프레시를 \${count}번 시도했지만 계속 실패합니다. 컴포넌트가 마운트되지 않았거나 다른 문제가 있을 수 있습니다. 페이지를 수동으로 새로고침해주세요.\`,
+      reason
+    );
+    return;
+  }
+
+  console.warn(
+    \`[Lithent HMR] 변경된 경계를 적용하지 못해 전체 리프레시합니다. (시도 \${count}/\${MAX_INVALIDATE_ATTEMPTS})\`,
+    reason
+  );
+  import.meta.hot?.invalidate?.();
+};
+
 const __lithentSetupHmrHooks = () => {
   if (!import.meta.hot) {
     return;
@@ -116,7 +155,9 @@ const __lithentSetupHmrHooks = () => {
       }
     }
 
-    if (!applied) {
+    if (applied) {
+      __lithentResetInvalidateCount();
+    } else {
       if (missing.length && __lithentModuleHotStore) {
         queueMicrotask(() => {
           let retried = false;
@@ -126,19 +167,15 @@ const __lithentSetupHmrHooks = () => {
               retried = true;
             }
           }
-          if (!retried) {
-            console.warn(
-              '[Lithent HMR] 변경된 경계를 적용하지 못해 전체 리프레시합니다.'
-            );
-            import.meta.hot?.invalidate?.();
+          if (retried) {
+            __lithentResetInvalidateCount();
+          } else {
+            __lithentSafeInvalidate(\`missing components: \${missing.join(', ')}\`);
           }
         });
         return;
       }
-      console.warn(
-        '[Lithent HMR] 변경된 경계를 적용하지 못해 전체 리프레시합니다.'
-      );
-      import.meta.hot?.invalidate?.();
+      __lithentSafeInvalidate('no components applied');
     }
   });
 
@@ -155,6 +192,9 @@ const __lithentSetupHmrHooks = () => {
       if (disposeApp) {
         __lithentGlobalStore[__lithentDisposeStoreKey] = disposeApp;
       }
+
+      // Reset invalidate count on dispose to allow fresh attempts on next load
+      __lithentResetInvalidateCount();
     }
   });
 };

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;
+};