@webstudio-is/react-sdk 0.35.0 → 0.36.0

package/src/components/subscript.ws.tsx

@@ -1,6 +1,6 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/subscript.props.json";
+import { props } from "./__generated__/subscript.props";
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: SubscriptIcon,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/superscript.ws.tsx

@@ -1,6 +1,6 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/superscript.props.json";
+import { props } from "./__generated__/superscript.props";
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: SuperscriptIcon,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/text-block.ws.tsx

@@ -1,6 +1,6 @@
 import { TextIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/text-block.props.json";
+import { props } from "./__generated__/text-block.props";
 
 const presetStyle = {
   minHeight: {
@@ -18,6 +18,6 @@ export const meta: WsComponentMeta = {
   children: ["Block of text you can edit"],
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/css/get-browser-style.ts

@@ -1,5 +1,5 @@
 import { detectFont } from "detect-font";
-import type { Style, StyleValue, Unit } from "@webstudio-is/css-data";
+import { keywordValues, Style, StyleValue, Unit } from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 
 const unitsList = Object.values(units).flat();
@@ -16,9 +16,20 @@ const parseValue = (
     value = "transparent";
   }
   if (Number.isNaN(number)) {
+    const values = keywordValues[
+      property as keyof typeof keywordValues
+    ] as ReadonlyArray<string>;
+
+    if (values?.includes(value)) {
+      return {
+        type: "keyword",
+        value: value,
+      };
+    }
+
     return {
-      type: "keyword",
-      value,
+      type: "unparsed",
+      value: value,
     };
   }
 

package/src/index.ts

@@ -3,6 +3,8 @@ export * from "./tree";
 export * from "./components";
 export * from "./pubsub";
 export * from "./app";
+export * from "./components/components";
+export * from "./components/components-utils";
 export {
   customComponents,
   customComponentMetas,

package/src/props.ts

@@ -28,7 +28,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   const { propsByInstanceIdStore } = useContext(ReactSdkContext);
   const propsByInstanceId = useStore(propsByInstanceIdStore);
   const instanceProps = propsByInstanceId.get(instanceId);
-  const instancePropsObject: Record<string, number | string | boolean> = {};
+  const instancePropsObject: Record<Prop["name"], Prop["value"]> = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
       if (prop.type !== "asset") {

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

@@ -2,9 +2,10 @@ import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Instance } from "@webstudio-is/project-build";
+import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Assets, PropsByInstanceId } from "../props";
-import type { WrapperComponent } from "./wrapper-component";
+import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 export const createElementsTree = ({
@@ -13,16 +14,19 @@ export const createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   Component,
+  getComponent,
 }: {
   sandbox?: boolean;
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
-  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  getComponent: GetComponent;
 }) => {
   const children = createInstanceChildrenElements({
     Component,
     children: instance.children,
+    getComponent,
   });
   const body = createInstanceElement({
     Component,
@@ -35,6 +39,7 @@ export const createElementsTree = ({
         <Scripts />
       </Fragment>,
     ],
+    getComponent,
   });
   return (
     <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
@@ -46,9 +51,11 @@ export const createElementsTree = ({
 const createInstanceChildrenElements = ({
   children,
   Component,
+  getComponent,
 }: {
   children: Instance["children"];
-  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  getComponent: GetComponent;
 }) => {
   const elements = [];
   for (const child of children) {
@@ -59,11 +66,13 @@ const createInstanceChildrenElements = ({
     const children = createInstanceChildrenElements({
       children: child.children,
       Component,
+      getComponent,
     });
     const element = createInstanceElement({
       instance: child,
       Component,
       children,
+      getComponent,
     });
     elements.push(element);
   }
@@ -74,15 +83,18 @@ const createInstanceElement = ({
   Component,
   instance,
   children = [],
+  getComponent,
 }: {
   instance: Instance;
-  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;
+  getComponent: GetComponent;
 }) => {
   const props = {
     instance,
     children,
     key: instance.id,
+    getComponent,
   };
 
   return <Component {...props} />;

package/src/tree/index.ts

@@ -1,3 +1,3 @@
 export * from "./create-elements-tree";
 export * from "./root";
-export * from "./wrapper-component";
+export * from "./webstudio-component";

package/src/tree/root.ts

@@ -1,13 +1,19 @@
 import type { ComponentProps } from "react";
 import { atom } from "nanostores";
-import type { Tree } from "@webstudio-is/project-build";
+import type {
+  Instance,
+  Instances,
+  InstancesItem,
+  Tree,
+} from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
-import { WrapperComponent } from "./wrapper-component";
+import { WebstudioComponent } from "./webstudio-component";
 import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams, type Params } from "../app/params";
 import { getPropsByInstanceId } from "../props";
+import type { GetComponent } from "../components/components-utils";
 
 export type Data = {
   tree: Tree | null;
@@ -17,14 +23,39 @@ export type Data = {
 
 type RootProps = {
   data: Data;
-  Component?: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   customComponents?: Parameters<typeof registerComponents>[0];
+  getComponent: GetComponent;
+};
+
+const denormalizeTree = (instances: Instances) => {
+  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;
+  };
+  return convertTree(Array.from(instances.values())[0]);
 };
 
 export const InstanceRoot = ({
   data,
   Component,
   customComponents = defaultCustomComponents,
+  getComponent,
 }: RootProps): JSX.Element | null => {
   if (data.tree === null) {
     throw new Error("Tree is null");
@@ -35,11 +66,12 @@ export const InstanceRoot = ({
   registerComponents(customComponents);
 
   return createElementsTree({
-    instance: data.tree.root,
+    instance: denormalizeTree(new Map(data.tree.instances)),
     propsByInstanceIdStore: atom(
       getPropsByInstanceId(new Map(data.tree.props))
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    Component: Component ?? WrapperComponent,
+    Component: Component ?? WebstudioComponent,
+    getComponent,
   });
 };

package/src/tree/{wrapper-component.tsx → webstudio-component.tsx}

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import type { Instance } from "@webstudio-is/project-build";
-import { getComponent } from "../components";
+import type { GetComponent } from "../components/components-utils";
 import { useInstanceProps } from "../props";
 
 const renderText = (text: string): Array<JSX.Element> => {
@@ -13,7 +13,7 @@ const renderText = (text: string): Array<JSX.Element> => {
   ));
 };
 
-export const renderWrapperComponentChildren = (
+export const renderWebstudioComponentChildren = (
   children: Array<JSX.Element | string> | undefined
 ): Array<JSX.Element | string | Array<JSX.Element | string>> | undefined => {
   // Some elements like input can't have children
@@ -26,16 +26,18 @@ export const renderWrapperComponentChildren = (
   });
 };
 
-type WrapperComponentProps = {
+type WebstudioComponentProps = {
   instance: Instance;
   children: Array<JSX.Element | string>;
+  getComponent: GetComponent;
 };
 
-export const WrapperComponent = ({
+export const WebstudioComponent = ({
   instance,
   children,
+  getComponent,
   ...rest
-}: WrapperComponentProps) => {
+}: WebstudioComponentProps) => {
   const instanceProps = useInstanceProps(instance.id);
   const props = {
     ...instanceProps,
@@ -48,7 +50,9 @@ export const WrapperComponent = ({
     return <></>;
   }
   return (
-    <Component {...props}>{renderWrapperComponentChildren(children)}</Component>
+    <Component {...props}>
+      {renderWebstudioComponentChildren(children)}
+    </Component>
   );
 };