@draftably/solid 0.4.0 → 0.6.0

package/README.md

@@ -5,13 +5,14 @@ Draftably diagrams in Solid. `DraftDiagram` wraps the `<draft-diagram>` element
 cleanup when it unmounts. Any number of diagrams can share a page.
 
 ```sh
-pnpm add @draftably/solid
+pnpm add @draftably/solid @draftably/runtime
 ```
 
 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`.
+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`.
 
-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.
+[Solid and SolidStart](https://draftably.dev/docs/solid) 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 SolidStart server and strict-CSP code.

package/dist/editor.d.ts

@@ -1,7 +1,7 @@
 /** `<DraftEditor>` for Solid: drag boxes and lines, and get the `.draft` source back. */
 import type { DraftEditorElement, EditorOptions } from '@draftably/editor/element';
 import { type JSX } from 'solid-js';
-import { type HostEventProps } from './events.js';
+import { type ElementAttributes, type HostEventProps } from './events.js';
 export type { DraftEditorElement, EditorOptions };
 declare module 'solid-js' {
     namespace JSX {
@@ -13,7 +13,8 @@ declare module 'solid-js' {
         }
     }
 }
-export interface DraftEditorProps extends HostEventProps {
+/** The element's props, its event props, and any other attribute, such as `data-theme`. */
+export interface DraftEditorProps extends HostEventProps, ElementAttributes {
     /** `.draft` source. Passing back the source from `onChange` does not redraw. */
     source: string;
     /** Every `mountEditor` option but `source` and `onChange`. Callbacks apply live. */

package/dist/editor.jsx

@@ -1,6 +1,8 @@
-import { onMount } from 'solid-js';
-import { listenHostEvents } from './events.js';
+import { onMount, splitProps } from 'solid-js';
+import { elementAttributes, EVENT_PROPS, listenHostEvents, } from './events.js';
+const OWN = ['source', 'options', 'ref', 'class', 'style', 'children'];
 export function DraftEditor(props) {
+    const [, , rest] = splitProps(props, OWN, EVENT_PROPS);
     let el;
     // The editor loads in the browser only, so server rendering and viewer-only pages skip it.
     onMount(() => import('@draftably/editor/element').catch((error) => {
@@ -15,7 +17,7 @@ export function DraftEditor(props) {
     // 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.options === undefined ? {} : { 'prop:options': props.options })} {...elementAttributes(rest)}>
       {props.children}
     </draft-editor>);
 }

package/dist/events.d.ts

@@ -1,9 +1,22 @@
 /** 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`. */
+import { type HostEventDetail, type HostEventName, type HostEvents } from '@draftably/runtime/host';
+import type { JSX } from 'solid-js';
+export type { HostEventDetail, HostEventName, HostEvents };
+/**
+ * `onCamera`, `onSelect`, … : each receives the event's `detail`. `onLink` and `onContextmenu`
+ * also get `preventDefault()`.
+ */
 export type HostEventProps = {
-    [K in HostEventName as `on${Capitalize<K>}`]?: (detail: HostEvents[K]) => void;
+    [K in HostEventName as `on${Capitalize<K>}`]?: (detail: HostEventDetail<K>) => void;
 };
+/** The event prop names, which the components keep off the element. */
+export declare const EVENT_PROPS: ("onAnchors" | "onUpdate" | "onRender" | "onDiagnostics" | "onCamera" | "onItemactivate" | "onLink" | "onContextmenu" | "onSelect" | "onChange")[];
 /** Listen for every host event on `node`; each call reads the latest prop. */
 export declare function listenHostEvents(node: HTMLElement, props: HostEventProps): void;
+/** The DOM attributes a component passes to its element, such as `data-theme`, `id` or `aria-*`. */
+export type ElementAttributes = Omit<JSX.HTMLAttributes<HTMLElement>, keyof HostEventProps | 'children' | 'ref' | 'class' | 'style'>;
+/**
+ * Writes hyphenated names such as `data-theme` as attributes. On a custom element, Solid's spread
+ * sets every other name as a property, so `data-theme` would become `el.dataTheme`.
+ */
+export declare function elementAttributes(rest: object): Record<string, unknown>;

package/dist/events.js

@@ -1,9 +1,18 @@
 /** Event props from the runtime's one list of events: a new event adds no lines here. */
-import { HOST_EVENTS } from '@draftably/runtime/host';
+import { HOST_EVENTS, hostDetail, } from '@draftably/runtime/host';
+/** The event prop names, which the components keep off the element. */
+export const EVENT_PROPS = HOST_EVENTS.map(name => `on${name[0].toUpperCase()}${name.slice(1)}`);
 /** 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));
+        node.addEventListener(`draft-${name}`, event => props[key]?.(hostDetail(event)));
     }
 }
+/**
+ * Writes hyphenated names such as `data-theme` as attributes. On a custom element, Solid's spread
+ * sets every other name as a property, so `data-theme` would become `el.dataTheme`.
+ */
+export function elementAttributes(rest) {
+    return Object.fromEntries(Object.entries(rest).map(([key, value]) => [key.includes('-') ? `attr:${key}` : key, value]));
+}

package/dist/index.d.ts

@@ -3,10 +3,10 @@ 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';
+import { type ElementAttributes, 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 { ElementAttributes, HostEventDetail, HostEventName, HostEventProps, HostEvents, } from './events.js';
 export type { DraftDiagramElement, UpdateResult, ViewerOptions };
 declare module 'solid-js' {
     namespace JSX {
@@ -21,7 +21,8 @@ declare module 'solid-js' {
         }
     }
 }
-export interface DraftDiagramProps extends HostEventProps {
+/** The element's props, its event props, and any other attribute, such as `data-theme`. */
+export interface DraftDiagramProps extends HostEventProps, ElementAttributes {
     /** `.draft` source. A change redraws the diagram and keeps the camera. */
     source: string;
     /** A declared emphasis state to show. */

package/dist/index.jsx

@@ -1,10 +1,23 @@
 /** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and event props. */
 import '@draftably/runtime/element';
-import { Show } from 'solid-js';
-import { listenHostEvents } from './events.js';
+import { Show, splitProps } from 'solid-js';
+import { elementAttributes, EVENT_PROPS, listenHostEvents, } from './events.js';
 export { renderSvg } from '@draftably/runtime';
 export { HOST_EVENTS } from '@draftably/runtime/host';
+const OWN = [
+    'source',
+    'state',
+    'label',
+    'outline',
+    'svg',
+    'options',
+    'ref',
+    'class',
+    'style',
+    'children',
+];
 export function DraftDiagram(props) {
+    const [, , rest] = splitProps(props, OWN, EVENT_PROPS);
     return (<draft-diagram ref={(node) => {
             listenHostEvents(node, props);
             props.ref?.(node);
@@ -12,7 +25,7 @@ export function DraftDiagram(props) {
     // 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.options === undefined ? {} : { 'prop:options': props.options })} {...elementAttributes(rest)}>
       <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.4.0",
+  "version": "0.6.0",
   "description": "Solid components for Draftably diagrams.",
   "license": "MIT",
   "type": "module",
@@ -23,8 +23,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@draftably/runtime": "0.4.0",
-    "@draftably/editor": "0.4.0"
+    "@draftably/runtime": "0.6.0",
+    "@draftably/editor": "0.6.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8"