@markee/diagrams 0.1.0 → 0.2.0

package/src/remark.test.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it, vi } from 'vitest'
+
+async function importRemark() {
+  vi.resetModules()
+
+  const remark = vi.fn()
+  const visit = vi.fn((tree: any, _type: string, callback: Function) => {
+    tree.children.forEach((node: any, index: number) =>
+      callback(node, index, tree),
+    )
+  })
+  const parseAttrs = vi.fn((meta: string) => {
+    if (meta.includes('off-glb')) {
+      return {
+        class: 'mermaid compact off-glb',
+        id: 'chart-a',
+        lightbox: 'true',
+      }
+    }
+    if (meta.includes('on-glb')) {
+      return { class: 'dbml roomy on-glb', lightbox: 'false' }
+    }
+    if (meta.includes('meta-id')) {
+      return { id: 'meta-id', class: 'mermaid compact' }
+    }
+    return {}
+  })
+
+  vi.doMock('@markee/runtime', () => ({
+    extend: {
+      markdownPipeline: {
+        remark,
+        visit,
+      },
+    },
+  }))
+  vi.doMock('attributes-parser', () => ({
+    default: parseAttrs,
+  }))
+
+  return {
+    ...(await import('./remark.js')),
+    remark,
+    visit,
+  }
+}
+
+describe('@markee/diagrams remark', () => {
+  it('rewrites mermaid and dbml fences with lightbox overrides', async () => {
+    const { registerDiagramsRemark, remark } = await importRemark()
+
+    registerDiagramsRemark()
+
+    const transform = remark.mock.calls[0]?.[1].call({
+      data: () => ({
+        pluginConfig: () => ({ enabled: false }),
+      }),
+    })
+
+    const tree = {
+      children: [
+        {
+          lang: 'mermaid',
+          meta: 'off-glb',
+          value: 'graph TD;A-->B',
+          data: { hProperties: { id: 'node-id' } },
+        },
+        {
+          lang: 'dbml',
+          meta: 'on-glb',
+          value: 'Table users {}',
+          data: {},
+        },
+        {
+          lang: 'mermaid',
+          meta: 'kroki',
+          value: 'skip',
+          data: {},
+        },
+      ],
+    }
+
+    transform(tree)
+
+    expect((tree.children[0] as any).value).toContain('<markee-diagram')
+    expect((tree.children[0] as any).value).not.toContain('glightbox')
+    expect((tree.children[0] as any).value).toContain('id="node-id"')
+    expect((tree.children[0] as any).value).toContain(
+      'class="mermaid diagram compact off-glb"',
+    )
+
+    expect((tree.children[1] as any).value).toContain("class='glightbox'")
+    expect((tree.children[1] as any).value).toContain('markee-diagram-0')
+    expect((tree.children[1] as any).value).toContain(
+      'class="dbml diagram roomy on-glb"',
+    )
+
+    expect(tree.children[2]).toMatchObject({
+      lang: 'mermaid',
+      meta: 'kroki',
+    })
+  })
+
+  it('defaults lightbox behavior and ignores incomplete or unsupported nodes', async () => {
+    const { registerDiagramsRemark, remark, visit } = await importRemark()
+
+    registerDiagramsRemark()
+
+    const transform = remark.mock.calls[0]?.[1].call({
+      data: () => ({
+        pluginConfig: () => undefined,
+      }),
+    })
+
+    transform({ children: [] })
+    const callback = visit.mock.calls[0]?.[2] as Function
+
+    expect(() =>
+      callback(
+        { lang: 'mermaid', value: 'graph TD;A-->B' },
+        undefined,
+        undefined,
+      ),
+    ).not.toThrow()
+
+    const detached = {
+      lang: 'mermaid',
+      meta: 'meta-id',
+      value: 'graph TD;A-->B',
+      data: {},
+    }
+    const tree = {
+      children: [
+        detached,
+        {
+          lang: 'bash',
+          meta: '',
+          value: 'echo nope',
+          data: {},
+        },
+        {
+          lang: ' mermaid ',
+          meta: 'meta-id',
+          value: 'graph TD;A-->B',
+          data: {},
+        },
+        {
+          lang: 'mermaid',
+          data: {},
+        },
+      ],
+    }
+
+    transform({
+      children: tree.children,
+    })
+
+    expect((tree.children[0] as any).value).toContain("class='glightbox'")
+    expect((tree.children[0] as any).value).toContain('id="meta-id"')
+    expect(tree.children[1]).toMatchObject({
+      lang: 'bash',
+    })
+    expect(tree.children[2]).toMatchObject({
+      type: 'html',
+      value: expect.stringContaining('data-kind="mermaid"'),
+    })
+    expect((tree.children[3] as any).value).toContain('data-source=""')
+  })
+
+  it('supports boolean lightbox configuration values', async () => {
+    const { registerDiagramsRemark, remark } = await importRemark()
+
+    registerDiagramsRemark()
+
+    const transform = remark.mock.calls[0]?.[1].call({
+      data: () => ({
+        pluginConfig: () => true,
+      }),
+    })
+
+    const tree = {
+      children: [
+        {
+          lang: 'dbml',
+          meta: '',
+          value: 'Table users {}',
+          data: {},
+        },
+      ],
+    }
+
+    transform(tree)
+
+    expect((tree.children[0] as any).value).toContain("class='glightbox'")
+  })
+})

package/src/remark.ts

@@ -1,3 +1,4 @@
+import type { Processor } from 'unified'
 import parseAttrs from 'attributes-parser'
 import { extend } from '@markee/runtime'
 import {
@@ -10,12 +11,10 @@ import {
 } from './helpers'
 
 export function registerDiagramsRemark() {
-  extend.markdownPipeline.remark('markee-diagrams', function (this: any) {
+  extend.markdownPipeline.remark('markee-diagrams', function (this: Processor) {
     return (tree: any) => {
-      const resolved = this.data().pluginConfig('lightbox') as
-        | boolean
-        | { enabled: boolean }
-        | undefined
+      const { pluginConfig } = this.data()
+      const resolved = pluginConfig<boolean | { enabled: boolean }>('lightbox')
       const lightboxEnabled =
         typeof resolved === 'boolean' ? resolved : (resolved?.enabled ?? true)
 

package/src/runtime.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from 'vitest'
+
+async function importRuntime({
+  mermaidModule,
+  dbmlRenderer,
+  d3Selection,
+}: {
+  mermaidModule?: any
+  dbmlRenderer?: any
+  d3Selection?: any
+} = {}) {
+  vi.resetModules()
+
+  vi.doMock('mermaid', () => ({
+    default: mermaidModule ?? {
+      initialize: vi.fn(),
+    },
+  }))
+  vi.doMock(
+    '@softwaretechnik/dbml-renderer',
+    () =>
+      dbmlRenderer ?? {
+        run: vi.fn(),
+      },
+  )
+  vi.doMock(
+    'd3-selection',
+    () =>
+      d3Selection ?? {
+        select: vi.fn(),
+        default: { select: vi.fn() },
+      },
+  )
+  vi.doMock('d3-graphviz', () => ({}))
+
+  return await import('./runtime.js')
+}
+
+describe('@markee/diagrams runtime', () => {
+  it('loads mermaid once and initializes it', async () => {
+    const initialize = vi.fn()
+    const { loadMermaid } = await importRuntime({
+      mermaidModule: { initialize },
+    })
+
+    const first = await loadMermaid()
+    const second = await loadMermaid()
+
+    expect(first).toBe(second)
+    expect(initialize).toHaveBeenCalledWith({ startOnLoad: false })
+  })
+
+  it('loads and caches the dbml runtime helpers', async () => {
+    const run = vi.fn()
+    const select = vi.fn()
+    const { loadDiagramRuntime } = await importRuntime({
+      dbmlRenderer: { run },
+      d3Selection: { select, default: { select } },
+    })
+
+    const first = await loadDiagramRuntime()
+    const second = await loadDiagramRuntime()
+
+    expect(first).toBe(second)
+    expect(first.dbmlRun).toBe(run)
+    expect(first.select).toBe(select)
+  })
+
+  it('throws when d3-selection does not expose a select function', async () => {
+    const { loadDiagramRuntime } = await importRuntime({
+      d3Selection: { select: undefined, default: {} },
+    })
+
+    await expect(loadDiagramRuntime()).rejects.toThrow(
+      'Could not load d3-selection runtime.',
+    )
+  })
+})

package/tsconfig.json

@@ -1,15 +1,8 @@
 {
+  "extends": "@markee/tsconfig/bundler.json",
   "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "lib": ["ES2022", "dom"],
-    "outDir": "dist",
     "baseUrl": "."
   },
-  "include": ["src"]
+  "include": ["*.ts", "**/*.ts"],
+  "exclude": ["node_modules", "dist"]
 }

package/vitest.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vitest/config'
+import { createMarkeeVitestConfig } from '@markee/vitest'
+
+export default defineConfig(createMarkeeVitestConfig())

package/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { installMarkeeVitestSetup } from '@markee/vitest/setup'
+
+installMarkeeVitestSetup({
+  protectCustomElements: true,
+  restoreMocks: true,
+})

package/_assets/_head/assets/_architecture-PBZL5I3N-BPxfLoEK.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-R5LLSJPH-CoKBj2D6.js";export{e as createArchitectureServices};

package/_assets/_head/assets/_channel-CfD3KTsT.js

@@ -1 +0,0 @@
-import{it as e,rt as t}from"./_chunk-7R4GIKGN-CixjX2hF.js";var n=(n,r)=>e.lang.round(t.parse(n)[r]);export{n as t};

package/_assets/_head/assets/_chunk-55IACEB6-x7bSLf7B.js

@@ -1 +0,0 @@
-import{i as e}from"./_src-COkbRRdF.js";import{n as t}from"./_src-DGaYM9rN.js";var n=t((t,n)=>{let r;return n===`sandbox`&&(r=e(`#i`+t)),e(n===`sandbox`?r.nodes()[0].contentDocument.body:`body`).select(`[id="${t}"]`)},`getDiagramElement`);export{n as t};

package/_assets/_head/assets/_chunk-GLR3WWYH-CADHj0Af.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./_dagre-KLK3FWXG-BkNMp9M0.js","./_dist-Dk49gvBM.js","./main-GvJmWKsI.js","./main-CSvXzq1b.css","./_chunk-PU5JKC2W-B7Fh0LIt.js","./_src-DGaYM9rN.js","./_src-COkbRRdF.js","./_chunk-GEFDOKGD-hedaaI_B.js","./_math-CyywJguE.js","./_chunk-7R4GIKGN-CixjX2hF.js","./_isArrayLikeObject-B62EgjVm.js","./_src-EY2faTVt.js","./_dagre-D4f1FF8i.js","./_graphlib-CWZwVoL0.js","./_isEmpty-DwnoWLeP.js","./__baseUniq-BbfvCSQ0.js","./__basePickBy-seJymvZv.js","./_clone-C4VI7IwW.js","./_chunk-KYZI473N-HFloJmj0.js","./_chunk-PQ6SQG4A-d07SUR0W.js","./_chunk-YBOYWFTD-nZYHIeRV.js","./_rough.esm-B-x7cSr_.js","./_chunk-MX3YWQON-DTYOrezi.js","./_chunk-O4XLMI2P-Dmj7UqP5.js","./_line-Bn73e1DS.js","./_array-1ZLHT4IW.js","./_path-DqxJfpv2.js","./_path-e1ZUMOO_.js","./_cose-bilkent-S5V4N54A-DzNIP-ES.js","./_cytoscape.esm-p1aMD8pk.js"])))=>i.map(i=>d[i]);
-import{t as e}from"./main-GvJmWKsI.js";import{u as t}from"./_chunk-GEFDOKGD-hedaaI_B.js";import{n,r}from"./_src-DGaYM9rN.js";import{s as i,y as a}from"./_chunk-7R4GIKGN-CixjX2hF.js";import{a as o,i as s,s as c}from"./_chunk-KYZI473N-HFloJmj0.js";import{a as l,i as u,n as d,r as f}from"./_chunk-O4XLMI2P-Dmj7UqP5.js";var p={common:i,getConfig:a,insertCluster:s,insertEdge:d,insertEdgeLabel:f,insertMarkers:u,insertNode:o,interpolateToCurve:t,labelHelper:c,log:r,positionEdgeLabel:l},m={},h=n(e=>{for(let t of e)m[t.name]=t},`registerLayoutLoaders`);n(()=>{h([{name:`dagre`,loader:n(async()=>await e(()=>import(`./_dagre-KLK3FWXG-BkNMp9M0.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27]),import.meta.url),`loader`)},...[{name:`cose-bilkent`,loader:n(async()=>await e(()=>import(`./_cose-bilkent-S5V4N54A-DzNIP-ES.js`),__vite__mapDeps([28,2,3,29,5,11,6]),import.meta.url),`loader`)}]])},`registerDefaultLayoutLoaders`)();var g=n(async(e,t)=>{if(!(e.layoutAlgorithm in m))throw Error(`Unknown layout algorithm: ${e.layoutAlgorithm}`);let n=m[e.layoutAlgorithm];return(await n.loader()).render(e,t,p,{algorithm:n.algorithm})},`render`),_=n((e=``,{fallback:t=`dagre`}={})=>{if(e in m)return e;if(t in m)return r.warn(`Layout algorithm ${e} is not registered. Using ${t} as fallback.`),t;throw Error(`Both layout algorithms ${e} and ${t} are not registered.`)},`getRegisteredLayoutAlgorithm`);export{h as n,g as r,_ as t};

package/_assets/_head/assets/_chunk-HHEYEP7N-yDnzeL6u.js

@@ -1 +0,0 @@
-import{i as e}from"./_src-COkbRRdF.js";import{n as t}from"./_src-DGaYM9rN.js";import{b as n}from"./_chunk-7R4GIKGN-CixjX2hF.js";var r=t(t=>{let{securityLevel:r}=n(),i=e(`body`);return r===`sandbox`&&(i=e((e(`#i${t}`).node()?.contentDocument??document).body)),i.select(`#${t}`)},`selectSvgElement`);export{r as t};

package/_assets/_head/assets/_chunk-QZHKN3VN-OrU_cr5J.js

@@ -1 +0,0 @@
-import{n as e}from"./_src-DGaYM9rN.js";var t=class{constructor(e){this.init=e,this.records=this.init()}static{e(this,`ImperativeState`)}reset(){this.records=this.init()}};export{t};

package/_assets/_head/assets/_classDiagram-VBA2DB6C-C9oLPafD.js

@@ -1 +0,0 @@
-import"./_chunk-GEFDOKGD-hedaaI_B.js";import"./_src-EY2faTVt.js";import{n as e}from"./_src-DGaYM9rN.js";import"./_chunk-7R4GIKGN-CixjX2hF.js";import"./_dist-Dk49gvBM.js";import"./_chunk-PU5JKC2W-B7Fh0LIt.js";import"./_chunk-FMBD7UC4-D6coRtDw.js";import"./_chunk-MX3YWQON-DTYOrezi.js";import"./_chunk-YBOYWFTD-nZYHIeRV.js";import"./_chunk-JSJVCQXG-CJ2rQuP0.js";import"./_chunk-55IACEB6-x7bSLf7B.js";import"./_chunk-KX2RTZJC-C6_Rew8h.js";import"./_chunk-PQ6SQG4A-d07SUR0W.js";import"./_chunk-KYZI473N-HFloJmj0.js";import"./_chunk-O4XLMI2P-Dmj7UqP5.js";import"./_chunk-GLR3WWYH-CADHj0Af.js";import{i as t,n,r,t as i}from"./_chunk-WL4C6EOR-bOFxg0ID.js";var a={parser:n,get db(){return new i},renderer:r,styles:t,init:e(e=>{e.class||={},e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute},`init`)};export{a as diagram};

package/_assets/_head/assets/_classDiagram-v2-RAHNMMFH-Dgh8T6Nh.js

@@ -1 +0,0 @@
-import"./_chunk-GEFDOKGD-hedaaI_B.js";import"./_src-EY2faTVt.js";import{n as e}from"./_src-DGaYM9rN.js";import"./_chunk-7R4GIKGN-CixjX2hF.js";import"./_dist-Dk49gvBM.js";import"./_chunk-PU5JKC2W-B7Fh0LIt.js";import"./_chunk-FMBD7UC4-D6coRtDw.js";import"./_chunk-MX3YWQON-DTYOrezi.js";import"./_chunk-YBOYWFTD-nZYHIeRV.js";import"./_chunk-JSJVCQXG-CJ2rQuP0.js";import"./_chunk-55IACEB6-x7bSLf7B.js";import"./_chunk-KX2RTZJC-C6_Rew8h.js";import"./_chunk-PQ6SQG4A-d07SUR0W.js";import"./_chunk-KYZI473N-HFloJmj0.js";import"./_chunk-O4XLMI2P-Dmj7UqP5.js";import"./_chunk-GLR3WWYH-CADHj0Af.js";import{i as t,n,r,t as i}from"./_chunk-WL4C6EOR-bOFxg0ID.js";var a={parser:n,get db(){return new i},renderer:r,styles:t,init:e(e=>{e.class||={},e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute},`init`)};export{a as diagram};

package/_assets/_head/assets/_gitGraph-HDMCJU4V-bzhcDRU8.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-7E7YKBS2-BfdwzEwB.js";export{e as createGitGraphServices};

package/_assets/_head/assets/_info-3K5VOQVL-DO8S_2BK.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-EGIJ26TM-CCUYcH6V.js";export{e as createInfoServices};

package/_assets/_head/assets/_infoDiagram-LFFYTUFH-V27XJ0e-.js

@@ -1,2 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import"./_chunk-R5LLSJPH-CoKBj2D6.js";import"./_chunk-7E7YKBS2-BfdwzEwB.js";import"./_chunk-EGIJ26TM-CCUYcH6V.js";import"./_chunk-C72U2L5F-Ju1rEIdN.js";import"./_chunk-XIRO2GV7-COC85g2g.js";import"./_chunk-L3YUKLVL-BZnSrFqZ.js";import"./_chunk-OZEHJAEY-BSk-0ei6.js";import"./_src-EY2faTVt.js";import{n as e,r as t}from"./_src-DGaYM9rN.js";import{c as n}from"./_chunk-7R4GIKGN-CixjX2hF.js";import{t as r}from"./_chunk-HHEYEP7N-yDnzeL6u.js";import{t as i}from"./_mermaid-parser.core-_H6Clr87.js";var a={parse:e(async e=>{let n=await i(`info`,e);t.debug(n)},`parse`)},o={version:`11.13.0`},s={parser:a,db:{getVersion:e(()=>o.version,`getVersion`)},renderer:{draw:e((e,i,a)=>{t.debug(`rendering info diagram
-`+e);let o=r(i);n(o,100,400,!0),o.append(`g`).append(`text`).attr(`x`,100).attr(`y`,40).attr(`class`,`version`).attr(`font-size`,32).style(`text-anchor`,`middle`).text(`v${a}`)},`draw`)}};export{s as diagram};

package/_assets/_head/assets/_packet-RMMSAZCW-BQu67kO8.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-C72U2L5F-Ju1rEIdN.js";export{e as createPacketServices};

package/_assets/_head/assets/_pie-UPGHQEXC-Bq1eDF5N.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-XIRO2GV7-COC85g2g.js";export{e as createPieServices};

package/_assets/_head/assets/_radar-KQ55EAFF-BVJblTdI.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-L3YUKLVL-BZnSrFqZ.js";export{e as createRadarServices};

package/_assets/_head/assets/_stateDiagram-v2-FVOUBMTO-C3RKEofw.js

@@ -1 +0,0 @@
-import"./_chunk-GEFDOKGD-hedaaI_B.js";import"./_src-EY2faTVt.js";import{n as e}from"./_src-DGaYM9rN.js";import"./_chunk-7R4GIKGN-CixjX2hF.js";import"./_dist-Dk49gvBM.js";import"./_chunk-PU5JKC2W-B7Fh0LIt.js";import"./_chunk-MX3YWQON-DTYOrezi.js";import"./_chunk-YBOYWFTD-nZYHIeRV.js";import"./_chunk-55IACEB6-x7bSLf7B.js";import"./_chunk-KX2RTZJC-C6_Rew8h.js";import"./_chunk-PQ6SQG4A-d07SUR0W.js";import"./_chunk-KYZI473N-HFloJmj0.js";import"./_chunk-O4XLMI2P-Dmj7UqP5.js";import"./_chunk-GLR3WWYH-CADHj0Af.js";import{i as t,n,r,t as i}from"./_chunk-NQ4KR5QH-BUplpEk2.js";var a={parser:n,get db(){return new i(2)},renderer:r,styles:t,init:e(e=>{e.state||={},e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},`init`)};export{a as diagram};

package/_assets/_head/assets/_treemap-KZPCXAKY-DnDBABML.js

@@ -1 +0,0 @@
-import"./_chunk-XZSTWKYB-DNV9pfMo.js";import{n as e}from"./_chunk-OZEHJAEY-BSk-0ei6.js";export{e as createTreemapServices};

package/_assets/_head/assets/main-CSvXzq1b.css

@@ -1 +0,0 @@
-@layer markee-extension{markee-diagram{margin:1.2rem 0;display:block}a.glightbox>markee-diagram{position:relative}a.glightbox>markee-diagram:after{content:"";z-index:1;cursor:pointer;background:0 0;position:absolute;inset:0}.ginlined-content.diagram{text-align:center;min-width:100vw;padding:1rem 6rem}markee-diagram .markee-diagram-status,markee-diagram .markee-diagram-error{border:1px solid var(--mk-color-border,#d9d9d9);background:var(--mk-color-background,#fafafa);color:var(--mk-color-text,#333);border-radius:.5rem;padding:.75rem .9rem}markee-diagram .markee-diagram-status{font-style:italic}markee-diagram .markee-diagram-error{border-left:4px solid var(--mk-admonition-color-danger)}markee-diagram .markee-diagram-error pre{white-space:pre-wrap;margin:.6rem 0 0;font-size:.875rem;overflow:auto}markee-diagram .markee-diagram-mermaid,markee-diagram .markee-diagram-dbml{overflow-x:auto}markee-diagram .markee-diagram-mermaid>svg,markee-diagram .markee-diagram-dbml>svg{max-width:100%;height:auto;margin:0 auto;display:block}markee-diagram .markee-diagram-dbml,markee-diagram .markee-diagram-dbml *{pointer-events:none!important}[data-color-scheme=dark] markee-diagram{filter:invert(88%)hue-rotate(180deg)}}