@ng-org/alien-deepsignals 0.1.2-alpha.2 → 0.1.2-alpha.4

package/dist/test/frontend/astro-app/src/components/ReactPanel.js

@@ -0,0 +1,227 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const useDeepSignal_1 = __importDefault(require("../../../../../hooks/react/useDeepSignal"));
+const state_1 = require("../../../utils/state");
+const renderMetrics_1 = require("../../../utils/renderMetrics");
+const ReactPanel = () => {
+    const state = (0, useDeepSignal_1.default)(state_1.sharedState);
+    const renderCount = (0, react_1.useRef)(0);
+    renderCount.current += 1;
+    (0, react_1.useEffect)(() => {
+        (0, renderMetrics_1.recordRender)("react", renderCount.current);
+    });
+    const objectEntries = Array.from(state.objectSet.values());
+    const ObjectRow = ({ entry }) => {
+        const rowRenderCount = (0, react_1.useRef)(0);
+        rowRenderCount.current += 1;
+        (0, react_1.useEffect)(() => {
+            (0, renderMetrics_1.recordObjectRender)("react", entry["@id"], rowRenderCount.current);
+        });
+        return (<div className="object-row" data-entry-id={entry["@id"]} data-render-count={rowRenderCount.current}>
+                <span className="object-id">{entry["@id"]}</span>
+                <input type="text" data-role="label" value={entry.label} onChange={(event) => {
+                entry.label = event.target.value;
+            }}/>
+                <input type="number" data-role="count-input" value={entry.count} onChange={(event) => {
+                entry.count = Number(event.target.value || 0);
+            }}/>
+                <span data-role="count">{entry.count}</span>
+                <button type="button" data-action="increment" onClick={() => {
+                entry.count += 1;
+            }}>
+                    +1
+                </button>
+            </div>);
+    };
+    const renderPrimitiveField = (label, options) => {
+        if (options.type === "boolean") {
+            return (<fieldset className="field" data-field={label}>
+                    <legend>{label}</legend>
+                    <input type="checkbox" data-role="editor" checked={options.value} onChange={(event) => options.onChange(event.target.checked)}/>
+                    <span data-role="value">{String(options.value)}</span>
+                </fieldset>);
+        }
+        if (options.type === "number") {
+            return (<fieldset className="field" data-field={label}>
+                    <legend>{label}</legend>
+                    <input type="number" data-role="editor" value={options.value} onChange={(event) => options.onChange(Number(event.target.value || 0))}/>
+                    <span data-role="value">{options.value}</span>
+                </fieldset>);
+        }
+        return (<fieldset className="field" data-field={label}>
+                <legend>{label}</legend>
+                <input type="text" data-role="editor" value={options.value} onChange={(event) => options.onChange(event.target.value)}/>
+                <span data-role="value">{options.value}</span>
+            </fieldset>);
+    };
+    return (<section>
+            <h2 className="title">react</h2>
+            <div className="render-meta" data-render-count={renderCount.current}>
+                Render #{renderCount.current}
+            </div>
+            <div className="field-grid">
+                {renderPrimitiveField("type", {
+            type: "text",
+            value: state.type,
+            onChange: (next) => {
+                state.type = next;
+            },
+        })}
+                {renderPrimitiveField("stringValue", {
+            type: "text",
+            value: state.stringValue,
+            onChange: (next) => {
+                state.stringValue = next;
+            },
+        })}
+                {renderPrimitiveField("numValue", {
+            type: "number",
+            value: state.numValue,
+            onChange: (next) => {
+                state.numValue = next;
+            },
+        })}
+                {renderPrimitiveField("boolValue", {
+            type: "boolean",
+            value: state.boolValue,
+            onChange: (next) => {
+                state.boolValue = next;
+            },
+        })}
+                {renderPrimitiveField("objectValue.nestedString", {
+            type: "text",
+            value: state.objectValue.nestedString,
+            onChange: (next) => {
+                state.objectValue.nestedString = next;
+            },
+        })}
+                {renderPrimitiveField("objectValue.nestedNum", {
+            type: "number",
+            value: state.objectValue.nestedNum,
+            onChange: (next) => {
+                state.objectValue.nestedNum = next;
+            },
+        })}
+            </div>
+
+            <fieldset className="field" data-field="arrayValue">
+                <legend>arrayValue</legend>
+                <div className="stack">
+                    <span data-role="array-length">
+                        Length: {state.arrayValue.length}
+                    </span>
+                    <div>
+                        <button type="button" data-action="push" onClick={() => {
+            state.arrayValue.push(state.arrayValue.length + 1);
+        }}>
+                            Add item
+                        </button>
+                        <button type="button" data-action="pop" onClick={() => {
+            if (state.arrayValue.length)
+                state.arrayValue.pop();
+        }}>
+                            Remove item
+                        </button>
+                    </div>
+                    <ul className="value-list">
+                        {state.arrayValue.map((value, index) => (<li key={`array-${index}`}>{value}</li>))}
+                    </ul>
+                </div>
+            </fieldset>
+
+            <fieldset className="field" data-field="objectValue.nestedArray">
+                <legend>objectValue.nestedArray</legend>
+                <div className="stack">
+                    <span data-role="array-length">
+                        Length: {state.objectValue.nestedArray.length}
+                    </span>
+                    <div>
+                        <button type="button" data-action="push" onClick={() => {
+            state.objectValue.nestedArray.push(state.objectValue.nestedArray.length + 10);
+        }}>
+                            Add nested item
+                        </button>
+                        <button type="button" data-action="pop" onClick={() => {
+            if (state.objectValue.nestedArray.length) {
+                state.objectValue.nestedArray.pop();
+            }
+        }}>
+                            Remove nested item
+                        </button>
+                    </div>
+                    <ul className="value-list">
+                        {state.objectValue.nestedArray.map((value, index) => (<li key={`nested-${index}`}>{value}</li>))}
+                    </ul>
+                </div>
+            </fieldset>
+
+            <fieldset className="field" data-field="setValue">
+                <legend>setValue</legend>
+                <div className="stack">
+                    <span data-role="set-size">
+                        Size: {state.setValue.size}
+                    </span>
+                    <div>
+                        <button type="button" data-action="add" onClick={() => {
+            state.setValue.add(`item${state.setValue.size + 1}`);
+        }}>
+                            Add entry
+                        </button>
+                        <button type="button" data-action="remove" onClick={() => {
+            const last = Array.from(state.setValue.values()).pop();
+            if (last)
+                state.setValue.delete(last);
+        }}>
+                            Remove entry
+                        </button>
+                    </div>
+                    <ul className="value-list">
+                        {Array.from(state.setValue.values()).map((entry) => (<li key={`set-${entry}`}>{entry}</li>))}
+                    </ul>
+                </div>
+            </fieldset>
+
+            <fieldset className="field" data-field="objectSet">
+                <legend>objectSet entries</legend>
+                {objectEntries.map((entry) => (<ObjectRow entry={entry} key={entry["@id"]}/>))}
+            </fieldset>
+        </section>);
+};
+exports.default = ReactPanel;

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfDeep.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const ReactPerfDeep: React.FC;
+export default ReactPerfDeep;
+//# sourceMappingURL=ReactPerfDeep.d.ts.map

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfDeep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPerfDeep.d.ts","sourceRoot":"","sources":["../../../../../../../../src/test/frontend/astro-app/src/components/perf/react/ReactPerfDeep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA4D3D,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwG1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfDeep.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const useDeepSignal_1 = __importDefault(require("../../../../../../../hooks/react/useDeepSignal"));
+const state_1 = require("../../../../../utils/state");
+const renderMetrics_1 = require("../../../../../utils/renderMetrics");
+const perfScenarios_1 = require("../../../../../utils/perfScenarios");
+const alien_signals_1 = require("alien-signals");
+const ObjectRow = ({ entry }) => {
+    const rowRenderCount = (0, react_1.useRef)(0);
+    rowRenderCount.current += 1;
+    (0, renderMetrics_1.recordObjectRender)("react", entry["@id"], rowRenderCount.current);
+    (0, useDeepSignal_1.default)(entry);
+    return (<div className="object-row" data-entry-id={entry["@id"]} data-render-count={rowRenderCount.current}>
+            <span className="object-id">{entry["@id"]}</span>
+            <input type="text" value={entry.label} data-role="label" onChange={(event) => (entry.label = event.target.value)}/>
+            <input type="number" value={entry.count} data-role="count-input" onChange={(event) => (entry.count = Number(event.target.value || 0))}/>
+            <span data-role="count">{entry.count}</span>
+            <button type="button" data-action="increment" onClick={() => {
+            entry.count += 1;
+        }}>
+                +1
+            </button>
+        </div>);
+};
+const ReactPerfDeep = () => {
+    const state = state_1.sharedState;
+    const [revision, bumpRevision] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const stop = (0, alien_signals_1.effect)(() => {
+            const objectSet = state_1.sharedState.objectSet;
+            if (!objectSet)
+                return;
+            void objectSet.size;
+            bumpRevision((value) => value + 1);
+        });
+        return stop;
+    }, []);
+    const renderCount = (0, react_1.useRef)(0);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    renderCount.current += 1;
+    (0, react_1.useEffect)(() => {
+        const dispose = (0, perfScenarios_1.registerSharedStateAdapter)("react");
+        return () => dispose();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined") {
+            window.__reactSharedIdentity = state === state_1.sharedState;
+            window.__reactSharedGlobal =
+                state === window.sharedState;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, renderMetrics_1.recordRender)("react", renderCount.current);
+    });
+    const handleAddEntry = () => {
+        const objectSet = state.objectSet;
+        if (!objectSet)
+            return;
+        const id = `react-deep-${Math.random().toString(36).slice(2, 8)}`;
+        objectSet.add({
+            "@id": id,
+            label: `react ${id}`,
+            count: 0,
+        });
+    };
+    const handleRemoveEntry = () => {
+        const objectSet = state.objectSet;
+        if (!objectSet)
+            return;
+        const last = Array.from(objectSet.values()).pop();
+        if (!last)
+            return;
+        objectSet.delete(last);
+    };
+    const handleRunScenario = async () => {
+        try {
+            setBusy(true);
+            await (0, perfScenarios_1.runScenarioImmediately)("react", "deep");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const entries = Array.from(state.objectSet?.values?.() ?? []);
+    const objectSetSize = state.objectSet?.size ?? entries.length;
+    return (<section className="perf-panel react" data-field="objectSet">
+            <h2 className="title">react (deepSignal)</h2>
+            <div className="render-meta" data-render-count={renderCount.current}>
+                Render #{renderCount.current}
+            </div>
+            <div className="field" data-field="objectSet">
+                <legend>objectSet entries</legend>
+                <div className="set-controls">
+                    <span data-role="set-size">Size: {objectSetSize}</span>
+                    <div>
+                        <button type="button" onClick={handleAddEntry}>
+                            Add entry
+                        </button>
+                        <button type="button" onClick={handleRemoveEntry}>
+                            Remove entry
+                        </button>
+                        <button type="button" data-action="run-scenario" onClick={handleRunScenario} disabled={busy}>
+                            {busy ? "Running…" : "Run perf scenario"}
+                        </button>
+                    </div>
+                </div>
+                <div className="object-set">
+                    {entries.map((entry) => (<ObjectRow key={entry["@id"]} entry={entry}/>))}
+                </div>
+            </div>
+        </section>);
+};
+exports.default = ReactPerfDeep;

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfNative.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const ReactPerfNative: React.FC;
+export default ReactPerfNative;
+//# sourceMappingURL=ReactPerfNative.d.ts.map

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfNative.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPerfNative.d.ts","sourceRoot":"","sources":["../../../../../../../../src/test/frontend/astro-app/src/components/perf/react/ReactPerfNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AA4Ef,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EA8I5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/test/frontend/astro-app/src/components/perf/react/ReactPerfNative.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mockData_1 = require("../../../../../utils/mockData");
+const renderMetrics_1 = require("../../../../../utils/renderMetrics");
+const perfScenarios_1 = require("../../../../../utils/perfScenarios");
+const ObjectRow = ({ entry, updateEntries }) => {
+    const rowRenderCount = (0, react_1.useRef)(0);
+    rowRenderCount.current += 1;
+    (0, renderMetrics_1.recordObjectRender)("react", entry["@id"], rowRenderCount.current);
+    return (<div className="object-row" data-entry-id={entry["@id"]} data-render-count={rowRenderCount.current}>
+            <span className="object-id">{entry["@id"]}</span>
+            <input type="text" data-role="label" value={entry.label} onChange={(event) => updateEntries((draft) => {
+            const target = draft.find((item) => item["@id"] === entry["@id"]);
+            if (target)
+                target.label = event.target.value;
+        })}/>
+            <input type="number" data-role="count-input" value={entry.count} onChange={(event) => updateEntries((draft) => {
+            const target = draft.find((item) => item["@id"] === entry["@id"]);
+            if (target)
+                target.count = Number(event.target.value || 0);
+        })}/>
+            <span data-role="count">{entry.count}</span>
+            <button type="button" data-action="increment" onClick={() => updateEntries((draft) => {
+            const target = draft.find((item) => item["@id"] === entry["@id"]);
+            if (target)
+                target.count += 1;
+        })}>
+                +1
+            </button>
+        </div>);
+};
+const cloneInitialEntries = () => (0, mockData_1.cloneDefaultObjectSet)();
+const ReactPerfNative = () => {
+    const [objectSet, setObjectSet] = (0, react_1.useState)(() => new Set(cloneInitialEntries()));
+    const renderCount = (0, react_1.useRef)(0);
+    const counterRef = (0, react_1.useRef)(0);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    renderCount.current += 1;
+    (0, react_1.useEffect)(() => {
+        (0, renderMetrics_1.recordRender)("react", renderCount.current);
+    });
+    const entries = (0, react_1.useMemo)(() => Array.from(objectSet.values()), [objectSet]);
+    const updateEntries = (0, react_1.useCallback)((mutate) => {
+        setObjectSet((prev) => {
+            const draft = Array.from(prev.values()).map((entry) => ({
+                ...entry,
+            }));
+            mutate(draft);
+            return new Set(draft);
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const dispose = (0, perfScenarios_1.registerScenarioAdapter)("react", "native", {
+            reset: () => {
+                setObjectSet(new Set(cloneInitialEntries()));
+            },
+            mutateExisting: (iterations) => {
+                updateEntries((draft) => {
+                    if (!draft.length)
+                        return;
+                    for (let cycle = 0; cycle < iterations; cycle += 1) {
+                        draft.forEach((entry, index) => {
+                            entry.label = `POJO ${entry["@id"]} #${cycle}-${index}`;
+                            entry.count += 2;
+                        });
+                    }
+                });
+            },
+            bulkMutate: (iterations) => {
+                updateEntries((draft) => {
+                    if (!draft.length)
+                        return;
+                    for (let i = 0; i < iterations; i += 1) {
+                        for (const entry of draft) {
+                            entry.count += 2;
+                        }
+                    }
+                });
+            },
+            batchAddRemove: (iterations) => {
+                const additions = [];
+                for (let i = 0; i < iterations; i += 1) {
+                    counterRef.current += 1;
+                    const id = `react-native-${counterRef.current}`;
+                    additions.push({
+                        "@id": id,
+                        label: `Native ${id}`,
+                        count: i,
+                    });
+                }
+                updateEntries((draft) => {
+                    draft.push(...additions);
+                });
+                updateEntries((draft) => {
+                    const start = Math.max(draft.length - additions.length, 0);
+                    draft.splice(start, additions.length);
+                });
+            },
+        });
+        return () => dispose();
+    }, [updateEntries]);
+    const handleAddEntry = () => {
+        counterRef.current += 1;
+        const id = `react-native-${counterRef.current}`;
+        updateEntries((draft) => {
+            draft.push({ "@id": id, label: `Native ${id}`, count: 0 });
+        });
+    };
+    const handleRemoveEntry = () => {
+        updateEntries((draft) => {
+            draft.pop();
+        });
+    };
+    const handleRunScenario = async () => {
+        try {
+            setBusy(true);
+            await (0, perfScenarios_1.runScenarioImmediately)("react", "native");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (<section className="perf-panel react" data-field="objectSet">
+            <h2 className="title">react (native state)</h2>
+            <div className="render-meta" data-render-count={renderCount.current}>
+                Render #{renderCount.current}
+            </div>
+            <div className="field" data-field="objectSet">
+                <legend>objectSet entries</legend>
+                <div className="set-controls">
+                    <span data-role="set-size">Size: {objectSet.size}</span>
+                    <div>
+                        <button type="button" onClick={handleAddEntry}>
+                            Add entry
+                        </button>
+                        <button type="button" onClick={handleRemoveEntry}>
+                            Remove entry
+                        </button>
+                        <button type="button" data-action="run-scenario" onClick={handleRunScenario} disabled={busy}>
+                            {busy ? "Running…" : "Run perf scenario"}
+                        </button>
+                    </div>
+                </div>
+                <div className="object-set">
+                    {entries.map((entry) => (<ObjectRow key={entry["@id"]} entry={entry} updateEntries={updateEntries}/>))}
+                </div>
+            </div>
+        </section>);
+};
+exports.default = ReactPerfNative;

package/dist/test/frontend/playwright/crossFrameworkHooks.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=crossFrameworkHooks.spec.d.ts.map

package/dist/test/frontend/playwright/crossFrameworkHooks.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crossFrameworkHooks.spec.d.ts","sourceRoot":"","sources":["../../../../src/test/frontend/playwright/crossFrameworkHooks.spec.ts"],"names":[],"mappings":""}