@webiny/react-properties 0.0.0-unstable.b14eaecf38 → 0.0.0-unstable.b6d7105cee
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.
- package/AsyncProperties.d.ts +14 -0
- package/AsyncProperties.js +43 -0
- package/AsyncProperties.js.map +1 -0
- package/Await.d.ts +7 -0
- package/Await.js +44 -0
- package/Await.js.map +1 -0
- package/DevToolsSection.d.ts +40 -0
- package/DevToolsSection.js +54 -0
- package/DevToolsSection.js.map +1 -0
- package/Properties.d.ts +19 -3
- package/Properties.js +129 -182
- package/Properties.js.map +1 -1
- package/PropertyPriority.d.ts +8 -0
- package/PropertyPriority.js +11 -0
- package/PropertyPriority.js.map +1 -0
- package/README.md +7 -61
- package/createConfigurableComponent.d.ts +15 -0
- package/createConfigurableComponent.js +67 -0
- package/createConfigurableComponent.js.map +1 -0
- package/domain/PropertyStore.d.ts +52 -0
- package/domain/PropertyStore.js +162 -0
- package/domain/PropertyStore.js.map +1 -0
- package/domain/index.d.ts +1 -0
- package/domain/index.js +1 -0
- package/index.d.ts +9 -2
- package/index.js +9 -27
- package/package.json +19 -18
- package/useDebugConfig.d.ts +32 -0
- package/useDebugConfig.js +45 -0
- package/useDebugConfig.js.map +1 -0
- package/useIdGenerator.d.ts +1 -0
- package/useIdGenerator.js +23 -0
- package/useIdGenerator.js.map +1 -0
- package/utils.d.ts +1 -1
- package/utils.js +43 -39
- package/utils.js.map +1 -1
- package/index.js.map +0 -1
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { Property } from "./Properties.js";
|
|
2
|
+
interface WebinyDevtoolsConfig {
|
|
3
|
+
properties: Array<{
|
|
4
|
+
id: string;
|
|
5
|
+
parent: string;
|
|
6
|
+
name: string;
|
|
7
|
+
value?: unknown;
|
|
8
|
+
array?: boolean;
|
|
9
|
+
}>;
|
|
10
|
+
config: unknown;
|
|
11
|
+
updatedAt: number;
|
|
12
|
+
}
|
|
13
|
+
interface WebinyDevtoolsSection {
|
|
14
|
+
data: unknown;
|
|
15
|
+
group: string;
|
|
16
|
+
views: string[];
|
|
17
|
+
updatedAt: number;
|
|
18
|
+
}
|
|
19
|
+
interface WebinyDevtoolsHook {
|
|
20
|
+
revision: number;
|
|
21
|
+
configs: Record<string, WebinyDevtoolsConfig>;
|
|
22
|
+
sections: Record<string, WebinyDevtoolsSection>;
|
|
23
|
+
}
|
|
24
|
+
declare global {
|
|
25
|
+
interface Window {
|
|
26
|
+
__debugConfigs: Record<string, () => void>;
|
|
27
|
+
__WEBINY_DEVTOOLS_HOOK__?: WebinyDevtoolsHook;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export declare function getHook(): WebinyDevtoolsHook;
|
|
31
|
+
export declare function useDebugConfig(name: string, properties: Property[]): void;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { toObject } from "./utils.js";
|
|
3
|
+
function getHook() {
|
|
4
|
+
if (!window.__WEBINY_DEVTOOLS_HOOK__) window.__WEBINY_DEVTOOLS_HOOK__ = {
|
|
5
|
+
revision: 0,
|
|
6
|
+
configs: {},
|
|
7
|
+
sections: {}
|
|
8
|
+
};
|
|
9
|
+
return window.__WEBINY_DEVTOOLS_HOOK__;
|
|
10
|
+
}
|
|
11
|
+
function useDebugConfig(name, properties) {
|
|
12
|
+
useEffect(()=>{
|
|
13
|
+
if ("development" !== process.env.NODE_ENV) return;
|
|
14
|
+
const configs = window.__debugConfigs ?? {};
|
|
15
|
+
configs[name] = ()=>console.log(toObject(properties));
|
|
16
|
+
window.__debugConfigs = configs;
|
|
17
|
+
const hook = getHook();
|
|
18
|
+
hook.configs[name] = {
|
|
19
|
+
properties: properties.map((p)=>({
|
|
20
|
+
id: p.id,
|
|
21
|
+
parent: p.parent,
|
|
22
|
+
name: p.name,
|
|
23
|
+
value: p.value,
|
|
24
|
+
array: p.array
|
|
25
|
+
})),
|
|
26
|
+
config: toObject(properties),
|
|
27
|
+
updatedAt: Date.now()
|
|
28
|
+
};
|
|
29
|
+
hook.revision++;
|
|
30
|
+
return ()=>{
|
|
31
|
+
const configs = window.__debugConfigs ?? {};
|
|
32
|
+
delete configs[name];
|
|
33
|
+
window.__debugConfigs = configs;
|
|
34
|
+
if (window.__WEBINY_DEVTOOLS_HOOK__) {
|
|
35
|
+
delete window.__WEBINY_DEVTOOLS_HOOK__.configs[name];
|
|
36
|
+
window.__WEBINY_DEVTOOLS_HOOK__.revision++;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}, [
|
|
40
|
+
properties
|
|
41
|
+
]);
|
|
42
|
+
}
|
|
43
|
+
export { getHook, useDebugConfig };
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=useDebugConfig.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebugConfig.js","sources":["../src/useDebugConfig.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Property } from \"./Properties.js\";\nimport { toObject } from \"./utils.js\";\n\ninterface WebinyDevtoolsConfig {\n properties: Array<{\n id: string;\n parent: string;\n name: string;\n value?: unknown;\n array?: boolean;\n }>;\n config: unknown;\n updatedAt: number;\n}\n\ninterface WebinyDevtoolsSection {\n data: unknown;\n group: string;\n views: string[];\n updatedAt: number;\n}\n\ninterface WebinyDevtoolsHook {\n revision: number;\n configs: Record<string, WebinyDevtoolsConfig>;\n sections: Record<string, WebinyDevtoolsSection>;\n}\n\ndeclare global {\n interface Window {\n __debugConfigs: Record<string, () => void>;\n __WEBINY_DEVTOOLS_HOOK__?: WebinyDevtoolsHook;\n }\n}\n\nexport function getHook(): WebinyDevtoolsHook {\n if (!window.__WEBINY_DEVTOOLS_HOOK__) {\n window.__WEBINY_DEVTOOLS_HOOK__ = { revision: 0, configs: {}, sections: {} };\n }\n return window.__WEBINY_DEVTOOLS_HOOK__;\n}\n\nexport function useDebugConfig(name: string, properties: Property[]) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\") {\n return;\n }\n\n // Legacy console.log support\n const configs = window.__debugConfigs ?? {};\n configs[name] = () => console.log(toObject(properties));\n window.__debugConfigs = configs;\n\n // DevTools hook: structured data for the Chrome extension\n const hook = getHook();\n hook.configs[name] = {\n properties: properties.map(p => ({\n id: p.id,\n parent: p.parent,\n name: p.name,\n value: p.value,\n array: p.array\n })),\n config: toObject(properties),\n updatedAt: Date.now()\n };\n hook.revision++;\n\n return () => {\n // Legacy cleanup\n const configs = window.__debugConfigs ?? {};\n delete configs[name];\n window.__debugConfigs = configs;\n\n // DevTools hook cleanup\n if (window.__WEBINY_DEVTOOLS_HOOK__) {\n delete window.__WEBINY_DEVTOOLS_HOOK__.configs[name];\n window.__WEBINY_DEVTOOLS_HOOK__.revision++;\n }\n };\n }, [properties]);\n}\n"],"names":["getHook","window","useDebugConfig","name","properties","useEffect","process","configs","console","toObject","hook","p","Date"],"mappings":";;AAoCO,SAASA;IACZ,IAAI,CAACC,OAAO,wBAAwB,EAChCA,OAAO,wBAAwB,GAAG;QAAE,UAAU;QAAG,SAAS,CAAC;QAAG,UAAU,CAAC;IAAE;IAE/E,OAAOA,OAAO,wBAAwB;AAC1C;AAEO,SAASC,eAAeC,IAAY,EAAEC,UAAsB;IAC/DC,UAAU;QACN,IAAIC,AAAyB,kBAAzBA,QAAQ,GAAG,CAAC,QAAQ,EACpB;QAIJ,MAAMC,UAAUN,OAAO,cAAc,IAAI,CAAC;QAC1CM,OAAO,CAACJ,KAAK,GAAG,IAAMK,QAAQ,GAAG,CAACC,SAASL;QAC3CH,OAAO,cAAc,GAAGM;QAGxB,MAAMG,OAAOV;QACbU,KAAK,OAAO,CAACP,KAAK,GAAG;YACjB,YAAYC,WAAW,GAAG,CAACO,CAAAA,IAAM;oBAC7B,IAAIA,EAAE,EAAE;oBACR,QAAQA,EAAE,MAAM;oBAChB,MAAMA,EAAE,IAAI;oBACZ,OAAOA,EAAE,KAAK;oBACd,OAAOA,EAAE,KAAK;gBAClB;YACA,QAAQF,SAASL;YACjB,WAAWQ,KAAK,GAAG;QACvB;QACAF,KAAK,QAAQ;QAEb,OAAO;YAEH,MAAMH,UAAUN,OAAO,cAAc,IAAI,CAAC;YAC1C,OAAOM,OAAO,CAACJ,KAAK;YACpBF,OAAO,cAAc,GAAGM;YAGxB,IAAIN,OAAO,wBAAwB,EAAE;gBACjC,OAAOA,OAAO,wBAAwB,CAAC,OAAO,CAACE,KAAK;gBACpDF,OAAO,wBAAwB,CAAC,QAAQ;YAC5C;QACJ;IACJ,GAAG;QAACG;KAAW;AACnB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useIdGenerator(name: string): (...parts: string[]) => string;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
import { useParentProperty } from "./Properties.js";
|
|
3
|
+
const keywords = [
|
|
4
|
+
"$first",
|
|
5
|
+
"$last"
|
|
6
|
+
];
|
|
7
|
+
function useIdGenerator(name) {
|
|
8
|
+
const parentProperty = useParentProperty();
|
|
9
|
+
return useCallback((...parts)=>{
|
|
10
|
+
if (keywords.includes(parts[0])) return parts[0];
|
|
11
|
+
return [
|
|
12
|
+
parentProperty?.id,
|
|
13
|
+
name,
|
|
14
|
+
...parts
|
|
15
|
+
].filter(Boolean).join(":");
|
|
16
|
+
}, [
|
|
17
|
+
name,
|
|
18
|
+
parentProperty
|
|
19
|
+
]);
|
|
20
|
+
}
|
|
21
|
+
export { useIdGenerator };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=useIdGenerator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIdGenerator.js","sources":["../src/useIdGenerator.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useParentProperty } from \"~/Properties.js\";\n\nconst keywords = [\"$first\", \"$last\"];\n\nexport function useIdGenerator(name: string) {\n const parentProperty = useParentProperty();\n\n return useCallback(\n (...parts: string[]) => {\n if (keywords.includes(parts[0])) {\n return parts[0];\n }\n return [parentProperty?.id, name, ...parts].filter(Boolean).join(\":\");\n },\n [name, parentProperty]\n );\n}\n"],"names":["keywords","useIdGenerator","name","parentProperty","useParentProperty","useCallback","parts","Boolean"],"mappings":";;AAGA,MAAMA,WAAW;IAAC;IAAU;CAAQ;AAE7B,SAASC,eAAeC,IAAY;IACvC,MAAMC,iBAAiBC;IAEvB,OAAOC,YACH,CAAC,GAAGC;QACA,IAAIN,SAAS,QAAQ,CAACM,KAAK,CAAC,EAAE,GAC1B,OAAOA,KAAK,CAAC,EAAE;QAEnB,OAAO;YAACH,gBAAgB;YAAID;eAASI;SAAM,CAAC,MAAM,CAACC,SAAS,IAAI,CAAC;IACrE,GACA;QAACL;QAAMC;KAAe;AAE9B"}
|
package/utils.d.ts
CHANGED
package/utils.js
CHANGED
|
@@ -1,44 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var _nanoid = require("nanoid");
|
|
13
|
-
var nanoid = (0, _nanoid.customAlphabet)("1234567890abcdef");
|
|
1
|
+
import { customAlphabet } from "nanoid";
|
|
2
|
+
const nanoid = customAlphabet("1234567890abcdef");
|
|
3
|
+
const sortPropertiesToTheTop = (a, b)=>{
|
|
4
|
+
if (a.$isFirst && b.$isFirst) return -1;
|
|
5
|
+
return Number(b.$isFirst) - Number(a.$isFirst);
|
|
6
|
+
};
|
|
7
|
+
const sortPropertiesToTheBottom = (a, b)=>{
|
|
8
|
+
if (a.$isLast && b.$isLast) return 1;
|
|
9
|
+
return Number(a.$isLast) - Number(b.$isLast);
|
|
10
|
+
};
|
|
11
|
+
const sortProperties = (properties)=>properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);
|
|
14
12
|
function buildRoots(roots, properties) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
13
|
+
const sortedRoots = sortProperties(roots);
|
|
14
|
+
const obj = sortedRoots.reduce((acc, item)=>{
|
|
15
|
+
const isArray = true === item.array || sortedRoots.filter((r)=>r.name === item.name).length > 1;
|
|
16
|
+
return {
|
|
17
|
+
...acc,
|
|
18
|
+
[item.name]: isArray ? [] : {}
|
|
19
|
+
};
|
|
20
|
+
}, {});
|
|
21
|
+
sortedRoots.forEach((root)=>{
|
|
22
|
+
const isArray = true === root.array || Array.isArray(obj[root.name]);
|
|
23
|
+
if (void 0 !== root.value) {
|
|
24
|
+
obj[root.name] = isArray ? [
|
|
25
|
+
...obj[root.name],
|
|
26
|
+
root.value
|
|
27
|
+
] : root.value;
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const nextRoots = properties.filter((p)=>p.parent === root.id);
|
|
31
|
+
const value = buildRoots(nextRoots, properties);
|
|
32
|
+
obj[root.name] = isArray ? [
|
|
33
|
+
...obj[root.name],
|
|
34
|
+
value
|
|
35
|
+
] : value;
|
|
29
36
|
});
|
|
30
|
-
|
|
31
|
-
obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [value]) : value;
|
|
32
|
-
});
|
|
33
|
-
return obj;
|
|
37
|
+
return obj;
|
|
34
38
|
}
|
|
35
39
|
function toObject(properties) {
|
|
36
|
-
|
|
37
|
-
return
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
const roots = properties.filter((prop)=>"" === prop.parent);
|
|
41
|
+
return buildRoots(roots, properties);
|
|
42
|
+
}
|
|
43
|
+
function getUniqueId(length = 12) {
|
|
44
|
+
return nanoid(length);
|
|
40
45
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
46
|
+
export { getUniqueId, toObject };
|
|
47
|
+
|
|
48
|
+
//# sourceMappingURL=utils.js.map
|
package/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { customAlphabet } from \"nanoid\";\nconst nanoid = customAlphabet(\"1234567890abcdef\");\nimport type { Property } from \"./Properties.js\";\n\nconst sortPropertiesToTheTop = (a: Property, b: Property) => {\n if (a.$isFirst && b.$isFirst) {\n return -1;\n }\n\n return Number(b.$isFirst) - Number(a.$isFirst);\n};\n\nconst sortPropertiesToTheBottom = (a: Property, b: Property) => {\n if (a.$isLast && b.$isLast) {\n return 1;\n }\n\n return Number(a.$isLast) - Number(b.$isLast);\n};\n\nconst sortProperties = (properties: Property[]) => {\n return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);\n};\n\nfunction buildRoots(roots: Property[], properties: Property[]) {\n const sortedRoots = sortProperties(roots);\n const obj: Record<string, unknown> = sortedRoots.reduce((acc, item) => {\n const isArray =\n item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;\n return { ...acc, [item.name]: isArray ? [] : {} };\n }, {});\n\n sortedRoots.forEach(root => {\n const isArray = root.array === true || Array.isArray(obj[root.name]);\n if (root.value !== undefined) {\n obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;\n return;\n }\n\n const nextRoots = properties.filter(p => p.parent === root.id);\n const value = buildRoots(nextRoots, properties);\n obj[root.name] = isArray ? [...(obj[root.name] as Property[]), value] : value;\n });\n\n return obj;\n}\n\nexport function toObject<T = unknown>(properties: Property[]): T {\n const roots = properties.filter(prop => prop.parent === \"\");\n return buildRoots(roots, properties) as T;\n}\n\nexport function getUniqueId(length = 12) {\n return nanoid(length);\n}\n"],"names":["nanoid","customAlphabet","sortPropertiesToTheTop","a","b","Number","sortPropertiesToTheBottom","sortProperties","properties","buildRoots","roots","sortedRoots","obj","acc","item","isArray","r","root","Array","undefined","nextRoots","p","value","toObject","prop","getUniqueId","length"],"mappings":";AACA,MAAMA,SAASC,eAAe;AAG9B,MAAMC,yBAAyB,CAACC,GAAaC;IACzC,IAAID,EAAE,QAAQ,IAAIC,EAAE,QAAQ,EACxB,OAAO;IAGX,OAAOC,OAAOD,EAAE,QAAQ,IAAIC,OAAOF,EAAE,QAAQ;AACjD;AAEA,MAAMG,4BAA4B,CAACH,GAAaC;IAC5C,IAAID,EAAE,OAAO,IAAIC,EAAE,OAAO,EACtB,OAAO;IAGX,OAAOC,OAAOF,EAAE,OAAO,IAAIE,OAAOD,EAAE,OAAO;AAC/C;AAEA,MAAMG,iBAAiB,CAACC,aACbA,WAAW,IAAI,CAACN,wBAAwB,IAAI,CAACI;AAGxD,SAASG,WAAWC,KAAiB,EAAEF,UAAsB;IACzD,MAAMG,cAAcJ,eAAeG;IACnC,MAAME,MAA+BD,YAAY,MAAM,CAAC,CAACE,KAAKC;QAC1D,MAAMC,UACFD,AAAe,SAAfA,KAAK,KAAK,IAAaH,YAAY,MAAM,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF,KAAK,IAAI,EAAE,MAAM,GAAG;QAClF,OAAO;YAAE,GAAGD,GAAG;YAAE,CAACC,KAAK,IAAI,CAAC,EAAEC,UAAU,EAAE,GAAG,CAAC;QAAE;IACpD,GAAG,CAAC;IAEJJ,YAAY,OAAO,CAACM,CAAAA;QAChB,MAAMF,UAAUE,AAAe,SAAfA,KAAK,KAAK,IAAaC,MAAM,OAAO,CAACN,GAAG,CAACK,KAAK,IAAI,CAAC;QACnE,IAAIA,AAAeE,WAAfF,KAAK,KAAK,EAAgB;YAC1BL,GAAG,CAACK,KAAK,IAAI,CAAC,GAAGF,UAAU;mBAAKH,GAAG,CAACK,KAAK,IAAI,CAAC;gBAAiBA,KAAK,KAAK;aAAC,GAAGA,KAAK,KAAK;YACvF;QACJ;QAEA,MAAMG,YAAYZ,WAAW,MAAM,CAACa,CAAAA,IAAKA,EAAE,MAAM,KAAKJ,KAAK,EAAE;QAC7D,MAAMK,QAAQb,WAAWW,WAAWZ;QACpCI,GAAG,CAACK,KAAK,IAAI,CAAC,GAAGF,UAAU;eAAKH,GAAG,CAACK,KAAK,IAAI,CAAC;YAAiBK;SAAM,GAAGA;IAC5E;IAEA,OAAOV;AACX;AAEO,SAASW,SAAsBf,UAAsB;IACxD,MAAME,QAAQF,WAAW,MAAM,CAACgB,CAAAA,OAAQA,AAAgB,OAAhBA,KAAK,MAAM;IACnD,OAAOf,WAAWC,OAAOF;AAC7B;AAEO,SAASiB,YAAYC,SAAS,EAAE;IACnC,OAAO1B,OAAO0B;AAClB"}
|
package/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./utils\";\nexport * from \"./Properties\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|