paintcannon-react 0.0.1

package/dist/src/reconciler.js

@@ -0,0 +1,403 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import React from "react";
+import createReconciler from "react-reconciler";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants.js";
+import * as Scheduler from "scheduler";
+import { ELEMENT_EVENT_TYPES, PaintCannon } from "paintcannon";
+import { AnimationContext, AnimationScheduler, AppContext } from "./hooks/index.js";
+import * as hostComponents from "./host-components/index.js";
+let currentUpdatePriority = NoEventPriority;
+const sourceDirectory = path.dirname(fileURLToPath(import.meta.url));
+const packageInfo = loadPackageInfo();
+const eventListenerWrappers = new WeakMap();
+const reconciler = createReconciler({
+    getRootHostContext: () => ({}),
+    getChildHostContext: () => ({}),
+    prepareForCommit(container) {
+        container.paintCannon.beginTransaction();
+        return null;
+    },
+    resetAfterCommit(container) {
+        container.paintCannon.commitTransaction();
+        container.paintCannon.render();
+    },
+    preparePortalMount: () => null,
+    clearContainer(container) {
+        for (const child of container.children) {
+            destroyHostNode(child);
+        }
+        container.children = [];
+        return false;
+    },
+    shouldSetTextContent: () => false,
+    createInstance(type, props, container) {
+        return createHostElement(container.paintCannon, type, props);
+    },
+    createTextInstance(text, container) {
+        return {
+            kind: "text",
+            text,
+            node: container.paintCannon.createTextNode(text),
+        };
+    },
+    appendInitialChild(parent, child) {
+        appendVirtualChild(parent, child);
+        appendPaintChild(parent.node, child.node);
+    },
+    appendChild(parent, child) {
+        appendVirtualChild(parent, child);
+        appendPaintChild(parent.node, child.node);
+    },
+    appendChildToContainer(container, child) {
+        appendVirtualChild(container, child);
+        container.root.appendChild(child.node);
+    },
+    insertBefore(parent, child, before) {
+        insertVirtualChild(parent, child, before);
+        insertPaintChild(parent.node, child.node, before.node);
+    },
+    insertInContainerBefore(container, child, before) {
+        insertVirtualChild(container, child, before);
+        container.root.insertBefore(child.node, before.node);
+    },
+    removeChild(parent, child) {
+        removeVirtualChild(parent, child);
+        destroyHostNode(child);
+    },
+    removeChildFromContainer(container, child) {
+        removeVirtualChild(container, child);
+        destroyHostNode(child);
+    },
+    finalizeInitialChildren: () => false,
+    resetTextContent: () => { },
+    getPublicInstance(instance) {
+        return instance.node;
+    },
+    commitUpdate(instance, _type, _oldProps, newProps) {
+        instance.props = applyHostElementProps(instance, newProps);
+    },
+    commitTextUpdate(instance, _oldText, newText) {
+        instance.text = newText;
+        instance.node.nodeValue = newText;
+    },
+    hideInstance(instance) {
+        instance.node.style.display = "none";
+    },
+    unhideInstance(instance) {
+        instance.node.style.display = defaultDisplay(instance.type);
+    },
+    hideTextInstance(instance) {
+        instance.node.nodeValue = "";
+    },
+    unhideTextInstance(instance, text) {
+        instance.node.nodeValue = text;
+    },
+    detachDeletedInstance: () => { },
+    beforeActiveInstanceBlur: () => { },
+    afterActiveInstanceBlur: () => { },
+    getInstanceFromNode: () => null,
+    prepareScopeUpdate: () => { },
+    getInstanceFromScope: () => null,
+    isPrimaryRenderer: false,
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    supportsMicrotasks: true,
+    scheduleMicrotask: queueMicrotask,
+    // @ts-expect-error @types/react-reconciler omits scheduler integration hooks.
+    scheduleCallback: Scheduler.unstable_scheduleCallback,
+    cancelCallback: Scheduler.unstable_cancelCallback,
+    shouldYield: Scheduler.unstable_shouldYield,
+    now: Scheduler.unstable_now,
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    noTimeout: -1,
+    setCurrentUpdatePriority(priority) {
+        currentUpdatePriority = priority;
+    },
+    getCurrentUpdatePriority: () => currentUpdatePriority,
+    resolveUpdatePriority() {
+        return currentUpdatePriority !== NoEventPriority ? currentUpdatePriority : DefaultEventPriority;
+    },
+    maySuspendCommit: () => false,
+    NotPendingTransition: undefined,
+    HostTransitionContext: React.createContext(null),
+    resetFormInstance: () => { },
+    requestPostPaintCallback: () => { },
+    shouldAttemptEagerTransition: () => false,
+    trackSchedulerEvent: () => { },
+    resolveEventType: () => null,
+    resolveEventTimeStamp: () => -1.1,
+    preloadInstance: () => true,
+    startSuspendingCommit: () => { },
+    suspendInstance: () => { },
+    waitForCommitToBeReady: () => null,
+    rendererPackageName: packageInfo.name,
+    rendererVersion: packageInfo.version,
+});
+export function createRoot(options = {}) {
+    const paintCannon = options.paintCannon ?? new PaintCannon(options);
+    const container = options.container ?? paintCannon.createElement("div");
+    if (options.container === undefined) {
+        container.style.width = "100%";
+        container.style.height = "100%";
+    }
+    paintCannon.setRoot(container);
+    const rootContainer = {
+        paintCannon,
+        root: container,
+        children: [],
+    };
+    const animationScheduler = new AnimationScheduler(paintCannon);
+    const reactRoot = reconciler.createContainer(rootContainer, 0, null, false, null, "", reportReactError, reportReactError, reportReactError, () => { });
+    let exited = false;
+    let resolveExit;
+    let rejectExit;
+    const exitPromise = new Promise((resolve, reject) => {
+        resolveExit = resolve;
+        rejectExit = reject;
+    });
+    const settleExit = (errorOrResult) => {
+        if (errorOrResult instanceof Error) {
+            rejectExit(errorOrResult);
+            return;
+        }
+        resolveExit(errorOrResult);
+    };
+    const app = {
+        paintCannon,
+        exit(errorOrResult) {
+            if (exited) {
+                return;
+            }
+            exited = true;
+            reconciler.updateContainer(null, reactRoot, null, () => {
+                animationScheduler.stop();
+                paintCannon.stop();
+                settleExit(errorOrResult);
+            });
+        },
+        waitUntilExit() {
+            return exitPromise;
+        },
+    };
+    return {
+        paintCannon,
+        container,
+        render(element) {
+            if (exited) {
+                throw new Error("paintcannon-react root has exited");
+            }
+            reconciler.updateContainer(React.createElement(AppContext.Provider, { value: app }, React.createElement(AnimationContext.Provider, { value: animationScheduler }, element)), reactRoot, null, null);
+        },
+        unmount() {
+            app.exit();
+        },
+        exit(errorOrResult) {
+            app.exit(errorOrResult);
+        },
+        waitUntilExit() {
+            return app.waitUntilExit();
+        },
+    };
+}
+export function render(element, options = {}) {
+    const root = createRoot(options);
+    root.render(element);
+    return root;
+}
+function appendVirtualChild(parent, child) {
+    removeVirtualChild(parent, child);
+    parent.children.push(child);
+}
+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 removeVirtualChild(parent, child) {
+    const index = parent.children.indexOf(child);
+    if (index !== -1) {
+        parent.children.splice(index, 1);
+    }
+}
+function createHostElement(paintCannon, type, props) {
+    if (type === hostComponents.div.type) {
+        return hostComponents.reconcileDiv.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    if (type === hostComponents.span.type) {
+        return hostComponents.reconcileSpan.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    if (type === hostComponents.form.type) {
+        return hostComponents.reconcileForm.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    if (type === hostComponents.button.type) {
+        return hostComponents.reconcileButton.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    if (type === hostComponents.input.type) {
+        return hostComponents.reconcileInput.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    if (type === hostComponents.textarea.type) {
+        return hostComponents.reconcileTextarea.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
+    const unknownType = type;
+    throw new Error(`Unknown host type: ${String(unknownType)}`);
+}
+function appendPaintChild(parent, child) {
+    if (!canHaveChildren(parent)) {
+        throw new Error("Input and Textarea cannot have children");
+    }
+    parent.appendChild(child);
+}
+function insertPaintChild(parent, child, before) {
+    if (!canHaveChildren(parent)) {
+        throw new Error("Input and Textarea cannot have children");
+    }
+    parent.insertBefore(child, before);
+}
+function destroyHostNode(host) {
+    host.node.destroy();
+}
+function applyHostElementProps(host, newProps) {
+    if (host.type === hostComponents.div.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileDiv.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    if (host.type === hostComponents.span.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileSpan.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    if (host.type === hostComponents.form.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileForm.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    if (host.type === hostComponents.button.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileButton.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    if (host.type === hostComponents.input.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileInput.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    if (host.type === hostComponents.textarea.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileTextarea.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
+    const unknownHost = host;
+    throw new Error(`Unknown host type: ${String(unknownHost)}`);
+}
+function applyCommonProps(node, oldProps, newProps) {
+    applyStyle(node, oldProps.style, newProps.style);
+    applyEvents(node, oldProps, newProps);
+}
+function applyStyle(node, oldStyle, newStyle) {
+    if (oldStyle === newStyle) {
+        return;
+    }
+    for (const [key, value] of Object.entries(oldStyle ?? {})) {
+        const styleKey = key;
+        const nextValue = newStyle?.[styleKey];
+        if (value !== undefined && value !== null && (nextValue === undefined || nextValue === null)) {
+            node.style.removeProperty(styleKey);
+        }
+    }
+    for (const [key, value] of Object.entries(newStyle ?? {})) {
+        const styleKey = key;
+        if (value !== undefined && value !== null && value !== oldStyle?.[styleKey]) {
+            node.style.setProperty(styleKey, value);
+        }
+    }
+}
+function applyEvents(node, oldProps, newProps) {
+    for (const [prop, eventType] of eventProps) {
+        const previous = listenerProp(oldProps, prop);
+        const next = listenerProp(newProps, prop);
+        if (previous === next) {
+            continue;
+        }
+        if (previous !== undefined) {
+            removeElementListener(node, eventType, previous);
+        }
+        if (next !== undefined) {
+            addElementListener(node, eventType, next);
+        }
+    }
+}
+function listenerProp(props, prop) {
+    const value = props[prop];
+    return typeof value === "function" ? value : undefined;
+}
+function canHaveChildren(node) {
+    return "appendChild" in node && "insertBefore" in node;
+}
+function addElementListener(node, eventType, listener) {
+    node.addEventListener(eventType, reactEventListener(listener));
+}
+function removeElementListener(node, eventType, listener) {
+    node.removeEventListener(eventType, reactEventListener(listener));
+}
+function reactEventListener(listener) {
+    let wrapped = eventListenerWrappers.get(listener);
+    if (wrapped === undefined) {
+        wrapped = (event) => {
+            reconciler.flushSyncFromReconciler(() => {
+                listener(event);
+            });
+        };
+        eventListenerWrappers.set(listener, wrapped);
+    }
+    return wrapped;
+}
+function defaultDisplay(type) {
+    return type === hostComponents.span.type ? "inline" : "block";
+}
+function reportReactError(error) {
+    if (error !== null && error !== undefined) {
+        console.error(error);
+    }
+}
+function loadPackageInfo() {
+    const packageJsonPath = findPackageJsonPath();
+    const packageJson = fs.readFileSync(packageJsonPath, "utf8");
+    const parsed = JSON.parse(packageJson);
+    if (parsed?.name !== "paintcannon-react" || typeof parsed.version !== "string") {
+        throw new Error(`Invalid package metadata in ${packageJsonPath}`);
+    }
+    return {
+        name: parsed.name,
+        version: parsed.version,
+    };
+}
+function findPackageJsonPath() {
+    let directory = sourceDirectory;
+    while (true) {
+        const packageJsonPath = path.join(directory, "package.json");
+        if (fs.existsSync(packageJsonPath)) {
+            const parsed = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+            if (parsed?.name === "paintcannon-react") {
+                return packageJsonPath;
+            }
+        }
+        const parent = path.dirname(directory);
+        if (parent === directory) {
+            throw new Error("Could not find paintcannon-react package metadata");
+        }
+        directory = parent;
+    }
+}
+const eventProps = [
+    ...ELEMENT_EVENT_TYPES.map(eventType => [hostComponents.EVENT_PROP_NAMES[eventType], eventType]),
+];

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "paintcannon-react",
+  "version": "0.0.1",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "type": "module",
+  "files": [
+    "README.md",
+    "dist/src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "demo": "npm run build && node dist/examples/counter.js",
+    "demo:controlled": "npm run build && node dist/examples/controlled.js",
+    "demo:form": "npm run build && node dist/examples/form.js",
+    "demo:keyboard": "npm run build && node dist/examples/keyboard.js",
+    "demo:lifecycle": "npm run build && node dist/examples/lifecycle.js",
+    "demo:spinner": "npm run build && node dist/examples/spinner.js",
+    "demo:todo": "npm run build && node dist/examples/todo.js",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "react-reconciler": "^0.31.0",
+    "scheduler": "^0.25.0"
+  },
+  "peerDependencies": {
+    "paintcannon": "^0.0.1",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "^0.33.0",
+    "@types/scheduler": "^0.26.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7"
+  }
+}