[WIP] feat: improve hmr performance

examples/basic-project/tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": ".",
     "outDir": "build",
     "module": "esnext",
-    "target": "es6",
+    "target": "es2017",
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,

packages/ice/package.json

@@ -30,9 +30,10 @@
     "@ice/runtime": "^1.0.0",
     "@ice/types": "^1.0.0",
     "@ice/webpack-config": "^1.0.0",
+    "acorn": "^8.7.1",
     "address": "^1.1.2",
-    "build-scripts": "^2.0.0-21",
     "body-parser": "^1.20.0",
+    "build-scripts": "^2.0.0-21",
     "chalk": "^4.0.0",
     "commander": "^9.0.0",
     "consola": "^2.15.3",
@@ -47,6 +48,7 @@
     "find-up": "^5.0.0",
     "fs-extra": "^10.0.0",
     "less": "^4.1.2",
+    "magic-string": "^0.26.1",
     "micromatch": "^4.0.5",
     "mrmime": "^1.0.0",
     "multer": "^1.4.4",
@@ -63,6 +65,7 @@
   "devDependencies": {
     "@types/cross-spawn": "^6.0.2",
     "@types/ejs": "^3.1.0",
+    "@types/estree": "^0.0.51",
     "@types/less": "^3.0.3",
     "@types/micromatch": "^4.0.2",
     "@types/multer": "^1.4.7",

packages/ice/src/utils/topLevelAwait.ts

@@ -0,0 +1,73 @@
+import consola from 'consola';
+import MagicString from 'magic-string';
+import { parse as parseAST } from 'acorn';
+import type { Node } from 'estree';
+import { init, parse } from '@ice/bundles/compiled/es-module-lexer/index.js';
+import type { ImportSpecifier } from '@ice/bundles/compiled/es-module-lexer';
+
+type ImportName = { importedName: string; localName: string };
+type ValidateId = (id: string) => boolean;
+async function topLevelAwait(code: string, validateId?: ValidateId): Promise<string> {
+  await init;
+  let imports: readonly ImportSpecifier[] = [];
+
+  try {
+    imports = parse(code)[0];
+  } catch (e) {
+    consola.error('[parse error]', e);
+  }
+
+  if (!imports.length) return code;
+
+  let s: MagicString | undefined;
+  const str = () => s || (s = new MagicString(code));
+  imports.forEach((importSpecifier) => {
+    // check relative import
+    let awaitImport = '';
+    if (validateId && !validateId(importSpecifier.n)) return;
+    const importStr = code.substring(importSpecifier.ss, importSpecifier.se);
+    const node = (parseAST(importStr, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    }) as any).body[0] as Node;
+    if (node.type === 'ImportDeclaration') {
+      if (node.specifiers.length === 0) {
+        awaitImport = `await import('${node.source.value}')`;
+      }
+
+      const importNames: ImportName[] = [];
+      for (const specifier of node.specifiers) {
+        if (specifier.type === 'ImportNamespaceSpecifier') {
+          // import * as xx from 'xx';
+          awaitImport = `const ${specifier.local.name} = await import('${node.source.value}')`;
+        } else if (specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier') {
+          importNames.push({
+            importedName: specifier.imported.name,
+            localName: specifier.local.name,
+          });
+        } else if (specifier.type === 'ImportDefaultSpecifier') {
+          importNames.push({
+            importedName: 'default',
+            localName: specifier.local.name,
+          });
+        }
+      }
+      const awaitIdentifiers = [];
+      importNames.forEach(({ importedName, localName }) => {
+        if (importedName === localName) {
+          awaitIdentifiers.push(importedName);
+        } else {
+          awaitIdentifiers.push(`${importedName} as ${localName}`);
+        }
+      });
+      if (awaitIdentifiers.length > 0) {
+        awaitImport = `const { ${awaitIdentifiers.join(',')} } = await import('${node.source.value}')`;
+      }
+      str().overwrite(importSpecifier.ss, importSpecifier.se, awaitImport);
+    }
+  });
+
+  return str().toString();
+}
+
+export default topLevelAwait;

packages/ice/tests/topLevelAwait.test.ts

@@ -0,0 +1,49 @@
+import { expect, it, describe } from 'vitest';
+import topLevelAwait from '../src/utils/topLevelAwait';
+
+describe('top level await transform', () => {
+  it('import a from \'a\'', async () => {
+    const code = await topLevelAwait('import a from \'a\'');
+    expect(code).toBe(`const { default as a } = await import('a')`);
+  });
+
+  it('import \'a\'', async () => {
+    const code = await topLevelAwait('import \'a\'');
+    expect(code).toBe(`await import('a')`);
+  });
+
+  it('import { a } from \'a\'', async () => {
+    const code = await topLevelAwait('import { a } from \'a\'');
+    expect(code).toBe(`const { a } = await import('a')`);
+  });
+
+  it('import { a as b } from \'a\'', async () => {
+    const code = await topLevelAwait('import { a as b } from \'a\'');
+    expect(code).toBe(`const { a as b } = await import('a')`);
+  });
+
+  it('import { a, b } from \'a\'', async () => {
+    const code = await topLevelAwait('import { a, b } from \'a\'');
+    expect(code).toBe(`const { a,b } = await import('a')`);
+  });
+
+  it('import { a as c, b } from \'a\'', async () => {
+    const code = await topLevelAwait('import { a as c, b } from \'a\'');
+    expect(code).toBe(`const { a as c,b } = await import('a')`);
+  });
+
+  it('import * as a from \'a\'', async () => {
+    const code = await topLevelAwait('import * as a from \'a\'');
+    expect(code).toBe(`const a = await import('a')`);
+  });
+
+  it('import a, { b } from \'a\'', async () => {
+    const code = await topLevelAwait('import a, { b } from \'a\'');
+    expect(code).toBe(`const { default as a,b } = await import('a')`);
+  });
+
+  it('validate id', async () => {
+    const code = await topLevelAwait('import a, { b } from \'a\'', (id) => false);
+    expect(code).toBe(`import a, { b } from \'a\'`);
+  });
+});

packages/webpack-config/src/unPlugins/compilation.ts

@@ -104,6 +104,7 @@ function getSwcTransformOptions({
         exportDefaultFrom: true,
         exportNamespaceFrom: true,
         decorators: true,
+        topLevelAwait: true,
       },
     },
   }, commonOptions);