Add support for import assertion resolution

Author: Westbrook

package-lock.json

@@ -29,33 +29,33 @@
   "license": "BSD-3-Clause",
   "author": "The Polymer Project Authors",
   "devDependencies": {
-    "@babel/types": "^7.4.4",
-    "@types/babel__traverse": "^7.0.6",
+    "@babel/types": "^7.23.6",
+    "@types/babel__traverse": "^7.20.5",
     "@types/get-stream": "^3.0.2",
-    "@types/koa": "^2.0.48",
-    "@types/koa-route": "^3.2.4",
-    "@types/node": "^12.0.2",
-    "@types/path-is-inside": "^1.0.0",
-    "@types/resolve": "0.0.8",
+    "@types/koa": "^2.13.12",
+    "@types/koa-route": "^3.2.8",
+    "@types/node": "^20.10.6",
+    "@types/path-is-inside": "^1.0.3",
+    "@types/resolve": "^1.20.6",
     "@types/supertest": "^2.0.7",
     "@types/tape": "^4.2.33",
     "clang-format": "^1.2.4",
-    "depcheck": "^0.8.0",
-    "koa": "^2.7.0",
+    "depcheck": "^1.4.7",
+    "koa": "^2.15.0",
     "koa-route": "^3.2.0",
     "rimraf": "^2.6.3",
     "source-map-support": "^0.5.12",
     "supertest": "^4.0.2",
     "tap-diff": "^0.1.1",
     "tape": "^4.10.1",
     "tslint": "^5.16.0",
-    "typescript": "^3.4.5"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@types/babel__generator": "^7.6.1",
-    "@babel/generator": "^7.4.4",
-    "@babel/parser": "^7.4.5",
-    "@babel/traverse": "^7.4.5",
+    "@types/babel__generator": "^7.6.8",
+    "@babel/generator": "^7.23.6",
+    "@babel/parser": "^7.23.6",
+    "@babel/traverse": "^7.23.7",
     "@types/parse5": "^5.0.0",
     "get-stream": "^5.1.0",
     "parse5": "^5.1.0",

package.json

@@ -66,12 +66,14 @@ const defaultJSParser = (js: string): BabelNode =>
         'exportDefaultFrom',
         'exportNamespaceFrom',
         'importMeta',
+        ['importAttributes', { deprecatedAssertSyntax: true }],
       ],
     }) as BabelNode;
 
 const defaultJSSerializer = (ast: BabelNode): string =>
     babelSerialize(ast, {
       concise: false,
+      importAttributesKeyword: 'with',
       jsescOption: {
         quotes: 'single',
       },
@@ -100,7 +102,7 @@ export const moduleSpecifierTransform =
           return;
         }
 
-        const body = await getBodyAsString(ctx.body);
+        const body = await getBodyAsString(ctx.body as string | Stream | Buffer);
         // When there's no body to return, there's nothing to transform.
         if (!body) {
           return;

src/koa-module-specifier-transform.ts

@@ -26,13 +26,8 @@ export const resolveNodeSpecifier =
         const dependencyPath = nodeResolve.sync(specifier, {
           basedir: dirname(modulePath),
           extensions: ['.js', '.json', '.node'],
-          packageFilter: (packageJson: {
-            main?: string,
-            module?: string,
-            'jsnext:main'?: string,
-          }) => Object.assign(packageJson, {
-            main: packageJson.module || packageJson['jsnext:main'] ||
-                packageJson.main
+          packageFilter: (pkg) => Object.assign(pkg, {
+            main: (pkg.module || pkg['jsnext:main'] || pkg.main) as string
           })
         });
         const resolvedURL = relativePathToURL(modulePath, dependencyPath);

src/support/resolve-node-specifier.ts

@@ -136,14 +136,14 @@ test('moduleSpecifierTransform will convert dynamic imports', async (t) => {
             // retain parenthesis around single parameter anonymous functions,
             // so `(x) => ...` is unavoidably transformed to `x => ...`
             squeeze(`
-              import('./node_modules/x/index.js').then(x => x.doStuff());
+              import('./node_modules/x/index.js').then((x) => x.doStuff());
             `),
             'should transform dynamic import in external module');
         t.equal(
             squeeze((await request(server).get('/my-page.html')).text),
             squeeze(`
               <script type="module">
-              import('./node_modules/x/index.js').then(x => x.doStuff());
+              import('./node_modules/x/index.js').then((x) => x.doStuff());
               </script>
             `),
             'should transform dynamic import in inline module script');
@@ -227,8 +227,8 @@ test('moduleSpecifierTransform middleware logs errors', async (t) => {
         t.deepEqual(
             logger.errors.map((args: unknown[]) => args.join(' ')),
             [
-              'Unable to transform module specifiers in "/my-module.js" due to SyntaxError: Unexpected token, expected ";" (2:17)',
-              'Unable to transform module specifiers in "/my-page.html" due to SyntaxError: Unexpected token, expected ";" (2:19)',
+              'Unable to transform module specifiers in "/my-module.js" due to SyntaxError: Missing semicolon. (2:16)',
+              'Unable to transform module specifiers in "/my-page.html" due to SyntaxError: Missing semicolon. (2:18)',
             ],
             'should log every error thrown');
       });

src/test/koa-module-specifier-transform.test.ts

@@ -140,3 +140,24 @@ test('nodeResolve middleware ignores unresolvable specifiers', async (t) => {
             'should leave unresolvable specifier in inline scripts alone');
       });
 });
+
+test('nodeResolve middleware resolves imports with attributes', async (t) => {
+  t.plan(1);
+  const logger = testLogger();
+  createAndServe(
+      {
+        middleware:
+            [nodeResolve({root: fixturesPath, logger, logLevel: 'debug'})],
+        routes: {
+          '/my-module.js': `import styles from 'x/styles.css' with { type: 'css' };`,
+        },
+      },
+      async (server) => {
+        t.equal(
+            squeeze((await request(server).get('/my-module.js')).text),
+            squeeze(`
+              import styles from './node_modules/x/styles.css' with { type: 'css' };
+            `),
+            'should transform specifiers in CSS module script');
+      });
+});

src/test/koa-node-resolve.test.ts

@@ -17,6 +17,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true
   }
 }