Merge pull request #15 from ts-graphviz/add-remark-tsgraphviz-plugin

Add ts-graphviz plugin to the remark plugins

Author: kamiazya

docs/ts-graphviz/02-core-features/index.mdx renamed to docs/ts-graphviz/02-core-features/index.md

@@ -1,7 +1,6 @@
 ---
 description: Explore core APIs for graph creation and manipulation.
 ---
-import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor';
 
 
 # Core Features
@@ -12,15 +11,14 @@ import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor';
 
 **Playground:**
 
- <TSGraphvizLiveEditor
-  script={`import { digraph, attribute as _ } from 'ts-graphviz';
+```ts ts-graphviz:read-only
+import { digraph, attribute as _ } from 'ts-graphviz';
 
 const G = digraph('G', (g) => {
-    g.node('A', { [_.color]: 'red' });
-    g.edge(['A', 'B'], { [_.label]: 'A to B' });
-});`}
-  readOnly
-/>
+  g.node('A', { [_.color]: 'red' });
+  g.edge(['A', 'B'], { [_.label]: 'A to B' });
+});
+```
 
 :::tip
 Hover over `digraph` or `g.node` or `[_.color]` for type hints.

docusaurus.config.ts

@@ -2,6 +2,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 import npm2yarn from '@docusaurus/remark-plugin-npm2yarn';
 import type { Config } from '@docusaurus/types';
 import { themes as prismThemes } from 'prism-react-renderer';
+import tsgraphviz from './plugins/remark-plugin-tsgraphviz';
 
 const config: Config = {
   title: 'ts-graphviz',
@@ -31,6 +32,7 @@ const config: Config = {
             'https://pr.new/github.com//ts-graphviz/ts-graphviz.github.io/edit/main/',
           remarkPlugins: [
             [npm2yarn, { sync: true, converters: ['yarn', 'pnpm'] }],
+            [tsgraphviz, {}],
           ],
         },
         blog: {
@@ -39,11 +41,13 @@ const config: Config = {
             'https://pr.new/github.com//ts-graphviz/ts-graphviz.github.io/edit/main/',
           remarkPlugins: [
             [npm2yarn, { sync: true, converters: ['yarn', 'pnpm'] }],
+            [tsgraphviz, {}],
           ],
         },
         pages: {
           remarkPlugins: [
             [npm2yarn, { sync: true, converters: ['yarn', 'pnpm'] }],
+            [tsgraphviz, {}],
           ],
         },
         theme: {

i18n/ja/docusaurus-plugin-content-docs/current/ts-graphviz/02-core-features/index.mdx renamed to i18n/ja/docusaurus-plugin-content-docs/current/ts-graphviz/02-core-features/index.md

@@ -1,25 +1,21 @@
 ---
 description: グラフ作成と操作のためのts-graphvizの主要なAPIを紹介
 ---
-import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor';
 
 # コア機能
 
 ## TypeScript フレンドリーな API
 
 `ts-graphviz` は TypeScript とシームレスに統合された API を提供し、強力な型定義と完全な IntelliSense サポートを備えています。これにより、開発中のエラーをより簡単に発見でき、開発者の体験が向上します。
 
-**プレイグラウンド:**
-
-<TSGraphvizLiveEditor
-  script={`import { digraph, attribute as _ } from 'ts-graphviz';
+```ts ts-graphviz:read-only
+import { digraph, attribute as _ } from 'ts-graphviz';
 
 const G = digraph('G', (g) => {
-    g.node('A', { [_.color]: 'red' });
-    g.edge(['A', 'B'], { [_.label]: 'A to B' });
-});`}
-  readOnly
-/>
+  g.node('A', { [_.color]: 'red' });
+  g.edge(['A', 'B'], { [_.label]: 'A to B' });
+});
+```
 
 :::tip
 `digraph` や `g.node`、`[_.color]` にカーソルを合わせると型のヒントが表示されます。

package.json

@@ -47,10 +47,15 @@
     "@docusaurus/module-type-aliases": "3.6.0",
     "@docusaurus/tsconfig": "3.6.0",
     "@docusaurus/types": "3.6.0",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
+    "@types/unist": "^3.0.3",
+    "mdast-util-mdx-jsx": "^3.1.3",
     "raw-loader": "^4.0.2",
     "typescript": "~5.6.3",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
     "utility-types": "^3.11.0"
   },
   "browserslist": {

plugins/remark-plugin-tsgraphviz.ts

@@ -0,0 +1,118 @@
+import type { Code, Literal } from 'mdast';
+import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
+import type { Plugin, Transformer } from 'unified';
+import type { Node, Parent } from 'unist';
+
+// biome-ignore lint/complexity/noBannedTypes: Preliminary implementation for future plugin extensibility.
+type PluginOptions = {};
+
+type CodeBlockOptions = {
+  readOnly: boolean;
+};
+
+const transformNode = (code: Code): MdxJsxFlowElement[] => {
+  const script = code.value;
+  const options = getTSGraphvizOptions(code);
+  return [
+    {
+      type: 'mdxJsxFlowElement',
+      name: 'TSGraphvizLiveEditor',
+      attributes: [
+        {
+          type: 'mdxJsxAttribute',
+          name: 'script',
+          value: script,
+        },
+        {
+          type: 'mdxJsxAttribute',
+          name: 'readOnly',
+          value: options.readOnly ? 'true' : 'false',
+        },
+      ],
+      children: [],
+    },
+  ];
+};
+
+const isMdxEsmLiteral = (node: Node): node is Literal =>
+  node.type === 'mdxjsEsm';
+
+const isTSGraphvizLiveEditorImport = (node: Node): boolean =>
+  isMdxEsmLiteral(node) &&
+  node.value.includes('@site/src/components/TSGraphvizLiveEditor');
+
+const isParent = (node: Node): node is Parent =>
+  Array.isArray((node as Parent).children);
+const isTSGraphvizScript = (node: Node): node is Code =>
+  node.type === 'code' && (node as Code).meta?.startsWith('ts-graphviz');
+
+const getTSGraphvizOptions = (code: Code): CodeBlockOptions => {
+  const options = code.meta ? code.meta.split(':').slice(1) : [];
+  return {
+    readOnly: options.includes('read-only'),
+  };
+};
+
+function createImportNode() {
+  return {
+    type: 'mdxjsEsm',
+    value:
+      "import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor'",
+    data: {
+      estree: {
+        type: 'Program',
+        body: [
+          {
+            type: 'ImportDeclaration',
+            specifiers: [
+              {
+                type: 'ImportDefaultSpecifier',
+                local: { type: 'Identifier', name: 'TSGraphvizLiveEditor' },
+              },
+            ],
+            source: {
+              type: 'Literal',
+              value: '@site/src/components/TSGraphvizLiveEditor',
+              raw: "'@site/src/components/TSGraphvizLiveEditor'",
+            },
+          },
+        ],
+        sourceType: 'module',
+      },
+    },
+  };
+}
+
+const plugin: Plugin<[PluginOptions?]> = (options = {}): Transformer => {
+  return async (root) => {
+    const { visit } = await import('unist-util-visit');
+
+    let transformed = false;
+    let alreadyImported = false;
+
+    visit(root, (node: Node) => {
+      if (isTSGraphvizLiveEditorImport(node)) {
+        alreadyImported = true;
+      }
+
+      if (isParent(node)) {
+        const newChildren: Node[] = [];
+        for (const child of node.children) {
+          if (isTSGraphvizScript(child)) {
+            newChildren.push(...transformNode(child));
+            transformed = true;
+          } else {
+            newChildren.push(child);
+          }
+        }
+        node.children = newChildren;
+      }
+    });
+
+    if (transformed && !alreadyImported) {
+      (root as Parent).children.unshift(createImportNode());
+    }
+  };
+};
+
+export default plugin;