@webstudio-is/react-sdk 0.90.0 → 0.92.0
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/app/index.js +1 -0
- package/lib/app/root.js +2 -4
- package/lib/component-renderer.js +3 -5
- package/lib/components/component-meta.js +6 -11
- package/lib/components/components-utils.js +1 -0
- package/lib/context.js +2 -4
- package/lib/css/css.js +4 -9
- package/lib/css/global-rules.js +3 -5
- package/lib/css/index.js +1 -0
- package/lib/css/normalize-type-check.js +1 -0
- package/lib/css/normalize.js +48 -96
- package/lib/css/presets.js +3 -6
- package/lib/css/style-rules.js +3 -6
- package/{src/css/style-rules.test.ts → lib/css/style-rules.test.js} +23 -28
- package/lib/embed-template.js +7 -22
- package/{src/embed-template.test.ts → lib/embed-template.test.js} +165 -176
- package/lib/expression.js +11 -22
- package/{src/expression.test.ts → lib/expression.test.js} +55 -83
- package/lib/generator.js +2 -4
- package/{src/generator.test.ts → lib/generator.test.js} +28 -31
- package/lib/hook.js +2 -4
- package/{src/hook.test.ts → lib/hook.test.js} +4 -4
- package/lib/index.js +9 -31
- package/lib/instance-utils.js +2 -4
- package/{src/instance-utils.test.ts → lib/instance-utils.test.js} +19 -43
- package/lib/prop-meta.js +150 -0
- package/lib/props.js +8 -16
- package/{src/props.test.ts → lib/props.test.js} +39 -68
- package/lib/pubsub/create.js +2 -4
- package/lib/pubsub/index.js +1 -0
- package/lib/pubsub/raf-queue.js +2 -4
- package/lib/tree/create-elements-tree.js +2 -4
- package/lib/tree/index.js +1 -0
- package/lib/tree/root.js +2 -5
- package/lib/tree/webstudio-component.js +10 -20
- package/lib/types/component-renderer.d.ts +1 -1
- package/lib/types/components/component-meta.d.ts +526 -526
- package/lib/types/context.d.ts +1 -2
- package/lib/types/css/css.d.ts +22 -23
- package/lib/types/css/global-rules.d.ts +19 -19
- package/lib/types/css/normalize.d.ts +2444 -2444
- package/lib/types/css/style-rules.d.ts +2 -2
- package/lib/types/embed-template.d.ts +648 -648
- package/lib/types/generator.d.ts +1 -1
- package/lib/types/hook.d.ts +3 -3
- package/lib/types/index.d.ts +1 -0
- package/lib/types/instance-utils.d.ts +3 -3
- package/lib/types/prop-meta.d.ts +396 -0
- package/lib/types/props.d.ts +52 -53
- package/lib/types/tree/create-elements-tree.d.ts +3 -4
- package/lib/types/tree/root.d.ts +8 -8
- package/lib/types/tree/webstudio-component.d.ts +1 -1
- package/package.json +14 -22
- package/lib/cjs/app/index.js +0 -18
- package/lib/cjs/app/root.js +0 -40
- package/lib/cjs/component-renderer.js +0 -143
- package/lib/cjs/components/component-meta.js +0 -87
- package/lib/cjs/components/components-utils.js +0 -17
- package/lib/cjs/context.js +0 -43
- package/lib/cjs/css/css.js +0 -84
- package/lib/cjs/css/global-rules.js +0 -37
- package/lib/cjs/css/index.js +0 -20
- package/lib/cjs/css/normalize-type-check.js +0 -26
- package/lib/cjs/css/normalize.js +0 -349
- package/lib/cjs/css/presets.js +0 -48
- package/lib/cjs/css/style-rules.js +0 -86
- package/lib/cjs/embed-template.js +0 -368
- package/lib/cjs/expression.js +0 -371
- package/lib/cjs/generator.js +0 -128
- package/lib/cjs/hook.js +0 -34
- package/lib/cjs/index.js +0 -59
- package/lib/cjs/instance-utils.js +0 -65
- package/lib/cjs/package.json +0 -1
- package/lib/cjs/props.js +0 -204
- package/lib/cjs/pubsub/create.js +0 -78
- package/lib/cjs/pubsub/index.js +0 -18
- package/lib/cjs/pubsub/raf-queue.js +0 -42
- package/lib/cjs/tree/create-elements-tree.js +0 -152
- package/lib/cjs/tree/index.js +0 -20
- package/lib/cjs/tree/root.js +0 -100
- package/lib/cjs/tree/webstudio-component.js +0 -91
- package/src/app/index.ts +0 -1
- package/src/app/root.tsx +0 -25
- package/src/component-renderer.tsx +0 -146
- package/src/components/component-meta.ts +0 -86
- package/src/components/components-utils.ts +0 -13
- package/src/context.tsx +0 -73
- package/src/css/css.ts +0 -88
- package/src/css/global-rules.ts +0 -26
- package/src/css/index.ts +0 -3
- package/src/css/normalize-type-check.ts +0 -13
- package/src/css/normalize.ts +0 -507
- package/src/css/presets.ts +0 -27
- package/src/css/style-rules.ts +0 -101
- package/src/embed-template.ts +0 -438
- package/src/expression.ts +0 -401
- package/src/generator.ts +0 -147
- package/src/hook.ts +0 -52
- package/src/index.ts +0 -39
- package/src/instance-utils.ts +0 -65
- package/src/props.ts +0 -231
- package/src/pubsub/create.ts +0 -77
- package/src/pubsub/index.ts +0 -1
- package/src/pubsub/raf-queue.ts +0 -25
- package/src/tree/create-elements-tree.tsx +0 -186
- package/src/tree/index.ts +0 -3
- package/src/tree/root.ts +0 -131
- package/src/tree/webstudio-component.tsx +0 -97
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
|
|
2
2
|
import type { ReadableAtom } from "nanostores";
|
|
3
|
-
import type { Assets } from "@webstudio-is/
|
|
4
|
-
import type { Instance, Instances } from "@webstudio-is/project-build";
|
|
3
|
+
import type { Instance, Instances, Assets } from "@webstudio-is/sdk";
|
|
5
4
|
import type { Components } from "../components/components-utils";
|
|
6
5
|
import { type Params, type DataSourceValues } from "../context";
|
|
7
6
|
import type { Pages, PropsByInstanceId } from "../props";
|
|
@@ -13,11 +12,11 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
|
|
|
13
12
|
id: string;
|
|
14
13
|
component: string;
|
|
15
14
|
children: ({
|
|
16
|
-
type: "text";
|
|
17
15
|
value: string;
|
|
16
|
+
type: "text";
|
|
18
17
|
} | {
|
|
19
|
-
type: "id";
|
|
20
18
|
value: string;
|
|
19
|
+
type: "id";
|
|
21
20
|
})[];
|
|
22
21
|
label?: string | undefined;
|
|
23
22
|
}>;
|
package/lib/types/tree/root.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
|
|
2
|
-
import {
|
|
3
|
-
import type { Asset } from "@webstudio-is/asset-uploader";
|
|
2
|
+
import type { Page, Asset, DataSource, Instance, Prop } from "@webstudio-is/sdk";
|
|
4
3
|
import { type WebstudioComponentProps } from "./webstudio-component";
|
|
5
4
|
import type { Components } from "../components/components-utils";
|
|
6
5
|
import type { Params } from "../context";
|
|
7
6
|
import type { GeneratedUtils } from "../generator";
|
|
8
|
-
export type
|
|
7
|
+
export type RootPropsData = {
|
|
8
|
+
params?: Params;
|
|
9
9
|
page: Page;
|
|
10
10
|
pages: Array<Page>;
|
|
11
|
-
build: Build;
|
|
12
11
|
assets: Array<Asset>;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
build: {
|
|
13
|
+
instances: [Instance["id"], Instance][];
|
|
14
|
+
dataSources: [DataSource["id"], DataSource][];
|
|
15
|
+
props: [Prop["id"], Prop][];
|
|
16
|
+
};
|
|
17
17
|
};
|
|
18
18
|
type RootProps = {
|
|
19
19
|
data: RootPropsData;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { Instance } from "@webstudio-is/
|
|
2
|
+
import type { Instance } from "@webstudio-is/sdk";
|
|
3
3
|
import type { Components } from "../components/components-utils";
|
|
4
4
|
export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
|
|
5
5
|
export type WebstudioComponentProps = {
|
package/package.json
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.92.0",
|
|
4
4
|
"description": "Webstudio JavaScript / TypeScript API",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"devDependencies": {
|
|
9
|
-
"@jest/globals": "^29.6.
|
|
9
|
+
"@jest/globals": "^29.6.4",
|
|
10
10
|
"@remix-run/react": "^1.19.2",
|
|
11
|
-
"@types/react": "^18.2.
|
|
11
|
+
"@types/react": "^18.2.21",
|
|
12
12
|
"@types/react-dom": "^18.2.7",
|
|
13
|
-
"jest": "^29.6.
|
|
13
|
+
"jest": "^29.6.4",
|
|
14
14
|
"react": "^18.2.0",
|
|
15
15
|
"react-dom": "^18.2.0",
|
|
16
|
-
"type-fest": "^4.
|
|
17
|
-
"typescript": "5.
|
|
16
|
+
"type-fest": "^4.3.1",
|
|
17
|
+
"typescript": "5.2.2",
|
|
18
18
|
"zod": "^3.21.4",
|
|
19
19
|
"@webstudio-is/jest-config": "^1.0.7",
|
|
20
|
-
"@webstudio-is/scripts": "^0.0.0",
|
|
21
20
|
"@webstudio-is/tsconfig": "^1.0.7"
|
|
22
21
|
},
|
|
23
22
|
"peerDependencies": {
|
|
@@ -36,39 +35,32 @@
|
|
|
36
35
|
"nanostores": "^0.9.3",
|
|
37
36
|
"no-case": "^3.0.4",
|
|
38
37
|
"title-case": "^3.0.3",
|
|
39
|
-
"@webstudio-is/
|
|
40
|
-
"@webstudio-is/
|
|
41
|
-
"@webstudio-is/
|
|
42
|
-
"@webstudio-is/fonts": "^0.90.0",
|
|
43
|
-
"@webstudio-is/generate-arg-types": "^0.90.0",
|
|
44
|
-
"@webstudio-is/project-build": "^0.90.0"
|
|
38
|
+
"@webstudio-is/css-engine": "^0.92.0",
|
|
39
|
+
"@webstudio-is/fonts": "^0.92.0",
|
|
40
|
+
"@webstudio-is/sdk": "^0.92.0"
|
|
45
41
|
},
|
|
46
42
|
"exports": {
|
|
47
43
|
".": {
|
|
48
44
|
"source": "./src/index.ts",
|
|
49
45
|
"types": "./lib/types/index.d.ts",
|
|
50
|
-
"import": "./lib/index.js"
|
|
51
|
-
"require": "./lib/cjs/index.js"
|
|
46
|
+
"import": "./lib/index.js"
|
|
52
47
|
},
|
|
53
48
|
"./css-normalize": {
|
|
54
49
|
"source": "./src/css/normalize.ts",
|
|
55
50
|
"types": "./lib/types/css/normalize.d.ts",
|
|
56
|
-
"import": "./lib/css/normalize.js"
|
|
57
|
-
"require": "./lib/cjs/css/normalize.js"
|
|
51
|
+
"import": "./lib/css/normalize.js"
|
|
58
52
|
}
|
|
59
53
|
},
|
|
60
54
|
"files": [
|
|
61
55
|
"lib/*",
|
|
62
|
-
"
|
|
63
|
-
"!*.test.*"
|
|
56
|
+
"!*.{test,stories}.*"
|
|
64
57
|
],
|
|
65
58
|
"license": "AGPL-3.0-or-later",
|
|
66
59
|
"private": false,
|
|
67
60
|
"sideEffects": false,
|
|
68
61
|
"scripts": {
|
|
69
|
-
"dev": "build
|
|
70
|
-
"build": "
|
|
71
|
-
"build:args": "generate-arg-types './src/components/*.tsx ./src/app/custom-components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
|
|
62
|
+
"dev": "pnpm build --watch",
|
|
63
|
+
"build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
|
|
72
64
|
"dts": "tsc --project tsconfig.dts.json",
|
|
73
65
|
"typecheck": "tsc",
|
|
74
66
|
"test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
|
package/lib/cjs/app/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var app_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(app_exports);
|
|
18
|
-
__reExport(app_exports, require("./root"), module.exports);
|
package/lib/cjs/app/root.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
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 root_exports = {};
|
|
20
|
-
__export(root_exports, {
|
|
21
|
-
Root: () => Root
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(root_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
var import_react = require("@remix-run/react");
|
|
26
|
-
const Root = ({
|
|
27
|
-
Outlet = import_react.Outlet
|
|
28
|
-
}) => {
|
|
29
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", { lang: "en", children: [
|
|
30
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", { children: [
|
|
31
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { charSet: "utf-8" }),
|
|
32
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
|
|
33
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
|
|
34
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
|
|
35
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Meta, {}),
|
|
36
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Links, {})
|
|
37
|
-
] }),
|
|
38
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {})
|
|
39
|
-
] });
|
|
40
|
-
};
|
|
@@ -1,143 +0,0 @@
|
|
|
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 component_renderer_exports = {};
|
|
20
|
-
__export(component_renderer_exports, {
|
|
21
|
-
renderComponentTemplate: () => renderComponentTemplate
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(component_renderer_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
var import_project_build = require("@webstudio-is/project-build");
|
|
26
|
-
var import_embed_template = require("./embed-template");
|
|
27
|
-
var import_css = require("./css");
|
|
28
|
-
var import_tree = require("./tree");
|
|
29
|
-
var import_expression = require("./expression");
|
|
30
|
-
var import_instance_utils = require("./instance-utils");
|
|
31
|
-
const renderComponentTemplate = ({
|
|
32
|
-
name,
|
|
33
|
-
metas: metasRecord,
|
|
34
|
-
components,
|
|
35
|
-
props
|
|
36
|
-
}) => {
|
|
37
|
-
const metas = new Map(Object.entries(metasRecord));
|
|
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 };
|
|
49
|
-
}
|
|
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, metas, "base");
|
|
60
|
-
const instances = [
|
|
61
|
-
[
|
|
62
|
-
"root",
|
|
63
|
-
{
|
|
64
|
-
type: "instance",
|
|
65
|
-
id: "root",
|
|
66
|
-
component: "Box",
|
|
67
|
-
children: data.children
|
|
68
|
-
}
|
|
69
|
-
],
|
|
70
|
-
...data.instances.map(
|
|
71
|
-
(instance) => [instance.id, instance]
|
|
72
|
-
)
|
|
73
|
-
];
|
|
74
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: (0, import_css.generateCssText)(
|
|
76
|
-
{
|
|
77
|
-
assets: [],
|
|
78
|
-
breakpoints: [["base", { id: "base", label: "base" }]],
|
|
79
|
-
styles: data.styles.map((item) => [(0, import_project_build.getStyleDeclKey)(item), item]),
|
|
80
|
-
styleSourceSelections: data.styleSourceSelections.map((item) => [
|
|
81
|
-
item.instanceId,
|
|
82
|
-
item
|
|
83
|
-
]),
|
|
84
|
-
componentMetas: metas
|
|
85
|
-
},
|
|
86
|
-
{ assetBaseUrl: "/" }
|
|
87
|
-
) }),
|
|
88
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
-
import_tree.InstanceRoot,
|
|
90
|
-
{
|
|
91
|
-
data: {
|
|
92
|
-
page: {
|
|
93
|
-
path: "",
|
|
94
|
-
id: "",
|
|
95
|
-
name: "",
|
|
96
|
-
title: "",
|
|
97
|
-
meta: {},
|
|
98
|
-
rootInstanceId: "root"
|
|
99
|
-
},
|
|
100
|
-
pages: [],
|
|
101
|
-
assets: [],
|
|
102
|
-
build: {
|
|
103
|
-
instances,
|
|
104
|
-
props: data.props.map((prop) => [prop.id, prop]),
|
|
105
|
-
dataSources: data.dataSources.map((dataSource) => [
|
|
106
|
-
dataSource.id,
|
|
107
|
-
dataSource
|
|
108
|
-
])
|
|
109
|
-
}
|
|
110
|
-
},
|
|
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
|
-
}
|
|
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
|
-
);
|
|
136
|
-
}
|
|
137
|
-
},
|
|
138
|
-
Component: import_tree.WebstudioComponent,
|
|
139
|
-
components: new Map(Object.entries(components))
|
|
140
|
-
}
|
|
141
|
-
)
|
|
142
|
-
] });
|
|
143
|
-
};
|
|
@@ -1,87 +0,0 @@
|
|
|
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 component_meta_exports = {};
|
|
20
|
-
__export(component_meta_exports, {
|
|
21
|
-
ComponentState: () => ComponentState,
|
|
22
|
-
componentCategories: () => componentCategories,
|
|
23
|
-
defaultStates: () => defaultStates,
|
|
24
|
-
stateCategories: () => stateCategories
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(component_meta_exports);
|
|
27
|
-
var import_zod = require("zod");
|
|
28
|
-
var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
|
|
29
|
-
var import_embed_template = require("../embed-template");
|
|
30
|
-
const WsComponentPropsMeta = import_zod.z.object({
|
|
31
|
-
props: import_zod.z.record(import_generate_arg_types.PropMeta),
|
|
32
|
-
// Props that will be always visible in properties panel.
|
|
33
|
-
initialProps: import_zod.z.array(import_zod.z.string()).optional()
|
|
34
|
-
});
|
|
35
|
-
const componentCategories = [
|
|
36
|
-
"general",
|
|
37
|
-
"text",
|
|
38
|
-
"media",
|
|
39
|
-
"forms",
|
|
40
|
-
"radix",
|
|
41
|
-
"hidden"
|
|
42
|
-
];
|
|
43
|
-
const stateCategories = ["states", "component-states"];
|
|
44
|
-
const ComponentState = import_zod.z.object({
|
|
45
|
-
category: import_zod.z.enum(stateCategories).optional(),
|
|
46
|
-
selector: import_zod.z.string(),
|
|
47
|
-
label: import_zod.z.string()
|
|
48
|
-
});
|
|
49
|
-
const ComponentToken = import_zod.z.object({
|
|
50
|
-
variant: import_zod.z.optional(import_zod.z.string()),
|
|
51
|
-
styles: import_zod.z.array(import_embed_template.EmbedTemplateStyleDecl)
|
|
52
|
-
});
|
|
53
|
-
const defaultStates = [
|
|
54
|
-
{ selector: ":hover", label: "Hover" },
|
|
55
|
-
{ selector: ":active", label: "Active" },
|
|
56
|
-
{ selector: ":focus", label: "Focus" },
|
|
57
|
-
{ selector: ":focus-visible", label: "Focus Visible" },
|
|
58
|
-
{ selector: ":focus-within", label: "Focus Within" }
|
|
59
|
-
];
|
|
60
|
-
const WsComponentMeta = import_zod.z.object({
|
|
61
|
-
category: import_zod.z.enum(componentCategories).optional(),
|
|
62
|
-
// container - can accept other components with dnd or be edited as text
|
|
63
|
-
// control - usually form controls like inputs, without children
|
|
64
|
-
// embed - images, videos or other embeddable components, without children
|
|
65
|
-
// rich-text-child - formatted text fragment, not listed in components list
|
|
66
|
-
type: import_zod.z.enum(["container", "control", "embed", "rich-text-child"]),
|
|
67
|
-
requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
|
|
68
|
-
invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
|
|
69
|
-
// when this field is specified component receives
|
|
70
|
-
// prop with index of same components withiin specified ancestor
|
|
71
|
-
// important to automatically enumerate collections without
|
|
72
|
-
// naming every item manually
|
|
73
|
-
indexWithinAncestor: import_zod.z.optional(import_zod.z.string()),
|
|
74
|
-
stylable: import_zod.z.optional(import_zod.z.boolean()),
|
|
75
|
-
// specifies whether the instance can be deleted,
|
|
76
|
-
// copied or dragged out of its parent instance
|
|
77
|
-
// true by default
|
|
78
|
-
detachable: import_zod.z.optional(import_zod.z.boolean()),
|
|
79
|
-
label: import_zod.z.optional(import_zod.z.string()),
|
|
80
|
-
description: import_zod.z.string().optional(),
|
|
81
|
-
icon: import_zod.z.string(),
|
|
82
|
-
presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
|
|
83
|
-
presetTokens: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), ComponentToken)),
|
|
84
|
-
states: import_zod.z.optional(import_zod.z.array(ComponentState)),
|
|
85
|
-
template: import_zod.z.optional(import_embed_template.WsEmbedTemplate),
|
|
86
|
-
order: import_zod.z.number().optional()
|
|
87
|
-
});
|
|
@@ -1,17 +0,0 @@
|
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
var components_utils_exports = {};
|
|
16
|
-
module.exports = __toCommonJS(components_utils_exports);
|
|
17
|
-
var import_tree = require("../tree");
|
package/lib/cjs/context.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
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 context_exports = {};
|
|
20
|
-
__export(context_exports, {
|
|
21
|
-
ReactSdkContext: () => ReactSdkContext
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(context_exports);
|
|
24
|
-
var import_nanostores = require("nanostores");
|
|
25
|
-
var import_react = require("react");
|
|
26
|
-
const ReactSdkContext = (0, import_react.createContext)({
|
|
27
|
-
imageBaseUrl: "/",
|
|
28
|
-
assetBaseUrl: "/",
|
|
29
|
-
propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
30
|
-
assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
31
|
-
pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
32
|
-
dataSourceValuesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
33
|
-
executeEffectfulExpression: () => {
|
|
34
|
-
throw Error("React SDK executeEffectfulExpression is not implemented");
|
|
35
|
-
},
|
|
36
|
-
setDataSourceValues: () => {
|
|
37
|
-
throw Error("React SDK setBoundDataSourceValue is not implemented");
|
|
38
|
-
},
|
|
39
|
-
setBoundDataSourceValue: () => {
|
|
40
|
-
throw Error("React SDK setBoundDataSourceValue is not implemented");
|
|
41
|
-
},
|
|
42
|
-
indexesWithinAncestors: /* @__PURE__ */ new Map()
|
|
43
|
-
});
|
package/lib/cjs/css/css.js
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
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 css_exports = {};
|
|
20
|
-
__export(css_exports, {
|
|
21
|
-
createImageValueTransformer: () => createImageValueTransformer,
|
|
22
|
-
generateCssText: () => generateCssText
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(css_exports);
|
|
25
|
-
var import_css_engine = require("@webstudio-is/css-engine");
|
|
26
|
-
var import_tree = require("../tree");
|
|
27
|
-
var import_global_rules = require("./global-rules");
|
|
28
|
-
var import_style_rules = require("./style-rules");
|
|
29
|
-
const createImageValueTransformer = (assets, options) => (styleValue) => {
|
|
30
|
-
if (styleValue.type === "image" && styleValue.value.type === "asset") {
|
|
31
|
-
const asset = assets.get(styleValue.value.value);
|
|
32
|
-
if (asset === void 0) {
|
|
33
|
-
return { type: "keyword", value: "none" };
|
|
34
|
-
}
|
|
35
|
-
const { assetBaseUrl } = options;
|
|
36
|
-
const url = `${assetBaseUrl}${asset.name}`;
|
|
37
|
-
return {
|
|
38
|
-
type: "image",
|
|
39
|
-
value: {
|
|
40
|
-
type: "url",
|
|
41
|
-
url
|
|
42
|
-
},
|
|
43
|
-
hidden: styleValue.hidden
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const generateCssText = (data, options) => {
|
|
48
|
-
const assets = new Map(
|
|
49
|
-
data.assets.map((asset) => [asset.id, asset])
|
|
50
|
-
);
|
|
51
|
-
const breakpoints = new Map(data.breakpoints);
|
|
52
|
-
const styles = new Map(data.styles);
|
|
53
|
-
const styleSourceSelections = new Map(data.styleSourceSelections);
|
|
54
|
-
const engine = (0, import_css_engine.createCssEngine)({ name: "ssr" });
|
|
55
|
-
(0, import_global_rules.addGlobalRules)(engine, {
|
|
56
|
-
assets,
|
|
57
|
-
assetBaseUrl: options.assetBaseUrl
|
|
58
|
-
});
|
|
59
|
-
for (const breakpoint of breakpoints.values()) {
|
|
60
|
-
engine.addMediaRule(breakpoint.id, breakpoint);
|
|
61
|
-
}
|
|
62
|
-
for (const [component, meta] of data.componentMetas) {
|
|
63
|
-
const presetStyle = meta.presetStyle;
|
|
64
|
-
if (presetStyle === void 0) {
|
|
65
|
-
continue;
|
|
66
|
-
}
|
|
67
|
-
const rules = (0, import_style_rules.getPresetStyleRules)(component, presetStyle);
|
|
68
|
-
for (const [selector, style] of rules) {
|
|
69
|
-
engine.addStyleRule(selector, { style });
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
|
|
73
|
-
for (const { breakpointId, instanceId, state, style } of styleRules) {
|
|
74
|
-
engine.addStyleRule(
|
|
75
|
-
`[${import_tree.idAttribute}="${instanceId}"]${state ?? ""}`,
|
|
76
|
-
{
|
|
77
|
-
breakpoint: breakpointId,
|
|
78
|
-
style
|
|
79
|
-
},
|
|
80
|
-
createImageValueTransformer(assets, options)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
return engine.cssText;
|
|
84
|
-
};
|
|
@@ -1,37 +0,0 @@
|
|
|
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 global_rules_exports = {};
|
|
20
|
-
__export(global_rules_exports, {
|
|
21
|
-
addGlobalRules: () => addGlobalRules
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(global_rules_exports);
|
|
24
|
-
var import_fonts = require("@webstudio-is/fonts");
|
|
25
|
-
const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
|
|
26
|
-
engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
|
|
27
|
-
const fontAssets = [];
|
|
28
|
-
for (const asset of assets.values()) {
|
|
29
|
-
if (asset?.type === "font") {
|
|
30
|
-
fontAssets.push(asset);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
const fontFaces = (0, import_fonts.getFontFaces)(fontAssets, { assetBaseUrl });
|
|
34
|
-
for (const fontFace of fontFaces) {
|
|
35
|
-
engine.addFontFaceRule(fontFace);
|
|
36
|
-
}
|
|
37
|
-
};
|
package/lib/cjs/css/index.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var css_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(css_exports);
|
|
18
|
-
__reExport(css_exports, require("./global-rules"), module.exports);
|
|
19
|
-
__reExport(css_exports, require("./style-rules"), module.exports);
|
|
20
|
-
__reExport(css_exports, require("./css"), module.exports);
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
-
for (let key of __getOwnPropNames(from))
|
|
11
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
-
}
|
|
14
|
-
return to;
|
|
15
|
-
};
|
|
16
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
-
mod
|
|
23
|
-
));
|
|
24
|
-
var normalize = __toESM(require("./normalize"), 1);
|
|
25
|
-
const normalizeWithKeyof = { ...normalize };
|
|
26
|
-
normalizeWithKeyof;
|