@webiny/react-properties 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/createConfigurableComponent.js

@@ -1,7 +1,22 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Compose, makeDecoratable } from "@webiny/react-composition";
-import { Properties, toObject } from "./index";
-import { useDebugConfig } from "./useDebugConfig";
+import { Properties, toObject } from "./index.js";
+import { useDebugConfig } from "./useDebugConfig.js";
+import { PropertyPriorityProvider } from "./PropertyPriority.js";
+
+/**
+ * Each `<Config>` call composes a new HOC around the previous one via `Compose`.
+ * The last composed HOC is the outermost wrapper. By placing `{newChildren}`
+ * (this HOC's addition) before `{children}` (all previously composed configs),
+ * the final render order matches declaration order:
+ *
+ *   <Config>A</Config>  →  renders first  (outermost HOC, its newChildren rendered first)
+ *   <Config>B</Config>  →  renders second
+ *   <Config>C</Config>  →  renders third  (innermost, rendered last via children chain)
+ *
+ * This is important because Property components register in mount order,
+ * so declaration order = mount order = predictable config resolution.
+ */
 const createHOC = newChildren => BaseComponent => {
   return function ConfigHOC({
     children
@@ -10,9 +25,6 @@ const createHOC = newChildren => BaseComponent => {
   };
 };
 export function createConfigurableComponent(name) {
-  /**
-   * This component is used when we want to mount all composed configs.
-   */
   const ConfigApplyPrimary = makeDecoratable(`${name}ConfigApply<Primary>`, ({
     children
   }) => {
@@ -23,10 +35,6 @@ export function createConfigurableComponent(name) {
   }) => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   });
-
-  /**
-   * This component is used to configure the component (it can be mounted many times).
-   */
   const Config = ({
     priority = "primary",
     children
@@ -46,28 +54,47 @@ export function createConfigurableComponent(name) {
     properties: []
   };
   const ViewContext = /*#__PURE__*/React.createContext(defaultContext);
+
+  /**
+   * Memoized config subtree — ConfigApply components don't depend on WithConfig
+   * props, so they must not remount when the parent re-renders. Without this,
+   * every parent re-render causes Property components inside HOCs to unmount
+   * and remount, corrupting the config object.
+   */
+  const ConfigApplyTree = /*#__PURE__*/React.memo(function ConfigApplyTree() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigApplyPrimary, null), /*#__PURE__*/React.createElement(PropertyPriorityProvider, {
+      priority: 1
+    }, /*#__PURE__*/React.createElement(ConfigApplySecondary, null)));
+  });
   const WithConfig = ({
     onProperties,
     children
   }) => {
-    const [properties, setProperties] = useState([]);
-    useDebugConfig(name, properties);
+    // `null` = config not yet collected; `[]` = collected but empty.
+    // This distinction is critical: children must NOT render until the
+    // PropertyStore debounce has flushed and delivered the initial config.
+    // Rendering children with partial/empty config causes errors in
+    // consumers like LexicalEditor that require a complete config on mount.
+    const [properties, setProperties] = useState(null);
+    const resolvedProperties = properties ?? [];
+    useDebugConfig(name, resolvedProperties);
     const context = {
-      properties
+      properties: resolvedProperties
     };
     useEffect(() => {
-      if (typeof onProperties === "function") {
+      if (properties !== null && typeof onProperties === "function") {
         onProperties(properties);
       }
     }, [properties]);
-    const stateUpdater = properties => {
+    const stateUpdater = useCallback(properties => {
       setProperties(properties);
-    };
+    }, []);
     return /*#__PURE__*/React.createElement(ViewContext.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(Properties, {
+      name: name,
       onChange: stateUpdater
-    }, /*#__PURE__*/React.createElement(ConfigApplyPrimary, null), /*#__PURE__*/React.createElement(ConfigApplySecondary, null), children));
+    }, /*#__PURE__*/React.createElement(ConfigApplyTree, null)), properties !== null ? children : null);
   };
   function useConfig() {
     const {

package/createConfigurableComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Compose","makeDecoratable","Properties","toObject","useDebugConfig","createHOC","newChildren","BaseComponent","ConfigHOC","children","createElement","createConfigurableComponent","name","ConfigApplyPrimary","Fragment","ConfigApplySecondary","Config","priority","component","with","defaultContext","properties","ViewContext","createContext","WithConfig","onProperties","setProperties","context","stateUpdater","Provider","value","onChange","useConfig"],"sources":["createConfigurableComponent.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types\";\nimport type { Property } from \"~/index\";\nimport { Properties, toObject } from \"~/index\";\nimport { useDebugConfig } from \"./useDebugConfig\";\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n    priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n    /**\n     * This component is used when we want to mount all composed configs.\n     */\n    const ConfigApplyPrimary = makeDecoratable(\n        `${name}ConfigApply<Primary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ConfigApplySecondary = makeDecoratable(\n        `${name}ConfigApply<Secondary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    /**\n     * This component is used to configure the component (it can be mounted many times).\n     */\n    const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n        if (priority === \"primary\") {\n            return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n        }\n        return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        properties: Property[];\n    }\n\n    const defaultContext = { properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        const [properties, setProperties] = useState<Property[]>([]);\n        useDebugConfig(name, properties);\n        const context = { properties };\n\n        useEffect(() => {\n            if (typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = (properties: Property[]) => {\n            setProperties(properties);\n        };\n\n        return (\n            <ViewContext.Provider value={context}>\n                <Properties onChange={stateUpdater}>\n                    <ConfigApplyPrimary />\n                    <ConfigApplySecondary />\n                    {children}\n                </Properties>\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    return {\n        WithConfig,\n        Config,\n        useConfig\n    };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useContext","useEffect","useMemo","useState","Compose","makeDecoratable","Properties","toObject","useDebugConfig","PropertyPriorityProvider","createHOC","newChildren","BaseComponent","ConfigHOC","children","createElement","createConfigurableComponent","name","ConfigApplyPrimary","Fragment","ConfigApplySecondary","Config","priority","component","with","defaultContext","properties","ViewContext","createContext","ConfigApplyTree","memo","WithConfig","onProperties","setProperties","resolvedProperties","context","stateUpdater","Provider","value","onChange","useConfig"],"sources":["createConfigurableComponent.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types.js\";\nimport type { Property } from \"~/index.js\";\nimport { Properties, toObject } from \"~/index.js\";\nimport { useDebugConfig } from \"./useDebugConfig.js\";\nimport { PropertyPriorityProvider } from \"./PropertyPriority.js\";\n\n/**\n * Each `<Config>` call composes a new HOC around the previous one via `Compose`.\n * The last composed HOC is the outermost wrapper. By placing `{newChildren}`\n * (this HOC's addition) before `{children}` (all previously composed configs),\n * the final render order matches declaration order:\n *\n *   <Config>A</Config>  →  renders first  (outermost HOC, its newChildren rendered first)\n *   <Config>B</Config>  →  renders second\n *   <Config>C</Config>  →  renders third  (innermost, rendered last via children chain)\n *\n * This is important because Property components register in mount order,\n * so declaration order = mount order = predictable config resolution.\n */\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n    priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n    const ConfigApplyPrimary = makeDecoratable(\n        `${name}ConfigApply<Primary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ConfigApplySecondary = makeDecoratable(\n        `${name}ConfigApply<Secondary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n        if (priority === \"primary\") {\n            return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n        }\n        return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        properties: Property[];\n    }\n\n    const defaultContext = { properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    /**\n     * Memoized config subtree — ConfigApply components don't depend on WithConfig\n     * props, so they must not remount when the parent re-renders. Without this,\n     * every parent re-render causes Property components inside HOCs to unmount\n     * and remount, corrupting the config object.\n     */\n    const ConfigApplyTree = React.memo(function ConfigApplyTree() {\n        return (\n            <>\n                <ConfigApplyPrimary />\n                <PropertyPriorityProvider priority={1}>\n                    <ConfigApplySecondary />\n                </PropertyPriorityProvider>\n            </>\n        );\n    });\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        // `null` = config not yet collected; `[]` = collected but empty.\n        // This distinction is critical: children must NOT render until the\n        // PropertyStore debounce has flushed and delivered the initial config.\n        // Rendering children with partial/empty config causes errors in\n        // consumers like LexicalEditor that require a complete config on mount.\n        const [properties, setProperties] = useState<Property[] | null>(null);\n        const resolvedProperties = properties ?? [];\n        useDebugConfig(name, resolvedProperties);\n        const context = { properties: resolvedProperties };\n\n        useEffect(() => {\n            if (properties !== null && typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = useCallback((properties: Property[]) => {\n            setProperties(properties);\n        }, []);\n\n        return (\n            <ViewContext.Provider value={context}>\n                {/* ConfigApplyTree always renders so Property components inside\n                    composed HOCs can mount and register with the PropertyStore.\n                    It lives outside the children gate below. */}\n                <Properties name={name} onChange={stateUpdater}>\n                    <ConfigApplyTree />\n                </Properties>\n                {/* Gate: only render children once the PropertyStore has flushed\n                    its first batch (properties !== null). This guarantees that\n                    useConfig() returns a complete config object on first render. */}\n                {properties !== null ? children : null}\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    return {\n        WithConfig,\n        Config,\n        useConfig\n    };\n}\n"],"mappings":"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","ignoreList":[]}

package/domain/PropertyStore.d.ts

@@ -0,0 +1,51 @@
+import type { Property } from "../Properties.js";
+interface AddPropertyOptions {
+    after?: string;
+    before?: string;
+    priority?: number;
+}
+type Listener = (properties: Property[]) => void;
+export declare class PropertyStore {
+    private map;
+    private order;
+    private queue;
+    private listeners;
+    private priorities;
+    /** Properties that were explicitly positioned via before/after. */
+    private positioned;
+    /**
+     * Synchronous lookup map — written immediately on addProperty (before debounce),
+     * so useAncestor can find properties during render.
+     */
+    private lookup;
+    private scheduleFlush;
+    get allProperties(): Property[];
+    subscribe(listener: Listener): () => void;
+    /**
+     * Returns properties that are children of the given parent ID.
+     * Reads from the synchronous lookup map, so it works during render
+     * before the debounced queue has flushed.
+     */
+    getChildrenOf(parentId: string): Property[];
+    /**
+     * Find a property by ID from the synchronous lookup map.
+     */
+    getById(id: string): Property | undefined;
+    /**
+     * Register a property in the synchronous lookup map during render,
+     * so useAncestor can find it before the debounced queue flushes.
+     */
+    registerLookup(property: Property): void;
+    addProperty(property: Property, options?: AddPropertyOptions): void;
+    removeProperty(id: string): void;
+    replaceProperty(oldId: string, newProperty: Property): void;
+    private processQueue;
+    private executeAdd;
+    private executeRemove;
+    private executeReplace;
+    private insertBefore;
+    private insertAfter;
+    private reposition;
+    private removeDescendants;
+}
+export {};

package/domain/PropertyStore.js

@@ -0,0 +1,229 @@
+import debounce from "lodash/debounce.js";
+export class PropertyStore {
+  map = new Map();
+  order = [];
+  queue = [];
+  listeners = new Set();
+  priorities = new Map();
+  /** Properties that were explicitly positioned via before/after. */
+  positioned = new Set();
+
+  /**
+   * Synchronous lookup map — written immediately on addProperty (before debounce),
+   * so useAncestor can find properties during render.
+   */
+  lookup = new Map();
+  scheduleFlush = debounce(() => {
+    this.processQueue();
+  }, 0);
+  get allProperties() {
+    return this.order.filter(id => this.map.has(id)).map(id => this.map.get(id));
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Returns properties that are children of the given parent ID.
+   * Reads from the synchronous lookup map, so it works during render
+   * before the debounced queue has flushed.
+   */
+  getChildrenOf(parentId) {
+    return Array.from(this.lookup.values()).filter(p => p.parent === parentId);
+  }
+
+  /**
+   * Find a property by ID from the synchronous lookup map.
+   */
+  getById(id) {
+    return this.lookup.get(id);
+  }
+
+  /**
+   * Register a property in the synchronous lookup map during render,
+   * so useAncestor can find it before the debounced queue flushes.
+   */
+  registerLookup(property) {
+    if (this.lookup.has(property.id)) {
+      const existing = this.lookup.get(property.id);
+      this.lookup.set(property.id, {
+        ...existing,
+        ...property
+      });
+    } else {
+      this.lookup.set(property.id, property);
+    }
+  }
+  addProperty(property, options = {}) {
+    this.registerLookup(property);
+    this.queue.push({
+      type: "add",
+      property,
+      options
+    });
+    this.scheduleFlush();
+  }
+  removeProperty(id) {
+    this.lookup.delete(id);
+    this.queue.push({
+      type: "remove",
+      id
+    });
+    this.scheduleFlush();
+  }
+  replaceProperty(oldId, newProperty) {
+    this.lookup.delete(oldId);
+    this.lookup.set(newProperty.id, newProperty);
+    this.queue.push({
+      type: "replace",
+      oldId,
+      newProperty
+    });
+    this.scheduleFlush();
+  }
+  processQueue() {
+    if (this.queue.length === 0) {
+      return;
+    }
+    const ops = this.queue.splice(0);
+
+    // Stable-sort operations so that "add" ops with lower priority numbers
+    // are processed first. Non-add operations and adds with default priority (0)
+    // keep their original order.
+    ops.sort((a, b) => {
+      const pa = a.type === "add" ? a.options.priority ?? 0 : 0;
+      const pb = b.type === "add" ? b.options.priority ?? 0 : 0;
+      return pa - pb;
+    });
+    for (const op of ops) {
+      switch (op.type) {
+        case "add":
+          this.executeAdd(op.property, op.options);
+          break;
+        case "remove":
+          this.executeRemove(op.id);
+          break;
+        case "replace":
+          this.executeReplace(op.oldId, op.newProperty);
+          break;
+      }
+    }
+
+    // Stable-sort the order array by priority, but only for properties
+    // that were NOT explicitly positioned via before/after. Explicitly
+    // positioned properties keep their placement.
+    this.order.sort((a, b) => {
+      if (this.positioned.has(a) || this.positioned.has(b)) {
+        return 0;
+      }
+      return (this.priorities.get(a) ?? 0) - (this.priorities.get(b) ?? 0);
+    });
+    const properties = this.allProperties;
+    for (const listener of this.listeners) {
+      listener(properties);
+    }
+  }
+  executeAdd(property, options) {
+    if (options.after || options.before) {
+      this.positioned.add(property.id);
+    }
+    const exists = this.map.has(property.id);
+    if (exists) {
+      // Merge into existing property. Keep the original priority so
+      // that a secondary config overriding a primary property doesn't
+      // cause the re-sort to move it after all primary properties.
+      const existing = this.map.get(property.id);
+      this.map.set(property.id, {
+        ...existing,
+        ...property
+      });
+      if (options.after) {
+        this.reposition(property.id, options.after, "after");
+      } else if (options.before) {
+        this.reposition(property.id, options.before, "before");
+      }
+      return;
+    }
+    this.map.set(property.id, property);
+    // Set priority only for new properties — not merges (handled above).
+    this.priorities.set(property.id, options.priority ?? 0);
+    if (options.after) {
+      this.insertAfter(property.id, options.after);
+    } else if (options.before) {
+      this.insertBefore(property.id, options.before);
+    } else {
+      this.order.push(property.id);
+    }
+  }
+  executeRemove(id) {
+    if (!this.map.has(id)) {
+      return;
+    }
+    this.map.delete(id);
+    this.priorities.delete(id);
+    this.positioned.delete(id);
+    this.order = this.order.filter(oid => oid !== id);
+    // Note: we intentionally do NOT call removeDescendants here.
+    // React's component lifecycle ensures that when a parent Property
+    // unmounts, all child Properties unmount too — each triggering its
+    // own removeProperty call. Calling removeDescendants would wipe
+    // children that belong to OTHER still-mounted configs sharing the
+    // same parent ID (e.g., id="pageSettings" used by both primary
+    // and secondary configs).
+  }
+  executeReplace(oldId, newProperty) {
+    const idx = this.order.indexOf(oldId);
+    if (idx === -1) {
+      return;
+    }
+    this.map.delete(oldId);
+    this.map.set(newProperty.id, newProperty);
+    this.order[idx] = newProperty.id;
+    this.removeDescendants(oldId);
+  }
+  insertBefore(id, before) {
+    if (before.endsWith("$first")) {
+      this.order.unshift(id);
+      return;
+    }
+    const targetIdx = this.order.indexOf(before);
+    if (targetIdx === -1) {
+      this.order.push(id);
+      return;
+    }
+    this.order.splice(targetIdx, 0, id);
+  }
+  insertAfter(id, after) {
+    if (after.endsWith("$last")) {
+      this.order.push(id);
+      return;
+    }
+    const targetIdx = this.order.indexOf(after);
+    if (targetIdx === -1) {
+      this.order.push(id);
+      return;
+    }
+    this.order.splice(targetIdx + 1, 0, id);
+  }
+  reposition(id, targetId, position) {
+    this.order = this.order.filter(oid => oid !== id);
+    if (position === "before") {
+      this.insertBefore(id, targetId);
+    } else {
+      this.insertAfter(id, targetId);
+    }
+  }
+  removeDescendants(parentId) {
+    const children = Array.from(this.map.values()).filter(p => p.parent === parentId);
+    for (const child of children) {
+      this.map.delete(child.id);
+      this.order = this.order.filter(oid => oid !== child.id);
+      this.removeDescendants(child.id);
+    }
+  }
+}
+
+//# sourceMappingURL=PropertyStore.js.map

package/domain/PropertyStore.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["debounce","PropertyStore","map","Map","order","queue","listeners","Set","priorities","positioned","lookup","scheduleFlush","processQueue","allProperties","filter","id","has","get","subscribe","listener","add","delete","getChildrenOf","parentId","Array","from","values","p","parent","getById","registerLookup","property","existing","set","addProperty","options","push","type","removeProperty","replaceProperty","oldId","newProperty","length","ops","splice","sort","a","b","pa","priority","pb","op","executeAdd","executeRemove","executeReplace","properties","after","before","exists","reposition","insertAfter","insertBefore","oid","idx","indexOf","removeDescendants","endsWith","unshift","targetIdx","targetId","position","children","child"],"sources":["PropertyStore.ts"],"sourcesContent":["import debounce from \"lodash/debounce.js\";\nimport type { Property } from \"../Properties.js\";\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n    priority?: number;\n}\n\ntype Operation =\n    | { type: \"add\"; property: Property; options: AddPropertyOptions }\n    | { type: \"remove\"; id: string }\n    | { type: \"replace\"; oldId: string; newProperty: Property };\n\ntype Listener = (properties: Property[]) => void;\n\nexport class PropertyStore {\n    private map = new Map<string, Property>();\n    private order: string[] = [];\n    private queue: Operation[] = [];\n    private listeners = new Set<Listener>();\n    private priorities = new Map<string, number>();\n    /** Properties that were explicitly positioned via before/after. */\n    private positioned = new Set<string>();\n\n    /**\n     * Synchronous lookup map — written immediately on addProperty (before debounce),\n     * so useAncestor can find properties during render.\n     */\n    private lookup = new Map<string, Property>();\n\n    private scheduleFlush = debounce(() => {\n        this.processQueue();\n    }, 0);\n\n    get allProperties(): Property[] {\n        return this.order.filter(id => this.map.has(id)).map(id => this.map.get(id)!);\n    }\n\n    subscribe(listener: Listener): () => void {\n        this.listeners.add(listener);\n        return () => {\n            this.listeners.delete(listener);\n        };\n    }\n\n    /**\n     * Returns properties that are children of the given parent ID.\n     * Reads from the synchronous lookup map, so it works during render\n     * before the debounced queue has flushed.\n     */\n    getChildrenOf(parentId: string): Property[] {\n        return Array.from(this.lookup.values()).filter(p => p.parent === parentId);\n    }\n\n    /**\n     * Find a property by ID from the synchronous lookup map.\n     */\n    getById(id: string): Property | undefined {\n        return this.lookup.get(id);\n    }\n\n    /**\n     * Register a property in the synchronous lookup map during render,\n     * so useAncestor can find it before the debounced queue flushes.\n     */\n    registerLookup(property: Property): void {\n        if (this.lookup.has(property.id)) {\n            const existing = this.lookup.get(property.id)!;\n            this.lookup.set(property.id, { ...existing, ...property });\n        } else {\n            this.lookup.set(property.id, property);\n        }\n    }\n\n    addProperty(property: Property, options: AddPropertyOptions = {}): void {\n        this.registerLookup(property);\n        this.queue.push({ type: \"add\", property, options });\n        this.scheduleFlush();\n    }\n\n    removeProperty(id: string): void {\n        this.lookup.delete(id);\n        this.queue.push({ type: \"remove\", id });\n        this.scheduleFlush();\n    }\n\n    replaceProperty(oldId: string, newProperty: Property): void {\n        this.lookup.delete(oldId);\n        this.lookup.set(newProperty.id, newProperty);\n        this.queue.push({ type: \"replace\", oldId, newProperty });\n        this.scheduleFlush();\n    }\n\n    private processQueue(): void {\n        if (this.queue.length === 0) {\n            return;\n        }\n\n        const ops = this.queue.splice(0);\n\n        // Stable-sort operations so that \"add\" ops with lower priority numbers\n        // are processed first. Non-add operations and adds with default priority (0)\n        // keep their original order.\n        ops.sort((a, b) => {\n            const pa = a.type === \"add\" ? (a.options.priority ?? 0) : 0;\n            const pb = b.type === \"add\" ? (b.options.priority ?? 0) : 0;\n            return pa - pb;\n        });\n\n        for (const op of ops) {\n            switch (op.type) {\n                case \"add\":\n                    this.executeAdd(op.property, op.options);\n                    break;\n                case \"remove\":\n                    this.executeRemove(op.id);\n                    break;\n                case \"replace\":\n                    this.executeReplace(op.oldId, op.newProperty);\n                    break;\n            }\n        }\n\n        // Stable-sort the order array by priority, but only for properties\n        // that were NOT explicitly positioned via before/after. Explicitly\n        // positioned properties keep their placement.\n        this.order.sort((a, b) => {\n            if (this.positioned.has(a) || this.positioned.has(b)) {\n                return 0;\n            }\n            return (this.priorities.get(a) ?? 0) - (this.priorities.get(b) ?? 0);\n        });\n\n        const properties = this.allProperties;\n        for (const listener of this.listeners) {\n            listener(properties);\n        }\n    }\n\n    private executeAdd(property: Property, options: AddPropertyOptions): void {\n        if (options.after || options.before) {\n            this.positioned.add(property.id);\n        }\n\n        const exists = this.map.has(property.id);\n\n        if (exists) {\n            // Merge into existing property. Keep the original priority so\n            // that a secondary config overriding a primary property doesn't\n            // cause the re-sort to move it after all primary properties.\n            const existing = this.map.get(property.id)!;\n            this.map.set(property.id, { ...existing, ...property });\n\n            if (options.after) {\n                this.reposition(property.id, options.after, \"after\");\n            } else if (options.before) {\n                this.reposition(property.id, options.before, \"before\");\n            }\n            return;\n        }\n\n        this.map.set(property.id, property);\n        // Set priority only for new properties — not merges (handled above).\n        this.priorities.set(property.id, options.priority ?? 0);\n\n        if (options.after) {\n            this.insertAfter(property.id, options.after);\n        } else if (options.before) {\n            this.insertBefore(property.id, options.before);\n        } else {\n            this.order.push(property.id);\n        }\n    }\n\n    private executeRemove(id: string): void {\n        if (!this.map.has(id)) {\n            return;\n        }\n        this.map.delete(id);\n        this.priorities.delete(id);\n        this.positioned.delete(id);\n        this.order = this.order.filter(oid => oid !== id);\n        // Note: we intentionally do NOT call removeDescendants here.\n        // React's component lifecycle ensures that when a parent Property\n        // unmounts, all child Properties unmount too — each triggering its\n        // own removeProperty call. Calling removeDescendants would wipe\n        // children that belong to OTHER still-mounted configs sharing the\n        // same parent ID (e.g., id=\"pageSettings\" used by both primary\n        // and secondary configs).\n    }\n\n    private executeReplace(oldId: string, newProperty: Property): void {\n        const idx = this.order.indexOf(oldId);\n        if (idx === -1) {\n            return;\n        }\n\n        this.map.delete(oldId);\n        this.map.set(newProperty.id, newProperty);\n        this.order[idx] = newProperty.id;\n        this.removeDescendants(oldId);\n    }\n\n    private insertBefore(id: string, before: string): void {\n        if (before.endsWith(\"$first\")) {\n            this.order.unshift(id);\n            return;\n        }\n        const targetIdx = this.order.indexOf(before);\n        if (targetIdx === -1) {\n            this.order.push(id);\n            return;\n        }\n        this.order.splice(targetIdx, 0, id);\n    }\n\n    private insertAfter(id: string, after: string): void {\n        if (after.endsWith(\"$last\")) {\n            this.order.push(id);\n            return;\n        }\n        const targetIdx = this.order.indexOf(after);\n        if (targetIdx === -1) {\n            this.order.push(id);\n            return;\n        }\n        this.order.splice(targetIdx + 1, 0, id);\n    }\n\n    private reposition(id: string, targetId: string, position: \"before\" | \"after\"): void {\n        this.order = this.order.filter(oid => oid !== id);\n\n        if (position === \"before\") {\n            this.insertBefore(id, targetId);\n        } else {\n            this.insertAfter(id, targetId);\n        }\n    }\n\n    private removeDescendants(parentId: string): void {\n        const children = Array.from(this.map.values()).filter(p => p.parent === parentId);\n        for (const child of children) {\n            this.map.delete(child.id);\n            this.order = this.order.filter(oid => oid !== child.id);\n            this.removeDescendants(child.id);\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/domain/index.d.ts

@@ -0,0 +1 @@
+export { PropertyStore } from "./PropertyStore.js";

package/domain/index.js

@@ -0,0 +1,3 @@
+export { PropertyStore } from "./PropertyStore.js";
+
+//# sourceMappingURL=index.js.map

package/domain/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PropertyStore"],"sources":["index.ts"],"sourcesContent":["export { PropertyStore } from \"./PropertyStore.js\";\n"],"mappings":"AAAA,SAASA,aAAa","ignoreList":[]}

package/index.d.ts

@@ -1,5 +1,7 @@
-export * from "./utils";
-export * from "./Properties";
-export * from "./useDebugConfig";
-export * from "./useIdGenerator";
-export * from "./createConfigurableComponent";
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";
+export * from "./domain/index.js";
+export { DevToolsSection } from "./DevToolsSection.js";

package/index.js

@@ -1,7 +1,9 @@
-export * from "./utils";
-export * from "./Properties";
-export * from "./useDebugConfig";
-export * from "./useIdGenerator";
-export * from "./createConfigurableComponent";
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";
+export * from "./domain/index.js";
+export { DevToolsSection } from "./DevToolsSection.js";
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./utils\";\nexport * from \"./Properties\";\nexport * from \"./useDebugConfig\";\nexport * from \"./useIdGenerator\";\nexport * from \"./createConfigurableComponent\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":["DevToolsSection"],"sources":["index.ts"],"sourcesContent":["export * from \"./utils.js\";\nexport * from \"./Properties.js\";\nexport * from \"./useDebugConfig.js\";\nexport * from \"./useIdGenerator.js\";\nexport * from \"./createConfigurableComponent.js\";\nexport * from \"./domain/index.js\";\nexport { DevToolsSection } from \"./DevToolsSection.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,eAAe","ignoreList":[]}

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "@webiny/react-properties",
-	"version": "0.0.0-unstable.e53eceafb5",
-	"main": "index.js",
+	"version": "0.0.0-unstable.e6f0dc8ca7",
+	"type": "module",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -10,23 +14,21 @@
 	"author": "Webiny Ltd",
 	"license": "MIT",
 	"dependencies": {
-		"@types/react": "18.2.79",
-		"@webiny/react-composition": "0.0.0-unstable.e53eceafb5",
-		"nanoid": "3.3.8",
-		"react": "18.2.0"
+		"@types/react": "18.3.28",
+		"@webiny/react-composition": "0.0.0-unstable.e6f0dc8ca7",
+		"lodash": "4.18.1",
+		"nanoid": "5.1.11",
+		"react": "18.3.1"
 	},
 	"devDependencies": {
-		"@testing-library/react": "15.0.7",
-		"@webiny/project-utils": "0.0.0-unstable.e53eceafb5",
-		"prettier": "2.8.8"
+		"@testing-library/react": "16.3.2",
+		"@webiny/build-tools": "0.0.0-unstable.e6f0dc8ca7",
+		"oxfmt": "0.48.0",
+		"vitest": "4.1.5"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
-	"gitHead": "e53eceafb5ce1a3872c9b4548939bb2eae5b1aef"
+	"gitHead": "e6f0dc8ca741c1fcc3fec9a5b9e86fdd49544641"
 }

package/useDebugConfig.d.ts

@@ -1,7 +1,32 @@
-import type { Property } from "./Properties";
+import type { Property } from "./Properties.js";
+interface WebinyDevtoolsConfig {
+    properties: Array<{
+        id: string;
+        parent: string;
+        name: string;
+        value?: unknown;
+        array?: boolean;
+    }>;
+    config: unknown;
+    updatedAt: number;
+}
+interface WebinyDevtoolsSection {
+    data: unknown;
+    group: string;
+    views: string[];
+    updatedAt: number;
+}
+interface WebinyDevtoolsHook {
+    revision: number;
+    configs: Record<string, WebinyDevtoolsConfig>;
+    sections: Record<string, WebinyDevtoolsSection>;
+}
 declare global {
     interface Window {
         __debugConfigs: Record<string, () => void>;
+        __WEBINY_DEVTOOLS_HOOK__?: WebinyDevtoolsHook;
     }
 }
+export declare function getHook(): WebinyDevtoolsHook;
 export declare function useDebugConfig(name: string, properties: Property[]): void;
+export {};

package/useDebugConfig.js

@@ -1,17 +1,51 @@
 import { useEffect } from "react";
-import { toObject } from "./utils";
+import { toObject } from "./utils.js";
+export function getHook() {
+  if (!window.__WEBINY_DEVTOOLS_HOOK__) {
+    window.__WEBINY_DEVTOOLS_HOOK__ = {
+      revision: 0,
+      configs: {},
+      sections: {}
+    };
+  }
+  return window.__WEBINY_DEVTOOLS_HOOK__;
+}
 export function useDebugConfig(name, properties) {
   useEffect(() => {
     if (process.env.NODE_ENV !== "development") {
       return;
     }
+
+    // Legacy console.log support
     const configs = window.__debugConfigs ?? {};
     configs[name] = () => console.log(toObject(properties));
     window.__debugConfigs = configs;
+
+    // DevTools hook: structured data for the Chrome extension
+    const hook = getHook();
+    hook.configs[name] = {
+      properties: properties.map(p => ({
+        id: p.id,
+        parent: p.parent,
+        name: p.name,
+        value: p.value,
+        array: p.array
+      })),
+      config: toObject(properties),
+      updatedAt: Date.now()
+    };
+    hook.revision++;
     return () => {
+      // Legacy cleanup
       const configs = window.__debugConfigs ?? {};
       delete configs[name];
       window.__debugConfigs = configs;
+
+      // DevTools hook cleanup
+      if (window.__WEBINY_DEVTOOLS_HOOK__) {
+        delete window.__WEBINY_DEVTOOLS_HOOK__.configs[name];
+        window.__WEBINY_DEVTOOLS_HOOK__.revision++;
+      }
     };
   }, [properties]);
 }