paintcannon-react 0.0.13 → 0.0.15

package/README.md

@@ -97,6 +97,21 @@ These components map to PaintCannon's DOM-like core API and support typed style
 props, bubbling events, forms, focus handling, controlled inputs, and mouse
 interactions. The subset of the React-DOM props they support is as follows:
 
+Host component `onFocus` and `onBlur` are element focus events. Terminal
+window/pane focus is exposed by the underlying PaintCannon instance as
+`paintCannon.hasFocus` and app-level `focus`/`blur` events. The root returned
+from `render()` includes that instance:
+
+```tsx
+const app = render(<App />, { alternateScreen: true });
+
+app.paintCannon.addEventListener("blur", () => {
+  // Dim or pause the app while the terminal is unfocused.
+});
+```
+
+Inside tmux, terminal focus reporting requires `set -g focus-events on`.
+
 ### Common props:
 
 All host components accept:

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/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.13",
+  "version": "0.0.15",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "scheduler": "^0.25.0"
   },
   "peerDependencies": {
-    "paintcannon": "^0.0.13",
+    "paintcannon": "^0.0.15",
     "react": "^19.0.0"
   },
   "devDependencies": {