refactoring

Author: stereobooster

README.md

@@ -47,7 +47,12 @@ The logo is an illustration from [Oliver Byrne's Elements of Euclid: The First S
 
 ## TODO
 
-- [ ] try to implement external file strategy (with vfile)
-- [ ] reuse [svgStrategy](packages/rehype-d2/src/svgStrategy.ts) in all plugins
-- [ ] add `processMeta` to all plugins, so it would be possible to configure `class` and `strategy`
-- [ ] maybe rename strategies
+- rehype-code-hook-svg maybe
+  - [ ] try to implement external file strategy (with vfile)
+    - `basePath: "src/.generated"`?
+    - https://docs.astro.build/en/guides/images/#images-in-markdown-files
+    - `loading="lazy" decoding="async"`
+    - [`~/.generated/*`](https://github.com/withastro/astro/issues/6490)
+  - [ ] reuse [svgStrategy](packages/rehype-d2/src/svgStrategy.ts) in all plugins
+  - [ ] add `processMeta` to all plugins, so it would be possible to configure `class` and `strategy`
+  - [ ] maybe rename strategies

packages/demo/src/content/docs/examples/vizdom-test.md

@@ -7,55 +7,21 @@ draft: true
 
 ### works with dark mode
 
-```vizdom dataGraph=dagre
+```vizdom
 digraph TD {
-    cluster=true
-    node [shape=box]
-    subgraph Watcher {
-        label="watch"
-        Watch [label="FS Notifier"]
-    }
-    Watch -> TailW [label="*.rs & input.css"]
-    Watch -> Sass [label="*.sass & *.scss"]
-    Watch -> Append [label="*.css"]
-    Watch -> WASM [label="*.rs"]
-    Watch -> BIN [label="*.rs"]
-    Watch -> Mirror [label="assets/**"]
-    subgraph style {
-        label=style
-        TailW [label="Tailwind CSS"]
-        Sass
-        CSSProc [label="CSS Processor\nLightning CSS"]
-        Append [label="append"]
-    }
-    TailW -> Append
-    Sass -> Append
-    Append -> CSSProc
-    subgraph rust {
-        label=rust
-        WASM [label="Client WASM"]
-        BIN [label="Server BIN"]
-    }
-    subgraph asset {
-        label=asset
-        Mirror
-    }
-    subgraph update {
-        label=update
-        WOC [label="target/site/\nWrite-on-change FS"]
-        Live [label="Live Reload"]
-        Server
-    }
-    Mirror -> WOC [label="site/**"]
-    WASM -> WOC [label="site/pkg/app.wasm"]
-    BIN -> WOC [label="server/app"]
-    CSSProc -> WOC [label="site/pkg/app.css"]
-    Live -> Server [label="Port scan", style=dashed]
-    WOC -> Server [label="target/server/app\nsite/**"]
-    WOC -> Live [label="site/pkg/app.css,\nclient & server change"]
-    Live -> Browser [label="Reload all or\nupdate app.css"]
-    Browser;
-    Server -> Browser [style=dashed, arrowhead=none]
+  node [shape=box]
+  rankdir="LR"
+  a -> b -> c -> d -> e -> f -> g
+}
+```
+
+### `strategy=img`
+
+```vizdom strategy=img
+digraph TD {
+  node [shape=box]
+  rankdir="LR"
+  a -> b -> c -> d -> e -> f -> g
 }
 ```
 

packages/demo/src/content/docs/index.md

@@ -1,3 +1,57 @@
 ---
 title: Diagram All The Things
 ---
+
+```vizdom
+digraph TD {
+  cluster=true
+  node [shape=box]
+
+  rehypePlugin -> defaults
+
+  codeFence -> code
+  codeFence -> meta
+  
+  merge -> svgo
+  merge -> class
+  merge -> graphStrategy
+  merge -> strategy
+
+  subgraph configParts {
+    label=configParts
+    meta -> parseMeta -> merge
+    defaults -> merge
+  }
+
+  svgo[label="svgo config"]
+
+  strategy -> render
+
+  graphStrategy -> render
+  code -> render -> hw
+  
+  subgraph renderParts {
+    render
+    render -> svg
+    render -> g
+
+    svg[label="light, dark"]
+    g[label="graph"]
+
+    svg -> optimize
+    svgo -> optimize
+  }
+
+  hw[label="height, width"]
+  
+  subgraph mdastParts {
+    toMdast
+  }
+
+  optimize -> toMdast
+  class -> toMdast
+  hw -> toMdast
+  g -> toMdast
+  strategy -> toMdast
+}
+```

packages/rehype-vizdom/package.json

@@ -36,7 +36,9 @@
     "@vizdom/vizdom-ts-node": "^0.1.17",
     "fenceparser": "^2.2.0",
     "hast-util-from-html-isomorphic": "^2.0.0",
-    "svgo": "^3.3.2"
+    "svgo": "^3.3.2",
+    "hastscript": "^9.0.0",
+    "mini-svg-data-uri": "^1.4.4"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",

packages/rehype-vizdom/src/index.ts

@@ -1,125 +1,35 @@
 import type { Plugin } from "unified";
 import type { Root } from "hast";
 import { rehypeCodeHook, type MapLike } from "@beoe/rehype-code-hook";
-import { type Config as SvgoConfig } from "svgo";
-import { processVizdomSvg } from "./vizdom.js";
-import { DotParser } from "@vizdom/vizdom-ts-node";
-import { lex as lexMeta, parse as parseMeta } from "fenceparser";
+import { render, RenderOptions } from "./render.js";
+import { metaWithDefaults, svgStrategyCbAsync } from "./svgStrategy.js";
 
-const processMeta = (meta?: string): Record<string, any> =>
-  meta ? parseMeta(lexMeta(meta)) : {};
-
-// it is possible to add other formats, like Graphology etc.
-type GraphFormat = "dagre" | "graphology";
-
-async function dotToSvg(code: string, dataGraph?: GraphFormat) {
-  const parser = new DotParser();
-  const dotGraph = parser.parse(code);
-  const directedGraph = dotGraph.to_directed();
-  const positioned = directedGraph.layout();
-  const svg = await positioned.to_svg().to_string();
-
-  let graph;
-  if (dataGraph) {
-    const obj = positioned.to_json().to_obj();
-    if (dataGraph === "graphology") {
-      graph = {
-        attributes: { name: "g" },
-        options: { allowSelfLoops: true, multi: true, type: "directed" },
-        nodes: obj.nodes.map((node) => ({
-          key: node.unique_id,
-          // attributes: {
-          //   label: node.label,
-          //   x: node.x,
-          //   y: node.y,
-          //   width: node.width,
-          //   height: node.width,
-          //   url: node.url,
-          // },
-        })),
-        edges: obj.edges.map((edge) => ({
-          key: edge.unique_id,
-          source: edge.source,
-          target: edge.target,
-          // attributes: {
-          //   label: edge.label,
-          //   url: edge.url,
-          // },
-        })),
-      };
-    }
-
-    if (dataGraph === "dagre") {
-      graph = {
-        options: {
-          directed: true,
-          multigraph: true,
-          compound: false,
-        },
-        nodes: obj.nodes.map((node) => ({
-          v: node.unique_id,
-          // value: {},
-        })),
-        edges: obj.edges.map((edge) => ({
-          v: edge.source,
-          w: edge.target,
-          name: edge.unique_id,
-          // value: {},
-        })),
-      };
-    }
-  }
-
-  return {
-    svg,
-    graph,
-  };
-}
-
-export type RenderVizdomOptions = {
-  code: string;
-  class?: string;
-  svgo?: SvgoConfig | boolean;
-};
-
-export { processVizdomSvg };
-
-export type RehypeVizdomConfig = {
+export type RehypeVizdomConfig = RenderOptions & {
   cache?: MapLike;
-  class?: string;
-  svgo?: SvgoConfig | boolean;
-  // adds data-graph to each figure with JSON representation of graph
-  dataGraph?: GraphFormat;
 };
 
 export const rehypeVizdom: Plugin<[RehypeVizdomConfig?], Root> = (
   options = {}
 ) => {
-  const salt = {
+  const defaults = {
     class: options.class,
     svgo: options.svgo,
+    strategy: options.strategy,
     dataGraph: options.dataGraph,
   };
+  const language = "vizdom";
   // @ts-expect-error
   return rehypeCodeHook({
     ...options,
-    salt,
-    language: "vizdom",
+    salt: defaults,
+    language,
     code: ({ code, meta }) => {
-      const metaOptions = processMeta(meta);
-      const dataGraph =
-        metaOptions.datagraph !== undefined
-          ? metaOptions.datagraph
-          : options.dataGraph;
-      const cssClass = `${options.class || ""} ${
-        metaOptions.class || ""
-      }`.trim();
-      const svgo =
-        metaOptions.svgo !== undefined ? metaOptions.svgo : options.svgo;
+      const opts = metaWithDefaults(language, defaults, meta);
 
-      return dotToSvg(code, dataGraph).then(({ svg, graph }) =>
-        processVizdomSvg(svg, cssClass, svgo, dataGraph ? graph : undefined)
-      );
+      return svgStrategyCbAsync(opts.strategy, opts.class, async () => {
+        const { svg: lightSvg, width, height, graph } = await render(code, opts);
+        return { lightSvg, width, height, graph };
+      });
     },
   });
 };