@draftably/vue 0.2.1 → 0.5.0

package/README.md

@@ -5,8 +5,14 @@ Draftably diagrams in Vue. `DraftDiagram` wraps the `<draft-diagram>` element fr
 cleanup when it unmounts. Any number of diagrams can share a page.
 
 ```sh
-pnpm add @draftably/vue
+pnpm add @draftably/vue @draftably/runtime
 ```
 
-See [Frameworks](https://draftably.dev/docs/frameworks) for the component, server
-rendering with the `svg` prop, and a complete example.
+Import `@draftably/runtime/host.css` once in your client entry: it reserves each element's height
+and hides slot content until the element loads, and it lets marked content take the pointer. With
+Vite 5–7, add `optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] }` to
+`vite.config`.
+
+[Vue and Nuxt](https://draftably.dev/docs/vue) has a complete, type-checked app: both components,
+an event, your content on a node, a dark page and server rendering with the `svg` prop. CI
+compiles it from the packed packages. The same page has the Nuxt server and strict-CSP code.

package/dist/editor.d.ts

@@ -1,22 +1,82 @@
 /** `<DraftEditor>` for Vue 3: drag boxes and lines, and get the `.draft` source back. */
-import type { DraftEditorElement } from '@draftably/editor/element';
-export type { DraftEditorElement };
+import type { DraftEditorElement, EditorOptions } from '@draftably/editor/element';
+import { type PropType } from 'vue';
+export type { DraftEditorElement, EditorOptions };
 export declare const DraftEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /** `.draft` source. Passing back the text from `change` does not redraw. */
+    /** `.draft` source. Passing back the source from `change` does not redraw. */
     source: {
         type: StringConstructor;
         required: true;
     };
+    /** Every `mountEditor` option but `source` and `onChange`. Callbacks apply live. */
+    options: {
+        type: PropType<EditorOptions>;
+        default: undefined;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (_source: string) => true;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** `.draft` source. Passing back the text from `change` does not redraw. */
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("./events.js").HostEmits, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** `.draft` source. Passing back the source from `change` does not redraw. */
     source: {
         type: StringConstructor;
         required: true;
     };
+    /** Every `mountEditor` option but `source` and `onChange`. Callbacks apply live. */
+    options: {
+        type: PropType<EditorOptions>;
+        default: undefined;
+    };
 }>> & Readonly<{
-    onChange?: ((_source: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    onAnchors?: ((detail: {
+        anchors: readonly import("@draftably/runtime/viewer").Anchor[];
+    }) => any) | undefined;
+    onUpdate?: ((detail: import("@draftably/runtime/viewer").UpdateResult | import("@draftably/runtime/host").EditorUpdate) => any) | undefined;
+    onRender?: ((detail: {
+        revision: number;
+        value: Extract<import("@draftably/runtime").RenderResult, {
+            ok: true;
+        }>["value"];
+        geometry: import("@draftably/runtime").Geometry | null;
+    }) => any) | undefined;
+    onDiagnostics?: ((detail: {
+        revision: number;
+        diagnostics: readonly import("@draftably/runtime").Diagnostic[];
+        stale: boolean;
+    }) => any) | undefined;
+    onCamera?: ((detail: {
+        camera: import("@draftably/runtime/viewer").Camera;
+        reason: import("@draftably/runtime/viewer").CameraReason;
+    }) => any) | undefined;
+    onItemactivate?: ((detail: {
+        id: string;
+        kind: "node" | "group" | "edge";
+        input: "pointer" | "keyboard";
+        revision: number;
+    }) => any) | undefined;
+    onLink?: ((detail: Omit<{
+        itemId: string;
+        href: string;
+        target: "_self" | "_blank";
+        preventDefault(): void;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
+    onContextmenu?: ((detail: Omit<{
+        id: string | null;
+        kind?: import("@draftably/runtime/viewer").ItemKind;
+        clientX: number;
+        clientY: number;
+        preventDefault(): void;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
+    onSelect?: ((detail: {
+        ids: readonly string[];
+        reason: "user" | "api";
+    }) => any) | undefined;
+    onChange?: ((detail: {
+        source: string;
+    }) => any) | undefined;
+}>, {
+    options: EditorOptions;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/editor.js

@@ -1,21 +1,31 @@
-import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue';
+import { defineComponent, h, onMounted, ref } from 'vue';
+import { hostEmits, listenHostEvents } from './events.js';
 export const DraftEditor = defineComponent({
     name: 'DraftEditor',
     props: {
-        /** `.draft` source. Passing back the text from `change` does not redraw. */
+        /** `.draft` source. Passing back the source from `change` does not redraw. */
         source: { type: String, required: true },
+        /** Every `mountEditor` option but `source` and `onChange`. Callbacks apply live. */
+        options: { type: Object, default: undefined },
     },
-    emits: { change: (_source) => true },
-    setup(props, { emit, expose }) {
+    emits: hostEmits,
+    setup(props, { emit, expose, slots }) {
         const el = ref();
-        const listen = (event) => emit('change', event.detail);
         onMounted(() => {
+            listenHostEvents(el.value, emit);
             // The editor loads in the browser only, so server rendering and viewer-only pages skip it.
-            void import('@draftably/editor/element');
-            el.value?.addEventListener('draft-change', listen);
+            import('@draftably/editor/element').catch((error) => {
+                el.value?.setAttribute('status', 'error');
+                el.value?.setAttribute('data-error', String(error));
+            });
         });
-        onBeforeUnmount(() => el.value?.removeEventListener('draft-change', listen));
         expose({ element: el });
-        return () => h('draft-editor', { ref: el, source: props.source });
+        // The default slot holds slot content: children marked `data-draft-slot`.
+        return () => h('draft-editor', {
+            ref: el,
+            source: props.source,
+            // Only when set, so options a host set through the ref survive.
+            ...(props.options === undefined ? {} : { '.options': props.options }),
+        }, slots.default?.());
     },
 });

package/dist/events.d.ts

@@ -0,0 +1,13 @@
+/** Emits from the runtime's one list of events: a new event adds no lines here. */
+import { type HostEventDetail, type HostEventName, type HostEvents } from '@draftably/runtime/host';
+export type { HostEventDetail, HostEventName, HostEvents };
+/**
+ * `@camera`, `@select`, … : each receives the event's `detail`. `@link` and `@contextmenu` also
+ * get `preventDefault()`.
+ */
+export type HostEmits = {
+    [K in HostEventName]: (detail: HostEventDetail<K>) => true;
+};
+export declare const hostEmits: HostEmits;
+/** Re-emit every host event from `node`. */
+export declare function listenHostEvents(node: HTMLElement, emit: (name: HostEventName, detail: unknown) => void): void;

package/dist/events.js

@@ -0,0 +1,8 @@
+/** Emits from the runtime's one list of events: a new event adds no lines here. */
+import { HOST_EVENTS, hostDetail, } from '@draftably/runtime/host';
+export const hostEmits = Object.fromEntries(HOST_EVENTS.map(name => [name, null]));
+/** Re-emit every host event from `node`. */
+export function listenHostEvents(node, emit) {
+    for (const name of HOST_EVENTS)
+        node.addEventListener(`draft-${name}`, event => emit(name, hostDetail(event)));
+}

package/dist/index.d.ts

@@ -1,8 +1,11 @@
-/** `<DraftDiagram>` for Vue 3: the `<draft-diagram>` element with Vue props and an `update` event. */
+/** `<DraftDiagram>` for Vue 3: the `<draft-diagram>` element with Vue props and events. */
 import '@draftably/runtime/element';
 import type { DraftDiagramElement } from '@draftably/runtime/element';
 import type { UpdateResult, ViewerOptions } from '@draftably/runtime/viewer';
 import { type PropType } from 'vue';
+export { renderSvg } from '@draftably/runtime';
+export { HOST_EVENTS } from '@draftably/runtime/host';
+export type { HostEmits, HostEventDetail, HostEventName, HostEvents } from './events.js';
 export type { DraftDiagramElement, UpdateResult, ViewerOptions };
 export declare const DraftDiagram: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** `.draft` source. A change redraws the diagram and keeps the camera. */
@@ -30,15 +33,14 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
         type: StringConstructor;
         default: undefined;
     };
+    /** Every `mountViewer` option. A new object with the same values does nothing. */
     options: {
         type: PropType<ViewerOptions>;
         default: undefined;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (_result: UpdateResult) => true;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("./events.js").HostEmits, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** `.draft` source. A change redraws the diagram and keeps the camera. */
     source: {
         type: StringConstructor;
@@ -64,17 +66,67 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
         type: StringConstructor;
         default: undefined;
     };
+    /** Every `mountViewer` option. A new object with the same values does nothing. */
     options: {
         type: PropType<ViewerOptions>;
         default: undefined;
     };
 }>> & Readonly<{
-    onUpdate?: ((_result: UpdateResult) => any) | undefined;
+    onAnchors?: ((detail: {
+        anchors: readonly import("@draftably/runtime/viewer").Anchor[];
+    }) => any) | undefined;
+    onUpdate?: ((detail: UpdateResult | import("@draftably/runtime/host").EditorUpdate) => any) | undefined;
+    onRender?: ((detail: {
+        revision: number;
+        value: Extract<import("@draftably/runtime").RenderResult, {
+            ok: true;
+        }>["value"];
+        geometry: import("@draftably/runtime").Geometry | null;
+    }) => any) | undefined;
+    onDiagnostics?: ((detail: {
+        revision: number;
+        diagnostics: readonly import("@draftably/runtime").Diagnostic[];
+        stale: boolean;
+    }) => any) | undefined;
+    onCamera?: ((detail: {
+        camera: import("@draftably/runtime/viewer").Camera;
+        reason: import("@draftably/runtime/viewer").CameraReason;
+    }) => any) | undefined;
+    onItemactivate?: ((detail: {
+        id: string;
+        kind: "node" | "group" | "edge";
+        input: "pointer" | "keyboard";
+        revision: number;
+    }) => any) | undefined;
+    onLink?: ((detail: Omit<{
+        itemId: string;
+        href: string;
+        target: "_self" | "_blank";
+        preventDefault(): void;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
+    onContextmenu?: ((detail: Omit<{
+        id: string | null;
+        kind?: import("@draftably/runtime/viewer").ItemKind;
+        clientX: number;
+        clientY: number;
+        preventDefault(): void;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
+    onSelect?: ((detail: {
+        ids: readonly string[];
+        reason: "user" | "api";
+    }) => any) | undefined;
+    onChange?: ((detail: {
+        source: string;
+    }) => any) | undefined;
 }>, {
+    options: ViewerOptions;
     label: string;
     state: string | null;
     outline: "visible" | "hidden";
     svg: string;
-    options: ViewerOptions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default DraftDiagram;

package/dist/index.js

@@ -1,6 +1,9 @@
-/** `<DraftDiagram>` for Vue 3: the `<draft-diagram>` element with Vue props and an `update` event. */
+/** `<DraftDiagram>` for Vue 3: the `<draft-diagram>` element with Vue props and events. */
 import '@draftably/runtime/element';
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, watchEffect, } from 'vue';
+import { defineComponent, h, onMounted, ref } from 'vue';
+import { hostEmits, listenHostEvents } from './events.js';
+export { renderSvg } from '@draftably/runtime';
+export { HOST_EVENTS } from '@draftably/runtime/host';
 export const DraftDiagram = defineComponent({
     name: 'DraftDiagram',
     props: {
@@ -14,18 +17,13 @@ export const DraftDiagram = defineComponent({
         outline: { type: String, default: undefined },
         /** Static SVG from `renderSvg(source, { target: 'inline', idPrefix })`, shown until the viewer draws. */
         svg: { type: String, default: undefined },
+        /** Every `mountViewer` option. A new object with the same values does nothing. */
         options: { type: Object, default: undefined },
     },
-    emits: { update: (_result) => true },
-    setup(props, { emit, expose }) {
+    emits: hostEmits,
+    setup(props, { emit, expose, slots }) {
         const el = ref();
-        const listen = (event) => emit('update', event.detail);
-        onMounted(() => el.value?.addEventListener('draft-update', listen));
-        onBeforeUnmount(() => el.value?.removeEventListener('draft-update', listen));
-        watchEffect(() => {
-            if (el.value && props.options)
-                el.value.options = props.options;
-        });
+        onMounted(() => listenHostEvents(el.value, emit));
         expose({ element: el });
         return () => h('draft-diagram', {
             ref: el,
@@ -33,7 +31,11 @@ export const DraftDiagram = defineComponent({
             state: props.state ?? undefined,
             label: props.label,
             outline: props.outline,
-        }, props.svg ? [h('div', { innerHTML: props.svg })] : []);
+            // Only when set, so options a host set through the ref survive.
+            ...(props.options === undefined ? {} : { '.options': props.options }),
+        }, 
+        // The default slot holds slot content: children marked `data-draft-slot`.
+        [...(props.svg ? [h('div', { innerHTML: props.svg })] : []), ...(slots.default?.() ?? [])]);
     },
 });
 export default DraftDiagram;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/vue",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "description": "Vue components for Draftably diagrams.",
   "license": "MIT",
   "type": "module",
@@ -23,8 +23,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@draftably/runtime": "0.3.0",
-    "@draftably/editor": "0.3.0"
+    "@draftably/runtime": "0.5.0",
+    "@draftably/editor": "0.5.0"
   },
   "peerDependencies": {
     "vue": "^3.4"