@webstudio-is/react-sdk 0.86.0 → 0.87.1
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/lib/cjs/component-renderer.js +48 -30
- package/lib/cjs/components/component-meta.js +1 -1
- package/lib/cjs/generator.js +128 -0
- package/lib/cjs/hook.js +2 -2
- package/lib/cjs/index.js +2 -0
- package/lib/cjs/tree/root.js +6 -3
- package/lib/component-renderer.js +52 -31
- package/lib/components/component-meta.js +1 -1
- package/lib/generator.js +114 -0
- package/lib/hook.js +2 -2
- package/lib/index.js +2 -0
- package/lib/tree/root.js +6 -3
- package/lib/types/component-renderer.d.ts +2 -1
- package/lib/types/components/component-meta.d.ts +3 -3
- package/lib/types/embed-template.d.ts +1 -1
- package/lib/types/generator.d.ts +23 -0
- package/lib/types/generator.test.d.ts +1 -0
- package/lib/types/hook.d.ts +13 -3
- package/lib/types/hook.test.d.ts +1 -0
- package/lib/types/index.d.ts +1 -0
- package/lib/types/tree/root.d.ts +4 -6
- package/package.json +9 -9
- package/src/component-renderer.tsx +60 -31
- package/src/components/component-meta.ts +1 -1
- package/src/generator.test.ts +169 -0
- package/src/generator.ts +147 -0
- package/src/hook.test.ts +15 -0
- package/src/hook.ts +14 -4
- package/src/index.ts +1 -0
- package/src/tree/root.ts +8 -11
|
@@ -31,19 +31,32 @@ var import_instance_utils = require("./instance-utils");
|
|
|
31
31
|
const renderComponentTemplate = ({
|
|
32
32
|
name,
|
|
33
33
|
metas: metasRecord,
|
|
34
|
-
components
|
|
34
|
+
components,
|
|
35
|
+
props
|
|
35
36
|
}) => {
|
|
36
37
|
const metas = new Map(Object.entries(metasRecord));
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
const template = metas.get(name)?.template ?? [
|
|
39
|
+
{
|
|
40
|
+
type: "instance",
|
|
41
|
+
component: name,
|
|
42
|
+
children: []
|
|
43
|
+
}
|
|
44
|
+
];
|
|
45
|
+
if (template[0].type === "instance" && props !== void 0) {
|
|
46
|
+
template[0].props = Object.entries(props).map(([prop, value]) => {
|
|
47
|
+
if (typeof value === "string") {
|
|
48
|
+
return { type: "string", name: prop, value };
|
|
43
49
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
50
|
+
if (typeof value === "number") {
|
|
51
|
+
return { type: "number", name: prop, value };
|
|
52
|
+
}
|
|
53
|
+
if (typeof value === "boolean") {
|
|
54
|
+
return { type: "boolean", name: prop, value };
|
|
55
|
+
}
|
|
56
|
+
throw new Error(`Unsupported prop ${props} with value ${value}`);
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
const data = (0, import_embed_template.generateDataFromEmbedTemplate)(template, "base");
|
|
47
60
|
const instances = [
|
|
48
61
|
[
|
|
49
62
|
"root",
|
|
@@ -95,30 +108,35 @@ const renderComponentTemplate = ({
|
|
|
95
108
|
])
|
|
96
109
|
}
|
|
97
110
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
111
|
+
utils: {
|
|
112
|
+
indexesWithinAncestors: (0, import_instance_utils.getIndexesWithinAncestors)(
|
|
113
|
+
metas,
|
|
114
|
+
new Map(instances),
|
|
115
|
+
["root"]
|
|
116
|
+
),
|
|
117
|
+
executeComputingExpressions: (values) => {
|
|
118
|
+
const expressions = /* @__PURE__ */ new Map();
|
|
119
|
+
for (const dataSource of data.dataSources) {
|
|
120
|
+
const name2 = (0, import_expression.encodeDataSourceVariable)(dataSource.id);
|
|
121
|
+
if (dataSource.type === "expression") {
|
|
122
|
+
expressions.set(name2, dataSource.code);
|
|
123
|
+
}
|
|
104
124
|
}
|
|
125
|
+
return (0, import_expression.decodeVariablesMap)(
|
|
126
|
+
(0, import_expression.executeComputingExpressions)(
|
|
127
|
+
expressions,
|
|
128
|
+
(0, import_expression.encodeVariablesMap)(values)
|
|
129
|
+
)
|
|
130
|
+
);
|
|
131
|
+
},
|
|
132
|
+
executeEffectfulExpression: (code, args, values) => {
|
|
133
|
+
return (0, import_expression.decodeVariablesMap)(
|
|
134
|
+
(0, import_expression.executeEffectfulExpression)(code, args, (0, import_expression.encodeVariablesMap)(values))
|
|
135
|
+
);
|
|
105
136
|
}
|
|
106
|
-
return (0, import_expression.decodeVariablesMap)(
|
|
107
|
-
(0, import_expression.executeComputingExpressions)(expressions, (0, import_expression.encodeVariablesMap)(values))
|
|
108
|
-
);
|
|
109
|
-
},
|
|
110
|
-
executeEffectfulExpression: (code, args, values) => {
|
|
111
|
-
return (0, import_expression.decodeVariablesMap)(
|
|
112
|
-
(0, import_expression.executeEffectfulExpression)(code, args, (0, import_expression.encodeVariablesMap)(values))
|
|
113
|
-
);
|
|
114
137
|
},
|
|
115
138
|
Component: import_tree.WebstudioComponent,
|
|
116
|
-
components: new Map(Object.entries(components))
|
|
117
|
-
indexesWithinAncestors: (0, import_instance_utils.getIndexesWithinAncestors)(
|
|
118
|
-
metas,
|
|
119
|
-
new Map(instances),
|
|
120
|
-
["root"]
|
|
121
|
-
)
|
|
139
|
+
components: new Map(Object.entries(components))
|
|
122
140
|
}
|
|
123
141
|
)
|
|
124
142
|
] });
|
|
@@ -72,7 +72,7 @@ const WsComponentMeta = import_zod.z.object({
|
|
|
72
72
|
// copied or dragged out of its parent instance
|
|
73
73
|
// true by default
|
|
74
74
|
detachable: import_zod.z.optional(import_zod.z.boolean()),
|
|
75
|
-
label: import_zod.z.string(),
|
|
75
|
+
label: import_zod.z.optional(import_zod.z.string()),
|
|
76
76
|
description: import_zod.z.string().optional(),
|
|
77
77
|
icon: import_zod.z.string(),
|
|
78
78
|
presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var generator_exports = {};
|
|
20
|
+
__export(generator_exports, {
|
|
21
|
+
generateUtilsExport: () => generateUtilsExport
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(generator_exports);
|
|
24
|
+
var import_instance_utils = require("./instance-utils");
|
|
25
|
+
var import_expression = require("./expression");
|
|
26
|
+
const generateUtilsExport = (siteData) => {
|
|
27
|
+
const indexesWithinAncestors = (0, import_instance_utils.getIndexesWithinAncestors)(
|
|
28
|
+
siteData.metas,
|
|
29
|
+
siteData.instances,
|
|
30
|
+
[siteData.page.rootInstanceId]
|
|
31
|
+
);
|
|
32
|
+
let indexesWithinAncestorsEntries = "";
|
|
33
|
+
for (const [key, value] of indexesWithinAncestors) {
|
|
34
|
+
const keyString = JSON.stringify(key);
|
|
35
|
+
const valueString = JSON.stringify(value);
|
|
36
|
+
indexesWithinAncestorsEntries += `[${keyString}, ${valueString}],
|
|
37
|
+
`;
|
|
38
|
+
}
|
|
39
|
+
const generatedIndexesWithinAncestors = `
|
|
40
|
+
const indexesWithinAncestors = new Map<string, number>([
|
|
41
|
+
${indexesWithinAncestorsEntries}
|
|
42
|
+
]);
|
|
43
|
+
`;
|
|
44
|
+
const variables = /* @__PURE__ */ new Set();
|
|
45
|
+
const expressions = /* @__PURE__ */ new Map();
|
|
46
|
+
for (const dataSource of siteData.dataSources.values()) {
|
|
47
|
+
if (dataSource.type === "variable") {
|
|
48
|
+
variables.add((0, import_expression.encodeDataSourceVariable)(dataSource.id));
|
|
49
|
+
}
|
|
50
|
+
if (dataSource.type === "expression") {
|
|
51
|
+
expressions.set((0, import_expression.encodeDataSourceVariable)(dataSource.id), dataSource.code);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
const generatedExecuteComputingExpressions = `
|
|
55
|
+
const rawExecuteComputingExpressions = (
|
|
56
|
+
_variables: Map<string, unknown>
|
|
57
|
+
): Map<string, unknown> => {
|
|
58
|
+
${(0, import_expression.generateComputingExpressions)(expressions, variables)}
|
|
59
|
+
};
|
|
60
|
+
const executeComputingExpressions = (variables: Map<string, unknown>) => {
|
|
61
|
+
const encodedvariables = sdk.encodeVariablesMap(variables);
|
|
62
|
+
const encodedResult = rawExecuteComputingExpressions(encodedvariables);
|
|
63
|
+
return sdk.decodeVariablesMap(encodedResult);
|
|
64
|
+
};
|
|
65
|
+
`;
|
|
66
|
+
let effectfulExpressionsEntries = "";
|
|
67
|
+
for (const prop of siteData.props.values()) {
|
|
68
|
+
if (prop.type === "action") {
|
|
69
|
+
for (const executableValue of prop.value) {
|
|
70
|
+
const codeString = JSON.stringify(executableValue.code);
|
|
71
|
+
const generatedCode = (0, import_expression.generateEffectfulExpression)(
|
|
72
|
+
executableValue.code,
|
|
73
|
+
new Set(executableValue.args),
|
|
74
|
+
variables
|
|
75
|
+
);
|
|
76
|
+
const generatedFunction = `(_args: Map<string, any>, _variables: Map<string, any>) => { ${generatedCode} }`;
|
|
77
|
+
effectfulExpressionsEntries += `[${codeString}, ${generatedFunction}],
|
|
78
|
+
`;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
const generatedExecuteEffectfulExpression = `const generatedEffectfulExpressions = new Map<
|
|
83
|
+
string,
|
|
84
|
+
(args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
|
|
85
|
+
>([
|
|
86
|
+
${effectfulExpressionsEntries}
|
|
87
|
+
]);
|
|
88
|
+
|
|
89
|
+
const rawExecuteEffectfulExpression = (
|
|
90
|
+
code: string,
|
|
91
|
+
args: Map<string, unknown>,
|
|
92
|
+
variables: Map<string, unknown>
|
|
93
|
+
): Map<string, unknown> => {
|
|
94
|
+
if(generatedEffectfulExpressions.has(code)) {
|
|
95
|
+
return generatedEffectfulExpressions.get(code)!(args, variables);
|
|
96
|
+
}
|
|
97
|
+
console.error("Effectful expression not found", code);
|
|
98
|
+
throw new Error("Effectful expression not found");
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const executeEffectfulExpression = (
|
|
102
|
+
code: string,
|
|
103
|
+
args: Map<string, unknown>,
|
|
104
|
+
variables: Map<string, unknown>
|
|
105
|
+
) => {
|
|
106
|
+
const encodedvariables = sdk.encodeVariablesMap(variables);
|
|
107
|
+
const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
|
|
108
|
+
return sdk.decodeVariablesMap(encodedResult);
|
|
109
|
+
};
|
|
110
|
+
`;
|
|
111
|
+
return `
|
|
112
|
+
/* eslint-disable */
|
|
113
|
+
|
|
114
|
+
${generatedIndexesWithinAncestors.trim()}
|
|
115
|
+
|
|
116
|
+
${generatedExecuteComputingExpressions.trim()}
|
|
117
|
+
|
|
118
|
+
${generatedExecuteEffectfulExpression.trim()}
|
|
119
|
+
|
|
120
|
+
export const utils = {
|
|
121
|
+
indexesWithinAncestors,
|
|
122
|
+
executeComputingExpressions,
|
|
123
|
+
executeEffectfulExpression,
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
/* eslint-enable */
|
|
127
|
+
`;
|
|
128
|
+
};
|
package/lib/cjs/hook.js
CHANGED
|
@@ -21,9 +21,9 @@ __export(hook_exports, {
|
|
|
21
21
|
getClosestInstance: () => getClosestInstance
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(hook_exports);
|
|
24
|
-
const getClosestInstance = (
|
|
24
|
+
const getClosestInstance = (instancePath, currentInstance, closestComponent) => {
|
|
25
25
|
let matched = false;
|
|
26
|
-
for (const instance of
|
|
26
|
+
for (const instance of instancePath) {
|
|
27
27
|
if (currentInstance === instance) {
|
|
28
28
|
matched = true;
|
|
29
29
|
}
|
package/lib/cjs/index.js
CHANGED
|
@@ -31,6 +31,7 @@ __export(src_exports, {
|
|
|
31
31
|
executeEffectfulExpression: () => import_expression.executeEffectfulExpression,
|
|
32
32
|
generateComputingExpressions: () => import_expression.generateComputingExpressions,
|
|
33
33
|
generateEffectfulExpression: () => import_expression.generateEffectfulExpression,
|
|
34
|
+
generateUtilsExport: () => import_generator.generateUtilsExport,
|
|
34
35
|
getIndexWithinAncestorFromComponentProps: () => import_props.getIndexWithinAncestorFromComponentProps,
|
|
35
36
|
getIndexesWithinAncestors: () => import_instance_utils.getIndexesWithinAncestors,
|
|
36
37
|
getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
|
|
@@ -55,3 +56,4 @@ var import_expression = require("./expression");
|
|
|
55
56
|
var import_component_renderer = require("./component-renderer");
|
|
56
57
|
var import_instance_utils = require("./instance-utils");
|
|
57
58
|
__reExport(src_exports, require("./hook"), module.exports);
|
|
59
|
+
var import_generator = require("./generator");
|
package/lib/cjs/tree/root.js
CHANGED
|
@@ -29,13 +29,16 @@ var import_webstudio_component = require("./webstudio-component");
|
|
|
29
29
|
var import_props = require("../props");
|
|
30
30
|
const InstanceRoot = ({
|
|
31
31
|
data,
|
|
32
|
-
|
|
33
|
-
executeComputingExpressions,
|
|
34
|
-
executeEffectfulExpression,
|
|
32
|
+
utils,
|
|
35
33
|
Component,
|
|
36
34
|
components,
|
|
37
35
|
scripts
|
|
38
36
|
}) => {
|
|
37
|
+
const {
|
|
38
|
+
indexesWithinAncestors,
|
|
39
|
+
executeComputingExpressions,
|
|
40
|
+
executeEffectfulExpression
|
|
41
|
+
} = utils;
|
|
39
42
|
const dataSourceVariablesStoreRef = (0, import_react.useRef)(void 0);
|
|
40
43
|
if (dataSourceVariablesStoreRef.current === void 0) {
|
|
41
44
|
dataSourceVariablesStoreRef.current = (0, import_nanostores.atom)(/* @__PURE__ */ new Map());
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { getStyleDeclKey } from "@webstudio-is/project-build";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
WsEmbedTemplate,
|
|
5
|
+
generateDataFromEmbedTemplate
|
|
6
|
+
} from "./embed-template";
|
|
4
7
|
import { generateCssText } from "./css";
|
|
5
8
|
import { InstanceRoot, WebstudioComponent } from "./tree";
|
|
6
9
|
import {
|
|
@@ -14,19 +17,32 @@ import { getIndexesWithinAncestors } from "./instance-utils";
|
|
|
14
17
|
const renderComponentTemplate = ({
|
|
15
18
|
name,
|
|
16
19
|
metas: metasRecord,
|
|
17
|
-
components
|
|
20
|
+
components,
|
|
21
|
+
props
|
|
18
22
|
}) => {
|
|
19
23
|
const metas = new Map(Object.entries(metasRecord));
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
const template = metas.get(name)?.template ?? [
|
|
25
|
+
{
|
|
26
|
+
type: "instance",
|
|
27
|
+
component: name,
|
|
28
|
+
children: []
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
if (template[0].type === "instance" && props !== void 0) {
|
|
32
|
+
template[0].props = Object.entries(props).map(([prop, value]) => {
|
|
33
|
+
if (typeof value === "string") {
|
|
34
|
+
return { type: "string", name: prop, value };
|
|
26
35
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
36
|
+
if (typeof value === "number") {
|
|
37
|
+
return { type: "number", name: prop, value };
|
|
38
|
+
}
|
|
39
|
+
if (typeof value === "boolean") {
|
|
40
|
+
return { type: "boolean", name: prop, value };
|
|
41
|
+
}
|
|
42
|
+
throw new Error(`Unsupported prop ${props} with value ${value}`);
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
const data = generateDataFromEmbedTemplate(template, "base");
|
|
30
46
|
const instances = [
|
|
31
47
|
[
|
|
32
48
|
"root",
|
|
@@ -78,30 +94,35 @@ const renderComponentTemplate = ({
|
|
|
78
94
|
])
|
|
79
95
|
}
|
|
80
96
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
97
|
+
utils: {
|
|
98
|
+
indexesWithinAncestors: getIndexesWithinAncestors(
|
|
99
|
+
metas,
|
|
100
|
+
new Map(instances),
|
|
101
|
+
["root"]
|
|
102
|
+
),
|
|
103
|
+
executeComputingExpressions: (values) => {
|
|
104
|
+
const expressions = /* @__PURE__ */ new Map();
|
|
105
|
+
for (const dataSource of data.dataSources) {
|
|
106
|
+
const name2 = encodeDataSourceVariable(dataSource.id);
|
|
107
|
+
if (dataSource.type === "expression") {
|
|
108
|
+
expressions.set(name2, dataSource.code);
|
|
109
|
+
}
|
|
87
110
|
}
|
|
111
|
+
return decodeVariablesMap(
|
|
112
|
+
executeComputingExpressions(
|
|
113
|
+
expressions,
|
|
114
|
+
encodeVariablesMap(values)
|
|
115
|
+
)
|
|
116
|
+
);
|
|
117
|
+
},
|
|
118
|
+
executeEffectfulExpression: (code, args, values) => {
|
|
119
|
+
return decodeVariablesMap(
|
|
120
|
+
executeEffectfulExpression(code, args, encodeVariablesMap(values))
|
|
121
|
+
);
|
|
88
122
|
}
|
|
89
|
-
return decodeVariablesMap(
|
|
90
|
-
executeComputingExpressions(expressions, encodeVariablesMap(values))
|
|
91
|
-
);
|
|
92
|
-
},
|
|
93
|
-
executeEffectfulExpression: (code, args, values) => {
|
|
94
|
-
return decodeVariablesMap(
|
|
95
|
-
executeEffectfulExpression(code, args, encodeVariablesMap(values))
|
|
96
|
-
);
|
|
97
123
|
},
|
|
98
124
|
Component: WebstudioComponent,
|
|
99
|
-
components: new Map(Object.entries(components))
|
|
100
|
-
indexesWithinAncestors: getIndexesWithinAncestors(
|
|
101
|
-
metas,
|
|
102
|
-
new Map(instances),
|
|
103
|
-
["root"]
|
|
104
|
-
)
|
|
125
|
+
components: new Map(Object.entries(components))
|
|
105
126
|
}
|
|
106
127
|
)
|
|
107
128
|
] });
|
|
@@ -46,7 +46,7 @@ const WsComponentMeta = z.object({
|
|
|
46
46
|
// copied or dragged out of its parent instance
|
|
47
47
|
// true by default
|
|
48
48
|
detachable: z.optional(z.boolean()),
|
|
49
|
-
label: z.string(),
|
|
49
|
+
label: z.optional(z.string()),
|
|
50
50
|
description: z.string().optional(),
|
|
51
51
|
icon: z.string(),
|
|
52
52
|
presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
|
package/lib/generator.js
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getIndexesWithinAncestors
|
|
3
|
+
} from "./instance-utils";
|
|
4
|
+
import {
|
|
5
|
+
encodeDataSourceVariable,
|
|
6
|
+
generateComputingExpressions,
|
|
7
|
+
generateEffectfulExpression
|
|
8
|
+
} from "./expression";
|
|
9
|
+
const generateUtilsExport = (siteData) => {
|
|
10
|
+
const indexesWithinAncestors = getIndexesWithinAncestors(
|
|
11
|
+
siteData.metas,
|
|
12
|
+
siteData.instances,
|
|
13
|
+
[siteData.page.rootInstanceId]
|
|
14
|
+
);
|
|
15
|
+
let indexesWithinAncestorsEntries = "";
|
|
16
|
+
for (const [key, value] of indexesWithinAncestors) {
|
|
17
|
+
const keyString = JSON.stringify(key);
|
|
18
|
+
const valueString = JSON.stringify(value);
|
|
19
|
+
indexesWithinAncestorsEntries += `[${keyString}, ${valueString}],
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
const generatedIndexesWithinAncestors = `
|
|
23
|
+
const indexesWithinAncestors = new Map<string, number>([
|
|
24
|
+
${indexesWithinAncestorsEntries}
|
|
25
|
+
]);
|
|
26
|
+
`;
|
|
27
|
+
const variables = /* @__PURE__ */ new Set();
|
|
28
|
+
const expressions = /* @__PURE__ */ new Map();
|
|
29
|
+
for (const dataSource of siteData.dataSources.values()) {
|
|
30
|
+
if (dataSource.type === "variable") {
|
|
31
|
+
variables.add(encodeDataSourceVariable(dataSource.id));
|
|
32
|
+
}
|
|
33
|
+
if (dataSource.type === "expression") {
|
|
34
|
+
expressions.set(encodeDataSourceVariable(dataSource.id), dataSource.code);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
const generatedExecuteComputingExpressions = `
|
|
38
|
+
const rawExecuteComputingExpressions = (
|
|
39
|
+
_variables: Map<string, unknown>
|
|
40
|
+
): Map<string, unknown> => {
|
|
41
|
+
${generateComputingExpressions(expressions, variables)}
|
|
42
|
+
};
|
|
43
|
+
const executeComputingExpressions = (variables: Map<string, unknown>) => {
|
|
44
|
+
const encodedvariables = sdk.encodeVariablesMap(variables);
|
|
45
|
+
const encodedResult = rawExecuteComputingExpressions(encodedvariables);
|
|
46
|
+
return sdk.decodeVariablesMap(encodedResult);
|
|
47
|
+
};
|
|
48
|
+
`;
|
|
49
|
+
let effectfulExpressionsEntries = "";
|
|
50
|
+
for (const prop of siteData.props.values()) {
|
|
51
|
+
if (prop.type === "action") {
|
|
52
|
+
for (const executableValue of prop.value) {
|
|
53
|
+
const codeString = JSON.stringify(executableValue.code);
|
|
54
|
+
const generatedCode = generateEffectfulExpression(
|
|
55
|
+
executableValue.code,
|
|
56
|
+
new Set(executableValue.args),
|
|
57
|
+
variables
|
|
58
|
+
);
|
|
59
|
+
const generatedFunction = `(_args: Map<string, any>, _variables: Map<string, any>) => { ${generatedCode} }`;
|
|
60
|
+
effectfulExpressionsEntries += `[${codeString}, ${generatedFunction}],
|
|
61
|
+
`;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
const generatedExecuteEffectfulExpression = `const generatedEffectfulExpressions = new Map<
|
|
66
|
+
string,
|
|
67
|
+
(args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
|
|
68
|
+
>([
|
|
69
|
+
${effectfulExpressionsEntries}
|
|
70
|
+
]);
|
|
71
|
+
|
|
72
|
+
const rawExecuteEffectfulExpression = (
|
|
73
|
+
code: string,
|
|
74
|
+
args: Map<string, unknown>,
|
|
75
|
+
variables: Map<string, unknown>
|
|
76
|
+
): Map<string, unknown> => {
|
|
77
|
+
if(generatedEffectfulExpressions.has(code)) {
|
|
78
|
+
return generatedEffectfulExpressions.get(code)!(args, variables);
|
|
79
|
+
}
|
|
80
|
+
console.error("Effectful expression not found", code);
|
|
81
|
+
throw new Error("Effectful expression not found");
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const executeEffectfulExpression = (
|
|
85
|
+
code: string,
|
|
86
|
+
args: Map<string, unknown>,
|
|
87
|
+
variables: Map<string, unknown>
|
|
88
|
+
) => {
|
|
89
|
+
const encodedvariables = sdk.encodeVariablesMap(variables);
|
|
90
|
+
const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
|
|
91
|
+
return sdk.decodeVariablesMap(encodedResult);
|
|
92
|
+
};
|
|
93
|
+
`;
|
|
94
|
+
return `
|
|
95
|
+
/* eslint-disable */
|
|
96
|
+
|
|
97
|
+
${generatedIndexesWithinAncestors.trim()}
|
|
98
|
+
|
|
99
|
+
${generatedExecuteComputingExpressions.trim()}
|
|
100
|
+
|
|
101
|
+
${generatedExecuteEffectfulExpression.trim()}
|
|
102
|
+
|
|
103
|
+
export const utils = {
|
|
104
|
+
indexesWithinAncestors,
|
|
105
|
+
executeComputingExpressions,
|
|
106
|
+
executeEffectfulExpression,
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
/* eslint-enable */
|
|
110
|
+
`;
|
|
111
|
+
};
|
|
112
|
+
export {
|
|
113
|
+
generateUtilsExport
|
|
114
|
+
};
|
package/lib/hook.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
const getClosestInstance = (
|
|
1
|
+
const getClosestInstance = (instancePath, currentInstance, closestComponent) => {
|
|
2
2
|
let matched = false;
|
|
3
|
-
for (const instance of
|
|
3
|
+
for (const instance of instancePath) {
|
|
4
4
|
if (currentInstance === instance) {
|
|
5
5
|
matched = true;
|
|
6
6
|
}
|
package/lib/index.js
CHANGED
|
@@ -32,6 +32,7 @@ import {
|
|
|
32
32
|
import { renderComponentTemplate } from "./component-renderer";
|
|
33
33
|
import { getIndexesWithinAncestors } from "./instance-utils";
|
|
34
34
|
export * from "./hook";
|
|
35
|
+
import { generateUtilsExport } from "./generator";
|
|
35
36
|
export {
|
|
36
37
|
ReactSdkContext,
|
|
37
38
|
componentCategories,
|
|
@@ -45,6 +46,7 @@ export {
|
|
|
45
46
|
executeEffectfulExpression,
|
|
46
47
|
generateComputingExpressions,
|
|
47
48
|
generateEffectfulExpression,
|
|
49
|
+
generateUtilsExport,
|
|
48
50
|
getIndexWithinAncestorFromComponentProps,
|
|
49
51
|
getIndexesWithinAncestors,
|
|
50
52
|
getInstanceIdFromComponentProps,
|
package/lib/tree/root.js
CHANGED
|
@@ -14,13 +14,16 @@ import {
|
|
|
14
14
|
import { getPropsByInstanceId } from "../props";
|
|
15
15
|
const InstanceRoot = ({
|
|
16
16
|
data,
|
|
17
|
-
|
|
18
|
-
executeComputingExpressions,
|
|
19
|
-
executeEffectfulExpression,
|
|
17
|
+
utils,
|
|
20
18
|
Component,
|
|
21
19
|
components,
|
|
22
20
|
scripts
|
|
23
21
|
}) => {
|
|
22
|
+
const {
|
|
23
|
+
indexesWithinAncestors,
|
|
24
|
+
executeComputingExpressions,
|
|
25
|
+
executeEffectfulExpression
|
|
26
|
+
} = utils;
|
|
24
27
|
const dataSourceVariablesStoreRef = useRef(void 0);
|
|
25
28
|
if (dataSourceVariablesStoreRef.current === void 0) {
|
|
26
29
|
dataSourceVariablesStoreRef.current = atom(/* @__PURE__ */ new Map());
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { ExoticComponent } from "react";
|
|
2
2
|
import type { Instance } from "@webstudio-is/project-build";
|
|
3
3
|
import type { WsComponentMeta } from "./components/component-meta";
|
|
4
|
-
export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, }: {
|
|
4
|
+
export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, props, }: {
|
|
5
5
|
name: Instance["component"];
|
|
6
6
|
metas: Record<string, WsComponentMeta>;
|
|
7
|
+
props?: Record<string, unknown> | undefined;
|
|
7
8
|
components: Record<string, ExoticComponent<any>>;
|
|
8
9
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -678,7 +678,7 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
678
678
|
indexWithinAncestor: z.ZodOptional<z.ZodString>;
|
|
679
679
|
stylable: z.ZodOptional<z.ZodBoolean>;
|
|
680
680
|
detachable: z.ZodOptional<z.ZodBoolean>;
|
|
681
|
-
label: z.ZodString
|
|
681
|
+
label: z.ZodOptional<z.ZodString>;
|
|
682
682
|
description: z.ZodOptional<z.ZodString>;
|
|
683
683
|
icon: z.ZodString;
|
|
684
684
|
presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodType<{
|
|
@@ -1132,7 +1132,6 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1132
1132
|
order: z.ZodOptional<z.ZodNumber>;
|
|
1133
1133
|
}, "strip", z.ZodTypeAny, {
|
|
1134
1134
|
type: "embed" | "control" | "container" | "rich-text-child";
|
|
1135
|
-
label: string;
|
|
1136
1135
|
icon: string;
|
|
1137
1136
|
category?: "text" | "hidden" | "general" | "media" | "forms" | "radix" | undefined;
|
|
1138
1137
|
requiredAncestors?: string[] | undefined;
|
|
@@ -1140,6 +1139,7 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1140
1139
|
indexWithinAncestor?: string | undefined;
|
|
1141
1140
|
stylable?: boolean | undefined;
|
|
1142
1141
|
detachable?: boolean | undefined;
|
|
1142
|
+
label?: string | undefined;
|
|
1143
1143
|
description?: string | undefined;
|
|
1144
1144
|
presetStyle?: Record<string, {
|
|
1145
1145
|
value: {
|
|
@@ -1366,7 +1366,6 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1366
1366
|
order?: number | undefined;
|
|
1367
1367
|
}, {
|
|
1368
1368
|
type: "embed" | "control" | "container" | "rich-text-child";
|
|
1369
|
-
label: string;
|
|
1370
1369
|
icon: string;
|
|
1371
1370
|
category?: "text" | "hidden" | "general" | "media" | "forms" | "radix" | undefined;
|
|
1372
1371
|
requiredAncestors?: string[] | undefined;
|
|
@@ -1374,6 +1373,7 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1374
1373
|
indexWithinAncestor?: string | undefined;
|
|
1375
1374
|
stylable?: boolean | undefined;
|
|
1376
1375
|
detachable?: boolean | undefined;
|
|
1376
|
+
label?: string | undefined;
|
|
1377
1377
|
description?: string | undefined;
|
|
1378
1378
|
presetStyle?: Record<string, {
|
|
1379
1379
|
value: {
|
|
@@ -2539,7 +2539,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
|
|
|
2539
2539
|
export type EmbedTemplateData = ReturnType<typeof generateDataFromEmbedTemplate>;
|
|
2540
2540
|
export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
|
|
2541
2541
|
type: "embed" | "control" | "container" | "rich-text-child";
|
|
2542
|
-
label
|
|
2542
|
+
label?: string | undefined;
|
|
2543
2543
|
order?: number | undefined;
|
|
2544
2544
|
template?: ({
|
|
2545
2545
|
type: "text";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { DataSources, Instance, Instances, Page, Props } from "@webstudio-is/project-build";
|
|
2
|
+
import type { WsComponentMeta } from "./components/component-meta";
|
|
3
|
+
import { type IndexesWithinAncestors } from "./instance-utils";
|
|
4
|
+
import type { DataSourceValues } from "./context";
|
|
5
|
+
type PageData = {
|
|
6
|
+
page: Page;
|
|
7
|
+
metas: Map<Instance["component"], WsComponentMeta>;
|
|
8
|
+
instances: Instances;
|
|
9
|
+
props: Props;
|
|
10
|
+
dataSources: DataSources;
|
|
11
|
+
};
|
|
12
|
+
export type GeneratedUtils = {
|
|
13
|
+
indexesWithinAncestors: IndexesWithinAncestors;
|
|
14
|
+
executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
|
|
15
|
+
executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Generates data based utilities at build time
|
|
19
|
+
* Requires this import statement in scope
|
|
20
|
+
* import * as sdk from "@webstudio-is/react-sdk";
|
|
21
|
+
*/
|
|
22
|
+
export declare const generateUtilsExport: (siteData: PageData) => string;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|