@json-canvas-viewer/preact 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +92 -0
- package/dist/Viewer.d.ts +45 -0
- package/dist/index.d.ts +2 -0
- package/dist/preact.js +4 -0
- package/dist/preact.js.map +1 -0
- package/package.json +61 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-2026 Hesprs (Hēsperus)
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<h1 align="center">
|
|
2
|
+
<img src="../../assets/logo.svg" alt="JSON Canvas Viewer logo" width="280px">
|
|
3
|
+
<br />
|
|
4
|
+
JSON Canvas Viewer Preact
|
|
5
|
+
<br />
|
|
6
|
+
</h1>
|
|
7
|
+
|
|
8
|
+
<h4 align="center">JSON Canvas Viewer as a Preact component</h4>
|
|
9
|
+
|
|
10
|
+
<p align="center">
|
|
11
|
+
<a href="https://github.com/hesprs/json-canvas-viewer/wiki">
|
|
12
|
+
<strong>Documentation</strong>
|
|
13
|
+
</a> •
|
|
14
|
+
<a href="https://www.npmjs.com/package/json-canvas-viewer">
|
|
15
|
+
<strong>Vanilla</strong>
|
|
16
|
+
</a> •
|
|
17
|
+
<a href="https://www.npmjs.com/package/vite-plugin-json-canvas">
|
|
18
|
+
<strong>Vite Plugin</strong>
|
|
19
|
+
</a> •
|
|
20
|
+
<a href="https://www.npmjs.com/package/@json-canvas-viewer/react">
|
|
21
|
+
<strong>React Component</strong>
|
|
22
|
+
</a> •
|
|
23
|
+
<a href="https://www.npmjs.com/package/@json-canvas-viewer/vue">
|
|
24
|
+
<strong>Vue Component</strong>
|
|
25
|
+
</a> •
|
|
26
|
+
<strong>Preact Component</strong>
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
## ✏️ Description
|
|
30
|
+
|
|
31
|
+
This is the Preact component of JSON Canvas Viewer, it wraps around the vanilla viewer class to provide a seamless integration with Preact. This package additionally re-exports everything from the core package, so you do not need to install the core package separately.
|
|
32
|
+
|
|
33
|
+
Install this package if you want to use JSON Canvas Viewer in a **Preact** project. If you are not using it, please head to the corresponding package in the navigation bar above.
|
|
34
|
+
|
|
35
|
+
## 📦 Installation
|
|
36
|
+
|
|
37
|
+
Install with your favorite package manager:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm add @json-canvas-viewer/preact
|
|
41
|
+
|
|
42
|
+
# or
|
|
43
|
+
pnpm add @json-canvas-viewer/preact
|
|
44
|
+
|
|
45
|
+
# or
|
|
46
|
+
yarn add @json-canvas-viewer/preact
|
|
47
|
+
|
|
48
|
+
# or
|
|
49
|
+
bun add @json-canvas-viewer/preact
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Now you have two options: **build-time** canvas parsing or **client-side** canvas parsing.
|
|
53
|
+
|
|
54
|
+
### Build-time Canvas Parsing
|
|
55
|
+
|
|
56
|
+
This is the recommended way to parse canvas data, it will result in significantly smaller bundle size and faster load times.
|
|
57
|
+
|
|
58
|
+
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.
|
|
59
|
+
|
|
60
|
+
After bundler setup, you can directly import a canvas file and use it in viewer instantiation:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { JSONCanvasViewerComponent } from '@json-canvas-viewer/preact';
|
|
64
|
+
import canvas from 'path/to/your.canvas';
|
|
65
|
+
|
|
66
|
+
export function App() {
|
|
67
|
+
return <JSONCanvasViewerComponent canvas={canvas} />;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Client-side Canvas Parsing
|
|
72
|
+
|
|
73
|
+
This method doesn't require any bundler setup. You just need to import the parser and fetch the canvas file:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { JSONCanvasViewerComponent, fetchCanvas, parser } from '@json-canvas-viewer/preact';
|
|
77
|
+
|
|
78
|
+
export async function App() {
|
|
79
|
+
return (
|
|
80
|
+
<JSONCanvasViewerComponent
|
|
81
|
+
canvas={await fetchCanvas('path/to/your.canvas')}
|
|
82
|
+
options={{ parser }}
|
|
83
|
+
/>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Refer to the [documentation](https://github.com/hesprs/json-canvas-viewer/wiki/) for more details.
|
|
89
|
+
|
|
90
|
+
## 📝 Copyright & License
|
|
91
|
+
|
|
92
|
+
Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [MIT License](https://mit-license.org/)
|
package/dist/Viewer.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ComponentChildren } from 'preact';
|
|
2
|
+
import { Options, JSONCanvasViewerInterface, GeneralModuleCtor, Hook, JSONCanvasTextNode, JSONCanvasLinkNode, JSONCanvasFileNode, JSONCanvas } from 'json-canvas-viewer';
|
|
3
|
+
type ModuleInputCtor = Array<GeneralModuleCtor>;
|
|
4
|
+
interface TextSlotProps {
|
|
5
|
+
content: string;
|
|
6
|
+
node: JSONCanvasTextNode;
|
|
7
|
+
onActive: Hook;
|
|
8
|
+
onLoseActive: Hook;
|
|
9
|
+
}
|
|
10
|
+
interface LinkSlotProps {
|
|
11
|
+
content: string;
|
|
12
|
+
node: JSONCanvasLinkNode;
|
|
13
|
+
onActive: Hook;
|
|
14
|
+
onLoseActive: Hook;
|
|
15
|
+
}
|
|
16
|
+
interface FileSlotProps {
|
|
17
|
+
content: string;
|
|
18
|
+
node: JSONCanvasFileNode;
|
|
19
|
+
onActive: Hook;
|
|
20
|
+
onLoseActive: Hook;
|
|
21
|
+
}
|
|
22
|
+
type ViewerHandle<T extends ModuleInputCtor> = {
|
|
23
|
+
viewer: JSONCanvasViewerInterface<T> | null;
|
|
24
|
+
};
|
|
25
|
+
type ViewerProps<T extends ModuleInputCtor = ModuleInputCtor> = {
|
|
26
|
+
modules?: T;
|
|
27
|
+
canvas?: JSONCanvas;
|
|
28
|
+
attachmentDir?: string;
|
|
29
|
+
attachments?: Record<string, string>;
|
|
30
|
+
theme?: 'dark' | 'light';
|
|
31
|
+
options?: Omit<Options<T>, 'container' | 'theme' | 'canvas' | 'attachmentDir' | 'nodeComponents' | 'attachments'>;
|
|
32
|
+
text?: (props: TextSlotProps) => ComponentChildren;
|
|
33
|
+
markdown?: (props: FileSlotProps) => ComponentChildren;
|
|
34
|
+
image?: (props: FileSlotProps) => ComponentChildren;
|
|
35
|
+
video?: (props: FileSlotProps) => ComponentChildren;
|
|
36
|
+
audio?: (props: FileSlotProps) => ComponentChildren;
|
|
37
|
+
link?: (props: LinkSlotProps) => ComponentChildren;
|
|
38
|
+
prerenderHtml?: string;
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: preact.CSSProperties;
|
|
41
|
+
};
|
|
42
|
+
declare const _default: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<ViewerProps<ModuleInputCtor>> & {
|
|
43
|
+
ref?: import('preact').Ref<ViewerHandle<ModuleInputCtor>> | undefined;
|
|
44
|
+
}>;
|
|
45
|
+
export default _default;
|
package/dist/index.d.ts
ADDED
package/dist/preact.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{JSONCanvasViewer as e}from"json-canvas-viewer";export*from"json-canvas-viewer";import{options as t,Fragment as n}from"preact";import{forwardRef as r,createPortal as a,flushSync as o}from"preact/compat";import{useRef as c,useState as i,useImperativeHandle as u,useMemo as m,useLayoutEffect as s,useEffect as l}from"preact/hooks";var d=0;function v(e,n,r,a,o,c){n||(n={});var i,u,m=n;if("ref"in m)for(u in m={},n)"ref"==u?i=n[u]:m[u]=n[u];var s={type:e,props:m,key:r,ref:i,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--d,__i:-1,__u:0,__source:o,__self:c};if("function"==typeof e&&(i=e.defaultProps))for(u in i)void 0===m[u]&&(m[u]=i[u]);return t.vnode&&t.vnode(s),s}function f(e){const t=c(e);return t.current=e,t}const p=r(function(t,r){const d=c(null),p=c(null),h=f(t.text),_=f(t.markdown),k=f(t.image),w=f(t.video),x=f(t.audio),g=f(t.link),y=c(/* @__PURE__ */new Map),[,D]=i(0);u(r,()=>({viewer:p.current}),[]);const H=m(()=>{function e(e){return(t,n,r,a,c,i)=>{const u=e();u&&(!function(e,t,n){y.current.set(e,{id:e,container:t,element:n}),o(()=>D(e=>e+1))}(r.id,t,u({content:n,node:r,onActive:c,onLoseActive:i})),a.subscribe(()=>{var e;e=r.id,y.current.delete(e)}))}}const n={};return t.text&&(n.text=e(()=>h.current)),t.markdown&&(n.markdown=e(()=>_.current)),t.image&&(n.image=e(()=>k.current)),t.video&&(n.video=e(()=>w.current)),t.audio&&(n.audio=e(()=>x.current)),t.link&&(n.link=e(()=>g.current)),n},[t.text,t.markdown,t.image,t.video,t.audio,t.link]);s(()=>{if(d.current)return p.current=new e({...t.options??{},container:d.current,theme:t.theme,canvas:t.canvas,attachmentDir:t.attachmentDir,attachments:t.attachments,nodeComponents:H},t.modules),()=>{p.current?.dispose(),p.current=null,y.current.clear()}},[]),l(()=>{p.current?.changeTheme(t.theme)},[t.theme]),l(()=>{p.current?.load({canvas:t.canvas,attachmentDir:t.attachmentDir,attachments:t.attachments})},[t.canvas,t.attachmentDir,t.attachments]);const b=Array.from(y.current.values()).map(e=>a(e.element,e.container));/* @__PURE__ */
|
|
2
|
+
return v(n,{children:[
|
|
3
|
+
/* @__PURE__ */v("section",{ref:e=>{d.current=e},className:t.className,style:{maxHeight:"100vh",maxWidth:"100vw",...t.style},dangerouslySetInnerHTML:t.prerenderHtml?{__html:t.prerenderHtml}:void 0}),b]})});export{p as JSONCanvasViewerComponent};
|
|
4
|
+
//# sourceMappingURL=preact.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preact.js","sources":["../../../node_modules/.pnpm/preact@10.28.4/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js","../src/Viewer.tsx"],"sourcesContent":["import{options as r,Fragment as e}from\"preact\";export{Fragment}from\"preact\";var t=/[\"&<]/;function n(r){if(0===r.length||!1===t.test(r))return r;for(var e=0,n=0,o=\"\",f=\"\";n<r.length;n++){switch(r.charCodeAt(n)){case 34:f=\""\";break;case 38:f=\"&\";break;case 60:f=\"<\";break;default:continue}n!==e&&(o+=r.slice(e,n)),o+=f,e=n+1}return n!==e&&(o+=r.slice(e,n)),o}var o=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,f=0,i=Array.isArray;function u(e,t,n,o,i,u){t||(t={});var a,c,p=t;if(\"ref\"in p)for(c in p={},t)\"ref\"==c?a=t[c]:p[c]=t[c];var l={type:e,props:p,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--f,__i:-1,__u:0,__source:i,__self:u};if(\"function\"==typeof e&&(a=e.defaultProps))for(c in a)void 0===p[c]&&(p[c]=a[c]);return r.vnode&&r.vnode(l),l}function a(r){var t=u(e,{tpl:r,exprs:[].slice.call(arguments,1)});return t.key=t.__v,t}var c={},p=/[A-Z]/g;function l(e,t){if(r.attr){var f=r.attr(e,t);if(\"string\"==typeof f)return f}if(t=function(r){return null!==r&&\"object\"==typeof r&&\"function\"==typeof r.valueOf?r.valueOf():r}(t),\"ref\"===e||\"key\"===e)return\"\";if(\"style\"===e&&\"object\"==typeof t){var i=\"\";for(var u in t){var a=t[u];if(null!=a&&\"\"!==a){var l=\"-\"==u[0]?u:c[u]||(c[u]=u.replace(p,\"-$&\").toLowerCase()),s=\";\";\"number\"!=typeof a||l.startsWith(\"--\")||o.test(l)||(s=\"px;\"),i=i+l+\":\"+a+s}}return e+'=\"'+n(i)+'\"'}return null==t||!1===t||\"function\"==typeof t||\"object\"==typeof t?\"\":!0===t?e:e+'=\"'+n(\"\"+t)+'\"'}function s(r){if(null==r||\"boolean\"==typeof r||\"function\"==typeof r)return null;if(\"object\"==typeof r){if(void 0===r.constructor)return r;if(i(r)){for(var e=0;e<r.length;e++)r[e]=s(r[e]);return r}}return n(\"\"+r)}export{u as jsx,l as jsxAttr,u as jsxDEV,s as jsxEscape,a as jsxTemplate,u as jsxs};\n//# sourceMappingURL=jsxRuntime.module.js.map\n","import type { ComponentChildren } from 'preact';\nimport {\n\tJSONCanvasViewer,\n\ttype Options,\n\ttype JSONCanvasViewerInterface,\n\ttype GeneralModuleCtor,\n\ttype Hook,\n\ttype JSONCanvasTextNode,\n\ttype JSONCanvasLinkNode,\n\ttype JSONCanvasFileNode,\n\ttype JSONCanvas,\n} from 'json-canvas-viewer';\nimport { forwardRef, type ForwardedRef, createPortal, flushSync } from 'preact/compat';\nimport {\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'preact/hooks';\n\ntype ModuleInputCtor = Array<GeneralModuleCtor>;\n\ninterface TextSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasTextNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\ninterface LinkSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasLinkNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\ninterface FileSlotProps {\n\tcontent: string;\n\tnode: JSONCanvasFileNode;\n\tonActive: Hook;\n\tonLoseActive: Hook;\n}\n\ntype ViewerHandle<T extends ModuleInputCtor> = {\n\tviewer: JSONCanvasViewerInterface<T> | null;\n};\n\ntype ViewerProps<T extends ModuleInputCtor = ModuleInputCtor> = {\n\tmodules?: T;\n\tcanvas?: JSONCanvas;\n\tattachmentDir?: string;\n\tattachments?: Record<string, string>;\n\ttheme?: 'dark' | 'light';\n\toptions?: Omit<\n\t\tOptions<T>,\n\t\t'container' | 'theme' | 'canvas' | 'attachmentDir' | 'nodeComponents' | 'attachments'\n\t>;\n\ttext?: (props: TextSlotProps) => ComponentChildren;\n\tmarkdown?: (props: FileSlotProps) => ComponentChildren;\n\timage?: (props: FileSlotProps) => ComponentChildren;\n\tvideo?: (props: FileSlotProps) => ComponentChildren;\n\taudio?: (props: FileSlotProps) => ComponentChildren;\n\tlink?: (props: LinkSlotProps) => ComponentChildren;\n\tprerenderHtml?: string;\n\tclassName?: string;\n\tstyle?: preact.CSSProperties;\n};\n\ntype PortalEntry = {\n\tid: string;\n\tcontainer: HTMLDivElement;\n\telement: ComponentChildren;\n};\n\nfunction useLatest<T>(value: T) {\n\tconst ref = useRef(value);\n\tref.current = value;\n\treturn ref;\n}\n\nexport default forwardRef(function ViewerInner<T extends ModuleInputCtor>(\n\tprops: ViewerProps<T>,\n\tref: ForwardedRef<ViewerHandle<T>>,\n) {\n\tconst containerRef = useRef<HTMLElement | null>(null);\n\tconst viewerRef = useRef<JSONCanvasViewerInterface<T> | null>(null);\n\tconst textRef = useLatest(props.text);\n\tconst markdownRef = useLatest(props.markdown);\n\tconst imageRef = useLatest(props.image);\n\tconst videoRef = useLatest(props.video);\n\tconst audioRef = useLatest(props.audio);\n\tconst linkRef = useLatest(props.link);\n\tconst portalsByIdRef = useRef(new Map<string, PortalEntry>());\n\tconst [, forceRender] = useState(0);\n\n\tfunction upsertPortal(id: string, container: HTMLDivElement, element: ComponentChildren) {\n\t\tportalsByIdRef.current.set(id, { id, container, element });\n\t\tflushSync(() => forceRender((x) => x + 1));\n\t}\n\n\tfunction removePortalById(id: string) {\n\t\tportalsByIdRef.current.delete(id);\n\t}\n\n\tuseImperativeHandle(ref, () => ({ viewer: viewerRef.current }), []);\n\n\tconst nodeComponents = useMemo<Options['nodeComponents']>(() => {\n\t\tfunction createNodeFunc<N extends TextSlotProps | FileSlotProps | LinkSlotProps>(\n\t\t\tgetRenderFn: () => ((props: N) => ComponentChildren) | undefined,\n\t\t) {\n\t\t\treturn (\n\t\t\t\tcontainer: HTMLDivElement,\n\t\t\t\tcontent: string,\n\t\t\t\tnode: N['node'],\n\t\t\t\tonBeforeUnmount: Hook,\n\t\t\t\tonActive: Hook,\n\t\t\t\tonLoseActive: Hook,\n\t\t\t) => {\n\t\t\t\tconst renderFn = getRenderFn();\n\t\t\t\tif (!renderFn) return;\n\t\t\t\tupsertPortal(\n\t\t\t\t\tnode.id,\n\t\t\t\t\tcontainer,\n\t\t\t\t\trenderFn({\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\t\tonBeforeUnmount.subscribe(() => {\n\t\t\t\t\tremovePortalById(node.id);\n\t\t\t\t});\n\t\t\t};\n\t\t}\n\n\t\tconst out: Options['nodeComponents'] = {};\n\t\tif (props.text) out.text = createNodeFunc<TextSlotProps>(() => textRef.current);\n\t\tif (props.markdown) out.markdown = createNodeFunc<FileSlotProps>(() => markdownRef.current);\n\t\tif (props.image) out.image = createNodeFunc<FileSlotProps>(() => imageRef.current);\n\t\tif (props.video) out.video = createNodeFunc<FileSlotProps>(() => videoRef.current);\n\t\tif (props.audio) out.audio = createNodeFunc<FileSlotProps>(() => audioRef.current);\n\t\tif (props.link) out.link = createNodeFunc<LinkSlotProps>(() => linkRef.current);\n\t\treturn out;\n\t\t// oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps\n\t}, [props.text, props.markdown, props.image, props.video, props.audio, props.link]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!containerRef.current) return;\n\n\t\tviewerRef.current = new JSONCanvasViewer(\n\t\t\t{\n\t\t\t\t...(props.options ?? ({} as ViewerProps<T>['options'])),\n\t\t\t\tcontainer: containerRef.current as unknown as HTMLDivElement,\n\t\t\t\ttheme: props.theme,\n\t\t\t\tcanvas: props.canvas,\n\t\t\t\tattachmentDir: props.attachmentDir,\n\t\t\t\tattachments: props.attachments,\n\t\t\t\tnodeComponents,\n\t\t\t} as Options<T>,\n\t\t\tprops.modules,\n\t\t);\n\n\t\treturn () => {\n\t\t\tviewerRef.current?.dispose();\n\t\t\tviewerRef.current = null;\n\t\t\t// oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps\n\t\t\tportalsByIdRef.current.clear();\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\tuseEffect(() => {\n\t\tviewerRef.current?.changeTheme(props.theme);\n\t}, [props.theme]);\n\n\tuseEffect(() => {\n\t\tviewerRef.current?.load({\n\t\t\tcanvas: props.canvas,\n\t\t\tattachmentDir: props.attachmentDir,\n\t\t\tattachments: props.attachments,\n\t\t});\n\t}, [props.canvas, props.attachmentDir, props.attachments]);\n\n\tconst portals = Array.from(portalsByIdRef.current.values()).map((p) =>\n\t\tcreatePortal(p.element, p.container),\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<section\n\t\t\t\tref={(el) => {\n\t\t\t\t\tcontainerRef.current = el;\n\t\t\t\t}}\n\t\t\t\tclassName={props.className}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: '100vh',\n\t\t\t\t\tmaxWidth: '100vw',\n\t\t\t\t\t// oxlint-disable-next-line typescript/no-misused-spread\n\t\t\t\t\t...props.style,\n\t\t\t\t}}\n\t\t\t\tdangerouslySetInnerHTML={\n\t\t\t\t\tprops.prerenderHtml ? { __html: props.prerenderHtml } : undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{portals}\n\t\t</>\n\t);\n});\n"],"names":["f","u","e","t","n","o","i","a","c","p","l","type","props","key","ref","__k","__","__b","__e","__c","constructor","__v","__i","__u","__source","__self","defaultProps","r","vnode","useLatest","value","useRef","current","Viewer","forwardRef","containerRef","viewerRef","textRef","text","markdownRef","markdown","imageRef","image","videoRef","video","audioRef","audio","linkRef","link","portalsByIdRef","Map","forceRender","useState","useImperativeHandle","viewer","nodeComponents","useMemo","createNodeFunc","getRenderFn","container","content","node","onBeforeUnmount","onActive","onLoseActive","renderFn","id","element","set","flushSync","x","upsertPortal","subscribe","delete","out","useLayoutEffect","JSONCanvasViewer","options","theme","canvas","attachmentDir","attachments","modules","dispose","clear","useEffect","changeTheme","load","portals","Array","from","values","map","createPortal","jsxs","Fragment","children","jsx","el","className","style","maxHeight","maxWidth","dangerouslySetInnerHTML","prerenderHtml","__html"],"mappings":"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","x_google_ignoreList":[0]}
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@json-canvas-viewer/preact",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "An extensible web-based viewer for JSON Canvas in the form of a Preact component, easy to embed into websites.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"frontend",
|
|
7
|
+
"html-canvas",
|
|
8
|
+
"json-canvas",
|
|
9
|
+
"obsidian-md",
|
|
10
|
+
"preact",
|
|
11
|
+
"preact-component",
|
|
12
|
+
"typescript"
|
|
13
|
+
],
|
|
14
|
+
"homepage": "https://github.com/hesprs/json-canvas-viewer",
|
|
15
|
+
"bugs": {
|
|
16
|
+
"url": "https://github.com/hesprs/json-canvas-viewer/issues"
|
|
17
|
+
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"author": {
|
|
20
|
+
"name": "Hēsperus",
|
|
21
|
+
"email": "hesprs@outlook.com"
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/hesprs/json-canvas-viewer.git"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"./dist"
|
|
29
|
+
],
|
|
30
|
+
"type": "module",
|
|
31
|
+
"sideEffects": false,
|
|
32
|
+
"main": "./dist/index.js",
|
|
33
|
+
"module": "./dist/index.js",
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"exports": {
|
|
36
|
+
".": {
|
|
37
|
+
"types": "./dist/index.d.ts",
|
|
38
|
+
"import": "./dist/index.js"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"json-canvas-viewer": "4.0.0"
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@preact/preset-vite": "^2.10.3",
|
|
49
|
+
"@repo/shared": "0.0.1",
|
|
50
|
+
"vite-plugin-json-canvas": "1.0.0"
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"preact": "^10.28.4"
|
|
54
|
+
},
|
|
55
|
+
"scripts": {
|
|
56
|
+
"lint": "oxlint --type-aware --fix && oxfmt",
|
|
57
|
+
"build": "vite build",
|
|
58
|
+
"check": "tsc && oxfmt --check && oxlint --type-aware",
|
|
59
|
+
"dev": "vite"
|
|
60
|
+
}
|
|
61
|
+
}
|