@lithent/hmr-parser 0.2.2 → 0.2.3

package/src/transform/componentRegister.ts

@@ -4,311 +4,20 @@ import type { MountInfo } from '../utils/ast/componentCollector';
 export const stitchComponentRegistration = (
   ms: MagicString,
   mounts: MountInfo[],
-  code: string,
-  importInsertionPos: number
+  _code: string,
+  _importInsertionPos: number
 ) => {
-  if (!mounts.length) return;
-
-  const importStatements = extractImportStatements(code);
-  const needsMountCallback = !hasNamedImport(importStatements, 'mountCallback');
-  const needsGetComponentKey = !hasNamedImport(
-    importStatements,
-    'getComponentKey'
-  );
-
-  if (needsMountCallback || needsGetComponentKey) {
-    const pieces: string[] = [];
-    if (needsMountCallback) {
-      pieces.push('mountCallback');
-    }
-    if (needsGetComponentKey) {
-      pieces.push('getComponentKey');
-    }
-
-    const joined = pieces.join(', ');
-    ms.appendLeft(importInsertionPos, `import { ${joined} } from 'lithent';\n`);
-  }
-
-  for (const mount of mounts) {
-    const { insertPos, componentName, declarationEnd } = mount;
-    const unregisterBlock = `
-    const compKey = getComponentKey();
-    const unregister = compKey ? counterBoundary.register(compKey) : null;
-    if (unregister) {
-      mountCallback(() => () => unregister());
-    }
-`;
-    ms.appendLeft(insertPos, unregisterBlock);
-
-    if (componentName) {
-      const hotStoreVar = `__lithentHotComponent_${componentName}`;
-      const storeSnippet = `
-const ${hotStoreVar} = ${componentName};
-if (__lithentModuleHotStore) {
-  __lithentModuleHotStore["${componentName}"] = ${hotStoreVar};
-}
-`;
-      ms.appendRight(declarationEnd, storeSnippet);
-    }
-  }
-};
-
-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;
+  const hoisted: string[] = [];
+  for (const component of mounts) {
+    const name = JSON.stringify(component.componentName);
+    if (component.declaration) {
+      hoisted.push(
+        `${component.componentName} = __lithentWrapComponent(${name}, ${component.componentName});`
+      );
+    } else {
+      ms.appendLeft(component.start, `__lithentWrapComponent(${name}, `);
+      ms.appendRight(component.end, ')');
     }
   }
-
-  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;
+  return hoisted.join('\n');
 };

package/src/transform/exportSnapshot.ts

@@ -0,0 +1,77 @@
+import { getBindingIdentifiers } from '@babel/types';
+import type { File } from '@babel/types';
+import type { MountInfo } from '../utils/ast/componentCollector';
+
+// Export values must be compared before self-accepting. Importers can keep
+// stable component proxies, but need reevaluation when other exports change.
+export const createExportSnapshot = (
+  ast: File,
+  components: MountInfo[]
+): string => {
+  const bindings = new Map<string, string>();
+  let complete = true;
+  for (const node of ast.program.body) {
+    if (node.type === 'ExportAllDeclaration' && node.exportKind !== 'type')
+      complete = false;
+    if (node.type === 'ExportDefaultDeclaration') {
+      const declaration = node.declaration;
+      if (declaration.type === 'Identifier')
+        bindings.set('default', declaration.name);
+      else if (
+        (declaration.type === 'FunctionDeclaration' ||
+          declaration.type === 'ClassDeclaration') &&
+        declaration.id
+      )
+        bindings.set('default', declaration.id.name);
+      else if (
+        components.some(component => component.componentName === 'default')
+      )
+        bindings.set(
+          'default',
+          '__lithentCurrentComponents.default?.component'
+        );
+      else complete = false;
+    }
+    if (node.type !== 'ExportNamedDeclaration' || node.exportKind === 'type')
+      continue;
+    if (node.source) {
+      complete = false;
+      continue;
+    }
+    const declaration = node.declaration;
+    if (declaration?.type === 'VariableDeclaration') {
+      for (const declarator of declaration.declarations) {
+        for (const name of Object.keys(getBindingIdentifiers(declarator.id)))
+          bindings.set(name, name);
+      }
+    } else if (
+      (declaration?.type === 'FunctionDeclaration' ||
+        declaration?.type === 'ClassDeclaration') &&
+      declaration.id
+    ) {
+      bindings.set(declaration.id.name, declaration.id.name);
+    } else if (
+      declaration &&
+      declaration.type !== 'TSInterfaceDeclaration' &&
+      declaration.type !== 'TSTypeAliasDeclaration'
+    ) {
+      complete = false;
+    }
+    for (const specifier of node.specifiers) {
+      if (
+        specifier.type === 'ExportSpecifier' &&
+        specifier.exportKind !== 'type'
+      ) {
+        const name =
+          specifier.exported.type === 'Identifier'
+            ? specifier.exported.name
+            : specifier.exported.value;
+        bindings.set(name, specifier.local.name);
+      }
+    }
+  }
+  const snapshot = complete
+    ? `{${Array.from(bindings, ([name, local]) => `[${JSON.stringify(name)}]: ${local}`).join(', ')}}`
+    : 'null';
+  return `\n__lithentExportSnapshot = ${snapshot};\n`;
+};

package/src/transform/renderGuard.ts

@@ -1,59 +1,69 @@
 import MagicString from 'magic-string';
 import type { File, Node, CallExpression } from '@babel/types';
-import { VISITOR_KEYS } from '@babel/types';
-
-const collectRenderCalls = (ast: Node, calls: CallExpression[]): void => {
-  const visit = (node: Node | null | undefined) => {
-    if (!node) return;
+import { VISITOR_KEYS, isFunction } from '@babel/types';
 
+export const wrapRenderCalls = (
+  ms: MagicString,
+  ast: File,
+  _code: string,
+  importSpecifier = 'lithent'
+): boolean => {
+  const renderers = new Set<string>();
+  const namespaces = new Set<string>();
+  for (const node of ast.program.body) {
     if (
-      node.type === 'CallExpression' &&
-      node.callee.type === 'Identifier' &&
-      node.callee.name === 'render'
-    ) {
-      calls.push(node as CallExpression);
+      node.type !== 'ImportDeclaration' ||
+      node.importKind === 'type' ||
+      node.source.value !== importSpecifier
+    )
+      continue;
+    for (const specifier of node.specifiers) {
+      if (specifier.type === 'ImportNamespaceSpecifier')
+        namespaces.add(specifier.local.name);
+      if (
+        specifier.type === 'ImportSpecifier' &&
+        specifier.importKind !== 'type' &&
+        specifier.imported.type === 'Identifier' &&
+        specifier.imported.name === 'render'
+      )
+        renderers.add(specifier.local.name);
     }
-
-    const keys = VISITOR_KEYS[node.type] ?? [];
-    for (const key of keys) {
-      const value = (node as any)[key];
-      if (Array.isArray(value)) {
-        for (const child of value) {
-          if (child && typeof child.type === 'string') {
-            visit(child as Node);
-          }
-        }
-      } else if (value && typeof value.type === 'string') {
-        visit(value as Node);
+  }
+  const calls: CallExpression[] = [];
+  const visit = (node: Node): void => {
+    // A render inside a function can mount several independent applications.
+    // Guard only module-level mounts that run again when Vite evaluates it.
+    if (isFunction(node)) return;
+    if (node.type === 'CallExpression') {
+      const callee = node.callee;
+      if (
+        (callee.type === 'Identifier' && renderers.has(callee.name)) ||
+        (callee.type === 'MemberExpression' &&
+          !callee.computed &&
+          callee.object.type === 'Identifier' &&
+          namespaces.has(callee.object.name) &&
+          callee.property.type === 'Identifier' &&
+          callee.property.name === 'render')
+      ) {
+        calls.push(node);
+        return;
       }
     }
+    for (const key of VISITOR_KEYS[node.type] ?? []) {
+      const value = (node as any)[key];
+      if (Array.isArray(value))
+        value.forEach(child => {
+          if (child?.type) visit(child);
+        });
+      else if (value?.type) visit(value);
+    }
   };
-
   visit(ast);
-};
-
-export const wrapRenderCalls = (
-  ms: MagicString,
-  ast: File,
-  code: string
-): boolean => {
-  const calls: CallExpression[] = [];
-  collectRenderCalls(ast, calls);
-
-  if (!calls.length) return false;
-
-  const sorted = calls
-    .map(node => ({
-      start: node.start ?? 0,
-      end: node.end ?? 0,
-    }))
-    .filter(({ start, end }) => start >= 0 && end > start)
-    .sort((a, b) => b.start - a.start);
-
-  for (const { start, end } of sorted) {
-    const original = code.slice(start, end);
-    ms.overwrite(start, end, `__lithentRenderOnce(() => ${original})`);
-  }
-
-  return true;
+  calls
+    .sort((a, b) => a.start! - b.start!)
+    .forEach((node, id) => {
+      ms.appendLeft(node.start!, `__lithentRenderOnce(${id}, () => `);
+      ms.appendRight(node.end!, ')');
+    });
+  return Boolean(calls.length);
 };