@ng-org/alien-deepsignals 0.1.2-alpha.5 → 0.1.2-alpha.7

package/dist/watch.d.ts

@@ -14,12 +14,49 @@ export interface WatchOptions {
     triggerInstantly?: boolean;
 }
 export interface WatchPatchEvent<T extends object> {
+    /** The changes made */
     patches: DeepPatch[];
     /** The version if `triggerInstantly` is not true. */
     version?: number;
+    /** The current value of the signal */
     newValue: DeepSignal<T>;
 }
 export type WatchPatchCallback<T extends object> = (event: WatchPatchEvent<T>) => void;
+/**
+ * Watch for changes to a deepSignal.
+ *
+ * Whenever a change is made, `callback` is called with the patches describing the change and the new value.
+ * If you set `triggerInstantly`, the callback is called on every property change.
+ * If not, all changes are aggregated and `callback` is called in a microtask when
+ * the current task finishes, e.g. `await` is called (meaning it supports batching).
+ *
+ * When objects are added to Sets, their **synthetic ID (usually `@id`) becomes part of the patch path**. This allows patches to uniquely identify which Set entry is being mutated.
+ *
+ * ```ts
+ * const state = deepSignal(
+ *     { s: new Set() },
+ *     { ...}
+ * );
+ *
+ * watch(state, ({ patches }) => {
+ *     console.log(JSON.stringify(patches));
+ * });
+ *
+ * state.s.add({ data: "test" });
+ * // Will log:
+ * // [
+ * //   {"path":["s","did:ng:o:123"],"op":"add","type":"object"},
+ * //   {"path":["s","did:ng:o:123","@id"],"op":"add","value":"did:ng:o:123"},
+ * //   {"path":["s","did:ng:o:123","data"],"op":"add","value":"test"}
+ * // ]
+ *
+ * state.s.getById("did:ng:o:123")!.data = "new value"
+ * // Will log:
+ * // [
+ * //   {"path":["s","did:ng:o:123","data"],"op":"add","value":"new value"}
+ * // ]
+ * ```
+ */
 export declare function watch<T extends object>(source: DeepSignalSet<T> | DeepSignalObject<T> | DeepSignal<T>, callback: WatchPatchCallback<T>, options?: WatchOptions): {
     stopListening: () => void;
     registerCleanup: RegisterCleanup;

package/dist/watch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../src/watch.ts"],"names":[],"mappings":"AAgBA,OAAO,EACH,SAAS,EAET,UAAU,EACV,gBAAgB,EAChB,aAAa,EAChB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;AAE9D,MAAM,WAAW,YAAY;IACzB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM;IAC7C,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,CAC/C,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KACxB,IAAI,CAAC;AAEV,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,EAClC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,EAC9D,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAC/B,OAAO,GAAE,YAAiB;;;EAiE7B"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../src/watch.ts"],"names":[],"mappings":"AAgBA,OAAO,EACH,SAAS,EAET,UAAU,EACV,gBAAgB,EAChB,aAAa,EAChB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;AAE9D,MAAM,WAAW,YAAY;IACzB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM;IAC7C,uBAAuB;IACvB,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,CAC/C,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KACxB,IAAI,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,EAClC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,EAC9D,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAC/B,OAAO,GAAE,YAAiB;;;EAiE7B"}

package/dist/watch.js

@@ -11,6 +11,41 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watch = watch;
 const deepSignal_1 = require("./deepSignal");
+/**
+ * Watch for changes to a deepSignal.
+ *
+ * Whenever a change is made, `callback` is called with the patches describing the change and the new value.
+ * If you set `triggerInstantly`, the callback is called on every property change.
+ * If not, all changes are aggregated and `callback` is called in a microtask when
+ * the current task finishes, e.g. `await` is called (meaning it supports batching).
+ *
+ * When objects are added to Sets, their **synthetic ID (usually `@id`) becomes part of the patch path**. This allows patches to uniquely identify which Set entry is being mutated.
+ *
+ * ```ts
+ * const state = deepSignal(
+ *     { s: new Set() },
+ *     { ...}
+ * );
+ *
+ * watch(state, ({ patches }) => {
+ *     console.log(JSON.stringify(patches));
+ * });
+ *
+ * state.s.add({ data: "test" });
+ * // Will log:
+ * // [
+ * //   {"path":["s","did:ng:o:123"],"op":"add","type":"object"},
+ * //   {"path":["s","did:ng:o:123","@id"],"op":"add","value":"did:ng:o:123"},
+ * //   {"path":["s","did:ng:o:123","data"],"op":"add","value":"test"}
+ * // ]
+ *
+ * state.s.getById("did:ng:o:123")!.data = "new value"
+ * // Will log:
+ * // [
+ * //   {"path":["s","did:ng:o:123","data"],"op":"add","value":"new value"}
+ * // ]
+ * ```
+ */
 function watch(source, callback, options = {}) {
     if (!(0, deepSignal_1.isDeepSignal)(source)) {
         throw new Error("watch() expects a deepSignal root proxy");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-org/alien-deepsignals",
-  "version": "0.1.2-alpha.5",
+  "version": "0.1.2-alpha.7",
   "private": false,
   "authors": [
     "Laurin Weger",
@@ -28,6 +28,10 @@
       "types": "./dist/hooks/svelte/index.d.ts",
       "default": "./dist/hooks/svelte/index.js"
     },
+    "./svelte4": {
+      "types": "./dist/hooks/svelte4/index.d.ts",
+      "default": "./dist/hooks/svelte4/index.js"
+    },
     "./vue": {
       "types": "./dist/hooks/vue/index.d.ts",
       "default": "./dist/hooks/vue/index.js"
@@ -38,18 +42,17 @@
   },
   "optionalDependencies": {
     "react": "^19.0.0 || ^18.0.0",
-    "svelte": "^5.0.0",
+    "svelte": "^5.0.0 || ^4.0.0 || ^3.0.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@astrojs/react": "^4.4.2",
     "@astrojs/svelte": "^7.2.2",
     "@astrojs/vue": "^5.1.3",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^22.10.9",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.2",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "astro": "^5.16.1",
     "@playwright/test": "^1.55.0",
     "react-dom": "^19.0.0",
@@ -57,7 +60,7 @@
     "svelte": "^5.1.9",
     "typescript": "^5.4.3",
     "vue": "^3.5.11",
-    "vitest": "^3.0.2"
+    "vitest": "^4.0.18"
   },
   "repository": {
     "type": "git",

package/dist/test/frontend/astro-app/src/components/PerfSuiteClient.d.ts

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

package/dist/test/frontend/astro-app/src/components/PerfSuiteClient.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PerfSuiteClient.d.ts","sourceRoot":"","sources":["../../../../../../src/test/frontend/astro-app/src/components/PerfSuiteClient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA+C5D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAkL5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,225 +0,0 @@
-"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 perfScenarios_1 = require("../../../utils/perfScenarios");
-const MAX_RESULTS = 12;
-const sortResults = (results) => [...results].sort((a, b) => (b.completedAt ?? 0) - (a.completedAt ?? 0));
-const resultSignature = (result) => [
-    result.framework,
-    result.variant,
-    result.completedAt ?? result.totalDuration,
-    result.runCount,
-].join(":");
-const attachEntryId = (result) => ({
-    ...result,
-    entryId: `${result.framework}-${result.variant}-${result.completedAt ?? Date.now()}-${Math.random()
-        .toString(36)
-        .slice(2, 8)}`,
-});
-const seedResults = () => {
-    if (typeof window === "undefined")
-        return [];
-    const latest = window.perfSuite?.latestResults;
-    if (!latest)
-        return [];
-    const flattened = Object.values(latest).flatMap((variants) => Object.values(variants));
-    return sortResults(flattened.map(attachEntryId));
-};
-const formatDuration = (value) => `${value.toFixed(2)}ms`;
-const formatSubRenderCount = (block, framework) => {
-    const entries = block.objectRenderCounts?.[framework];
-    if (!entries)
-        return 0;
-    return Object.values(entries).reduce((sum, count) => sum + count, 0);
-};
-const PerfSuiteClient = () => {
-    const [results, setResults] = (0, react_1.useState)(seedResults);
-    (0, react_1.useEffect)(() => {
-        if ((0, perfScenarios_1.registerPerfRunners)()) {
-            return;
-        }
-        const timer = window.setInterval(() => {
-            if ((0, perfScenarios_1.registerPerfRunners)()) {
-                window.clearInterval(timer);
-            }
-        }, 50);
-        return () => {
-            window.clearInterval(timer);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (typeof window === "undefined")
-            return;
-        const suite = window.perfSuite;
-        if (!suite?.subscribe)
-            return;
-        const unsubscribe = suite.subscribe((result) => {
-            setResults((current) => {
-                if (current.some((entry) => resultSignature(entry) === resultSignature(result))) {
-                    return current;
-                }
-                const augmented = attachEntryId(result);
-                const next = sortResults([augmented, ...current]);
-                return next.slice(0, MAX_RESULTS);
-            });
-        });
-        return unsubscribe;
-    }, []);
-    const renderedList = (0, react_1.useMemo)(() => {
-        if (!results.length) {
-            return (<p className="perf-suite-results__empty">
-                    Awaiting perf runner output…
-                </p>);
-        }
-        return results.map((result) => (<li key={result.entryId} className="perf-suite-results__item">
-                <header>
-                    <strong>
-                        {result.framework}/{result.variant}
-                    </strong>
-                    <span>{formatDuration(result.totalDuration)}</span>
-                </header>
-                <div className="perf-suite-results__meta">
-                    <span>
-                        runs {result.runCount}
-                        {result.warmupCount
-                ? ` (+${result.warmupCount} warmup)`
-                : ""}
-                    </span>
-                    {result.completedAt ? (<time>
-                            {new Date(result.completedAt).toLocaleTimeString()}
-                        </time>) : null}
-                </div>
-                <dl>
-                    {Object.entries(result.blocks).map(([name, block]) => (<react_1.default.Fragment key={name}>
-                            <div className="perf-suite-results__block">
-                                <dt>{name}</dt>
-                                <dd>{formatDuration(block.duration)}</dd>
-                            </div>
-                            <div className="perf-suite-results__block perf-suite-results__block--subrenders">
-                                <dt>Subcomponent renders</dt>
-                                <dd>
-                                    {formatSubRenderCount(block, result.framework)}
-                                </dd>
-                            </div>
-                        </react_1.default.Fragment>))}
-                </dl>
-            </li>));
-    }, [results]);
-    return (<div className="perf-suite-results">
-            <div className="perf-suite-results__header">
-                <h3>Latest Perf Runs</h3>
-                <p>Playwright tests stream into this dashboard.</p>
-            </div>
-            <ul>{renderedList}</ul>
-            <style>
-                {`
-                .perf-suite-results {
-                    border: 1px solid var(--astro-color-border, rgba(120, 120, 120, 0.4));
-                    border-radius: 0.75rem;
-                    padding: 1rem;
-                    margin-top: 1.5rem;
-                    max-width: 720px;
-                }
-                .perf-suite-results__header {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 0.25rem;
-                    margin-bottom: 0.5rem;
-                }
-                .perf-suite-results__header h3 {
-                    margin: 0;
-                    font-size: 1.1rem;
-                }
-                .perf-suite-results__header p {
-                    margin: 0;
-                    opacity: 0.8;
-                    font-size: 0.9rem;
-                }
-                .perf-suite-results ul {
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 0.75rem;
-                }
-                .perf-suite-results__item {
-                    background: rgba(120, 120, 120, 0.08);
-                    border: 1px solid rgba(120, 120, 120, 0.3);
-                    border-radius: 0.5rem;
-                    padding: 0.75rem;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 0.35rem;
-                }
-                .perf-suite-results__item header {
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: 0.95rem;
-                }
-                .perf-suite-results__item header strong {
-                    text-transform: capitalize;
-                }
-                .perf-suite-results__meta {
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: 0.8rem;
-                    opacity: 0.8;
-                }
-                .perf-suite-results__block {
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: 0.85rem;
-                }
-                .perf-suite-results__block--subrenders {
-                    opacity: 0.85;
-                }
-                .perf-suite-results__block dt {
-                    margin: 0;
-                    text-transform: capitalize;
-                }
-                .perf-suite-results__block dd {
-                    margin: 0;
-                }
-                .perf-suite-results__empty {
-                    font-style: italic;
-                    opacity: 0.8;
-                }
-            `}
-            </style>
-        </div>);
-};
-exports.default = PerfSuiteClient;

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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,150 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}