feat: add support to use import assertions

.changeset/olive-seas-promise.md

@@ -0,0 +1,6 @@
+---
+'babel-plugin-extend-docs': patch
+'rocket-preset-extend-lion-docs': patch
+---
+
+Support usage of import assertions like `import style from 'my-pkg/style' assert { type: 'css' };`

packages-node/babel-plugin-extend-docs/src/handleImports.js

@@ -9,6 +9,7 @@ function getImportAs(specifier, newImportName) {
 
 function renameAndStoreImports({ path, state, opts, types: t }) {
   for (const specifier of path.node.specifiers) {
+    const { assertions } = path.node;
     let managed = false;
 
     if (t.isIdentifier(specifier.imported) && specifier.type === 'ImportSpecifier') {
@@ -26,6 +27,7 @@ function renameAndStoreImports({ path, state, opts, types: t }) {
               state.importedStorage.push({
                 action: 'change',
                 specifier,
+                assertions,
                 path: to,
               });
               managed = true;
@@ -39,6 +41,7 @@ function renameAndStoreImports({ path, state, opts, types: t }) {
       state.importedStorage.push({
         action: 'keep',
         specifier,
+        assertions,
         path: path.node.source.value,
       });
     }
@@ -50,15 +53,18 @@ function generateImportStatements({ state, types: t }) {
   const statements = {};
   for (const imp of state.importedStorage) {
     if (!statements[imp.path]) {
-      statements[imp.path] = [];
+      statements[imp.path] = { specifier: [] };
     }
-    statements[imp.path].push(imp.specifier);
+    statements[imp.path].specifier.push(imp.specifier);
+    statements[imp.path].assertions = imp.assertions;
   }
   const res = [];
   for (const path of Object.keys(statements)) {
-    const importSpecifiers = statements[path];
+    const { specifier, assertions } = statements[path];
     const source = t.stringLiteral(path);
-    res.push(t.importDeclaration(importSpecifiers, source));
+    const dec = t.importDeclaration(specifier, source);
+    dec.assertions = assertions;
+    res.push(dec);
   }
   return res;
 }

packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js

@@ -259,6 +259,12 @@ describe('babel-plugin-extend-docs', () => {
     expect(executeBabel(code, testConfig)).to.equal(output);
   });
 
+  it('supports import assertions', () => {
+    const code = `import style from '@lion/input/style' assert { type: 'css' };`;
+    const output = `import style from "@lion/input/style" assert { type: 'css' };`;
+    expect(executeBabel(code, testConfig)).to.equal(output);
+  });
+
   // nice to have
   it.skip("doesn't care about namespace imports", () => {
     const code = `import * as all from '@lion/input';`;

packages-node/babel-plugin-extend-docs/test-node/helpers.js

@@ -4,7 +4,7 @@ const babelPluginExtendDocs = require('../src/babelPluginExtendDocs.js');
 
 function executeBabel(input, options) {
   const result = babel.transform(input, {
-    plugins: [[babelPluginExtendDocs, options]],
+    plugins: [[babelPluginExtendDocs, options], '@babel/plugin-syntax-import-assertions'],
   });
   return result.code;
 }

packages-node/rocket-preset-extend-lion-docs/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.10.1",
+    "@babel/plugin-syntax-import-assertions": "^7.14.5",
     "babel-plugin-extend-docs": "0.5.0",
     "es-module-lexer": "^0.3.6",
     "plugins-manager": "^0.2.1",

packages-node/rocket-preset-extend-lion-docs/src/remarkExtendLionDocsTransformJs.js

@@ -62,7 +62,10 @@ export function remarkExtendLionDocsTransformJs({ extendDocsConfig }) {
       node.value
     ) {
       const processed = transformSync(node.value, {
-        plugins: [['babel-plugin-extend-docs', extendDocsConfig]],
+        plugins: [
+          ['babel-plugin-extend-docs', extendDocsConfig],
+          '@babel/plugin-syntax-import-assertions',
+        ],
       });
       if (processed && processed.code) {
         node.value = processed.code;

packages-node/rocket-preset-extend-lion-docs/test-node/remarkExtendLionDocsTransformJs.test.js

@@ -140,4 +140,24 @@ describe('remarkExtendLionDocsTransformJs', () => {
 
     expect(result.html).to.include('ing-accordion');
   });
+
+  it('keeps import assertions in tact', async () => {
+    const result = await execute(
+      [
+        '',
+        '```js script',
+        "import style from '@lion/core/style' assert { type: 'css' };",
+        "import { LionInput } from '@lion/core';",
+        '```',
+        '',
+      ].join('\n'),
+    );
+
+    expect(result.jsCode).to.equal(
+      [
+        'import style from "@lion/core/style" assert { type: \'css\' };',
+        'import { LionInput } from "@lion/core";',
+      ].join('\n'),
+    );
+  });
 });

yarn.lock

@@ -248,6 +248,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-remap-async-to-generator@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz#376a760d9f7b4b2077a9dd05aa9c3927cadb2209"
@@ -502,6 +507,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-syntax-import-assertions@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.14.5.tgz#86dc6102dddf05781b2c36350b695fcb89d7cce4"
+  integrity sha512-bCaGuphEinZeNtIUohltvmShQbiABsKVpg/tivRLJpAZUkHIJTtzTBjV/kOik1QZhS+G3QXVoajUlpOMOXO7vA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.2.0":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"