refactor: reimplement containerSyntax

Author: SoonIter

packages/core/src/node/mdx/remarkPlugins/__snapshots__/containerSyntax.test.ts.snap

@@ -2,7 +2,7 @@ import path from 'node:path';
 import type { Root } from 'mdast';
 import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
 import type { Plugin } from 'unified';
-import { getASTNodeImport } from '../../utils';
+import { getDefaultImportAstNode } from '../../utils';
 
 /**
  * A remark plugin to import all builtin components.
@@ -16,7 +16,7 @@ export const remarkBuiltin: Plugin<[{ globalComponents: string[] }], Root> = ({
     const demos: MdxjsEsm[] = globalComponents.map(componentPath => {
       const filename = path.parse(componentPath).name;
       const componentName = filename[0].toUpperCase() + filename.slice(1);
-      return getASTNodeImport(componentName, componentPath);
+      return getDefaultImportAstNode(componentName, componentPath);
     });
 
     tree.children.unshift(...demos);

packages/core/src/node/mdx/remarkPlugins/builtin.ts

@@ -23,6 +23,7 @@ import type {
 } from 'mdast';
 import type { ContainerDirective } from 'mdast-util-directive';
 import type { Plugin } from 'unified';
+import { getNamedImportAstNode } from '../../utils';
 
 export const DIRECTIVE_TYPES = [
   'tip',
@@ -39,6 +40,8 @@ export const REGEX_GH_BEGIN = /^\s*\s*\[!(\w+)\]\s*(.*)?/;
 export const TITLE_REGEX_IN_MD = /{\s*title=["']?(.+)}\s*/;
 export const TITLE_REGEX_IN_MDX = /\s*title=["']?(.+)\s*/;
 
+const CALLOUT_COMPONENT = '$$$Callout$$$';
+
 export type DirectiveType = (typeof DIRECTIVE_TYPES)[number];
 
 const trimTailingQuote = (str: string) => str.replace(/['"]$/g, '');
@@ -79,13 +82,13 @@ const createContainer = (
 ): ContainerDirective => {
   return {
     type: 'containerDirective',
-    name: 'Callout',
+    name: CALLOUT_COMPONENT,
     attributes: {
       type: type,
       title: title || getTypeName(type),
     },
     data: {
-      hName: 'Callout',
+      hName: CALLOUT_COMPONENT,
       hProperties: {
         type: type,
         title: title || getTypeName(type),
@@ -355,5 +358,10 @@ function transformer(tree: Parent) {
 }
 
 export const remarkContainerSyntax: Plugin<[], Root> = () => {
-  return transformer;
+  return tree => {
+    transformer(tree);
+    tree.children.unshift(
+      getNamedImportAstNode('Callout', CALLOUT_COMPONENT, '@theme'),
+    );
+  };
 };

packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts

@@ -4,7 +4,7 @@ import type { Root } from 'mdast';
 import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
-import { getASTNodeImport } from '../../utils';
+import { getDefaultImportAstNode } from '../../utils';
 
 const normalizeImageUrl = (imageUrl: string): string => {
   if (isExternalUrl(imageUrl) || imageUrl.startsWith('/')) {
@@ -69,7 +69,7 @@ export const remarkImage: Plugin<[], Root> = () => (tree, _file) => {
       ].filter(Boolean),
     });
 
-    images.push(getASTNodeImport(tempVariableName, imagePath));
+    images.push(getDefaultImportAstNode(tempVariableName, imagePath));
   });
 
   visit(tree, node => {
@@ -98,7 +98,7 @@ export const remarkImage: Plugin<[], Root> = () => (tree, _file) => {
 
     Object.assign(srcAttr, getMdxSrcAttribute(tempVariableName));
 
-    images.push(getASTNodeImport(tempVariableName, imagePath));
+    images.push(getDefaultImportAstNode(tempVariableName, imagePath));
   });
 
   tree.children.unshift(...images);

packages/core/src/node/mdx/remarkPlugins/image.ts

@@ -0,0 +1,64 @@
+import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
+
+// Construct import statement for AST
+// Such as: import image1 from './test.png'
+export const getDefaultImportAstNode = (name: string, from: string) =>
+  ({
+    type: 'mdxjsEsm',
+    value: `import ${name} from ${JSON.stringify(from)}`,
+    data: {
+      estree: {
+        type: 'Program',
+        sourceType: 'module',
+        body: [
+          {
+            type: 'ImportDeclaration',
+            specifiers: [
+              {
+                type: 'ImportDefaultSpecifier',
+                local: { type: 'Identifier', name },
+              },
+            ],
+            source: {
+              type: 'Literal',
+              value: from,
+              raw: `${JSON.stringify(from)}`,
+            },
+          },
+        ],
+      },
+    },
+  }) as MdxjsEsm;
+
+export const getNamedImportAstNode = (
+  name: string,
+  alias: string,
+  from: string,
+) =>
+  ({
+    type: 'mdxjsEsm',
+    value: `import { ${name} as ${alias} } from ${JSON.stringify(from)}`,
+    data: {
+      estree: {
+        type: 'Program',
+        sourceType: 'module',
+        body: [
+          {
+            type: 'ImportDeclaration',
+            specifiers: [
+              {
+                type: 'ImportSpecifier',
+                imported: { type: 'Identifier', name },
+                local: { type: 'Identifier', name: alias },
+              },
+            ],
+            source: {
+              type: 'Literal',
+              value: from,
+              raw: `${JSON.stringify(from)}`,
+            },
+          },
+        ],
+      },
+    },
+  }) as MdxjsEsm;

packages/core/src/node/utils/getASTNodeImport.ts

@@ -4,6 +4,6 @@ export * from './detectReactVersion';
 export * from './escapeHeadingIds';
 export * from './flattenMdxContent';
 export * from './fs';
-export * from './getASTNodeImport';
+export * from './getImportAstNode';
 export * from './getPageKey';
 export * from './normalizePath';

packages/core/src/node/utils/getImportAstNode.ts

@@ -1,4 +1,3 @@
-import { Callout } from '@theme';
 import { A } from './a';
 import { Code } from './codeblock/code';
 import { PreWithCodeButtonGroup } from './codeblock/pre';
@@ -32,8 +31,5 @@ export function getCustomMDXComponent() {
     code: Code,
     pre: PreWithCodeButtonGroup,
     img: Img,
-
-    // custom components can be added here
-    Callout,
   };
 }