@webiny/react-properties 6.0.0-rc.3 → 6.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,11 +3,25 @@ import { Compose, makeDecoratable } from "@webiny/react-composition";
|
|
|
3
3
|
import { Properties, toObject } from "./index.js";
|
|
4
4
|
import { useDebugConfig } from "./useDebugConfig.js";
|
|
5
5
|
import { PropertyPriorityProvider } from "./PropertyPriority.js";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Each `<Config>` call composes a new HOC around the previous one via `Compose`.
|
|
9
|
+
* The last composed HOC is the outermost wrapper. By placing `{newChildren}`
|
|
10
|
+
* (this HOC's addition) before `{children}` (all previously composed configs),
|
|
11
|
+
* the final render order matches declaration order:
|
|
12
|
+
*
|
|
13
|
+
* <Config>A</Config> → renders first (outermost HOC, its newChildren rendered first)
|
|
14
|
+
* <Config>B</Config> → renders second
|
|
15
|
+
* <Config>C</Config> → renders third (innermost, rendered last via children chain)
|
|
16
|
+
*
|
|
17
|
+
* This is important because Property components register in mount order,
|
|
18
|
+
* so declaration order = mount order = predictable config resolution.
|
|
19
|
+
*/
|
|
6
20
|
const createHOC = newChildren => BaseComponent => {
|
|
7
21
|
return function ConfigHOC({
|
|
8
22
|
children
|
|
9
23
|
}) {
|
|
10
|
-
return /*#__PURE__*/React.createElement(BaseComponent, null,
|
|
24
|
+
return /*#__PURE__*/React.createElement(BaseComponent, null, newChildren, children);
|
|
11
25
|
};
|
|
12
26
|
};
|
|
13
27
|
export function createConfigurableComponent(name) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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\nconst createHOC =\n (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n BaseComponent => {\n return function ConfigHOC({ children }) {\n return (\n <BaseComponent>\n {
|
|
1
|
+
{"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 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/react-properties",
|
|
3
|
-
"version": "6.0.0-rc.
|
|
3
|
+
"version": "6.0.0-rc.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@types/react": "18.2.79",
|
|
15
|
-
"@webiny/react-composition": "6.0.0-rc.
|
|
15
|
+
"@webiny/react-composition": "6.0.0-rc.5",
|
|
16
16
|
"lodash": "4.17.23",
|
|
17
17
|
"nanoid": "5.1.6",
|
|
18
18
|
"react": "18.2.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@testing-library/react": "15.0.7",
|
|
22
|
-
"@webiny/build-tools": "6.0.0-rc.
|
|
22
|
+
"@webiny/build-tools": "6.0.0-rc.5",
|
|
23
23
|
"prettier": "3.6.2",
|
|
24
24
|
"vitest": "4.0.18"
|
|
25
25
|
},
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"access": "public",
|
|
28
28
|
"directory": "dist"
|
|
29
29
|
},
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "8f9b60f1193682a21e037e6f771b19f1dfd65045"
|
|
31
31
|
}
|