@arcanejs/react-toolkit 0.7.0 → 0.8.1

package/README.md

@@ -134,12 +134,11 @@ Please note:
   that is loaded in the browser,
   and then used to render the JSON representation of the `@arcanejs` tree.
 
-- There is currently no ability to introduce custom components with your
-  own JSON definition and `react-dom` rendering in the browser.
-  Apps can only be composed of the below supported components,
-  or composite components directly built by these components.
+- It's possible to define your own custom components,
+  however this functionality is not documented.
 
-  _(This is something that is planned for the future)._
+  You can see code examples of this functionality here in the
+  [custom components example app](https://github.com/arcanejs/arcanejs/tree/main/examples/custom-components).
 
 ## Components
 

package/dist/chunk-CAHNLXTY.mjs

@@ -0,0 +1,246 @@
+import {
+  LoggerContext
+} from "./chunk-TOGR56FN.mjs";
+
+// src/index.tsx
+import Reconciler from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+import * as ld from "@arcanejs/toolkit";
+import { Base, BaseParent } from "@arcanejs/toolkit/components/base";
+
+// src/registry.ts
+import React from "react";
+var prepareComponents = (namespace, defn) => {
+  const entries = Object.entries(defn);
+  const _creators = entries.reduce((acc, [key, cls]) => {
+    acc[key] = (props) => new cls(props);
+    return acc;
+  }, {});
+  const components = entries.reduce(
+    (acc, [key, cls]) => {
+      acc[key] = React.forwardRef(
+        (props, ref) => React.createElement(
+          `${namespace}:${key}`,
+          { ...props, ref },
+          props.children
+        )
+      );
+      return acc;
+    },
+    {}
+  );
+  return {
+    _namespace: namespace,
+    _creators,
+    ...components
+  };
+};
+
+// src/core.ts
+import {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline
+} from "@arcanejs/toolkit";
+var CoreComponents = prepareComponents("core", {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline
+});
+
+// src/index.tsx
+import { jsx } from "react/jsx-runtime";
+var canSetProps = (instance) => instance instanceof Base;
+var hostConfig = ({
+  componentNamespaces
+}) => {
+  const processedNamespaces = {};
+  for (const namespace of componentNamespaces) {
+    if (processedNamespaces[namespace._namespace]) {
+      throw new Error(`Duplicate namespace: ${namespace._namespace}`);
+    }
+    processedNamespaces[namespace._namespace] = namespace;
+  }
+  return {
+    supportsMutation: true,
+    supportsPersistence: false,
+    noTimeout: -1,
+    isPrimaryRenderer: true,
+    supportsHydration: false,
+    afterActiveInstanceBlur: () => null,
+    appendChild: (parentInstance, child) => {
+      if (parentInstance instanceof BaseParent) {
+        parentInstance.appendChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    appendInitialChild: (parentInstance, child) => {
+      if (parentInstance instanceof BaseParent) {
+        parentInstance.appendChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    appendChildToContainer(container, child) {
+      container.appendChild(child);
+    },
+    beforeActiveInstanceBlur: () => null,
+    cancelTimeout: (id) => clearTimeout(id),
+    clearContainer: (container) => container.removeAllChildren(),
+    commitMount: () => {
+      throw new Error(`Unexpected call to commitMount()`);
+    },
+    commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
+      if (canSetProps(instance)) {
+        instance.setProps(updatePayload);
+      } else {
+        throw new Error(`Unexpected Instance: ${instance}`);
+      }
+    },
+    commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
+    createInstance: (type, props) => {
+      const [namespace, typeName] = type.split(":", 2);
+      if (!namespace || !typeName) {
+        throw new Error(`Invalid type: ${type}`);
+      }
+      const components = processedNamespaces[namespace];
+      if (!components) {
+        throw new Error(`Unknown component namespace: ${namespace}`);
+      }
+      const creator = components._creators[typeName];
+      if (!creator) {
+        throw new Error(
+          `Unable to render <${typeName} />, not provided to renderer.`
+        );
+      }
+      const instance = creator(props);
+      return instance;
+    },
+    createTextInstance: (text) => new ld.Label({ text }),
+    detachDeletedInstance: () => null,
+    getChildHostContext: (parentHostContext) => parentHostContext,
+    getCurrentEventPriority: () => DefaultEventPriority,
+    getInstanceFromNode: () => {
+      throw new Error("Not yet implemented.");
+    },
+    getInstanceFromScope: () => {
+      throw new Error("Not yet implemented.");
+    },
+    getPublicInstance: (instance) => instance,
+    getRootHostContext: () => null,
+    insertBefore: (parentInstance, child, beforeChild) => {
+      if (parentInstance instanceof BaseParent) {
+        parentInstance.insertBefore(child, beforeChild);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
+    finalizeInitialChildren: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: () => null,
+    prepareScopeUpdate: () => null,
+    prepareUpdate: (_instance, _type, _oldProps, newProps, _rootContainer, _hostContext) => {
+      const updates = {};
+      for (const [key, val] of Object.entries(newProps)) {
+        if (key !== "children") {
+          updates[key] = val;
+        }
+      }
+      if (Object.keys(updates).length) {
+        return updates;
+      } else {
+        return null;
+      }
+    },
+    removeChild(parentInstance, child) {
+      if (parentInstance instanceof BaseParent) {
+        parentInstance.removeChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    removeChildFromContainer: (container, child) => container.removeChild(child),
+    resetAfterCommit: () => null,
+    resetTextContent: () => {
+      throw new Error(`Unexpected call to resetTextContent()`);
+    },
+    scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
+    shouldSetTextContent: () => false,
+    // Not-implemented
+    hideInstance: () => {
+      console.log("Not-implemented: hideInstance");
+    },
+    hideTextInstance: () => {
+      console.log("Not-implemented: hideTextInstance");
+    },
+    unhideInstance: () => {
+      console.log("Not-implemented: unhideInstance");
+    },
+    unhideTextInstance: () => {
+      console.log("Not-implemented: unhideTextInstance");
+    }
+  };
+};
+var ToolkitRenderer = {
+  renderGroup: (component, container, config = {
+    componentNamespaces: [CoreComponents]
+  }) => {
+    const reconciler = Reconciler(hostConfig(config));
+    const root = reconciler.createContainer(container, 0, false, null);
+    const componentWithContexts = /* @__PURE__ */ jsx(LoggerContext.Provider, { value: container.log, children: component });
+    reconciler.updateContainer(componentWithContexts, root, null);
+  },
+  render: (component, container, rootGroupProps, config = {
+    componentNamespaces: [CoreComponents]
+  }) => {
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
+    container.setRoot(group);
+    ToolkitRenderer.renderGroup(component, group, config);
+  }
+};
+var Button2 = CoreComponents.Button;
+var Group3 = CoreComponents.Group;
+var GroupHeader2 = CoreComponents.GroupHeader;
+var Label3 = CoreComponents.Label;
+var Rect2 = CoreComponents.Rect;
+var SliderButton2 = CoreComponents.SliderButton;
+var Switch2 = CoreComponents.Switch;
+var Tab2 = CoreComponents.Tab;
+var Tabs2 = CoreComponents.Tabs;
+var TextInput2 = CoreComponents.TextInput;
+var Timeline2 = CoreComponents.Timeline;
+
+export {
+  prepareComponents,
+  CoreComponents,
+  ToolkitRenderer,
+  Button2 as Button,
+  Group3 as Group,
+  GroupHeader2 as GroupHeader,
+  Label3 as Label,
+  Rect2 as Rect,
+  SliderButton2 as SliderButton,
+  Switch2 as Switch,
+  Tab2 as Tab,
+  Tabs2 as Tabs,
+  TextInput2 as TextInput,
+  Timeline2 as Timeline
+};

package/dist/chunk-Q54JXYCV.js

@@ -0,0 +1,246 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkRT2VSMJLjs = require('./chunk-RT2VSMJL.js');
+
+// src/index.tsx
+var _reactreconciler = require('react-reconciler'); var _reactreconciler2 = _interopRequireDefault(_reactreconciler);
+var _constants = require('react-reconciler/constants');
+var _toolkit = require('@arcanejs/toolkit'); var ld = _interopRequireWildcard(_toolkit);
+var _base = require('@arcanejs/toolkit/components/base');
+
+// src/registry.ts
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var prepareComponents = (namespace, defn) => {
+  const entries = Object.entries(defn);
+  const _creators = entries.reduce((acc, [key, cls]) => {
+    acc[key] = (props) => new cls(props);
+    return acc;
+  }, {});
+  const components = entries.reduce(
+    (acc, [key, cls]) => {
+      acc[key] = _react2.default.forwardRef(
+        (props, ref) => _react2.default.createElement(
+          `${namespace}:${key}`,
+          { ...props, ref },
+          props.children
+        )
+      );
+      return acc;
+    },
+    {}
+  );
+  return {
+    _namespace: namespace,
+    _creators,
+    ...components
+  };
+};
+
+// src/core.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+var CoreComponents = prepareComponents("core", {
+  Button: _toolkit.Button,
+  Group: _toolkit.Group,
+  GroupHeader: _toolkit.GroupHeader,
+  Label: _toolkit.Label,
+  Rect: _toolkit.Rect,
+  SliderButton: _toolkit.SliderButton,
+  Switch: _toolkit.Switch,
+  Tab: _toolkit.Tab,
+  Tabs: _toolkit.Tabs,
+  TextInput: _toolkit.TextInput,
+  Timeline: _toolkit.Timeline
+});
+
+// src/index.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var canSetProps = (instance) => instance instanceof _base.Base;
+var hostConfig = ({
+  componentNamespaces
+}) => {
+  const processedNamespaces = {};
+  for (const namespace of componentNamespaces) {
+    if (processedNamespaces[namespace._namespace]) {
+      throw new Error(`Duplicate namespace: ${namespace._namespace}`);
+    }
+    processedNamespaces[namespace._namespace] = namespace;
+  }
+  return {
+    supportsMutation: true,
+    supportsPersistence: false,
+    noTimeout: -1,
+    isPrimaryRenderer: true,
+    supportsHydration: false,
+    afterActiveInstanceBlur: () => null,
+    appendChild: (parentInstance, child) => {
+      if (parentInstance instanceof _base.BaseParent) {
+        parentInstance.appendChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    appendInitialChild: (parentInstance, child) => {
+      if (parentInstance instanceof _base.BaseParent) {
+        parentInstance.appendChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    appendChildToContainer(container, child) {
+      container.appendChild(child);
+    },
+    beforeActiveInstanceBlur: () => null,
+    cancelTimeout: (id) => clearTimeout(id),
+    clearContainer: (container) => container.removeAllChildren(),
+    commitMount: () => {
+      throw new Error(`Unexpected call to commitMount()`);
+    },
+    commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
+      if (canSetProps(instance)) {
+        instance.setProps(updatePayload);
+      } else {
+        throw new Error(`Unexpected Instance: ${instance}`);
+      }
+    },
+    commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
+    createInstance: (type, props) => {
+      const [namespace, typeName] = type.split(":", 2);
+      if (!namespace || !typeName) {
+        throw new Error(`Invalid type: ${type}`);
+      }
+      const components = processedNamespaces[namespace];
+      if (!components) {
+        throw new Error(`Unknown component namespace: ${namespace}`);
+      }
+      const creator = components._creators[typeName];
+      if (!creator) {
+        throw new Error(
+          `Unable to render <${typeName} />, not provided to renderer.`
+        );
+      }
+      const instance = creator(props);
+      return instance;
+    },
+    createTextInstance: (text) => new ld.Label({ text }),
+    detachDeletedInstance: () => null,
+    getChildHostContext: (parentHostContext) => parentHostContext,
+    getCurrentEventPriority: () => _constants.DefaultEventPriority,
+    getInstanceFromNode: () => {
+      throw new Error("Not yet implemented.");
+    },
+    getInstanceFromScope: () => {
+      throw new Error("Not yet implemented.");
+    },
+    getPublicInstance: (instance) => instance,
+    getRootHostContext: () => null,
+    insertBefore: (parentInstance, child, beforeChild) => {
+      if (parentInstance instanceof _base.BaseParent) {
+        parentInstance.insertBefore(child, beforeChild);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
+    finalizeInitialChildren: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: () => null,
+    prepareScopeUpdate: () => null,
+    prepareUpdate: (_instance, _type, _oldProps, newProps, _rootContainer, _hostContext) => {
+      const updates = {};
+      for (const [key, val] of Object.entries(newProps)) {
+        if (key !== "children") {
+          updates[key] = val;
+        }
+      }
+      if (Object.keys(updates).length) {
+        return updates;
+      } else {
+        return null;
+      }
+    },
+    removeChild(parentInstance, child) {
+      if (parentInstance instanceof _base.BaseParent) {
+        parentInstance.removeChild(child);
+      } else {
+        throw new Error(`Unexpected Parent: ${parentInstance}`);
+      }
+    },
+    removeChildFromContainer: (container, child) => container.removeChild(child),
+    resetAfterCommit: () => null,
+    resetTextContent: () => {
+      throw new Error(`Unexpected call to resetTextContent()`);
+    },
+    scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
+    shouldSetTextContent: () => false,
+    // Not-implemented
+    hideInstance: () => {
+      console.log("Not-implemented: hideInstance");
+    },
+    hideTextInstance: () => {
+      console.log("Not-implemented: hideTextInstance");
+    },
+    unhideInstance: () => {
+      console.log("Not-implemented: unhideInstance");
+    },
+    unhideTextInstance: () => {
+      console.log("Not-implemented: unhideTextInstance");
+    }
+  };
+};
+var ToolkitRenderer = {
+  renderGroup: (component, container, config = {
+    componentNamespaces: [CoreComponents]
+  }) => {
+    const reconciler = _reactreconciler2.default.call(void 0, hostConfig(config));
+    const root = reconciler.createContainer(container, 0, false, null);
+    const componentWithContexts = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRT2VSMJLjs.LoggerContext.Provider, { value: container.log, children: component });
+    reconciler.updateContainer(componentWithContexts, root, null);
+  },
+  render: (component, container, rootGroupProps, config = {
+    componentNamespaces: [CoreComponents]
+  }) => {
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
+    container.setRoot(group);
+    ToolkitRenderer.renderGroup(component, group, config);
+  }
+};
+var Button2 = CoreComponents.Button;
+var Group3 = CoreComponents.Group;
+var GroupHeader2 = CoreComponents.GroupHeader;
+var Label3 = CoreComponents.Label;
+var Rect2 = CoreComponents.Rect;
+var SliderButton2 = CoreComponents.SliderButton;
+var Switch2 = CoreComponents.Switch;
+var Tab2 = CoreComponents.Tab;
+var Tabs2 = CoreComponents.Tabs;
+var TextInput2 = CoreComponents.TextInput;
+var Timeline2 = CoreComponents.Timeline;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.prepareComponents = prepareComponents; exports.CoreComponents = CoreComponents; exports.ToolkitRenderer = ToolkitRenderer; exports.Button = Button2; exports.Group = Group3; exports.GroupHeader = GroupHeader2; exports.Label = Label3; exports.Rect = Rect2; exports.SliderButton = SliderButton2; exports.Switch = Switch2; exports.Tab = Tab2; exports.Tabs = Tabs2; exports.TextInput = TextInput2; exports.Timeline = Timeline2;

package/dist/colors.d.mts

@@ -1,14 +1,67 @@
-import React__default from 'react';
-import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.mjs';
-import '@arcanejs/toolkit/components/group';
-import '@arcanejs/toolkit/components/button';
-import '@arcanejs/toolkit/components/label';
-import '@arcanejs/toolkit/components/rect';
-import '@arcanejs/toolkit/components/slider-button';
-import '@arcanejs/toolkit/components/switch';
-import '@arcanejs/toolkit/components/tabs';
-import '@arcanejs/toolkit/components/text-input';
-import '@arcanejs/toolkit/components/timeline';
+import React__default, { Ref } from 'react';
+import { Props as Props$1, Events as Events$1, Group, GroupHeader } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab, TabsProps, Tabs } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline } from '@arcanejs/toolkit/components/timeline';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline>;
+    };
+}
 
 type HslColor = {
     /**

package/dist/colors.d.ts

@@ -1,14 +1,67 @@
-import React__default from 'react';
-import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.js';
-import '@arcanejs/toolkit/components/group';
-import '@arcanejs/toolkit/components/button';
-import '@arcanejs/toolkit/components/label';
-import '@arcanejs/toolkit/components/rect';
-import '@arcanejs/toolkit/components/slider-button';
-import '@arcanejs/toolkit/components/switch';
-import '@arcanejs/toolkit/components/tabs';
-import '@arcanejs/toolkit/components/text-input';
-import '@arcanejs/toolkit/components/timeline';
+import React__default, { Ref } from 'react';
+import { Props as Props$1, Events as Events$1, Group, GroupHeader } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab, TabsProps, Tabs } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline } from '@arcanejs/toolkit/components/timeline';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline>;
+    };
+}
 
 type HslColor = {
     /**