@webstudio-is/react-sdk 0.54.0 → 0.56.0

package/lib/cjs/components/blockquote.ws.js

@@ -93,6 +93,5 @@ const meta = {
   children: ["Blockquote you can edit"]
 };
 const propsMeta = {
-  props: import_blockquote.props,
-  initialProps: ["tag"]
+  props: import_blockquote.props
 };

package/lib/cjs/tree/create-elements-tree.js

@@ -27,24 +27,30 @@ var import_react2 = require("@remix-run/react");
 var import_context = require("../context");
 var import_session_storage_polyfill = require("./session-storage-polyfill");
 const createElementsTree = ({
+  instances,
+  rootInstanceId,
   sandbox,
-  instance,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
   Component,
   getComponent
 }) => {
-  const rootInstanceSelector = [instance.id];
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    return null;
+  }
+  const rootInstanceSelector = [rootInstanceId];
   const children = createInstanceChildrenElements({
+    instances,
     instanceSelector: rootInstanceSelector,
     Component,
-    children: instance.children,
+    children: rootInstance.children,
     getComponent
   });
   const root = createInstanceElement({
     Component,
-    instance,
+    instance: rootInstance,
     instanceSelector: rootInstanceSelector,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
@@ -65,6 +71,7 @@ const createElementsTree = ({
   );
 };
 const createInstanceChildrenElements = ({
+  instances,
   instanceSelector,
   children,
   Component,
@@ -76,15 +83,20 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
-    const childInstanceSelector = [child.id, ...instanceSelector];
+    const childInstance = instances.get(child.value);
+    if (childInstance === void 0) {
+      continue;
+    }
+    const childInstanceSelector = [child.value, ...instanceSelector];
     const children2 = createInstanceChildrenElements({
+      instances,
       instanceSelector: childInstanceSelector,
-      children: child.children,
+      children: childInstance.children,
       Component,
       getComponent
     });
     const element = createInstanceElement({
-      instance: child,
+      instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children: children2,

package/lib/cjs/tree/root.js

@@ -28,32 +28,6 @@ var import_components = require("../components");
 var import_custom_components = require("../app/custom-components");
 var import_params = require("../app/params");
 var import_props = require("../props");
-const denormalizeTree = (instances, rootInstanceId) => {
-  const convertTree = (instance) => {
-    const legacyInstance = {
-      type: "instance",
-      id: instance.id,
-      component: instance.component,
-      children: []
-    };
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        const childInstance = instances.get(child.value);
-        if (childInstance) {
-          legacyInstance.children.push(convertTree(childInstance));
-        }
-      } else {
-        legacyInstance.children.push(child);
-      }
-    }
-    return legacyInstance;
-  };
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === void 0) {
-    return void 0;
-  }
-  return convertTree(rootInstance);
-};
 const InstanceRoot = ({
   data,
   Component,
@@ -62,15 +36,9 @@ const InstanceRoot = ({
 }) => {
   (0, import_params.setParams)(data.params ?? null);
   (0, import_components.registerComponents)(customComponents);
-  const instance = denormalizeTree(
-    new Map(data.build.instances),
-    data.page.rootInstanceId
-  );
-  if (instance === void 0) {
-    return null;
-  }
   return (0, import_create_elements_tree.createElementsTree)({
-    instance,
+    instances: new Map(data.build.instances),
+    rootInstanceId: data.page.rootInstanceId,
     propsByInstanceIdStore: (0, import_nanostores.atom)(
       (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
     ),

package/lib/components/blockquote.ws.js

@@ -69,8 +69,7 @@ const meta = {
   children: ["Blockquote you can edit"]
 };
 const propsMeta = {
-  props,
-  initialProps: ["tag"]
+  props
 };
 export {
   meta,

package/lib/tree/create-elements-tree.js

@@ -4,24 +4,30 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
 import { ReactSdkContext } from "../context";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 const createElementsTree = ({
+  instances,
+  rootInstanceId,
   sandbox,
-  instance,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
   Component,
   getComponent
 }) => {
-  const rootInstanceSelector = [instance.id];
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    return null;
+  }
+  const rootInstanceSelector = [rootInstanceId];
   const children = createInstanceChildrenElements({
+    instances,
     instanceSelector: rootInstanceSelector,
     Component,
-    children: instance.children,
+    children: rootInstance.children,
     getComponent
   });
   const root = createInstanceElement({
     Component,
-    instance,
+    instance: rootInstance,
     instanceSelector: rootInstanceSelector,
     children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -42,6 +48,7 @@ const createElementsTree = ({
   );
 };
 const createInstanceChildrenElements = ({
+  instances,
   instanceSelector,
   children,
   Component,
@@ -53,15 +60,20 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
-    const childInstanceSelector = [child.id, ...instanceSelector];
+    const childInstance = instances.get(child.value);
+    if (childInstance === void 0) {
+      continue;
+    }
+    const childInstanceSelector = [child.value, ...instanceSelector];
     const children2 = createInstanceChildrenElements({
+      instances,
       instanceSelector: childInstanceSelector,
-      children: child.children,
+      children: childInstance.children,
       Component,
       getComponent
     });
     const element = createInstanceElement({
-      instance: child,
+      instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children: children2,

package/lib/tree/root.js

@@ -5,32 +5,6 @@ import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams } from "../app/params";
 import { getPropsByInstanceId } from "../props";
-const denormalizeTree = (instances, rootInstanceId) => {
-  const convertTree = (instance) => {
-    const legacyInstance = {
-      type: "instance",
-      id: instance.id,
-      component: instance.component,
-      children: []
-    };
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        const childInstance = instances.get(child.value);
-        if (childInstance) {
-          legacyInstance.children.push(convertTree(childInstance));
-        }
-      } else {
-        legacyInstance.children.push(child);
-      }
-    }
-    return legacyInstance;
-  };
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === void 0) {
-    return void 0;
-  }
-  return convertTree(rootInstance);
-};
 const InstanceRoot = ({
   data,
   Component,
@@ -39,15 +13,9 @@ const InstanceRoot = ({
 }) => {
   setParams(data.params ?? null);
   registerComponents(customComponents);
-  const instance = denormalizeTree(
-    new Map(data.build.instances),
-    data.page.rootInstanceId
-  );
-  if (instance === void 0) {
-    return null;
-  }
   return createElementsTree({
-    instance,
+    instances: new Map(data.build.instances),
+    rootInstanceId: data.page.rootInstanceId,
     propsByInstanceIdStore: atom(
       getPropsByInstanceId(new Map(data.build.props))
     ),

package/lib/types/tree/create-elements-tree.d.ts

@@ -1,16 +1,29 @@
 import { type ComponentProps } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance } from "@webstudio-is/project-build";
+import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-export declare const createElementsTree: ({ sandbox, instance, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+export declare const createElementsTree: ({ instances, rootInstanceId, sandbox, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+    instances: Map<string, {
+        label?: string | undefined;
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            type: "text";
+            value: string;
+        } | {
+            type: "id";
+            value: string;
+        })[];
+    }>;
+    rootInstanceId: Instance["id"];
     sandbox?: boolean | undefined;
-    instance: Instance;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
     Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
     getComponent: GetComponent;
-}) => JSX.Element;
+}) => JSX.Element | null;

package/lib/types/tree/webstudio-component.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { Instance } from "@webstudio-is/project-build";
+import type { Instance, InstancesItem } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
 type WebstudioComponentProps = {
-    instance: Instance;
+    instance: InstancesItem;
     instanceSelector: Instance["id"][];
     children: Array<JSX.Element | string>;
     getComponent: GetComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -38,16 +38,16 @@
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.54.0",
-    "@webstudio-is/css-data": "^0.54.0",
-    "@webstudio-is/css-engine": "^0.54.0",
-    "@webstudio-is/css-vars": "^0.54.0",
-    "@webstudio-is/fonts": "^0.54.0",
-    "@webstudio-is/generate-arg-types": "^0.54.0",
-    "@webstudio-is/icons": "^0.54.0",
-    "@webstudio-is/image": "^0.54.0",
-    "@webstudio-is/prisma-client": "^0.54.0",
-    "@webstudio-is/project-build": "^0.54.0"
+    "@webstudio-is/asset-uploader": "^0.56.0",
+    "@webstudio-is/css-data": "^0.56.0",
+    "@webstudio-is/css-engine": "^0.56.0",
+    "@webstudio-is/css-vars": "^0.56.0",
+    "@webstudio-is/fonts": "^0.56.0",
+    "@webstudio-is/generate-arg-types": "^0.56.0",
+    "@webstudio-is/icons": "^0.56.0",
+    "@webstudio-is/image": "^0.56.0",
+    "@webstudio-is/prisma-client": "^0.56.0",
+    "@webstudio-is/project-build": "^0.56.0"
   },
   "exports": {
     ".": {

package/src/components/blockquote.ws.tsx

@@ -79,5 +79,4 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["tag"],
 };

package/src/tree/create-elements-tree.tsx

@@ -2,7 +2,11 @@ import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance } from "@webstudio-is/project-build";
+import type {
+  Instance,
+  Instances,
+  InstancesItem,
+} from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
@@ -12,32 +16,40 @@ import { SessionStoragePolyfill } from "./session-storage-polyfill";
 type InstanceSelector = Instance["id"][];
 
 export const createElementsTree = ({
+  instances,
+  rootInstanceId,
   sandbox,
-  instance,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
   Component,
   getComponent,
 }: {
+  instances: Instances;
+  rootInstanceId: Instance["id"];
   sandbox?: boolean;
-  instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
-  const rootInstanceSelector = [instance.id];
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === undefined) {
+    return null;
+  }
+
+  const rootInstanceSelector = [rootInstanceId];
   const children = createInstanceChildrenElements({
+    instances,
     instanceSelector: rootInstanceSelector,
     Component,
-    children: instance.children,
+    children: rootInstance.children,
     getComponent,
   });
   const root = createInstanceElement({
     Component,
-    instance,
+    instance: rootInstance,
     instanceSelector: rootInstanceSelector,
     children: [
       <Fragment key="children">
@@ -59,13 +71,15 @@ export const createElementsTree = ({
 };
 
 const createInstanceChildrenElements = ({
+  instances,
   instanceSelector,
   children,
   Component,
   getComponent,
 }: {
+  instances: Instances;
   instanceSelector: InstanceSelector;
-  children: Instance["children"];
+  children: InstancesItem["children"];
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
@@ -75,15 +89,20 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
-    const childInstanceSelector = [child.id, ...instanceSelector];
+    const childInstance = instances.get(child.value);
+    if (childInstance === undefined) {
+      continue;
+    }
+    const childInstanceSelector = [child.value, ...instanceSelector];
     const children = createInstanceChildrenElements({
+      instances,
       instanceSelector: childInstanceSelector,
-      children: child.children,
+      children: childInstance.children,
       Component,
       getComponent,
     });
     const element = createInstanceElement({
-      instance: child,
+      instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children,
@@ -101,7 +120,7 @@ const createInstanceElement = ({
   children = [],
   getComponent,
 }: {
-  instance: Instance;
+  instance: InstancesItem;
   instanceSelector: InstanceSelector;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;

package/src/tree/root.ts

@@ -1,12 +1,6 @@
 import type { ComponentProps } from "react";
 import { atom } from "nanostores";
-import type {
-  Build,
-  Instance,
-  Instances,
-  InstancesItem,
-  Page,
-} from "@webstudio-is/project-build";
+import type { Build, Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
@@ -35,36 +29,6 @@ type RootProps = {
   getComponent: GetComponent;
 };
 
-const denormalizeTree = (
-  instances: Instances,
-  rootInstanceId: Instance["id"]
-) => {
-  const convertTree = (instance: InstancesItem) => {
-    const legacyInstance: Instance = {
-      type: "instance",
-      id: instance.id,
-      component: instance.component,
-      children: [],
-    };
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        const childInstance = instances.get(child.value);
-        if (childInstance) {
-          legacyInstance.children.push(convertTree(childInstance));
-        }
-      } else {
-        legacyInstance.children.push(child);
-      }
-    }
-    return legacyInstance;
-  };
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === undefined) {
-    return undefined;
-  }
-  return convertTree(rootInstance);
-};
-
 export const InstanceRoot = ({
   data,
   Component,
@@ -72,17 +36,10 @@ export const InstanceRoot = ({
   getComponent,
 }: RootProps): JSX.Element | null => {
   setParams(data.params ?? null);
-
   registerComponents(customComponents);
-  const instance = denormalizeTree(
-    new Map(data.build.instances),
-    data.page.rootInstanceId
-  );
-  if (instance === undefined) {
-    return null;
-  }
   return createElementsTree({
-    instance,
+    instances: new Map(data.build.instances),
+    rootInstanceId: data.page.rootInstanceId,
     propsByInstanceIdStore: atom(
       getPropsByInstanceId(new Map(data.build.props))
     ),

package/src/tree/webstudio-component.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import type { Instance } from "@webstudio-is/project-build";
+import type { Instance, InstancesItem } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { useInstanceProps } from "../props";
 
@@ -27,7 +27,7 @@ export const renderWebstudioComponentChildren = (
 };
 
 type WebstudioComponentProps = {
-  instance: Instance;
+  instance: InstancesItem;
   instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   getComponent: GetComponent;