@webstudio-is/react-sdk 0.72.0 → 0.74.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 +0 -1
- package/lib/cjs/app/index.js +0 -1
- package/lib/cjs/components/component-meta.js +3 -9
- package/lib/cjs/context.js +2 -0
- package/lib/cjs/css/normalize.js +12 -1
- package/lib/cjs/tree/create-elements-tree.js +10 -1
- package/lib/cjs/tree/root.js +2 -2
- package/lib/components/component-meta.js +3 -9
- package/lib/context.js +2 -0
- package/lib/css/normalize.js +12 -1
- package/lib/tree/create-elements-tree.js +10 -1
- package/lib/tree/root.js +2 -2
- package/lib/types/app/index.d.ts +0 -1
- package/lib/types/components/component-meta.d.ts +3 -3
- package/lib/types/context.d.ts +27 -2
- package/lib/types/index.d.ts +1 -1
- package/lib/types/tree/create-elements-tree.d.ts +2 -2
- package/lib/types/tree/root.d.ts +1 -1
- package/package.json +8 -8
- package/src/app/index.ts +0 -1
- package/src/components/component-meta.ts +3 -9
- package/src/context.tsx +35 -5
- package/src/css/normalize.ts +12 -1
- package/src/index.ts +1 -1
- package/src/tree/create-elements-tree.tsx +12 -4
- package/src/tree/root.ts +3 -2
- package/lib/app/params.js +0 -13
- package/lib/cjs/app/params.js +0 -33
- package/lib/types/app/params.d.ts +0 -27
- package/src/app/params.ts +0 -38
package/lib/app/index.js
CHANGED
package/lib/cjs/app/index.js
CHANGED
|
@@ -16,4 +16,3 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
16
16
|
var app_exports = {};
|
|
17
17
|
module.exports = __toCommonJS(app_exports);
|
|
18
18
|
__reExport(app_exports, require("./root"), module.exports);
|
|
19
|
-
__reExport(app_exports, require("./params"), module.exports);
|
|
@@ -29,6 +29,7 @@ var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
|
|
|
29
29
|
var import_embed_template = require("../embed-template");
|
|
30
30
|
const WsComponentPropsMeta = import_zod.z.object({
|
|
31
31
|
props: import_zod.z.record(import_generate_arg_types.PropMeta),
|
|
32
|
+
// Props that will be always visible in properties panel.
|
|
32
33
|
initialProps: import_zod.z.array(import_zod.z.string()).optional()
|
|
33
34
|
});
|
|
34
35
|
const componentCategories = [
|
|
@@ -53,18 +54,11 @@ const defaultStates = [
|
|
|
53
54
|
];
|
|
54
55
|
const WsComponentMeta = import_zod.z.object({
|
|
55
56
|
category: import_zod.z.enum(componentCategories).optional(),
|
|
56
|
-
// container - can accept other components with dnd
|
|
57
|
+
// container - can accept other components with dnd or be edited as text
|
|
57
58
|
// control - usually form controls like inputs, without children
|
|
58
59
|
// embed - images, videos or other embeddable components, without children
|
|
59
|
-
// rich-text - editable text component
|
|
60
60
|
// rich-text-child - formatted text fragment, not listed in components list
|
|
61
|
-
type: import_zod.z.enum([
|
|
62
|
-
"container",
|
|
63
|
-
"control",
|
|
64
|
-
"embed",
|
|
65
|
-
"rich-text",
|
|
66
|
-
"rich-text-child"
|
|
67
|
-
]),
|
|
61
|
+
type: import_zod.z.enum(["container", "control", "embed", "rich-text-child"]),
|
|
68
62
|
requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
|
|
69
63
|
invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
|
|
70
64
|
stylable: import_zod.z.optional(import_zod.z.boolean()),
|
package/lib/cjs/context.js
CHANGED
|
@@ -24,6 +24,8 @@ module.exports = __toCommonJS(context_exports);
|
|
|
24
24
|
var import_nanostores = require("nanostores");
|
|
25
25
|
var import_react = require("react");
|
|
26
26
|
const ReactSdkContext = (0, import_react.createContext)({
|
|
27
|
+
imageBaseUrl: "/",
|
|
28
|
+
assetBaseUrl: "/",
|
|
27
29
|
propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
28
30
|
assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
|
|
29
31
|
pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
|
package/lib/cjs/css/normalize.js
CHANGED
|
@@ -93,7 +93,18 @@ const h5 = baseStyle;
|
|
|
93
93
|
const h6 = baseStyle;
|
|
94
94
|
const i = baseStyle;
|
|
95
95
|
const img = baseStyle;
|
|
96
|
-
const a =
|
|
96
|
+
const a = [
|
|
97
|
+
...baseStyle,
|
|
98
|
+
{
|
|
99
|
+
property: "color",
|
|
100
|
+
value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
state: ":visited",
|
|
104
|
+
property: "color",
|
|
105
|
+
value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
|
|
106
|
+
}
|
|
107
|
+
];
|
|
97
108
|
const li = baseStyle;
|
|
98
109
|
const ul = baseStyle;
|
|
99
110
|
const ol = baseStyle;
|
|
@@ -27,6 +27,8 @@ var import_react2 = require("@remix-run/react");
|
|
|
27
27
|
var import_context = require("../context");
|
|
28
28
|
const createElementsTree = ({
|
|
29
29
|
renderer,
|
|
30
|
+
imageBaseUrl,
|
|
31
|
+
assetBaseUrl,
|
|
30
32
|
instances,
|
|
31
33
|
rootInstanceId,
|
|
32
34
|
propsByInstanceIdStore,
|
|
@@ -63,7 +65,14 @@ const createElementsTree = ({
|
|
|
63
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
66
|
import_context.ReactSdkContext.Provider,
|
|
65
67
|
{
|
|
66
|
-
value: {
|
|
68
|
+
value: {
|
|
69
|
+
propsByInstanceIdStore,
|
|
70
|
+
assetsStore,
|
|
71
|
+
pagesStore,
|
|
72
|
+
renderer,
|
|
73
|
+
imageBaseUrl,
|
|
74
|
+
assetBaseUrl
|
|
75
|
+
},
|
|
67
76
|
children: root
|
|
68
77
|
}
|
|
69
78
|
);
|
package/lib/cjs/tree/root.js
CHANGED
|
@@ -24,15 +24,15 @@ module.exports = __toCommonJS(root_exports);
|
|
|
24
24
|
var import_nanostores = require("nanostores");
|
|
25
25
|
var import_create_elements_tree = require("./create-elements-tree");
|
|
26
26
|
var import_webstudio_component = require("./webstudio-component");
|
|
27
|
-
var import_params = require("../app/params");
|
|
28
27
|
var import_props = require("../props");
|
|
29
28
|
const InstanceRoot = ({
|
|
30
29
|
data,
|
|
31
30
|
Component,
|
|
32
31
|
components
|
|
33
32
|
}) => {
|
|
34
|
-
(0, import_params.setParams)(data.params);
|
|
35
33
|
return (0, import_create_elements_tree.createElementsTree)({
|
|
34
|
+
imageBaseUrl: data.params?.imageBaseUrl ?? "/",
|
|
35
|
+
assetBaseUrl: data.params?.assetBaseUrl ?? "/",
|
|
36
36
|
instances: new Map(data.build.instances),
|
|
37
37
|
rootInstanceId: data.page.rootInstanceId,
|
|
38
38
|
propsByInstanceIdStore: (0, import_nanostores.atom)(
|
|
@@ -3,6 +3,7 @@ import { PropMeta } from "@webstudio-is/generate-arg-types";
|
|
|
3
3
|
import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
|
|
4
4
|
const WsComponentPropsMeta = z.object({
|
|
5
5
|
props: z.record(PropMeta),
|
|
6
|
+
// Props that will be always visible in properties panel.
|
|
6
7
|
initialProps: z.array(z.string()).optional()
|
|
7
8
|
});
|
|
8
9
|
const componentCategories = [
|
|
@@ -27,18 +28,11 @@ const defaultStates = [
|
|
|
27
28
|
];
|
|
28
29
|
const WsComponentMeta = z.object({
|
|
29
30
|
category: z.enum(componentCategories).optional(),
|
|
30
|
-
// container - can accept other components with dnd
|
|
31
|
+
// container - can accept other components with dnd or be edited as text
|
|
31
32
|
// control - usually form controls like inputs, without children
|
|
32
33
|
// embed - images, videos or other embeddable components, without children
|
|
33
|
-
// rich-text - editable text component
|
|
34
34
|
// rich-text-child - formatted text fragment, not listed in components list
|
|
35
|
-
type: z.enum([
|
|
36
|
-
"container",
|
|
37
|
-
"control",
|
|
38
|
-
"embed",
|
|
39
|
-
"rich-text",
|
|
40
|
-
"rich-text-child"
|
|
41
|
-
]),
|
|
35
|
+
type: z.enum(["container", "control", "embed", "rich-text-child"]),
|
|
42
36
|
requiredAncestors: z.optional(z.array(z.string())),
|
|
43
37
|
invalidAncestors: z.optional(z.array(z.string())),
|
|
44
38
|
stylable: z.optional(z.boolean()),
|
package/lib/context.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { atom } from "nanostores";
|
|
2
2
|
import { createContext } from "react";
|
|
3
3
|
const ReactSdkContext = createContext({
|
|
4
|
+
imageBaseUrl: "/",
|
|
5
|
+
assetBaseUrl: "/",
|
|
4
6
|
propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
|
|
5
7
|
assetsStore: atom(/* @__PURE__ */ new Map()),
|
|
6
8
|
pagesStore: atom(/* @__PURE__ */ new Map())
|
package/lib/css/normalize.js
CHANGED
|
@@ -24,7 +24,18 @@ const h5 = baseStyle;
|
|
|
24
24
|
const h6 = baseStyle;
|
|
25
25
|
const i = baseStyle;
|
|
26
26
|
const img = baseStyle;
|
|
27
|
-
const a =
|
|
27
|
+
const a = [
|
|
28
|
+
...baseStyle,
|
|
29
|
+
{
|
|
30
|
+
property: "color",
|
|
31
|
+
value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
state: ":visited",
|
|
35
|
+
property: "color",
|
|
36
|
+
value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
|
|
37
|
+
}
|
|
38
|
+
];
|
|
28
39
|
const li = baseStyle;
|
|
29
40
|
const ul = baseStyle;
|
|
30
41
|
const ol = baseStyle;
|
|
@@ -4,6 +4,8 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
|
|
|
4
4
|
import { ReactSdkContext } from "../context";
|
|
5
5
|
const createElementsTree = ({
|
|
6
6
|
renderer,
|
|
7
|
+
imageBaseUrl,
|
|
8
|
+
assetBaseUrl,
|
|
7
9
|
instances,
|
|
8
10
|
rootInstanceId,
|
|
9
11
|
propsByInstanceIdStore,
|
|
@@ -40,7 +42,14 @@ const createElementsTree = ({
|
|
|
40
42
|
return /* @__PURE__ */ jsx(
|
|
41
43
|
ReactSdkContext.Provider,
|
|
42
44
|
{
|
|
43
|
-
value: {
|
|
45
|
+
value: {
|
|
46
|
+
propsByInstanceIdStore,
|
|
47
|
+
assetsStore,
|
|
48
|
+
pagesStore,
|
|
49
|
+
renderer,
|
|
50
|
+
imageBaseUrl,
|
|
51
|
+
assetBaseUrl
|
|
52
|
+
},
|
|
44
53
|
children: root
|
|
45
54
|
}
|
|
46
55
|
);
|
package/lib/tree/root.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { atom } from "nanostores";
|
|
2
2
|
import { createElementsTree } from "./create-elements-tree";
|
|
3
3
|
import { WebstudioComponent } from "./webstudio-component";
|
|
4
|
-
import { setParams } from "../app/params";
|
|
5
4
|
import { getPropsByInstanceId } from "../props";
|
|
6
5
|
const InstanceRoot = ({
|
|
7
6
|
data,
|
|
8
7
|
Component,
|
|
9
8
|
components
|
|
10
9
|
}) => {
|
|
11
|
-
setParams(data.params);
|
|
12
10
|
return createElementsTree({
|
|
11
|
+
imageBaseUrl: data.params?.imageBaseUrl ?? "/",
|
|
12
|
+
assetBaseUrl: data.params?.assetBaseUrl ?? "/",
|
|
13
13
|
instances: new Map(data.build.instances),
|
|
14
14
|
rootInstanceId: data.page.rootInstanceId,
|
|
15
15
|
propsByInstanceIdStore: atom(
|
package/lib/types/app/index.d.ts
CHANGED
|
@@ -637,7 +637,7 @@ export type ComponentState = z.infer<typeof ComponentState>;
|
|
|
637
637
|
export declare const defaultStates: ComponentState[];
|
|
638
638
|
declare const WsComponentMeta: z.ZodObject<{
|
|
639
639
|
category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "hidden"]>>;
|
|
640
|
-
type: z.ZodEnum<["container", "control", "embed", "rich-text
|
|
640
|
+
type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
|
|
641
641
|
requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
642
642
|
invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
643
643
|
stylable: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -1037,7 +1037,7 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1037
1037
|
}>]>, "many">>>;
|
|
1038
1038
|
order: z.ZodOptional<z.ZodNumber>;
|
|
1039
1039
|
}, "strip", z.ZodTypeAny, {
|
|
1040
|
-
type: "embed" | "control" | "container" | "rich-text
|
|
1040
|
+
type: "embed" | "control" | "container" | "rich-text-child";
|
|
1041
1041
|
label: string;
|
|
1042
1042
|
icon: string;
|
|
1043
1043
|
category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
|
|
@@ -1240,7 +1240,7 @@ declare const WsComponentMeta: z.ZodObject<{
|
|
|
1240
1240
|
} | import("../embed-template").EmbedTemplateInstance)[] | undefined;
|
|
1241
1241
|
order?: number | undefined;
|
|
1242
1242
|
}, {
|
|
1243
|
-
type: "embed" | "control" | "container" | "rich-text
|
|
1243
|
+
type: "embed" | "control" | "container" | "rich-text-child";
|
|
1244
1244
|
label: string;
|
|
1245
1245
|
icon: string;
|
|
1246
1246
|
category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
|
package/lib/types/context.d.ts
CHANGED
|
@@ -2,8 +2,33 @@
|
|
|
2
2
|
import { type ReadableAtom } from "nanostores";
|
|
3
3
|
import type { Assets } from "@webstudio-is/asset-uploader";
|
|
4
4
|
import type { Pages, PropsByInstanceId } from "./props";
|
|
5
|
-
export
|
|
6
|
-
renderer?: "canvas" | "preview"
|
|
5
|
+
export type Params = {
|
|
6
|
+
renderer?: "canvas" | "preview";
|
|
7
|
+
/**
|
|
8
|
+
* Base url ir base path for images with ending slash.
|
|
9
|
+
* Used for configuring image with different sizes.
|
|
10
|
+
* Concatinated with "name?width=&quality=&format=".
|
|
11
|
+
*
|
|
12
|
+
* For example
|
|
13
|
+
* /asset/image/ used by default in builder
|
|
14
|
+
* https://image-transform.wstd.io/cdn-cgi/image/
|
|
15
|
+
* https://webstudio.is/cdn-cgi/image/
|
|
16
|
+
*/
|
|
17
|
+
imageBaseUrl: string;
|
|
18
|
+
/**
|
|
19
|
+
* Base url or base path for any asset with ending slash.
|
|
20
|
+
* Used to load assets like fonts or images in styles
|
|
21
|
+
* Concatinated with "name".
|
|
22
|
+
*
|
|
23
|
+
* For example
|
|
24
|
+
* /s/uploads/
|
|
25
|
+
* /asset/file/
|
|
26
|
+
* https://assets-dev.webstudio.is/
|
|
27
|
+
* https://assets.webstudio.is/
|
|
28
|
+
*/
|
|
29
|
+
assetBaseUrl: string;
|
|
30
|
+
};
|
|
31
|
+
export declare const ReactSdkContext: import("react").Context<Params & {
|
|
7
32
|
propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
|
|
8
33
|
assetsStore: ReadableAtom<Assets>;
|
|
9
34
|
pagesStore: ReadableAtom<Pages>;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export * from "./components/components-utils";
|
|
|
6
6
|
export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
|
|
7
7
|
export * from "./embed-template";
|
|
8
8
|
export { usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
|
|
9
|
-
export { ReactSdkContext } from "./context";
|
|
9
|
+
export { type Params, ReactSdkContext } from "./context";
|
|
@@ -3,10 +3,10 @@ import type { ReadableAtom } from "nanostores";
|
|
|
3
3
|
import type { Assets } from "@webstudio-is/asset-uploader";
|
|
4
4
|
import type { Instance, Instances } from "@webstudio-is/project-build";
|
|
5
5
|
import type { Components } from "../components/components-utils";
|
|
6
|
+
import { type Params } from "../context";
|
|
6
7
|
import type { Pages, PropsByInstanceId } from "../props";
|
|
7
8
|
import type { WebstudioComponent } from "./webstudio-component";
|
|
8
|
-
export declare const createElementsTree: ({ renderer, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, components, }: {
|
|
9
|
-
renderer?: "canvas" | "preview" | undefined;
|
|
9
|
+
export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, components, }: Params & {
|
|
10
10
|
instances: Map<string, {
|
|
11
11
|
type: "instance";
|
|
12
12
|
id: string;
|
package/lib/types/tree/root.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import type { ComponentProps } from "react";
|
|
|
2
2
|
import type { Build, Page } from "@webstudio-is/project-build";
|
|
3
3
|
import type { Asset } from "@webstudio-is/asset-uploader";
|
|
4
4
|
import { WebstudioComponent } from "./webstudio-component";
|
|
5
|
-
import { type Params } from "../app/params";
|
|
6
5
|
import type { Components } from "../components/components-utils";
|
|
6
|
+
import type { Params } from "../context";
|
|
7
7
|
export type Data = {
|
|
8
8
|
page: Page;
|
|
9
9
|
pages: Array<Page>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.74.0",
|
|
4
4
|
"description": "Webstudio JavaScript / TypeScript API",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"react": "^18.2.0",
|
|
15
15
|
"react-dom": "^18.2.0",
|
|
16
16
|
"type-fest": "^3.7.1",
|
|
17
|
-
"typescript": "5.
|
|
17
|
+
"typescript": "5.1.3",
|
|
18
18
|
"zod": "^3.21.4",
|
|
19
19
|
"@webstudio-is/jest-config": "^1.0.6",
|
|
20
20
|
"@webstudio-is/scripts": "^0.0.0",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"nanoevents": "^7.0.1",
|
|
34
34
|
"nanoid": "^3.2.0",
|
|
35
35
|
"nanostores": "^0.7.1",
|
|
36
|
-
"@webstudio-is/asset-uploader": "^0.
|
|
37
|
-
"@webstudio-is/css-data": "^0.
|
|
38
|
-
"@webstudio-is/css-engine": "^0.
|
|
39
|
-
"@webstudio-is/fonts": "^0.
|
|
40
|
-
"@webstudio-is/generate-arg-types": "^0.
|
|
41
|
-
"@webstudio-is/project-build": "^0.
|
|
36
|
+
"@webstudio-is/asset-uploader": "^0.74.0",
|
|
37
|
+
"@webstudio-is/css-data": "^0.74.0",
|
|
38
|
+
"@webstudio-is/css-engine": "^0.74.0",
|
|
39
|
+
"@webstudio-is/fonts": "^0.74.0",
|
|
40
|
+
"@webstudio-is/generate-arg-types": "^0.74.0",
|
|
41
|
+
"@webstudio-is/project-build": "^0.74.0"
|
|
42
42
|
},
|
|
43
43
|
"exports": {
|
|
44
44
|
".": {
|
package/src/app/index.ts
CHANGED
|
@@ -11,6 +11,7 @@ export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<
|
|
|
11
11
|
// so they can be exported separately and potentially tree-shaken
|
|
12
12
|
const WsComponentPropsMeta = z.object({
|
|
13
13
|
props: z.record(PropMeta),
|
|
14
|
+
// Props that will be always visible in properties panel.
|
|
14
15
|
initialProps: z.array(z.string()).optional(),
|
|
15
16
|
});
|
|
16
17
|
|
|
@@ -44,18 +45,11 @@ export const defaultStates: ComponentState[] = [
|
|
|
44
45
|
|
|
45
46
|
const WsComponentMeta = z.object({
|
|
46
47
|
category: z.enum(componentCategories).optional(),
|
|
47
|
-
// container - can accept other components with dnd
|
|
48
|
+
// container - can accept other components with dnd or be edited as text
|
|
48
49
|
// control - usually form controls like inputs, without children
|
|
49
50
|
// embed - images, videos or other embeddable components, without children
|
|
50
|
-
// rich-text - editable text component
|
|
51
51
|
// rich-text-child - formatted text fragment, not listed in components list
|
|
52
|
-
type: z.enum([
|
|
53
|
-
"container",
|
|
54
|
-
"control",
|
|
55
|
-
"embed",
|
|
56
|
-
"rich-text",
|
|
57
|
-
"rich-text-child",
|
|
58
|
-
]),
|
|
52
|
+
type: z.enum(["container", "control", "embed", "rich-text-child"]),
|
|
59
53
|
requiredAncestors: z.optional(z.array(z.string())),
|
|
60
54
|
invalidAncestors: z.optional(z.array(z.string())),
|
|
61
55
|
stylable: z.optional(z.boolean()),
|
package/src/context.tsx
CHANGED
|
@@ -3,12 +3,42 @@ import { createContext } from "react";
|
|
|
3
3
|
import type { Assets } from "@webstudio-is/asset-uploader";
|
|
4
4
|
import type { Pages, PropsByInstanceId } from "./props";
|
|
5
5
|
|
|
6
|
-
export
|
|
6
|
+
export type Params = {
|
|
7
7
|
renderer?: "canvas" | "preview";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Base url ir base path for images with ending slash.
|
|
10
|
+
* Used for configuring image with different sizes.
|
|
11
|
+
* Concatinated with "name?width=&quality=&format=".
|
|
12
|
+
*
|
|
13
|
+
* For example
|
|
14
|
+
* /asset/image/ used by default in builder
|
|
15
|
+
* https://image-transform.wstd.io/cdn-cgi/image/
|
|
16
|
+
* https://webstudio.is/cdn-cgi/image/
|
|
17
|
+
*/
|
|
18
|
+
imageBaseUrl: string;
|
|
19
|
+
/**
|
|
20
|
+
* Base url or base path for any asset with ending slash.
|
|
21
|
+
* Used to load assets like fonts or images in styles
|
|
22
|
+
* Concatinated with "name".
|
|
23
|
+
*
|
|
24
|
+
* For example
|
|
25
|
+
* /s/uploads/
|
|
26
|
+
* /asset/file/
|
|
27
|
+
* https://assets-dev.webstudio.is/
|
|
28
|
+
* https://assets.webstudio.is/
|
|
29
|
+
*/
|
|
30
|
+
assetBaseUrl: string;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const ReactSdkContext = createContext<
|
|
34
|
+
Params & {
|
|
35
|
+
propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
|
|
36
|
+
assetsStore: ReadableAtom<Assets>;
|
|
37
|
+
pagesStore: ReadableAtom<Pages>;
|
|
38
|
+
}
|
|
39
|
+
>({
|
|
40
|
+
imageBaseUrl: "/",
|
|
41
|
+
assetBaseUrl: "/",
|
|
12
42
|
propsByInstanceIdStore: atom(new Map()),
|
|
13
43
|
assetsStore: atom(new Map()),
|
|
14
44
|
pagesStore: atom(new Map()),
|
package/src/css/normalize.ts
CHANGED
|
@@ -63,7 +63,18 @@ export const i = baseStyle;
|
|
|
63
63
|
|
|
64
64
|
export const img = baseStyle;
|
|
65
65
|
|
|
66
|
-
export const a =
|
|
66
|
+
export const a = [
|
|
67
|
+
...baseStyle,
|
|
68
|
+
{
|
|
69
|
+
property: "color",
|
|
70
|
+
value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
state: ":visited",
|
|
74
|
+
property: "color",
|
|
75
|
+
value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
|
|
76
|
+
},
|
|
77
|
+
] satisfies Styles;
|
|
67
78
|
export const li = baseStyle;
|
|
68
79
|
export const ul = baseStyle;
|
|
69
80
|
export const ol = baseStyle;
|
package/src/index.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
|
|
|
4
4
|
import type { Assets } from "@webstudio-is/asset-uploader";
|
|
5
5
|
import type { Instance, Instances } from "@webstudio-is/project-build";
|
|
6
6
|
import type { Components } from "../components/components-utils";
|
|
7
|
-
import { ReactSdkContext } from "../context";
|
|
7
|
+
import { ReactSdkContext, type Params } from "../context";
|
|
8
8
|
import type { Pages, PropsByInstanceId } from "../props";
|
|
9
9
|
import type { WebstudioComponent } from "./webstudio-component";
|
|
10
10
|
|
|
@@ -12,6 +12,8 @@ type InstanceSelector = Instance["id"][];
|
|
|
12
12
|
|
|
13
13
|
export const createElementsTree = ({
|
|
14
14
|
renderer,
|
|
15
|
+
imageBaseUrl,
|
|
16
|
+
assetBaseUrl,
|
|
15
17
|
instances,
|
|
16
18
|
rootInstanceId,
|
|
17
19
|
propsByInstanceIdStore,
|
|
@@ -19,8 +21,7 @@ export const createElementsTree = ({
|
|
|
19
21
|
pagesStore,
|
|
20
22
|
Component,
|
|
21
23
|
components,
|
|
22
|
-
}: {
|
|
23
|
-
renderer?: "canvas" | "preview";
|
|
24
|
+
}: Params & {
|
|
24
25
|
instances: Instances;
|
|
25
26
|
rootInstanceId: Instance["id"];
|
|
26
27
|
propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
|
|
@@ -57,7 +58,14 @@ export const createElementsTree = ({
|
|
|
57
58
|
});
|
|
58
59
|
return (
|
|
59
60
|
<ReactSdkContext.Provider
|
|
60
|
-
value={{
|
|
61
|
+
value={{
|
|
62
|
+
propsByInstanceIdStore,
|
|
63
|
+
assetsStore,
|
|
64
|
+
pagesStore,
|
|
65
|
+
renderer,
|
|
66
|
+
imageBaseUrl,
|
|
67
|
+
assetBaseUrl,
|
|
68
|
+
}}
|
|
61
69
|
>
|
|
62
70
|
{root}
|
|
63
71
|
</ReactSdkContext.Provider>
|
package/src/tree/root.ts
CHANGED
|
@@ -4,9 +4,9 @@ import type { Build, Page } from "@webstudio-is/project-build";
|
|
|
4
4
|
import type { Asset } from "@webstudio-is/asset-uploader";
|
|
5
5
|
import { createElementsTree } from "./create-elements-tree";
|
|
6
6
|
import { WebstudioComponent } from "./webstudio-component";
|
|
7
|
-
import { setParams, type Params } from "../app/params";
|
|
8
7
|
import { getPropsByInstanceId } from "../props";
|
|
9
8
|
import type { Components } from "../components/components-utils";
|
|
9
|
+
import type { Params } from "../context";
|
|
10
10
|
|
|
11
11
|
export type Data = {
|
|
12
12
|
page: Page;
|
|
@@ -31,8 +31,9 @@ export const InstanceRoot = ({
|
|
|
31
31
|
Component,
|
|
32
32
|
components,
|
|
33
33
|
}: RootProps): JSX.Element | null => {
|
|
34
|
-
setParams(data.params);
|
|
35
34
|
return createElementsTree({
|
|
35
|
+
imageBaseUrl: data.params?.imageBaseUrl ?? "/",
|
|
36
|
+
assetBaseUrl: data.params?.assetBaseUrl ?? "/",
|
|
36
37
|
instances: new Map(data.build.instances),
|
|
37
38
|
rootInstanceId: data.page.rootInstanceId,
|
|
38
39
|
propsByInstanceIdStore: atom(
|
package/lib/app/params.js
DELETED
package/lib/cjs/app/params.js
DELETED
|
@@ -1,33 +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 params_exports = {};
|
|
20
|
-
__export(params_exports, {
|
|
21
|
-
getParams: () => getParams,
|
|
22
|
-
setParams: () => setParams
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(params_exports);
|
|
25
|
-
let params;
|
|
26
|
-
const emptyParams = {
|
|
27
|
-
imageBaseUrl: "/",
|
|
28
|
-
assetBaseUrl: "/"
|
|
29
|
-
};
|
|
30
|
-
const getParams = () => params ?? emptyParams;
|
|
31
|
-
const setParams = (newParams) => {
|
|
32
|
-
params = newParams;
|
|
33
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export type Params = {
|
|
2
|
-
/**
|
|
3
|
-
* Base url ir base path for images with ending slash.
|
|
4
|
-
* Used for configuring image with different sizes.
|
|
5
|
-
* Concatinated with "name?width=&quality=&format=".
|
|
6
|
-
*
|
|
7
|
-
* For example
|
|
8
|
-
* /asset/image/ used by default in builder
|
|
9
|
-
* https://image-transform.wstd.io/cdn-cgi/image/
|
|
10
|
-
* https://webstudio.is/cdn-cgi/image/
|
|
11
|
-
*/
|
|
12
|
-
imageBaseUrl: string;
|
|
13
|
-
/**
|
|
14
|
-
* Base url or base path for any asset with ending slash.
|
|
15
|
-
* Used to load assets like fonts or images in styles
|
|
16
|
-
* Concatinated with "name".
|
|
17
|
-
*
|
|
18
|
-
* For example
|
|
19
|
-
* /s/uploads/
|
|
20
|
-
* /asset/file/
|
|
21
|
-
* https://assets-dev.webstudio.is/
|
|
22
|
-
* https://assets.webstudio.is/
|
|
23
|
-
*/
|
|
24
|
-
assetBaseUrl: string;
|
|
25
|
-
};
|
|
26
|
-
export declare const getParams: () => Params;
|
|
27
|
-
export declare const setParams: (newParams: undefined | Params) => void;
|
package/src/app/params.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
export type Params = {
|
|
2
|
-
/**
|
|
3
|
-
* Base url ir base path for images with ending slash.
|
|
4
|
-
* Used for configuring image with different sizes.
|
|
5
|
-
* Concatinated with "name?width=&quality=&format=".
|
|
6
|
-
*
|
|
7
|
-
* For example
|
|
8
|
-
* /asset/image/ used by default in builder
|
|
9
|
-
* https://image-transform.wstd.io/cdn-cgi/image/
|
|
10
|
-
* https://webstudio.is/cdn-cgi/image/
|
|
11
|
-
*/
|
|
12
|
-
imageBaseUrl: string;
|
|
13
|
-
/**
|
|
14
|
-
* Base url or base path for any asset with ending slash.
|
|
15
|
-
* Used to load assets like fonts or images in styles
|
|
16
|
-
* Concatinated with "name".
|
|
17
|
-
*
|
|
18
|
-
* For example
|
|
19
|
-
* /s/uploads/
|
|
20
|
-
* /asset/file/
|
|
21
|
-
* https://assets-dev.webstudio.is/
|
|
22
|
-
* https://assets.webstudio.is/
|
|
23
|
-
*/
|
|
24
|
-
assetBaseUrl: string;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
let params: undefined | Params;
|
|
28
|
-
|
|
29
|
-
const emptyParams: Params = {
|
|
30
|
-
imageBaseUrl: "/",
|
|
31
|
-
assetBaseUrl: "/",
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export const getParams = (): Params => params ?? emptyParams;
|
|
35
|
-
|
|
36
|
-
export const setParams = (newParams: undefined | Params) => {
|
|
37
|
-
params = newParams;
|
|
38
|
-
};
|