@json-canvas-viewer/vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 Hesprs (Hēsperus)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+<h1 align="center">
+    <img src="../../assets/logo.svg" alt="JSON Canvas Viewer logo" width="280px">
+    <br />
+    JSON Canvas Viewer Vue
+    <br />
+</h1>
+
+<h4 align="center">JSON Canvas Viewer as a Vue component</h4>
+
+<p align="center">
+    <a href="https://github.com/hesprs/json-canvas-viewer/wiki">
+        <strong>Documentation</strong>
+    </a> • 
+    <a href="https://www.npmjs.com/package/json-canvas-viewer">
+        <strong>Vanilla</strong>
+    </a> • 
+    <a href="https://www.npmjs.com/package/vite-plugin-json-canvas">
+        <strong>Vite Plugin</strong>
+    </a> • 
+    <a href="https://www.npmjs.com/package/@json-canvas-viewer/react">
+        <strong>React Component</strong>
+    </a> • 
+    <strong>Vue Component</strong> • 
+    <a href="https://www.npmjs.com/package/@json-canvas-viewer/preact">
+        <strong>Preact Component</strong>
+    </a>
+</p>
+
+## ✏️ Description
+
+This is the Vue component of JSON Canvas Viewer, it wraps around the vanilla viewer class to provide a seamless integration with Vue. This package additionally re-exports everything from the core package, so you do not need to install the core package separately.
+
+Install this package if you want to use JSON Canvas Viewer in a **Vue** project. If you are not using it, please head to the corresponding package in the navigation bar above.
+
+## 📦 Installation
+
+Install with your favorite package manager:
+
+```bash
+npm add @json-canvas-viewer/vue
+
+# or
+pnpm add @json-canvas-viewer/vue
+
+# or
+yarn add @json-canvas-viewer/vue
+
+# or
+bun add @json-canvas-viewer/vue
+```
+
+Now you have two options: **build-time** canvas parsing or **client-side** canvas parsing.
+
+### Build-time Canvas Parsing
+
+This is the recommended way to parse canvas data, it will result in significantly smaller bundle size and faster load times.
+
+Firstly, you need a bundler. JSON Canvas Viewer currently supports [Vite](https://vitejs.dev/) only. Please install [Vite Plugin](https://www.npmjs.com/package/vite-plugin-json-canvas) and setup it.
+
+After bundler setup, you can directly import a canvas file and use it in viewer instantiation:
+
+```vue
+<script setup>
+import { JSONCanvasViewerComponent } from '@json-canvas-viewer/vue';
+import canvas from 'path/to/your.canvas';
+</script>
+
+<template>
+  <Suspense>
+    <!-- Suspense is crucial -->
+    <JSONCanvasViewerComponent :canvas="canvas" />
+  </Suspense>
+</template>
+```
+
+### Client-side Canvas Parsing
+
+This method doesn't require any bundler setup. You just need to import the parser and fetch the canvas file:
+
+```vue
+<script setup>
+import { JSONCanvasViewerComponent, fetchCanvas, parser } from '@json-canvas-viewer/vue';
+</script>
+
+<template>
+  <Suspense>
+    <!-- Suspense is crucial -->
+    <JSONCanvasViewerComponent
+      :canvas="await fetchCanvas('path/to/your.canvas')"
+      :options="{ parser }"
+    />
+  </Suspense>
+</template>
+```
+
+Refer to the [documentation](https://github.com/hesprs/json-canvas-viewer/wiki/) for more details.
+
+## 📝 Copyright & License
+
+Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [MIT License](https://mit-license.org/)

package/dist/Viewer.vue.d.ts

@@ -0,0 +1,57 @@
+import { Options, GeneralModuleCtor, Hook, JSONCanvasTextNode, JSONCanvasLinkNode, JSONCanvasFileNode, JSONCanvas } from 'json-canvas-viewer';
+export type ModuleInputCtor = Array<GeneralModuleCtor>;
+export interface TextSlotProps {
+    content: string;
+    node: JSONCanvasTextNode;
+    onActive: Hook;
+    onLoseActive: Hook;
+}
+export interface LinkSlotProps {
+    content: string;
+    node: JSONCanvasLinkNode;
+    onActive: Hook;
+    onLoseActive: Hook;
+}
+export interface FileSlotProps {
+    content: string;
+    node: JSONCanvasFileNode;
+    onActive: Hook;
+    onLoseActive: Hook;
+}
+declare const _default: <T extends ModuleInputCtor>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
+        modules?: T | undefined;
+        canvas?: JSONCanvas;
+        attachmentDir?: string;
+        attachments?: Record<string, string>;
+        options?: Omit<Options<T>, "canvas" | "attachmentDir" | "attachments" | "theme" | "container" | "nodeComponents"> | undefined;
+        isPrerendering?: boolean;
+        theme?: "dark" | "light";
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        viewer: null;
+    }>): void;
+    attrs: any;
+    slots: Readonly<{
+        text?(props: TextSlotProps): unknown;
+        markdown?(props: FileSlotProps): unknown;
+        image?(props: FileSlotProps): unknown;
+        video?(props: FileSlotProps): unknown;
+        audio?(props: FileSlotProps): unknown;
+        link?(props: LinkSlotProps): unknown;
+    }> & {
+        text?(props: TextSlotProps): unknown;
+        markdown?(props: FileSlotProps): unknown;
+        image?(props: FileSlotProps): unknown;
+        video?(props: FileSlotProps): unknown;
+        audio?(props: FileSlotProps): unknown;
+        link?(props: LinkSlotProps): unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from 'json-canvas-viewer';
+export { default as JSONCanvasViewerComponent } from './Viewer.vue';

package/dist/vue.js

@@ -0,0 +1,2 @@
+import{renderToString as t,JSONCanvasViewer as e}from"json-canvas-viewer";export*from"json-canvas-viewer";import{defineComponent as n,useTemplateRef as a,getCurrentInstance as o,withAsyncContext as s,useSlots as c,watch as r,onMounted as i,onUnmounted as m,openBlock as h,createElementBlock as v,unref as u,createApp as p,reactive as l}from"vue";const d=["innerHTML"],w=/* @__PURE__ */n({__name:"Viewer",props:{modules:{},canvas:{},attachmentDir:{},attachments:{},options:{},isPrerendering:{type:Boolean},theme:{}},async setup(n,{expose:w}){let f,D;const x=n,g=x.isPrerendering??!1,y=a("viewerRef");let C=null;const _=o(),b=g?([f,D]=s(()=>t({canvas:x.canvas??{},attachmentDir:x.attachmentDir,attachments:x.attachments,...x.options})),f=await f,D(),f):"",j=c();function k(t){return(e,n,a,o,s,c)=>{const r=p({render:()=>t(l({content:n,node:a,onActive:s,onLoseActive:c}))});r._context=_.appContext,r.mount(e),o.subscribe(r.unmount)}}return w({viewer:C}),r(()=>x.theme,t=>C?.changeTheme(t)),r(()=>({canvas:x.canvas,attachmentDir:x.attachmentDir,attachments:x.attachments}),({canvas:t,attachmentDir:e,attachments:n})=>C?.load({canvas:t,attachmentDir:e,attachments:n})),i(()=>{if(!y.value)return;const t=["text","markdown","link","audio","image","video"],n={};for(const e of t){const t=j[e];t&&(n[e]=k(t))}C=new e(Object.assign(x.options??{},{container:y.value,theme:x.theme,canvas:x.canvas,attachmentDir:x.attachmentDir,attachments:x.attachments,nodeComponents:n}),x.modules)}),m(()=>{C?.dispose(),C=null}),(t,e)=>(h(),v("section",{ref_key:"viewerRef",ref:y,innerHTML:u(b),style:{"max-height":"100vh","max-width":"100vw"}},null,8,d))}});export{w as JSONCanvasViewerComponent};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sources":["../src/Viewer.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T extends ModuleInputCtor\" setup>\nimport {\n\tonMounted,\n\tonUnmounted,\n\tuseTemplateRef,\n\twatch,\n\tgetCurrentInstance,\n\ttype ComponentInternalInstance,\n\tcreateApp,\n\treactive,\n} from 'vue';\nimport {\n\tJSONCanvasViewer,\n\ttype Options,\n\ttype JSONCanvasViewerInterface,\n\trenderToString,\n\ttype GeneralModuleCtor,\n\ttype Hook,\n\ttype JSONCanvasTextNode,\n\ttype JSONCanvasLinkNode,\n\ttype JSONCanvasFileNode,\n\ttype JSONCanvas,\n} from 'json-canvas-viewer';\n\nexport type ModuleInputCtor = Array<GeneralModuleCtor>;\n\nexport interface TextSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasTextNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\nexport interface LinkSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasLinkNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\nexport interface FileSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasFileNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\ntype ComponentOptions<T extends ModuleInputCtor> = {\n\tmodules?: T;\n\tcanvas?: JSONCanvas;\n\tattachmentDir?: string;\n\tattachments?: Record<string, string>;\n\toptions?: Omit<\n\t\tOptions<T>,\n\t\t'container' | 'theme' | 'canvas' | 'attachmentDir' | 'nodeComponents' | 'attachments'\n\t>;\n\tisPrerendering?: boolean;\n\ttheme?: 'dark' | 'light';\n};\n\nconst props = defineProps<ComponentOptions<T>>();\nconst isPrerendering = props.isPrerendering ?? false;\nconst viewerRef = useTemplateRef('viewerRef');\nlet viewer: JSONCanvasViewerInterface<T> | null = null;\nconst instance = getCurrentInstance() as ComponentInternalInstance;\nconst prerender = isPrerendering\n\t? await renderToString({\n\t\t\tcanvas: props.canvas ?? {},\n\t\t\tattachmentDir: props.attachmentDir,\n\t\t\tattachments: props.attachments,\n\t\t\t...props.options,\n\t\t})\n\t: '';\n\nconst slots = defineSlots<{\n\ttext?(props: TextSlotProps): unknown;\n\tmarkdown?(props: FileSlotProps): unknown;\n\timage?(props: FileSlotProps): unknown;\n\tvideo?(props: FileSlotProps): unknown;\n\taudio?(props: FileSlotProps): unknown;\n\tlink?(props: LinkSlotProps): unknown;\n}>();\ndefineExpose({ viewer });\n\nfunction createNodeFunc<N extends TextSlotProps | FileSlotProps | LinkSlotProps>(\n\tslotFn: (props: N) => unknown,\n) {\n\treturn (\n\t\tcontainer: HTMLDivElement,\n\t\tcontent: string,\n\t\tnode: N['node'],\n\t\tonBeforeUnmount: Hook,\n\t\tonActive: Hook,\n\t\tonLoseActive: Hook,\n\t) => {\n\t\tconst app = createApp({\n\t\t\trender: () =>\n\t\t\t\tslotFn(\n\t\t\t\t\treactive({\n\t\t\t\t\t\tcontent,\n\t\t\t\t\t\tnode,\n\t\t\t\t\t\tonActive,\n\t\t\t\t\t\tonLoseActive,\n\t\t\t\t\t}) as N,\n\t\t\t\t),\n\t\t});\n\t\tapp._context = instance.appContext;\n\t\tapp.mount(container);\n\t\tonBeforeUnmount.subscribe(app.unmount);\n\t};\n}\n\nwatch(\n\t() => props.theme,\n\t(theme) => viewer?.changeTheme(theme),\n);\nwatch(\n\t() => {\n\t\treturn {\n\t\t\tcanvas: props.canvas,\n\t\t\tattachmentDir: props.attachmentDir,\n\t\t\tattachments: props.attachments,\n\t\t};\n\t},\n\t({ canvas, attachmentDir, attachments }) =>\n\t\tviewer?.load({ canvas, attachmentDir, attachments }),\n);\n\nonMounted(() => {\n\tif (!viewerRef.value) return;\n\tconst supportedNodes = ['text', 'markdown', 'link', 'audio', 'image', 'video'] as const;\n\tconst nodeComponents: Options['nodeComponents'] = {};\n\tfor (const nodeType of supportedNodes) {\n\t\tconst slotFunc = slots[nodeType];\n\t\tif (!slotFunc) continue;\n\t\tnodeComponents[nodeType] = createNodeFunc(slotFunc as never);\n\t}\n\tviewer = new JSONCanvasViewer(\n\t\tObject.assign(props.options ?? {}, {\n\t\t\tcontainer: viewerRef.value,\n\t\t\ttheme: props.theme,\n\t\t\tcanvas: props.canvas,\n\t\t\tattachmentDir: props.attachmentDir,\n\t\t\tattachments: props.attachments,\n\t\t\tnodeComponents,\n\t\t}) as Options<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":["props","__props","isPrerendering","viewerRef","useTemplateRef","viewer","instance","getCurrentInstance","prerender","__temp","__restore","_withAsyncContext","renderToString","canvas","attachmentDir","attachments","options","slots","_useSlots","createNodeFunc","slotFn","container","content","node","onBeforeUnmount","onActive","onLoseActive","app","createApp","render","reactive","_context","appContext","mount","subscribe","unmount","__expose","watch","theme","changeTheme","load","onMounted","value","supportedNodes","nodeComponents","nodeType","slotFunc","JSONCanvasViewer","Object","assign","modules","onUnmounted","dispose","_createElementBlock","ref","innerHTML","_unref","style"],"mappings":"qiBA4DA,MAAMA,EAAQC,EACRC,EAAiBF,EAAME,iBAAkB,EACzCC,EAAYC,EAAe,aACjC,IAAIC,EAA8C,KAClD,MAAMC,EAAWC,IACXC,EAAYN,IACfO,EAAAC,GAAAC,EAAA,IAAMC,EAAe,CACrBC,OAAQb,EAAMa,QAAU,CAAA,EACxBC,cAAed,EAAMc,cACrBC,YAAaf,EAAMe,eAChBf,EAAMgB,4BAET,GAEGC,EAAQC,IAUd,SAASC,EACRC,GAEA,MAAO,CACNC,EACAC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAAMC,EAAU,CACrBC,OAAQ,IACPT,EACCU,EAAS,CACRR,UACAC,OACAE,WACAC,oBAIJC,EAAII,SAAWzB,EAAS0B,WACxBL,EAAIM,MAAMZ,GACVG,EAAgBU,UAAUP,EAAIQ,SAEhC,QA5BAC,EAAa,CAAE/B,WA8BfgC,EACC,IAAMrC,EAAMsC,MACXA,GAAUjC,GAAQkC,YAAYD,IAEhCD,EACC,KACQ,CACNxB,OAAQb,EAAMa,OACdC,cAAed,EAAMc,cACrBC,YAAaf,EAAMe,cAGrB,EAAGF,SAAQC,gBAAeC,iBACzBV,GAAQmC,KAAK,CAAE3B,SAAQC,gBAAeC,iBAGxC0B,EAAU,KACT,IAAKtC,EAAUuC,MAAO,OACtB,MAAMC,EAAiB,CAAC,OAAQ,WAAY,OAAQ,QAAS,QAAS,SAChEC,EAA4C,CAAA,EAClD,IAAA,MAAWC,KAAYF,EAAgB,CACtC,MAAMG,EAAW7B,EAAM4B,GAClBC,IACLF,EAAeC,GAAY1B,EAAe2B,GAC3C,CACAzC,EAAS,IAAI0C,EACZC,OAAOC,OAAOjD,EAAMgB,SAAW,CAAA,EAAI,CAClCK,UAAWlB,EAAUuC,MACrBJ,MAAOtC,EAAMsC,MACbzB,OAAQb,EAAMa,OACdC,cAAed,EAAMc,cACrBC,YAAaf,EAAMe,YACnB6B,mBAED5C,EAAMkD,WAIRC,EAAY,KACX9C,GAAQ+C,UACR/C,EAAS,mBAKTgD,EAA0F,UAAA,SAA7E,YAAJC,IAAInD,EAAYoD,UAAQC,EAAAhD,GAAWiD,MAAA,CAAA,aAAA,QAAA,YAAA"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@json-canvas-viewer/vue",
+  "version": "1.0.0",
+  "description": "An extensible web-based viewer for JSON Canvas in the form of a Vue component, easy to embed into websites.",
+  "keywords": [
+    "frontend",
+    "html-canvas",
+    "json-canvas",
+    "obsidian-md",
+    "typescript",
+    "vue",
+    "vue-component"
+  ],
+  "homepage": "https://github.com/hesprs/json-canvas-viewer",
+  "bugs": {
+    "url": "https://github.com/hesprs/json-canvas-viewer/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Hēsperus",
+    "email": "hesprs@outlook.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hesprs/json-canvas-viewer.git"
+  },
+  "files": [
+    "./dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "json-canvas-viewer": "4.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "vite": "^7.3.1",
+    "@repo/shared": "0.0.1",
+    "vite-plugin-json-canvas": "1.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.29"
+  },
+  "scripts": {
+    "lint": "oxlint --type-aware --fix && oxfmt",
+    "build": "vite build",
+    "check": "tsc && oxfmt --check && oxlint --type-aware",
+    "dev": "vite"
+  }
+}