@webstudio-is/react-sdk 0.71.0 → 0.73.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 CHANGED
@@ -1,2 +1 @@
1
1
  export * from "./root";
2
- export * from "./params";
@@ -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,13 +29,15 @@ 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 = [
35
36
  "general",
36
37
  "text",
37
38
  "media",
38
- "forms"
39
+ "forms",
40
+ "hidden"
39
41
  ];
40
42
  const stateCategories = ["states", "component-states"];
41
43
  const ComponentState = import_zod.z.object({
@@ -52,18 +54,11 @@ const defaultStates = [
52
54
  ];
53
55
  const WsComponentMeta = import_zod.z.object({
54
56
  category: import_zod.z.enum(componentCategories).optional(),
55
- // container - can accept other components with dnd
57
+ // container - can accept other components with dnd or be edited as text
56
58
  // control - usually form controls like inputs, without children
57
59
  // embed - images, videos or other embeddable components, without children
58
- // rich-text - editable text component
59
60
  // rich-text-child - formatted text fragment, not listed in components list
60
- type: import_zod.z.enum([
61
- "container",
62
- "control",
63
- "embed",
64
- "rich-text",
65
- "rich-text-child"
66
- ]),
61
+ type: import_zod.z.enum(["container", "control", "embed", "rich-text-child"]),
67
62
  requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
68
63
  invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
69
64
  stylable: import_zod.z.optional(import_zod.z.boolean()),
@@ -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())
@@ -54,6 +54,7 @@ const EmbedTemplateProp = import_zod.z.union([
54
54
  })
55
55
  ]);
56
56
  const EmbedTemplateStyleDeclRaw = import_zod.z.object({
57
+ // State selector, e.g. :hover
57
58
  state: import_zod.z.optional(import_zod.z.string()),
58
59
  property: import_zod.z.string(),
59
60
  value: import_css_data.StyleValue
@@ -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: { propsByInstanceIdStore, assetsStore, pagesStore, renderer },
68
+ value: {
69
+ propsByInstanceIdStore,
70
+ assetsStore,
71
+ pagesStore,
72
+ renderer,
73
+ imageBaseUrl,
74
+ assetBaseUrl
75
+ },
67
76
  children: root
68
77
  }
69
78
  );
@@ -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,13 +3,15 @@ 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 = [
9
10
  "general",
10
11
  "text",
11
12
  "media",
12
- "forms"
13
+ "forms",
14
+ "hidden"
13
15
  ];
14
16
  const stateCategories = ["states", "component-states"];
15
17
  const ComponentState = z.object({
@@ -26,18 +28,11 @@ const defaultStates = [
26
28
  ];
27
29
  const WsComponentMeta = z.object({
28
30
  category: z.enum(componentCategories).optional(),
29
- // container - can accept other components with dnd
31
+ // container - can accept other components with dnd or be edited as text
30
32
  // control - usually form controls like inputs, without children
31
33
  // embed - images, videos or other embeddable components, without children
32
- // rich-text - editable text component
33
34
  // rich-text-child - formatted text fragment, not listed in components list
34
- type: z.enum([
35
- "container",
36
- "control",
37
- "embed",
38
- "rich-text",
39
- "rich-text-child"
40
- ]),
35
+ type: z.enum(["container", "control", "embed", "rich-text-child"]),
41
36
  requiredAncestors: z.optional(z.array(z.string())),
42
37
  invalidAncestors: z.optional(z.array(z.string())),
43
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())
@@ -28,6 +28,7 @@ const EmbedTemplateProp = z.union([
28
28
  })
29
29
  ]);
30
30
  const EmbedTemplateStyleDeclRaw = z.object({
31
+ // State selector, e.g. :hover
31
32
  state: z.optional(z.string()),
32
33
  property: z.string(),
33
34
  value: StyleValue
@@ -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: { propsByInstanceIdStore, assetsStore, pagesStore, renderer },
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(
@@ -1,2 +1 @@
1
1
  export * from "./root";
2
- export * from "./params";
@@ -618,7 +618,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
618
618
  initialProps?: string[] | undefined;
619
619
  }>;
620
620
  export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
621
- export declare const componentCategories: readonly ["general", "text", "media", "forms"];
621
+ export declare const componentCategories: readonly ["general", "text", "media", "forms", "hidden"];
622
622
  export declare const stateCategories: readonly ["states", "component-states"];
623
623
  export declare const ComponentState: z.ZodObject<{
624
624
  category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -636,8 +636,8 @@ export declare const ComponentState: z.ZodObject<{
636
636
  export type ComponentState = z.infer<typeof ComponentState>;
637
637
  export declare const defaultStates: ComponentState[];
638
638
  declare const WsComponentMeta: z.ZodObject<{
639
- category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms"]>>;
640
- type: z.ZodEnum<["container", "control", "embed", "rich-text", "rich-text-child"]>;
639
+ category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "hidden"]>>;
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,10 +1037,10 @@ 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" | "rich-text-child";
1040
+ type: "embed" | "control" | "container" | "rich-text-child";
1041
1041
  label: string;
1042
1042
  icon: string;
1043
- category?: "text" | "media" | "general" | "forms" | undefined;
1043
+ category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
1044
1044
  requiredAncestors?: string[] | undefined;
1045
1045
  invalidAncestors?: string[] | undefined;
1046
1046
  stylable?: boolean | undefined;
@@ -1240,10 +1240,10 @@ 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" | "rich-text-child";
1243
+ type: "embed" | "control" | "container" | "rich-text-child";
1244
1244
  label: string;
1245
1245
  icon: string;
1246
- category?: "text" | "media" | "general" | "forms" | undefined;
1246
+ category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
1247
1247
  requiredAncestors?: string[] | undefined;
1248
1248
  invalidAncestors?: string[] | undefined;
1249
1249
  stylable?: boolean | undefined;
@@ -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 declare const ReactSdkContext: import("react").Context<{
6
- renderer?: "canvas" | undefined;
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>;
@@ -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" | 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;
@@ -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.71.0",
3
+ "version": "0.73.0",
4
4
  "description": "Webstudio JavaScript / TypeScript API",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -13,8 +13,8 @@
13
13
  "jest": "^29.3.1",
14
14
  "react": "^18.2.0",
15
15
  "react-dom": "^18.2.0",
16
- "typescript": "5.0.3",
17
16
  "type-fest": "^3.7.1",
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.71.0",
37
- "@webstudio-is/css-data": "^0.71.0",
38
- "@webstudio-is/css-engine": "^0.71.0",
39
- "@webstudio-is/fonts": "^0.71.0",
40
- "@webstudio-is/generate-arg-types": "^0.71.0",
41
- "@webstudio-is/project-build": "^0.71.0"
36
+ "@webstudio-is/asset-uploader": "^0.73.0",
37
+ "@webstudio-is/css-data": "^0.73.0",
38
+ "@webstudio-is/css-engine": "^0.73.0",
39
+ "@webstudio-is/fonts": "^0.73.0",
40
+ "@webstudio-is/generate-arg-types": "^0.73.0",
41
+ "@webstudio-is/project-build": "^0.73.0"
42
42
  },
43
43
  "exports": {
44
44
  ".": {
package/src/app/index.ts CHANGED
@@ -1,2 +1 @@
1
1
  export * from "./root";
2
- export * from "./params";
@@ -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
 
@@ -21,6 +22,7 @@ export const componentCategories = [
21
22
  "text",
22
23
  "media",
23
24
  "forms",
25
+ "hidden",
24
26
  ] as const;
25
27
 
26
28
  export const stateCategories = ["states", "component-states"] as const;
@@ -43,18 +45,11 @@ export const defaultStates: ComponentState[] = [
43
45
 
44
46
  const WsComponentMeta = z.object({
45
47
  category: z.enum(componentCategories).optional(),
46
- // container - can accept other components with dnd
48
+ // container - can accept other components with dnd or be edited as text
47
49
  // control - usually form controls like inputs, without children
48
50
  // embed - images, videos or other embeddable components, without children
49
- // rich-text - editable text component
50
51
  // rich-text-child - formatted text fragment, not listed in components list
51
- type: z.enum([
52
- "container",
53
- "control",
54
- "embed",
55
- "rich-text",
56
- "rich-text-child",
57
- ]),
52
+ type: z.enum(["container", "control", "embed", "rich-text-child"]),
58
53
  requiredAncestors: z.optional(z.array(z.string())),
59
54
  invalidAncestors: z.optional(z.array(z.string())),
60
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 const ReactSdkContext = createContext<{
7
- renderer?: "canvas";
8
- propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
9
- assetsStore: ReadableAtom<Assets>;
10
- pagesStore: ReadableAtom<Pages>;
11
- }>({
6
+ export type Params = {
7
+ renderer?: "canvas" | "preview";
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()),
@@ -45,6 +45,7 @@ const EmbedTemplateProp = z.union([
45
45
  type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
46
46
 
47
47
  const EmbedTemplateStyleDeclRaw = z.object({
48
+ // State selector, e.g. :hover
48
49
  state: z.optional(z.string()),
49
50
  property: z.string(),
50
51
  value: StyleValue,
package/src/index.ts CHANGED
@@ -18,4 +18,4 @@ export {
18
18
  usePropAsset,
19
19
  getInstanceIdFromComponentProps,
20
20
  } from "./props";
21
- export { ReactSdkContext } from "./context";
21
+ export { type Params, ReactSdkContext } from "./context";
@@ -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";
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={{ propsByInstanceIdStore, assetsStore, pagesStore, renderer }}
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
@@ -1,13 +0,0 @@
1
- let params;
2
- const emptyParams = {
3
- imageBaseUrl: "/",
4
- assetBaseUrl: "/"
5
- };
6
- const getParams = () => params ?? emptyParams;
7
- const setParams = (newParams) => {
8
- params = newParams;
9
- };
10
- export {
11
- getParams,
12
- setParams
13
- };
@@ -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
- };