Add import depending on usage

Author: pomber

packages/mdx/src/components.tsx

@@ -14,6 +14,20 @@ import {
 import { Preview } from "./mdx-client/preview"
 import { InlineCode } from "./mdx-client/inline-code"
 
+export {
+  Code,
+  Section,
+  SectionLink,
+  SectionCode,
+  Spotlight,
+  Scrollycoding,
+  Preview,
+  annotationsMap as annotations,
+  Annotation,
+  Slideshow,
+  InlineCode,
+}
+
 export const CH = {
   Code,
   Section,

packages/mdx/src/mdx-plugin/plugin.ts

@@ -54,7 +54,7 @@ export function remarkCodeHike(
       addConfig(tree, config)
 
       if (config.autoImport && !hasCodeHikeImport) {
-        addImportNode(tree)
+        addSmartImport(tree, usage)
       }
     }
   }
@@ -107,6 +107,101 @@ function addConfig(
   })
 }
 
+function addSmartImport(tree: SuperNode, usage: string[]) {
+  const specifiers = [
+    "annotations",
+    ...usage.map(name => name.slice("CH.".length)),
+  ]
+
+  tree.children.unshift({
+    type: "mdxjsEsm",
+    value: `export const CH = { ${specifiers.join(", ")} }`,
+    data: {
+      estree: {
+        type: "Program",
+        body: [
+          {
+            type: "ExportNamedDeclaration",
+            declaration: {
+              type: "VariableDeclaration",
+              declarations: [
+                {
+                  type: "VariableDeclarator",
+                  id: {
+                    type: "Identifier",
+                    name: "CH",
+                  },
+                  init: {
+                    type: "ObjectExpression",
+                    properties: specifiers.map(
+                      specifier => ({
+                        type: "Property",
+                        method: false,
+                        shorthand: true,
+                        computed: false,
+                        key: {
+                          type: "Identifier",
+                          name: specifier,
+                        },
+                        kind: "init",
+                        value: {
+                          type: "Identifier",
+                          name: specifier,
+                        },
+                      })
+                    ),
+                  },
+                },
+              ],
+              kind: "const",
+            },
+            specifiers: [],
+            source: null,
+          },
+        ],
+        sourceType: "module",
+        comments: [],
+      },
+    },
+  })
+
+  tree.children.unshift({
+    type: "mdxjsEsm",
+    value: `import { ${specifiers.join(
+      ", "
+    )} } from "@code-hike/mdx/dist/components.cjs.js"`,
+    data: {
+      estree: {
+        type: "Program",
+        body: [
+          {
+            type: "ImportDeclaration",
+
+            specifiers: specifiers.map(specifier => ({
+              type: "ImportSpecifier",
+              imported: {
+                type: "Identifier",
+                name: specifier,
+              },
+              local: {
+                type: "Identifier",
+                name: specifier,
+              },
+            })),
+            source: {
+              type: "Literal",
+              value:
+                "@code-hike/mdx/dist/components.cjs.js",
+              raw: '"@code-hike/mdx/dist/components.cjs.js"',
+            },
+          },
+        ],
+        sourceType: "module",
+      },
+    },
+  })
+}
+
 function addImportNode(tree: SuperNode) {
   tree.children.unshift({
     type: "mdxjsEsm",