json-canvas-viewer 3.3.0 → 3.3.1

package/README.md

@@ -63,12 +63,12 @@
 JSON Canvas Viewer currently can work seamlessly with the following techstacks / technologies (including but not limited to):
 
 - ✅ Vanilla JS/TS: natural support
-- ✅ Server-side Rendering: [`RenderToString`](https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-SSR-and-Bridges#server-side-rendering)
+- ✅ Prerendering: [`renderToString`](https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-Prerendering-and-Bridges#prerendering)
 - ✅ Vite: [Vite Plugin](https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#setup-1)
-- ✅ Vue: [Vue Component](https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-SSR-and-Bridges#vue-component)
-- 🟡 React: work in progress, yet it's simply a wrapper around the main `JSONCanvasViewer` class, you can create one in seconds.
+- ✅ Vue: [Vue Component](https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-Prerendering-and-Bridges#vue-component)
+- ✅ React: [React Component](https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-Prerendering-and-Bridges#react-component)
 
-🙌 Contributors are welcomed!
+🙌 Contributions are welcomed!
 
 ## 🚀 Quick Start
 
@@ -120,7 +120,7 @@ The argument is any markdown parser, when empty, build-time parsing is disabled.
 The setup above gives you:
 - bundler resolution of `.canvas` file as modules
 - build-time parsing of `.canvas` files (less client-side overhead)
-- ease for later framework integration and SSR
+- ease for later framework integration and prerendering
 
 ### Instantiation
 

package/dist/bridges.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("./index-BSkMdAcV.cjs");async function n(e){const t=t=>function(e,t){switch(e.type){case"text":return t(e.text);case"file":return function(e,t){if(e.file.match(/\.md$/i))return async function(e,t){let n;try{const a=await fetch(e),i=await a.text(),o=i.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);n=o?await t(o[2]):await t(i)}catch{n="Failed to load content."}return n}(e.file,t);if(e.file.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i))return`<img src="${e.file}" alt="${e.file.split("/").pop()}">`;if(e.file.match(/\.(mp3|wav)$/i))return`<audio src="${e.file}" controls></audio>`}(e,t);case"link":return`<a href="${e.url}" target="_blank" rel="nofollow">${e.url}</a>`;default:return""}}(t,e.markdownParser||(e=>e)),n=e.canvas.nodes||[],a=e.attachmentDir||"./";n.forEach(e=>{if("file"===e.type&&!e.file.includes("http")){const t=e.file.split("/");e.file=a+t.pop()}});let i="";return n.forEach(e=>{i+=t(e)}),i}const a=["innerHTML"],i=e.defineComponent({__name:"vueComponent",props:{modules:{},options:{},isSSR:{type:Boolean}},async setup(i){let o,r;const s=i,l=s.isSSR||"undefined"==typeof window,c=e.useTemplateRef("viewerRef");let u=null;const f=l?([o,r]=e.withAsyncContext(()=>n(s.options)),o=await o,r(),o):"";return e.onMounted(()=>{c.value&&(u=new t.JSONCanvasViewer(Object.assign(s.options,{container:c.value}),s.modules))}),e.onUnmounted(()=>{u?.dispose(),u=null}),(t,n)=>(e.openBlock(),e.createElementBlock("section",{ref_key:"viewerRef",ref:c,innerHTML:e.unref(f),style:{"max-height":"100vh","max-width":"100vw"}},null,8,a))}});exports.JSONCanvasViewerVue=i,exports.jsonCanvasVitePlugin=function(e){return{name:"json-canvas-vite-plugin",async transform(t,n){if(!n.endsWith(".canvas"))return null;try{const n=JSON.parse(t);return e&&n.nodes&&await Promise.all(n.nodes.map(async t=>{"text"===t.type&&(t.text=await e(t.text))})),{code:`export default ${JSON.stringify(n)}`,map:null}}catch(a){throw console.error(`[json-canvas] Failed to parse: ${n}`),a}}}},exports.renderToString=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./index-RXeXyAu0.cjs"),n=require("vue");async function r(e){const t=t=>function(e,t){switch(e.type){case"text":return t(e.text);case"file":return function(e,t){if(e.file.match(/\.md$/i))return async function(e,t){let n;try{const r=await fetch(e),a=await r.text(),i=a.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);n=i?await t(i[2]):await t(a)}catch{n="Failed to load content."}return n}(e.file,t);if(e.file.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i))return`<img src="${e.file}" alt="${e.file.split("/").pop()}">`;if(e.file.match(/\.(mp3|wav)$/i))return`<audio src="${e.file}" controls></audio>`}(e,t);case"link":return`<a href="${e.url}" target="_blank" rel="nofollow">${e.url}</a>`;default:return""}}(t,e.markdownParser||(e=>e)),n=e.canvas.nodes||[],r=e.attachmentDir||"./";n.forEach(e=>{if("file"===e.type&&!e.file.includes("http")){const t=e.file.split("/");e.file=r+t.pop()}});let a="";return n.forEach(e=>{a+=t(e)}),a}const a=["innerHTML"],i=n.defineComponent({__name:"vueComponent",props:{modules:{},options:{},isPrerendering:{type:Boolean}},async setup(e){let i,o;const s=e,l=s.isPrerendering||"undefined"==typeof window,c=n.useTemplateRef("viewerRef");let u=null;const f=l?([i,o]=n.withAsyncContext(()=>r(s.options)),i=await i,o(),i):"";return n.onMounted(()=>{c.value&&(u=new t.JSONCanvasViewer(Object.assign(s.options,{container:c.value}),s.modules))}),n.onUnmounted(()=>{u?.dispose(),u=null}),(e,t)=>(n.openBlock(),n.createElementBlock("section",{ref_key:"viewerRef",ref:c,innerHTML:n.unref(f),style:{"max-height":"100vh","max-width":"100vw"}},null,8,a))}});exports.JSONCanvasViewerReact=function({modules:n,options:r,prerenderedContent:a="",className:i,style:o,id:s}){const l=e.useRef(null);return e.useEffect(()=>{if(!l.current)return;return new t.JSONCanvasViewer(Object.assign(r,{container:l.current}),n).dispose},[]),React.createElement("section",{ref:l,dangerouslySetInnerHTML:{__html:a},style:o,className:i,id:s})},exports.JSONCanvasViewerVue=i,exports.jsonCanvasVitePlugin=function(e){return{name:"json-canvas-vite-plugin",async transform(t,n){if(!n.endsWith(".canvas"))return null;try{const n=JSON.parse(t);return e&&n.nodes&&await Promise.all(n.nodes.map(async t=>{"text"===t.type&&(t.text=await e(t.text))})),{code:`export default ${JSON.stringify(n)}`,map:null}}catch(r){throw console.error(`[json-canvas] Failed to parse: ${n}`),r}}}},exports.renderToString=r;
 //# sourceMappingURL=bridges.cjs.map

package/dist/bridges.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"bridges.cjs","sources":["../src/bridges/renderToString.ts","../src/bridges/vueComponent.vue","../src/bridges/vitePlugin.ts"],"sourcesContent":["import type { MarkdownParser } from '$/declarations';\n\nexport default async function (options: {\n\tcanvas: JSONCanvas;\n\tattachmentDir?: string;\n\tmarkdownParser?: MarkdownParser;\n}) {\n\tconst render = (node: JSONCanvasNode) =>\n\t\trenderer(node, options.markdownParser || ((markdown: string) => markdown));\n\tconst nodes = options.canvas.nodes || [];\n\tconst basePath = options.attachmentDir || './';\n\tnodes.forEach(node => {\n\t\tif (node.type === 'file' && !node.file.includes('http')) {\n\t\t\tconst file = node.file.split('/');\n\t\t\tnode.file = basePath + file.pop();\n\t\t}\n\t});\n\tlet result = '';\n\tnodes.forEach(node => {\n\t\tresult += render(node);\n\t});\n\treturn result;\n}\n\nfunction renderer(node: JSONCanvasNode, parse: MarkdownParser) {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn parse(node.text);\n\t\tcase 'file':\n\t\t\treturn fileProcessor(node, parse);\n\t\tcase 'link':\n\t\t\treturn `<a href=\"${node.url}\" target=\"_blank\" rel=\"nofollow\">${node.url}</a>`;\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\nfunction fileProcessor(node: JSONCanvasFileNode, parse: MarkdownParser) {\n\tif (node.file.match(/\\.md$/i)) return loadMarkdown(node.file, parse);\n\telse if (node.file.match(/\\.(png|jpg|jpeg|gif|svg|webp)$/i))\n\t\treturn `<img src=\"${node.file}\" alt=\"${node.file.split('/').pop()}\">`;\n\telse if (node.file.match(/\\.(mp3|wav)$/i)) return `<audio src=\"${node.file}\" controls></audio>`;\n}\n\nasync function loadMarkdown(path: string, parse: MarkdownParser) {\n\tlet parsedContent: string;\n\ttry {\n\t\tconst response = await fetch(path);\n\t\tconst result = await response.text();\n\t\tconst frontmatterMatch = result.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n\t\tif (frontmatterMatch) parsedContent = await parse(frontmatterMatch[2]);\n\t\telse parsedContent = await parse(result);\n\t} catch {\n\t\tparsedContent = 'Failed to load content.';\n\t}\n\treturn parsedContent;\n}\n","<script lang=\"ts\" generic=\"T extends ModuleInputCtor\" setup>\nimport { onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\nimport renderToString from './renderToString';\n\ntype ComponentOptions<T extends ModuleInputCtor> = {\n\tmodules?: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tisSSR?: boolean;\n};\n\nconst props = defineProps<ComponentOptions<T>>();\n\nconst isSSR = props.isSSR || typeof window === 'undefined';\nconst viewerRef = useTemplateRef('viewerRef');\nlet viewer: JSONCanvasViewer<ModuleInputCtor> | null = null;\nconst prerender = isSSR ? await renderToString(props.options) : '';\n\nonMounted(() => {\n\tif (!viewerRef.value) return;\n\tviewer = new JSONCanvasViewer(\n\t\tObject.assign(props.options, { container: viewerRef.value }) as UserOptions<T>,\n\t\tprops.modules,\n\t);\n});\n\nonUnmounted(() => {\n\tviewer?.dispose();\n\tviewer = null;\n});\n</script>\n\n<template>\n\t<section ref=\"viewerRef\" v-html=\"prerender\" style=\"max-height: 100vh; max-width: 100vw;\" />\n</template>\n","import type { MarkdownParser } from '$/declarations';\n\nexport default function (parser?: MarkdownParser) {\n\treturn {\n\t\tname: 'json-canvas-vite-plugin',\n\t\tasync transform(code: string, id: string) {\n\t\t\tif (!id.endsWith('.canvas')) return null;\n\t\t\ttry {\n\t\t\t\tconst json = JSON.parse(code) as JSONCanvas;\n\t\t\t\tif (parser && json.nodes)\n\t\t\t\t\tawait Promise.all(\n\t\t\t\t\t\tjson.nodes.map(async node => {\n\t\t\t\t\t\t\tif (node.type === 'text') node.text = await parser(node.text);\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\treturn {\n\t\t\t\t\tcode: `export default ${JSON.stringify(json)}`,\n\t\t\t\t\tmap: null,\n\t\t\t\t};\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(`[json-canvas] Failed to parse: ${id}`);\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t},\n\t};\n}\n"],"names":["async","renderToString","options","render","node","parse","type","text","file","match","path","parsedContent","response","fetch","result","frontmatterMatch","loadMarkdown","split","pop","fileProcessor","url","renderer","markdownParser","markdown","nodes","canvas","basePath","attachmentDir","forEach","includes","props","__props","isSSR","window","viewerRef","useTemplateRef","viewer","prerender","__temp","__restore","_withAsyncContext","onMounted","value","JSONCanvasViewer","Object","assign","container","modules","onUnmounted","dispose","_createElementBlock","ref","innerHTML","_unref","style","parser","name","transform","code","id","endsWith","json","JSON","Promise","all","map","stringify","e","console","error"],"mappings":"yIAEAA,eAAAC,EAA+BC,GAK9B,MAAMC,EAAUC,GAiBjB,SAAkBA,EAAsBC,GACvC,OAAQD,EAAKE,MACZ,IAAK,OACJ,OAAOD,EAAMD,EAAKG,MACnB,IAAK,OACJ,OAQH,SAAuBH,EAA0BC,GAChD,GAAID,EAAKI,KAAKC,MAAM,UAAW,OAMhCT,eAA4BU,EAAcL,GACzC,IAAIM,EACJ,IACC,MAAMC,QAAiBC,MAAMH,GACvBI,QAAeF,EAASL,OACxBQ,EAAmBD,EAAOL,MAAM,qCAChBE,EAAlBI,QAAwCV,EAAMU,EAAiB,UACxCV,EAAMS,EAClC,CAAA,MACCH,EAAgB,yBACjB,CACA,OAAOA,CACR,CAlBuCK,CAAaZ,EAAKI,KAAMH,GAAK,GAC1DD,EAAKI,KAAKC,MAAM,mCACxB,MAAO,aAAaL,EAAKI,cAAcJ,EAAKI,KAAKS,MAAM,KAAKC,UAAK,GACzDd,EAAKI,KAAKC,MAAM,iBAAkB,MAAO,eAAeL,EAAKI,yBACvE,CAbUW,CAAcf,EAAMC,GAC5B,IAAK,OACJ,MAAO,YAAYD,EAAKgB,uCAAuChB,EAAKgB,UACrE,QACC,MAAO,GAEV,CA3BEC,CAASjB,EAAMF,EAAQoB,gBAAA,CAAoBC,GAAqBA,IAC3DC,EAAQtB,EAAQuB,OAAOD,OAAS,GAChCE,EAAWxB,EAAQyB,eAAiB,KAC1CH,EAAMI,QAAQxB,IACb,GAAkB,SAAdA,EAAKE,OAAoBF,EAAKI,KAAKqB,SAAS,QAAS,CACxD,MAAMrB,EAAOJ,EAAKI,KAAKS,MAAM,KAC7Bb,EAAKI,KAAOkB,EAAWlB,EAAKU,KAC7B,IAED,IAAIJ,EAAS,GAIb,OAHAU,EAAMI,QAAQxB,IACbU,GAAUX,EAAOC,KAEXU,CACR,4ICVA,MAAMgB,EAAQC,EAERC,EAAQF,EAAME,OAA2B,oBAAXC,OAC9BC,EAAYC,EAAAA,eAAe,aACjC,IAAIC,EAAmD,KACvD,MAAMC,EAAYL,IAAQM,EAAAC,GAAAC,EAAAA,iBAAA,IAAMvC,EAAe6B,EAAM5B,2BAAW,UAEhEuC,EAAAA,UAAU,KACJP,EAAUQ,QACfN,EAAS,IAAIO,EAAAA,iBACZC,OAAOC,OAAOf,EAAM5B,QAAS,CAAE4C,UAAWZ,EAAUQ,QACpDZ,EAAMiB,YAIRC,EAAAA,YAAY,KACXZ,GAAQa,UACRb,EAAS,6BAKTc,EAAAA,mBAA2F,UAAA,SAA9E,YAAJC,IAAIjB,EAAYkB,UAAQC,EAAAA,MAAAhB,GAAWiB,MAAA,CAAA,aAAA,QAAA,YAAA,mFChC7C,SAAyBC,GACxB,MAAO,CACNC,KAAM,0BACN,eAAMC,CAAUC,EAAcC,GAC7B,IAAKA,EAAGC,SAAS,WAAY,OAAO,KACpC,IACC,MAAMC,EAAOC,KAAKzD,MAAMqD,GAOxB,OANIH,GAAUM,EAAKrC,aACZuC,QAAQC,IACbH,EAAKrC,MAAMyC,IAAIjE,MAAMI,IACF,SAAdA,EAAKE,OAAiBF,EAAKG,WAAagD,EAAOnD,EAAKG,UAGpD,CACNmD,KAAM,kBAAkBI,KAAKI,UAAUL,KACvCI,IAAK,KAEP,OAASE,GAER,MADAC,QAAQC,MAAM,kCAAkCV,KAC1CQ,CACP,CACD,EAEF"}
+{"version":3,"file":"bridges.cjs","sources":["../src/bridges/renderToString.ts","../src/bridges/vueComponent.vue","../src/bridges/reactComponent.tsx","../src/bridges/vitePlugin.ts"],"sourcesContent":["import type { MarkdownParser } from '$/declarations';\n\nexport default async function (options: {\n\tcanvas: JSONCanvas;\n\tattachmentDir?: string;\n\tmarkdownParser?: MarkdownParser;\n}) {\n\tconst render = (node: JSONCanvasNode) =>\n\t\trenderer(node, options.markdownParser || ((markdown: string) => markdown));\n\tconst nodes = options.canvas.nodes || [];\n\tconst basePath = options.attachmentDir || './';\n\tnodes.forEach(node => {\n\t\tif (node.type === 'file' && !node.file.includes('http')) {\n\t\t\tconst file = node.file.split('/');\n\t\t\tnode.file = basePath + file.pop();\n\t\t}\n\t});\n\tlet result = '';\n\tnodes.forEach(node => {\n\t\tresult += render(node);\n\t});\n\treturn result;\n}\n\nfunction renderer(node: JSONCanvasNode, parse: MarkdownParser) {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn parse(node.text);\n\t\tcase 'file':\n\t\t\treturn fileProcessor(node, parse);\n\t\tcase 'link':\n\t\t\treturn `<a href=\"${node.url}\" target=\"_blank\" rel=\"nofollow\">${node.url}</a>`;\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\nfunction fileProcessor(node: JSONCanvasFileNode, parse: MarkdownParser) {\n\tif (node.file.match(/\\.md$/i)) return loadMarkdown(node.file, parse);\n\telse if (node.file.match(/\\.(png|jpg|jpeg|gif|svg|webp)$/i))\n\t\treturn `<img src=\"${node.file}\" alt=\"${node.file.split('/').pop()}\">`;\n\telse if (node.file.match(/\\.(mp3|wav)$/i)) return `<audio src=\"${node.file}\" controls></audio>`;\n}\n\nasync function loadMarkdown(path: string, parse: MarkdownParser) {\n\tlet parsedContent: string;\n\ttry {\n\t\tconst response = await fetch(path);\n\t\tconst result = await response.text();\n\t\tconst frontmatterMatch = result.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n\t\tif (frontmatterMatch) parsedContent = await parse(frontmatterMatch[2]);\n\t\telse parsedContent = await parse(result);\n\t} catch {\n\t\tparsedContent = 'Failed to load content.';\n\t}\n\treturn parsedContent;\n}\n","<script lang=\"ts\" generic=\"T extends ModuleInputCtor\" setup>\nimport { onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\nimport renderToString from './renderToString';\n\ntype ComponentOptions<T extends ModuleInputCtor> = {\n\tmodules?: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tisPrerendering?: boolean;\n};\n\nconst props = defineProps<ComponentOptions<T>>();\n\nconst isPrerendering = props.isPrerendering || typeof window === 'undefined';\nconst viewerRef = useTemplateRef('viewerRef');\nlet viewer: JSONCanvasViewer<ModuleInputCtor> | null = null;\nconst prerender = isPrerendering ? await renderToString(props.options) : '';\n\nonMounted(() => {\n\tif (!viewerRef.value) return;\n\tviewer = new JSONCanvasViewer(\n\t\tObject.assign(props.options, { container: viewerRef.value }) as UserOptions<T>,\n\t\tprops.modules,\n\t);\n});\n\nonUnmounted(() => {\n\tviewer?.dispose();\n\tviewer = null;\n});\n</script>\n\n<template>\n\t<section ref=\"viewerRef\" v-html=\"prerender\" style=\"max-height: 100vh; max-width: 100vw;\" />\n</template>\n","import { useEffect, useRef } from 'react';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\n\nexport default function JSONCanvasViewerReact<T extends ModuleInputCtor>({\n\tmodules,\n\toptions,\n\tprerenderedContent = '',\n\tclassName,\n\tstyle,\n\tid,\n}: {\n\tmodules: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tprerenderedContent?: string;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tid?: string;\n}) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst instance = new JSONCanvasViewer(\n\t\t\tObject.assign(options, { container: containerRef.current }) as UserOptions<T>,\n\t\t\tmodules,\n\t\t);\n\t\treturn instance.dispose;\n\t}, []);\n\n\treturn (\n\t\t<section\n\t\t\tref={containerRef}\n\t\t\tdangerouslySetInnerHTML={{ __html: prerenderedContent }}\n\t\t\tstyle={style}\n\t\t\tclassName={className}\n\t\t\tid={id}\n\t\t/>\n\t);\n}\n","import type { MarkdownParser } from '$/declarations';\n\nexport default function (parser?: MarkdownParser) {\n\treturn {\n\t\tname: 'json-canvas-vite-plugin',\n\t\tasync transform(code: string, id: string) {\n\t\t\tif (!id.endsWith('.canvas')) return null;\n\t\t\ttry {\n\t\t\t\tconst json = JSON.parse(code) as JSONCanvas;\n\t\t\t\tif (parser && json.nodes)\n\t\t\t\t\tawait Promise.all(\n\t\t\t\t\t\tjson.nodes.map(async node => {\n\t\t\t\t\t\t\tif (node.type === 'text') node.text = await parser(node.text);\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\treturn {\n\t\t\t\t\tcode: `export default ${JSON.stringify(json)}`,\n\t\t\t\t\tmap: null,\n\t\t\t\t};\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(`[json-canvas] Failed to parse: ${id}`);\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t},\n\t};\n}\n"],"names":["async","renderToString","options","render","node","parse","type","text","file","match","path","parsedContent","response","fetch","result","frontmatterMatch","loadMarkdown","split","pop","fileProcessor","url","renderer","markdownParser","markdown","nodes","canvas","basePath","attachmentDir","forEach","includes","props","__props","isPrerendering","window","viewerRef","useTemplateRef","viewer","prerender","__temp","__restore","_withAsyncContext","onMounted","value","JSONCanvasViewer","Object","assign","container","modules","onUnmounted","dispose","_createElementBlock","ref","innerHTML","_unref","style","prerenderedContent","className","id","containerRef","useRef","useEffect","current","React","createElement","dangerouslySetInnerHTML","__html","parser","name","transform","code","endsWith","json","JSON","Promise","all","map","stringify","e","console","error"],"mappings":"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"}

package/dist/bridges.js

@@ -1,2 +1,2 @@
-import{defineComponent as e,useTemplateRef as t,withAsyncContext as n,onMounted as a,onUnmounted as i,createElementBlock as r,openBlock as o,unref as s}from"vue";import{J as l}from"./index-u8PUIMyl.js";async function c(e){const t=t=>function(e,t){switch(e.type){case"text":return t(e.text);case"file":return function(e,t){if(e.file.match(/\.md$/i))return async function(e,t){let n;try{const a=await fetch(e),i=await a.text(),r=i.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);n=r?await t(r[2]):await t(i)}catch{n="Failed to load content."}return n}(e.file,t);if(e.file.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i))return`<img src="${e.file}" alt="${e.file.split("/").pop()}">`;if(e.file.match(/\.(mp3|wav)$/i))return`<audio src="${e.file}" controls></audio>`}(e,t);case"link":return`<a href="${e.url}" target="_blank" rel="nofollow">${e.url}</a>`;default:return""}}(t,e.markdownParser||(e=>e)),n=e.canvas.nodes||[],a=e.attachmentDir||"./";n.forEach(e=>{if("file"===e.type&&!e.file.includes("http")){const t=e.file.split("/");e.file=a+t.pop()}});let i="";return n.forEach(e=>{i+=t(e)}),i}function u(e){return{name:"json-canvas-vite-plugin",async transform(t,n){if(!n.endsWith(".canvas"))return null;try{const n=JSON.parse(t);return e&&n.nodes&&await Promise.all(n.nodes.map(async t=>{"text"===t.type&&(t.text=await e(t.text))})),{code:`export default ${JSON.stringify(n)}`,map:null}}catch(a){throw console.error(`[json-canvas] Failed to parse: ${n}`),a}}}}const f=["innerHTML"],p=/* @__PURE__ */e({__name:"vueComponent",props:{modules:{},options:{},isSSR:{type:Boolean}},async setup(e){let u,p;const m=e,d=m.isSSR||"undefined"==typeof window,w=t("viewerRef");let h=null;const v=d?([u,p]=n(()=>c(m.options)),u=await u,p(),u):"";return a(()=>{w.value&&(h=new l(Object.assign(m.options,{container:w.value}),m.modules))}),i(()=>{h?.dispose(),h=null}),(e,t)=>(o(),r("section",{ref_key:"viewerRef",ref:w,innerHTML:s(v),style:{"max-height":"100vh","max-width":"100vw"}},null,8,f))}});export{p as JSONCanvasViewerVue,u as jsonCanvasVitePlugin,c as renderToString};
+import{useRef as e,useEffect as t}from"react";import{J as n}from"./index-ujiv9m9Y.js";import{defineComponent as r,useTemplateRef as a,withAsyncContext as i,onMounted as s,onUnmounted as o,createElementBlock as l,openBlock as c,unref as u}from"vue";function f({modules:r,options:a,prerenderedContent:i="",className:s,style:o,id:l}){const c=e(null);return t(()=>{if(!c.current)return;return new n(Object.assign(a,{container:c.current}),r).dispose},[]),/* @__PURE__ */React.createElement("section",{ref:c,dangerouslySetInnerHTML:{__html:i},style:o,className:s,id:l})}async function p(e){const t=t=>function(e,t){switch(e.type){case"text":return t(e.text);case"file":return function(e,t){if(e.file.match(/\.md$/i))return async function(e,t){let n;try{const r=await fetch(e),a=await r.text(),i=a.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);n=i?await t(i[2]):await t(a)}catch{n="Failed to load content."}return n}(e.file,t);if(e.file.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i))return`<img src="${e.file}" alt="${e.file.split("/").pop()}">`;if(e.file.match(/\.(mp3|wav)$/i))return`<audio src="${e.file}" controls></audio>`}(e,t);case"link":return`<a href="${e.url}" target="_blank" rel="nofollow">${e.url}</a>`;default:return""}}(t,e.markdownParser||(e=>e)),n=e.canvas.nodes||[],r=e.attachmentDir||"./";n.forEach(e=>{if("file"===e.type&&!e.file.includes("http")){const t=e.file.split("/");e.file=r+t.pop()}});let a="";return n.forEach(e=>{a+=t(e)}),a}function d(e){return{name:"json-canvas-vite-plugin",async transform(t,n){if(!n.endsWith(".canvas"))return null;try{const n=JSON.parse(t);return e&&n.nodes&&await Promise.all(n.nodes.map(async t=>{"text"===t.type&&(t.text=await e(t.text))})),{code:`export default ${JSON.stringify(n)}`,map:null}}catch(r){throw console.error(`[json-canvas] Failed to parse: ${n}`),r}}}}const m=["innerHTML"],w=/* @__PURE__ */r({__name:"vueComponent",props:{modules:{},options:{},isPrerendering:{type:Boolean}},async setup(e){let t,r;const f=e,d=f.isPrerendering||"undefined"==typeof window,w=a("viewerRef");let h=null;const y=d?([t,r]=i(()=>p(f.options)),t=await t,r(),t):"";return s(()=>{w.value&&(h=new n(Object.assign(f.options,{container:w.value}),f.modules))}),o(()=>{h?.dispose(),h=null}),(e,t)=>(c(),l("section",{ref_key:"viewerRef",ref:w,innerHTML:u(y),style:{"max-height":"100vh","max-width":"100vw"}},null,8,m))}});export{f as JSONCanvasViewerReact,w as JSONCanvasViewerVue,d as jsonCanvasVitePlugin,p as renderToString};
 //# sourceMappingURL=bridges.js.map

package/dist/bridges.js.map

@@ -1 +1 @@
-{"version":3,"file":"bridges.js","sources":["../src/bridges/renderToString.ts","../src/bridges/vitePlugin.ts","../src/bridges/vueComponent.vue"],"sourcesContent":["import type { MarkdownParser } from '$/declarations';\n\nexport default async function (options: {\n\tcanvas: JSONCanvas;\n\tattachmentDir?: string;\n\tmarkdownParser?: MarkdownParser;\n}) {\n\tconst render = (node: JSONCanvasNode) =>\n\t\trenderer(node, options.markdownParser || ((markdown: string) => markdown));\n\tconst nodes = options.canvas.nodes || [];\n\tconst basePath = options.attachmentDir || './';\n\tnodes.forEach(node => {\n\t\tif (node.type === 'file' && !node.file.includes('http')) {\n\t\t\tconst file = node.file.split('/');\n\t\t\tnode.file = basePath + file.pop();\n\t\t}\n\t});\n\tlet result = '';\n\tnodes.forEach(node => {\n\t\tresult += render(node);\n\t});\n\treturn result;\n}\n\nfunction renderer(node: JSONCanvasNode, parse: MarkdownParser) {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn parse(node.text);\n\t\tcase 'file':\n\t\t\treturn fileProcessor(node, parse);\n\t\tcase 'link':\n\t\t\treturn `<a href=\"${node.url}\" target=\"_blank\" rel=\"nofollow\">${node.url}</a>`;\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\nfunction fileProcessor(node: JSONCanvasFileNode, parse: MarkdownParser) {\n\tif (node.file.match(/\\.md$/i)) return loadMarkdown(node.file, parse);\n\telse if (node.file.match(/\\.(png|jpg|jpeg|gif|svg|webp)$/i))\n\t\treturn `<img src=\"${node.file}\" alt=\"${node.file.split('/').pop()}\">`;\n\telse if (node.file.match(/\\.(mp3|wav)$/i)) return `<audio src=\"${node.file}\" controls></audio>`;\n}\n\nasync function loadMarkdown(path: string, parse: MarkdownParser) {\n\tlet parsedContent: string;\n\ttry {\n\t\tconst response = await fetch(path);\n\t\tconst result = await response.text();\n\t\tconst frontmatterMatch = result.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n\t\tif (frontmatterMatch) parsedContent = await parse(frontmatterMatch[2]);\n\t\telse parsedContent = await parse(result);\n\t} catch {\n\t\tparsedContent = 'Failed to load content.';\n\t}\n\treturn parsedContent;\n}\n","import type { MarkdownParser } from '$/declarations';\n\nexport default function (parser?: MarkdownParser) {\n\treturn {\n\t\tname: 'json-canvas-vite-plugin',\n\t\tasync transform(code: string, id: string) {\n\t\t\tif (!id.endsWith('.canvas')) return null;\n\t\t\ttry {\n\t\t\t\tconst json = JSON.parse(code) as JSONCanvas;\n\t\t\t\tif (parser && json.nodes)\n\t\t\t\t\tawait Promise.all(\n\t\t\t\t\t\tjson.nodes.map(async node => {\n\t\t\t\t\t\t\tif (node.type === 'text') node.text = await parser(node.text);\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\treturn {\n\t\t\t\t\tcode: `export default ${JSON.stringify(json)}`,\n\t\t\t\t\tmap: null,\n\t\t\t\t};\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(`[json-canvas] Failed to parse: ${id}`);\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t},\n\t};\n}\n","<script lang=\"ts\" generic=\"T extends ModuleInputCtor\" setup>\nimport { onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\nimport renderToString from './renderToString';\n\ntype ComponentOptions<T extends ModuleInputCtor> = {\n\tmodules?: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tisSSR?: boolean;\n};\n\nconst props = defineProps<ComponentOptions<T>>();\n\nconst isSSR = props.isSSR || typeof window === 'undefined';\nconst viewerRef = useTemplateRef('viewerRef');\nlet viewer: JSONCanvasViewer<ModuleInputCtor> | null = null;\nconst prerender = isSSR ? await renderToString(props.options) : '';\n\nonMounted(() => {\n\tif (!viewerRef.value) return;\n\tviewer = new JSONCanvasViewer(\n\t\tObject.assign(props.options, { container: viewerRef.value }) as UserOptions<T>,\n\t\tprops.modules,\n\t);\n});\n\nonUnmounted(() => {\n\tviewer?.dispose();\n\tviewer = null;\n});\n</script>\n\n<template>\n\t<section ref=\"viewerRef\" v-html=\"prerender\" style=\"max-height: 100vh; max-width: 100vw;\" />\n</template>\n"],"names":["async","renderToString","options","render","node","parse","type","text","file","match","path","parsedContent","response","fetch","result","frontmatterMatch","loadMarkdown","split","pop","fileProcessor","url","renderer","markdownParser","markdown","nodes","canvas","basePath","attachmentDir","forEach","includes","vitePlugin","parser","name","transform","code","id","endsWith","json","JSON","Promise","all","map","stringify","e","console","error","props","__props","isSSR","window","viewerRef","useTemplateRef","viewer","prerender","__temp","__restore","_withAsyncContext","onMounted","value","JSONCanvasViewer","Object","assign","container","modules","onUnmounted","dispose","_createElementBlock","ref","innerHTML","_unref","style"],"mappings":"0MAEAA,eAAAC,EAA+BC,GAK9B,MAAMC,EAAUC,GAiBjB,SAAkBA,EAAsBC,GACvC,OAAQD,EAAKE,MACZ,IAAK,OACJ,OAAOD,EAAMD,EAAKG,MACnB,IAAK,OACJ,OAQH,SAAuBH,EAA0BC,GAChD,GAAID,EAAKI,KAAKC,MAAM,UAAW,OAMhCT,eAA4BU,EAAcL,GACzC,IAAIM,EACJ,IACC,MAAMC,QAAiBC,MAAMH,GACvBI,QAAeF,EAASL,OACxBQ,EAAmBD,EAAOL,MAAM,qCAChBE,EAAlBI,QAAwCV,EAAMU,EAAiB,UACxCV,EAAMS,EAClC,CAAA,MACCH,EAAgB,yBACjB,CACA,OAAOA,CACR,CAlBuCK,CAAaZ,EAAKI,KAAMH,GAAK,GAC1DD,EAAKI,KAAKC,MAAM,mCACxB,MAAO,aAAaL,EAAKI,cAAcJ,EAAKI,KAAKS,MAAM,KAAKC,UAAK,GACzDd,EAAKI,KAAKC,MAAM,iBAAkB,MAAO,eAAeL,EAAKI,yBACvE,CAbUW,CAAcf,EAAMC,GAC5B,IAAK,OACJ,MAAO,YAAYD,EAAKgB,uCAAuChB,EAAKgB,UACrE,QACC,MAAO,GAEV,CA3BEC,CAASjB,EAAMF,EAAQoB,gBAAA,CAAoBC,GAAqBA,IAC3DC,EAAQtB,EAAQuB,OAAOD,OAAS,GAChCE,EAAWxB,EAAQyB,eAAiB,KAC1CH,EAAMI,QAAQxB,IACb,GAAkB,SAAdA,EAAKE,OAAoBF,EAAKI,KAAKqB,SAAS,QAAS,CACxD,MAAMrB,EAAOJ,EAAKI,KAAKS,MAAM,KAC7Bb,EAAKI,KAAOkB,EAAWlB,EAAKU,KAC7B,IAED,IAAIJ,EAAS,GAIb,OAHAU,EAAMI,QAAQxB,IACbU,GAAUX,EAAOC,KAEXU,CACR,CCpBA,SAAAgB,EAAyBC,GACxB,MAAO,CACNC,KAAM,0BACN,eAAMC,CAAUC,EAAcC,GAC7B,IAAKA,EAAGC,SAAS,WAAY,OAAO,KACpC,IACC,MAAMC,EAAOC,KAAKjC,MAAM6B,GAOxB,OANIH,GAAUM,EAAKb,aACZe,QAAQC,IACbH,EAAKb,MAAMiB,IAAIzC,MAAMI,IACF,SAAdA,EAAKE,OAAiBF,EAAKG,WAAawB,EAAO3B,EAAKG,UAGpD,CACN2B,KAAM,kBAAkBI,KAAKI,UAAUL,KACvCI,IAAK,KAEP,OAASE,GAER,MADAC,QAAQC,MAAM,kCAAkCV,KAC1CQ,CACP,CACD,EAEF,2ICbA,MAAMG,EAAQC,EAERC,EAAQF,EAAME,OAA2B,oBAAXC,OAC9BC,EAAYC,EAAe,aACjC,IAAIC,EAAmD,KACvD,MAAMC,EAAYL,IAAQM,EAAAC,GAAAC,EAAA,IAAMvD,EAAe6C,EAAM5C,2BAAW,UAEhEuD,EAAU,KACJP,EAAUQ,QACfN,EAAS,IAAIO,EACZC,OAAOC,OAAOf,EAAM5C,QAAS,CAAE4D,UAAWZ,EAAUQ,QACpDZ,EAAMiB,YAIRC,EAAY,KACXZ,GAAQa,UACRb,EAAS,mBAKTc,EAA2F,UAAA,SAA9E,YAAJC,IAAIjB,EAAYkB,UAAQC,EAAAhB,GAAWiB,MAAA,CAAA,aAAA,QAAA,YAAA"}
+{"version":3,"file":"bridges.js","sources":["../src/bridges/reactComponent.tsx","../src/bridges/renderToString.ts","../src/bridges/vitePlugin.ts","../src/bridges/vueComponent.vue"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\n\nexport default function JSONCanvasViewerReact<T extends ModuleInputCtor>({\n\tmodules,\n\toptions,\n\tprerenderedContent = '',\n\tclassName,\n\tstyle,\n\tid,\n}: {\n\tmodules: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tprerenderedContent?: string;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tid?: string;\n}) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\t\tconst instance = new JSONCanvasViewer(\n\t\t\tObject.assign(options, { container: containerRef.current }) as UserOptions<T>,\n\t\t\tmodules,\n\t\t);\n\t\treturn instance.dispose;\n\t}, []);\n\n\treturn (\n\t\t<section\n\t\t\tref={containerRef}\n\t\t\tdangerouslySetInnerHTML={{ __html: prerenderedContent }}\n\t\t\tstyle={style}\n\t\t\tclassName={className}\n\t\t\tid={id}\n\t\t/>\n\t);\n}\n","import type { MarkdownParser } from '$/declarations';\n\nexport default async function (options: {\n\tcanvas: JSONCanvas;\n\tattachmentDir?: string;\n\tmarkdownParser?: MarkdownParser;\n}) {\n\tconst render = (node: JSONCanvasNode) =>\n\t\trenderer(node, options.markdownParser || ((markdown: string) => markdown));\n\tconst nodes = options.canvas.nodes || [];\n\tconst basePath = options.attachmentDir || './';\n\tnodes.forEach(node => {\n\t\tif (node.type === 'file' && !node.file.includes('http')) {\n\t\t\tconst file = node.file.split('/');\n\t\t\tnode.file = basePath + file.pop();\n\t\t}\n\t});\n\tlet result = '';\n\tnodes.forEach(node => {\n\t\tresult += render(node);\n\t});\n\treturn result;\n}\n\nfunction renderer(node: JSONCanvasNode, parse: MarkdownParser) {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn parse(node.text);\n\t\tcase 'file':\n\t\t\treturn fileProcessor(node, parse);\n\t\tcase 'link':\n\t\t\treturn `<a href=\"${node.url}\" target=\"_blank\" rel=\"nofollow\">${node.url}</a>`;\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\nfunction fileProcessor(node: JSONCanvasFileNode, parse: MarkdownParser) {\n\tif (node.file.match(/\\.md$/i)) return loadMarkdown(node.file, parse);\n\telse if (node.file.match(/\\.(png|jpg|jpeg|gif|svg|webp)$/i))\n\t\treturn `<img src=\"${node.file}\" alt=\"${node.file.split('/').pop()}\">`;\n\telse if (node.file.match(/\\.(mp3|wav)$/i)) return `<audio src=\"${node.file}\" controls></audio>`;\n}\n\nasync function loadMarkdown(path: string, parse: MarkdownParser) {\n\tlet parsedContent: string;\n\ttry {\n\t\tconst response = await fetch(path);\n\t\tconst result = await response.text();\n\t\tconst frontmatterMatch = result.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n\t\tif (frontmatterMatch) parsedContent = await parse(frontmatterMatch[2]);\n\t\telse parsedContent = await parse(result);\n\t} catch {\n\t\tparsedContent = 'Failed to load content.';\n\t}\n\treturn parsedContent;\n}\n","import type { MarkdownParser } from '$/declarations';\n\nexport default function (parser?: MarkdownParser) {\n\treturn {\n\t\tname: 'json-canvas-vite-plugin',\n\t\tasync transform(code: string, id: string) {\n\t\t\tif (!id.endsWith('.canvas')) return null;\n\t\t\ttry {\n\t\t\t\tconst json = JSON.parse(code) as JSONCanvas;\n\t\t\t\tif (parser && json.nodes)\n\t\t\t\t\tawait Promise.all(\n\t\t\t\t\t\tjson.nodes.map(async node => {\n\t\t\t\t\t\t\tif (node.type === 'text') node.text = await parser(node.text);\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\treturn {\n\t\t\t\t\tcode: `export default ${JSON.stringify(json)}`,\n\t\t\t\t\tmap: null,\n\t\t\t\t};\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(`[json-canvas] Failed to parse: ${id}`);\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t},\n\t};\n}\n","<script lang=\"ts\" generic=\"T extends ModuleInputCtor\" setup>\nimport { onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport JSONCanvasViewer from '$';\nimport type { ModuleInputCtor, UserOptions } from '$/declarations';\nimport renderToString from './renderToString';\n\ntype ComponentOptions<T extends ModuleInputCtor> = {\n\tmodules?: T;\n\toptions: Omit<UserOptions<T>, 'container'>;\n\tisPrerendering?: boolean;\n};\n\nconst props = defineProps<ComponentOptions<T>>();\n\nconst isPrerendering = props.isPrerendering || typeof window === 'undefined';\nconst viewerRef = useTemplateRef('viewerRef');\nlet viewer: JSONCanvasViewer<ModuleInputCtor> | null = null;\nconst prerender = isPrerendering ? await renderToString(props.options) : '';\n\nonMounted(() => {\n\tif (!viewerRef.value) return;\n\tviewer = new JSONCanvasViewer(\n\t\tObject.assign(props.options, { container: viewerRef.value }) as UserOptions<T>,\n\t\tprops.modules,\n\t);\n});\n\nonUnmounted(() => {\n\tviewer?.dispose();\n\tviewer = null;\n});\n</script>\n\n<template>\n\t<section ref=\"viewerRef\" v-html=\"prerender\" style=\"max-height: 100vh; max-width: 100vw;\" />\n</template>\n"],"names":["JSONCanvasViewerReact","modules","options","prerenderedContent","className","style","id","containerRef","useRef","useEffect","current","JSONCanvasViewer","Object","assign","container","dispose","React","createElement","ref","dangerouslySetInnerHTML","__html","async","renderToString","render","node","parse","type","text","file","match","path","parsedContent","response","fetch","result","frontmatterMatch","loadMarkdown","split","pop","fileProcessor","url","renderer","markdownParser","markdown","nodes","canvas","basePath","attachmentDir","forEach","includes","vitePlugin","parser","name","transform","code","endsWith","json","JSON","Promise","all","map","stringify","e","console","error","props","__props","isPrerendering","window","viewerRef","useTemplateRef","viewer","prerender","__temp","__restore","_withAsyncContext","onMounted","value","onUnmounted","_createElementBlock","innerHTML","_unref"],"mappings":"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"}