paintcannon-react 0.0.14 → 0.0.16

package/README.md

@@ -124,6 +124,7 @@ All host components accept these event props:
 
 - `onKeyDown`
 - `onKeyUp`
+- `onPaste`
 - `onClick`
 - `onMouseEnter`
 - `onMouseLeave`
@@ -136,6 +137,9 @@ All host components accept these event props:
 - `onTransitionEnd`
 - `onScroll`
 
+`onPaste` receives the same `PaintClipboardEvent` as core, including detected terminal image paths
+through `event.clipboardData.files`.
+
 `style` accepts the following CSS property names. Kebab-case and camelCase are
 both supported:
 

package/dist/src/host-components/button/reconcile-button.js

@@ -3,7 +3,7 @@ import { applyScrollableProps } from "../reconcile-shared.js";
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("button");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: button.type, props, children: [], node };
+    return { kind: "element", type: button.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyCommonProps(node, oldProps, newProps);

package/dist/src/host-components/div/reconcile-div.js

@@ -3,7 +3,7 @@ import { applyScrollableElementProps } from "../reconcile-shared.js";
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("div");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: div.type, props, children: [], node };
+    return { kind: "element", type: div.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);

package/dist/src/host-components/form/reconcile-form.js

@@ -3,7 +3,7 @@ import { applyScrollableElementProps } from "../reconcile-shared.js";
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("form");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: form.type, props, children: [], node };
+    return { kind: "element", type: form.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);

package/dist/src/host-components/input/reconcile-input.js

@@ -3,7 +3,7 @@ import { applyTextControlProps } from "../reconcile-shared.js";
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("input");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: input.type, props, children: [], node };
+    return { kind: "element", type: input.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyCommonProps(node, oldProps, newProps);

package/dist/src/host-components/mounted.d.ts

@@ -11,7 +11,8 @@ export type MountedHostElement<Type extends HostType, Props, Element extends Pai
     kind: "element";
     type: Type;
     props: Props;
-    children: HostNode[];
+    children: Set<HostNode>;
+    parent?: HostParent;
     node: Element;
 };
 export type MountedComponent<Module> = Module extends {
@@ -22,9 +23,13 @@ export type HostElement = MountedComponent<typeof div> | MountedComponent<typeof
 export type HostText = {
     kind: "text";
     text: string;
+    parent?: HostParent;
     node: TextNode;
 };
 export type HostNode = HostElement | HostText;
+export type HostParent = {
+    children: Set<HostNode>;
+};
 declare const hostPropsForType: {
     "paintcannon.div": div.Props;
     "paintcannon.span": span.Props;

package/dist/src/host-components/shared.d.ts

@@ -11,6 +11,7 @@ export type HostComponent<Props, Element extends PaintElement> = React.ForwardRe
 export declare const EVENT_PROP_NAMES: {
     readonly keydown: "onKeyDown";
     readonly keyup: "onKeyUp";
+    readonly paste: "onPaste";
     readonly click: "onClick";
     readonly mouseenter: "onMouseEnter";
     readonly mouseleave: "onMouseLeave";

package/dist/src/host-components/shared.js

@@ -4,6 +4,7 @@ export function typeString(type) {
 export const EVENT_PROP_NAMES = {
     keydown: "onKeyDown",
     keyup: "onKeyUp",
+    paste: "onPaste",
     click: "onClick",
     mouseenter: "onMouseEnter",
     mouseleave: "onMouseLeave",

package/dist/src/host-components/span/reconcile-span.js

@@ -3,7 +3,7 @@ import { applyScrollableElementProps } from "../reconcile-shared.js";
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("span");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: span.type, props, children: [], node };
+    return { kind: "element", type: span.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);

package/dist/src/host-components/textarea/reconcile-textarea.js

@@ -3,7 +3,7 @@ import { applyScrollableProps, applyTextControlProps, } from "../reconcile-share
 export function create(paintCannon, props, applyCommonProps) {
     const node = paintCannon.createElement("textarea");
     applyProps(node, {}, props, applyCommonProps);
-    return { kind: "element", type: textarea.type, props, children: [], node };
+    return { kind: "element", type: textarea.type, props, children: new Set(), node };
 }
 export function applyProps(node, oldProps, newProps, applyCommonProps) {
     applyCommonProps(node, oldProps, newProps);

package/dist/src/reconciler.js

@@ -21,14 +21,17 @@ const reconciler = createReconciler({
     },
     resetAfterCommit(container) {
         container.paintCannon.commitTransaction();
-        container.paintCannon.render();
+        if (container.presentCommits) {
+            container.paintCannon.render();
+        }
     },
     preparePortalMount: () => null,
     clearContainer(container) {
         for (const child of container.children) {
+            child.parent = undefined;
             destroyHostNode(child);
         }
-        container.children = [];
+        container.children.clear();
         return false;
     },
     shouldSetTextContent: () => false,
@@ -55,11 +58,11 @@ const reconciler = createReconciler({
         container.root.appendChild(child.node);
     },
     insertBefore(parent, child, before) {
-        insertVirtualChild(parent, child, before);
+        insertVirtualChild(parent, child);
         insertPaintChild(parent.node, child.node, before.node);
     },
     insertInContainerBefore(container, child, before) {
-        insertVirtualChild(container, child, before);
+        insertVirtualChild(container, child);
         container.root.insertBefore(child.node, before.node);
     },
     removeChild(parent, child) {
@@ -148,7 +151,8 @@ export function createRoot(options = {}) {
     const rootContainer = {
         paintCannon,
         root: container,
-        children: [],
+        children: new Set(),
+        presentCommits: true,
     };
     const animationScheduler = new AnimationScheduler(paintCannon);
     const reactRoot = reconciler.createContainer(rootContainer, 0, null, false, null, "", reportReactError, reportReactError, reportReactError, () => { });
@@ -173,6 +177,7 @@ export function createRoot(options = {}) {
                 return;
             }
             exited = true;
+            rootContainer.presentCommits = false;
             reconciler.updateContainer(null, reactRoot, null, () => {
                 animationScheduler.stop();
                 paintCannon.stop();
@@ -209,23 +214,19 @@ export function render(element, options = {}) {
     return root;
 }
 function appendVirtualChild(parent, child) {
-    removeVirtualChild(parent, child);
-    parent.children.push(child);
+    child.parent?.children.delete(child);
+    parent.children.add(child);
+    child.parent = parent;
 }
-function insertVirtualChild(parent, child, before) {
-    removeVirtualChild(parent, child);
-    const index = parent.children.indexOf(before);
-    if (index === -1) {
-        parent.children.push(child);
-    }
-    else {
-        parent.children.splice(index, 0, child);
-    }
+function insertVirtualChild(parent, child) {
+    child.parent?.children.delete(child);
+    parent.children.add(child);
+    child.parent = parent;
 }
 function removeVirtualChild(parent, child) {
-    const index = parent.children.indexOf(child);
-    if (index !== -1) {
-        parent.children.splice(index, 1);
+    if (child.parent === parent) {
+        parent.children.delete(child);
+        child.parent = undefined;
     }
 }
 function createHostElement(paintCannon, type, props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paintcannon-react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "scheduler": "^0.25.0"
   },
   "peerDependencies": {
-    "paintcannon": "^0.0.14",
+    "paintcannon": "^0.0.16",
     "react": "^19.0.0"
   },
   "devDependencies": {