@draftably/solid 0.2.0 → 0.4.0

package/README.md

@@ -8,5 +8,10 @@ cleanup when it unmounts. Any number of diagrams can share a page.
 pnpm add @draftably/solid
 ```
 
-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. With Vite, add
+`optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] }` to `vite.config`.
+
+The [Solid recipe](https://draftably.dev/docs/frameworks#solid) is a complete, type-checked app: both
+components, an event, your content on a node, a dark theme and server rendering with the `svg`
+prop. CI compiles it from the packed packages.

package/dist/editor.d.ts

@@ -1,23 +1,27 @@
 /** `<DraftEditor>` for Solid: drag boxes and lines, and get the `.draft` source back. */
-import type { DraftEditorElement } from '@draftably/editor/element';
+import type { DraftEditorElement, EditorOptions } from '@draftably/editor/element';
 import { type JSX } from 'solid-js';
-export type { DraftEditorElement };
+import { type HostEventProps } from './events.js';
+export type { DraftEditorElement, EditorOptions };
 declare module 'solid-js' {
     namespace JSX {
         interface IntrinsicElements {
             'draft-editor': JSX.HTMLAttributes<DraftEditorElement> & {
                 source?: string;
+                'prop:options'?: EditorOptions;
             };
         }
     }
 }
-export interface DraftEditorProps {
-    /** `.draft` source. Passing back the text from `onChange` does not redraw. */
+export interface DraftEditorProps extends HostEventProps {
+    /** `.draft` source. Passing back the source from `onChange` does not redraw. */
     source: string;
-    /** Receives the new source after every kept edit, undo and redo. */
-    onChange?: (source: string) => void;
+    /** Every `mountEditor` option but `source` and `onChange`. Callbacks apply live. */
+    options?: EditorOptions;
     ref?: (element: DraftEditorElement) => void;
     class?: string;
     style?: JSX.CSSProperties | string;
+    /** Slot content: children marked `data-draft-slot="body:<id>"` or `"overlay:<id>"`. */
+    children?: JSX.Element;
 }
 export declare function DraftEditor(props: DraftEditorProps): JSX.Element;

package/dist/editor.jsx

@@ -1,19 +1,21 @@
-import { createEffect, onCleanup, onMount } from 'solid-js';
+import { onMount } from 'solid-js';
+import { listenHostEvents } from './events.js';
 export function DraftEditor(props) {
     let el;
     // The editor loads in the browser only, so server rendering and viewer-only pages skip it.
-    onMount(() => void import('@draftably/editor/element'));
-    createEffect(() => {
-        const node = el;
-        const onChange = props.onChange;
-        if (!node || !onChange)
-            return;
-        const listen = (event) => onChange(event.detail);
-        node.addEventListener('draft-change', listen);
-        onCleanup(() => node.removeEventListener('draft-change', listen));
-    });
+    onMount(() => import('@draftably/editor/element').catch((error) => {
+        el?.setAttribute('status', 'error');
+        el?.setAttribute('data-error', String(error));
+    }));
     return (<draft-editor ref={(node) => {
             el = node;
+            listenHostEvents(node, props);
             props.ref?.(node);
-        }} source={props.source} class={props.class} style={props.style}/>);
+        }} source={props.source} class={props.class} 
+    // Only when set: Solid's server HTML writes `style=""` for undefined, which a strict CSP blocks.
+    {...(props.style === undefined ? {} : { style: props.style })} 
+    // Only when set, so options a host set through the ref survive.
+    {...(props.options === undefined ? {} : { 'prop:options': props.options })}>
+      {props.children}
+    </draft-editor>);
 }

package/dist/events.d.ts

@@ -0,0 +1,9 @@
+/** Event props from the runtime's one list of events: a new event adds no lines here. */
+import { type HostEventName, type HostEvents } from '@draftably/runtime/host';
+export type { HostEventName, HostEvents };
+/** `onCamera`, `onSelect`, … : each receives the event's `detail`. */
+export type HostEventProps = {
+    [K in HostEventName as `on${Capitalize<K>}`]?: (detail: HostEvents[K]) => void;
+};
+/** Listen for every host event on `node`; each call reads the latest prop. */
+export declare function listenHostEvents(node: HTMLElement, props: HostEventProps): void;

package/dist/events.js

@@ -0,0 +1,9 @@
+/** Event props from the runtime's one list of events: a new event adds no lines here. */
+import { HOST_EVENTS } from '@draftably/runtime/host';
+/** Listen for every host event on `node`; each call reads the latest prop. */
+export function listenHostEvents(node, props) {
+    for (const name of HOST_EVENTS) {
+        const key = `on${name[0].toUpperCase()}${name.slice(1)}`;
+        node.addEventListener(`draft-${name}`, event => props[key]?.(event.detail));
+    }
+}

package/dist/index.d.ts

@@ -1,8 +1,12 @@
-/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and `onUpdate`. */
+/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and event props. */
 import '@draftably/runtime/element';
 import type { DraftDiagramElement } from '@draftably/runtime/element';
 import type { UpdateResult, ViewerOptions } from '@draftably/runtime/viewer';
 import { type JSX } from 'solid-js';
+import { type HostEventProps } from './events.js';
+export { renderSvg } from '@draftably/runtime';
+export { HOST_EVENTS } from '@draftably/runtime/host';
+export type { HostEventName, HostEventProps, HostEvents } from './events.js';
 export type { DraftDiagramElement, UpdateResult, ViewerOptions };
 declare module 'solid-js' {
     namespace JSX {
@@ -12,11 +16,12 @@ declare module 'solid-js' {
                 state?: string;
                 label?: string;
                 outline?: 'visible' | 'hidden';
+                'prop:options'?: ViewerOptions;
             };
         }
     }
 }
-export interface DraftDiagramProps {
+export interface DraftDiagramProps extends HostEventProps {
     /** `.draft` source. A change redraws the diagram and keeps the camera. */
     source: string;
     /** A declared emphasis state to show. */
@@ -30,10 +35,12 @@ export interface DraftDiagramProps {
      * draws. Server rendering and readers without JavaScript see it.
      */
     svg?: string;
+    /** Every `mountViewer` option. A new object with the same values does nothing. */
     options?: ViewerOptions;
-    onUpdate?: (result: UpdateResult) => void;
     ref?: (element: DraftDiagramElement) => void;
     class?: string;
     style?: JSX.CSSProperties | string;
+    /** Slot content: children marked `data-draft-slot="body:<id>"` or `"overlay:<id>"`. */
+    children?: JSX.Element;
 }
 export declare function DraftDiagram(props: DraftDiagramProps): JSX.Element;

package/dist/index.jsx

@@ -1,25 +1,19 @@
-/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and `onUpdate`. */
+/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and event props. */
 import '@draftably/runtime/element';
-import { createEffect, onCleanup, Show } from 'solid-js';
+import { Show } from 'solid-js';
+import { listenHostEvents } from './events.js';
+export { renderSvg } from '@draftably/runtime';
+export { HOST_EVENTS } from '@draftably/runtime/host';
 export function DraftDiagram(props) {
-    let el;
-    createEffect(() => {
-        if (el && props.options)
-            el.options = props.options;
-    });
-    createEffect(() => {
-        const node = el;
-        const onUpdate = props.onUpdate;
-        if (!node || !onUpdate)
-            return;
-        const listen = (event) => onUpdate(event.detail);
-        node.addEventListener('draft-update', listen);
-        onCleanup(() => node.removeEventListener('draft-update', listen));
-    });
     return (<draft-diagram ref={(node) => {
-            el = node;
+            listenHostEvents(node, props);
             props.ref?.(node);
-        }} source={props.source} state={props.state ?? undefined} label={props.label} outline={props.outline} class={props.class} style={props.style}>
+        }} source={props.source} state={props.state ?? undefined} label={props.label} outline={props.outline} class={props.class} 
+    // Only when set: Solid's server HTML writes `style=""` for undefined, which a strict CSP blocks.
+    {...(props.style === undefined ? {} : { style: props.style })} 
+    // Only when set, so options a host set through the ref survive.
+    {...(props.options === undefined ? {} : { 'prop:options': props.options })}>
       <Show when={props.svg}>{svg => <div innerHTML={svg()}/>}</Show>
+      {props.children}
     </draft-diagram>);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/solid",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Solid components for Draftably diagrams.",
   "license": "MIT",
   "type": "module",
@@ -23,8 +23,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@draftably/runtime": "0.2.0",
-    "@draftably/editor": "0.2.0"
+    "@draftably/runtime": "0.4.0",
+    "@draftably/editor": "0.4.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8"