@continuum-dev/react 0.1.1

package/lib/renderer.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useContext, useMemo } from 'react';
+import { getChildNodes } from '@continuum-dev/contract';
+import { ContinuumContext } from './context.js';
+import { NodeStateScopeContext, useContinuumState } from './hooks.js';
+import { FallbackComponent } from './fallback.js';
+import { NodeErrorBoundary } from './error-boundary.js';
+const noopOnChange = () => undefined;
+function toCanonicalId(id, parentPath) {
+    return parentPath.length > 0 ? `${parentPath}/${id}` : id;
+}
+function useResolvedComponent(definition) {
+    const ctx = useContext(ContinuumContext);
+    if (!ctx) {
+        throw new Error('ContinuumRenderer must be used within a <ContinuumProvider>');
+    }
+    const { componentMap } = ctx;
+    return (componentMap[definition.type] ??
+        componentMap['default'] ??
+        FallbackComponent);
+}
+function normalizeCollectionNodeValue(value) {
+    const items = value?.value?.items;
+    if (!Array.isArray(items)) {
+        return { value: { items: [] } };
+    }
+    return {
+        ...value,
+        value: {
+            items: items.map((item) => ({
+                values: item && typeof item === 'object' && item.values && typeof item.values === 'object'
+                    ? { ...item.values }
+                    : {},
+            })),
+        },
+    };
+}
+function toRelativeNodeId(collectionCanonicalId, nodeId) {
+    if (nodeId === collectionCanonicalId) {
+        return null;
+    }
+    if (nodeId.startsWith(`${collectionCanonicalId}/`)) {
+        return nodeId.slice(collectionCanonicalId.length + 1);
+    }
+    return null;
+}
+function normalizeMinItems(value) {
+    if (value === undefined || value < 0) {
+        return 0;
+    }
+    return Math.floor(value);
+}
+function normalizeMaxItems(value) {
+    if (value === undefined || value < 0) {
+        return undefined;
+    }
+    return Math.floor(value);
+}
+function createInitialCollectionState(node) {
+    const minItems = normalizeMinItems(node.minItems);
+    return {
+        items: Array.from({ length: minItems }, () => ({
+            values: collectTemplateDefaults(node.template),
+        })),
+    };
+}
+function collectTemplateDefaults(node, parentPath = '') {
+    const nodeId = toCanonicalId(node.id, parentPath);
+    if (node.type === 'collection') {
+        return {
+            [nodeId]: {
+                value: createInitialCollectionState(node),
+            },
+        };
+    }
+    const values = {};
+    if ('defaultValue' in node && node.defaultValue !== undefined) {
+        values[nodeId] = { value: node.defaultValue };
+    }
+    const children = getChildNodes(node);
+    for (const child of children) {
+        Object.assign(values, collectTemplateDefaults(child, nodeId));
+    }
+    return values;
+}
+const StatefulNodeRenderer = memo(function StatefulNodeRenderer({ definition, parentPath }) {
+    const Component = useResolvedComponent(definition);
+    const canonicalId = toCanonicalId(definition.id, parentPath);
+    const [value, setValue] = useContinuumState(canonicalId);
+    if (definition.hidden) {
+        return null;
+    }
+    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: value, onChange: setValue, definition: definition, nodeId: canonicalId }) }) }));
+});
+const ContainerNodeRenderer = memo(function ContainerNodeRenderer({ definition, parentPath }) {
+    const Component = useResolvedComponent(definition);
+    if (definition.hidden) {
+        return null;
+    }
+    const canonicalId = toCanonicalId(definition.id, parentPath);
+    const childNodes = getChildNodes(definition).map((child) => (_jsx(NodeRenderer, { definition: child, parentPath: canonicalId }, child.id)));
+    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: undefined, onChange: noopOnChange, definition: definition, nodeId: canonicalId, children: childNodes }) }) }));
+});
+const CollectionItemRenderer = memo(function CollectionItemRenderer({ collectionCanonicalId, itemIndex, template, templateDefaults, canRemove, onRemove, }) {
+    const ctx = useContext(ContinuumContext);
+    if (!ctx) {
+        throw new Error('ContinuumRenderer must be used within a <ContinuumProvider>');
+    }
+    const { session, store } = ctx;
+    const scope = useMemo(() => ({
+        subscribeNode: (_nodeId, listener) => store.subscribeNode(collectionCanonicalId, listener),
+        getNodeValue: (nodeId) => {
+            const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
+            if (!relativeId) {
+                return undefined;
+            }
+            const collectionValue = normalizeCollectionNodeValue(store.getNodeValue(collectionCanonicalId));
+            return (collectionValue.value.items[itemIndex]?.values?.[relativeId] ??
+                templateDefaults[relativeId]);
+        },
+        setNodeValue: (nodeId, nextValue) => {
+            const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
+            if (!relativeId) {
+                return;
+            }
+            const collectionValue = normalizeCollectionNodeValue(store.getNodeValue(collectionCanonicalId));
+            const items = collectionValue.value.items.map((item) => ({
+                values: { ...item.values },
+            }));
+            while (items.length <= itemIndex) {
+                items.push({ values: {} });
+            }
+            items[itemIndex] = {
+                values: {
+                    ...items[itemIndex].values,
+                    [relativeId]: nextValue,
+                },
+            };
+            session.updateState(collectionCanonicalId, {
+                ...collectionValue,
+                value: { items },
+            });
+        },
+    }), [collectionCanonicalId, itemIndex, session, store, templateDefaults]);
+    return (_jsx(NodeStateScopeContext.Provider, { value: scope, children: _jsxs("div", { "data-continuum-collection-item": `${collectionCanonicalId}:${itemIndex}`, className: "continuum-collection-item", children: [_jsx(NodeRenderer, { definition: template, parentPath: collectionCanonicalId }), canRemove ? (_jsx("div", { className: "continuum-collection-item-actions", children: _jsx("button", { type: "button", "data-continuum-collection-remove": `${collectionCanonicalId}:${itemIndex}`, onClick: () => onRemove(itemIndex), className: "continuum-collection-remove", children: "\u00D7" }) })) : null] }) }));
+});
+const CollectionNodeRenderer = memo(function CollectionNodeRenderer({ definition, parentPath, }) {
+    const Component = useResolvedComponent(definition);
+    const canonicalId = toCanonicalId(definition.id, parentPath);
+    const [collectionValue, setCollectionValue] = useContinuumState(canonicalId);
+    const normalizedCollection = normalizeCollectionNodeValue(collectionValue);
+    const minItems = normalizeMinItems(definition.minItems);
+    const maxItems = normalizeMaxItems(definition.maxItems);
+    const templateDefaults = useMemo(() => collectTemplateDefaults(definition.template), [definition.template]);
+    const canAdd = maxItems === undefined ||
+        normalizedCollection.value.items.length < maxItems;
+    const canRemove = normalizedCollection.value.items.length > minItems;
+    if (definition.hidden) {
+        return null;
+    }
+    const addItem = () => {
+        if (!canAdd) {
+            return;
+        }
+        const items = [
+            ...normalizedCollection.value.items.map((item) => ({
+                values: { ...item.values },
+            })),
+            { values: { ...templateDefaults } },
+        ];
+        setCollectionValue({
+            ...normalizedCollection,
+            value: { items },
+        });
+    };
+    const removeItem = (index) => {
+        if (!canRemove) {
+            return;
+        }
+        const items = normalizedCollection.value.items
+            .map((item) => ({ values: { ...item.values } }))
+            .filter((_, itemIndex) => itemIndex !== index);
+        if (items.length < minItems) {
+            return;
+        }
+        setCollectionValue({
+            ...normalizedCollection,
+            value: { items },
+        });
+    };
+    const renderedItems = normalizedCollection.value.items.map((_, index) => (_jsx(CollectionItemRenderer, { collectionCanonicalId: canonicalId, itemIndex: index, template: definition.template, templateDefaults: templateDefaults, canRemove: canRemove, onRemove: removeItem }, index)));
+    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsxs(Component, { value: collectionValue, onChange: setCollectionValue, definition: definition, nodeId: canonicalId, children: [renderedItems, _jsx("div", { className: "continuum-collection-add-container", children: _jsx("button", { type: "button", "data-continuum-collection-add": canonicalId, onClick: addItem, disabled: !canAdd, className: "continuum-collection-add", children: "+ Add item" }) })] }) }) }));
+});
+const NodeRenderer = memo(function NodeRenderer({ definition, parentPath }) {
+    if (definition.type === 'collection') {
+        return _jsx(CollectionNodeRenderer, { definition: definition, parentPath: parentPath });
+    }
+    const childNodes = getChildNodes(definition);
+    if (childNodes.length > 0) {
+        return _jsx(ContainerNodeRenderer, { definition: definition, parentPath: parentPath });
+    }
+    return _jsx(StatefulNodeRenderer, { definition: definition, parentPath: parentPath });
+});
+export function ContinuumRenderer({ view }) {
+    return (_jsx("div", { "data-continuum-view": view.viewId, children: (view.nodes ?? []).map((node) => (_jsx(NodeRenderer, { definition: node, parentPath: "" }, node.id))) }));
+}

package/lib/types.d.ts

@@ -0,0 +1,31 @@
+import type { ViewNode, NodeValue } from '@continuum-dev/contract';
+import type { SessionOptions } from '@continuum-dev/session';
+import type { ComponentType } from 'react';
+export interface ContinuumNodeProps<T = NodeValue> {
+    value: T | undefined;
+    onChange: (value: T) => void;
+    definition: ViewNode;
+    nodeId?: string;
+    children?: React.ReactNode;
+    [prop: string]: unknown;
+}
+export type ContinuumNodeMap = Record<string, ComponentType<ContinuumNodeProps<any>>>;
+export type ContinuumComponentProps<T = NodeValue> = ContinuumNodeProps<T>;
+export type ContinuumComponentMap = ContinuumNodeMap;
+export interface ContinuumPersistError {
+    reason: 'size_limit' | 'storage_error';
+    key: string;
+    attemptedBytes?: number;
+    maxBytes?: number;
+    cause?: unknown;
+}
+export interface ContinuumProviderProps {
+    components: ContinuumNodeMap;
+    persist?: 'sessionStorage' | 'localStorage' | false;
+    storageKey?: string;
+    maxPersistBytes?: number;
+    onPersistError?: (error: ContinuumPersistError) => void;
+    sessionOptions?: SessionOptions;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,SAAS;IAC/C,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CACnC,MAAM,EACN,aAAa,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CACvC,CAAC;AAEF,MAAM,MAAM,uBAAuB,CAAC,CAAC,GAAG,SAAS,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,YAAY,GAAG,eAAe,CAAC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,gBAAgB,GAAG,cAAc,GAAG,KAAK,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@continuum-dev/react",
+  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "React bindings for the Continuum continuity runtime",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brytoncooper/cooper-continuum.git",
+    "directory": "packages/react"
+  },
+  "author": "Bryton Cooper",
+  "keywords": [
+    "continuum",
+    "ai",
+    "ui",
+    "continuity",
+    "reconciliation",
+    "react",
+    "hooks",
+    "provider"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.d.ts.map",
+    "README.md",
+    "LICENSE*"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@continuum-dev/contract": "^0.1.1",
+    "@continuum-dev/session": "^0.1.1"
+  }
+}