@webstudio-is/react-sdk 0.33.0 → 0.35.0

package/lib/components/rich-text-link.ws.js

@@ -1,14 +1,13 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/rich-text-link.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Link",
   Icon: Link2Icon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/span.ws.js

@@ -1,14 +1,13 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/span.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: BrushIcon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/subscript.ws.js

@@ -1,14 +1,13 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/subscript.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: SubscriptIcon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/superscript.ws.js

@@ -1,14 +1,13 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/superscript.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: SuperscriptIcon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/text-block.ws.js

@@ -1,5 +1,4 @@
 import { TextIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/text-block.props.json";
 const presetStyle = {
   minHeight: {
@@ -15,9 +14,9 @@ const meta = {
   presetStyle,
   children: ["Block of text you can edit"]
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/css/index.js

@@ -1,3 +1,2 @@
 export * from "./get-browser-style";
 export * from "./categories";
-export * from "./breakpoints";

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

@@ -8,13 +8,11 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const children = createInstanceChildrenElements({
     Component,
-    children: instance.children,
-    onChangeChildren
+    children: instance.children
   });
   const body = createInstanceElement({
     Component,
@@ -37,8 +35,7 @@ const createElementsTree = ({
 };
 const createInstanceChildrenElements = ({
   children,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const elements = [];
   for (const child of children) {
@@ -48,13 +45,11 @@ const createInstanceChildrenElements = ({
     }
     const children2 = createInstanceChildrenElements({
       children: child.children,
-      Component,
-      onChangeChildren
+      Component
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children: children2
     });
     elements.push(element);
@@ -64,14 +59,12 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
-  children = [],
-  onChangeChildren
+  children = []
 }) => {
   const props = {
     instance,
     children,
-    key: instance.id,
-    onChangeChildren
+    key: instance.id
   };
   return /* @__PURE__ */ jsx(Component, {
     ...props

package/lib/tree/wrapper-component.js

@@ -21,7 +21,6 @@ const renderWrapperComponentChildren = (children) => {
 };
 const WrapperComponent = ({
   instance,
-  onChangeChildren,
   children,
   ...rest
 }) => {
@@ -43,8 +42,10 @@ const WrapperComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const collapsedAttribute = "data-ws-collapsed";
 export {
   WrapperComponent,
+  collapsedAttribute,
   componentAttribute,
   idAttribute,
   renderWrapperComponentChildren

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,13 +46,13 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.33.0",
-    "@webstudio-is/css-data": "^0.33.0",
-    "@webstudio-is/generate-arg-types": "^0.33.0",
-    "@webstudio-is/icons": "^0.33.0",
-    "@webstudio-is/image": "^0.33.0",
-    "@webstudio-is/prisma-client": "^0.33.0",
-    "@webstudio-is/project-build": "^0.33.0"
+    "@webstudio-is/asset-uploader": "^0.35.0",
+    "@webstudio-is/css-data": "^0.35.0",
+    "@webstudio-is/generate-arg-types": "^0.35.0",
+    "@webstudio-is/icons": "^0.35.0",
+    "@webstudio-is/image": "^0.35.0",
+    "@webstudio-is/prisma-client": "^0.35.0",
+    "@webstudio-is/project-build": "^0.35.0"
   },
   "exports": {
     "import": "./lib/index.js",
@@ -72,7 +72,7 @@
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
     "typecheck": "tsc --noEmit",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",
     "storybook:run": "start-storybook -p 6006",

package/src/app/custom-components/index.ts

@@ -2,7 +2,7 @@ import { Image } from "./image";
 import { Link } from "./link";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
-import { WsComponentPropsMeta } from "../../components/component-type";
+import type { WsComponentPropsMeta } from "../../components/component-type";
 
 export const customComponents = {
   Image,
@@ -11,12 +11,12 @@ export const customComponents = {
 };
 
 export const customComponentPropsMetas = {
-  Image: WsComponentPropsMeta.parse({
+  Image: {
     props: {
       ...imageProps,
       src: { ...imageProps.src, control: "file-image", name: "Source" },
     },
-  }),
+  } as WsComponentPropsMeta,
 };
 
 // just for completeness, maybe we add soemthing here later

package/src/components/body.ws.tsx

@@ -1,5 +1,5 @@
 import { BodyIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/body.props.json";
 
 const presetStyle = {
@@ -59,6 +59,6 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/bold.ws.tsx

@@ -1,5 +1,5 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/bold.props.json";
 
 export const meta: WsComponentMeta = {
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: FontBoldIcon,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/box.ws.ts

@@ -1,5 +1,5 @@
 import { SquareIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/box.props.json";
 
 const presetStyle = {
@@ -16,7 +16,7 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
   initialProps: ["tag"],
-});
+} as WsComponentPropsMeta;

package/src/components/button.ws.tsx

@@ -1,5 +1,5 @@
 import { ButtonIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/button.props.json";
 
 export const meta: WsComponentMeta = {
@@ -9,7 +9,7 @@ export const meta: WsComponentMeta = {
   children: ["Button text you can edit"],
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
   initialProps: ["type"],
-});
+} as WsComponentPropsMeta;

package/src/components/component-type.ts

@@ -6,7 +6,7 @@ import { PropMeta } from "@webstudio-is/generate-arg-types";
 
 // props are separated from the rest of the meta
 // so they can be exported separately and potentially tree-shaken
-export const WsComponentPropsMeta = z.object({
+const WsComponentPropsMeta = z.object({
   props: z.record(PropMeta),
   initialProps: z.array(z.string()).optional(),
 });
@@ -35,7 +35,7 @@ export type WsComponentMeta = {
   children?: Array<string>;
 };
 
-export const WsComponentMeta = z.object({
+const WsComponentMeta = z.object({
   type: z.enum([
     "body",
     "container",

package/src/components/form.ws.tsx

@@ -1,5 +1,5 @@
 import { FormIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/form.props.json";
 
 const presetStyle = {
@@ -21,6 +21,6 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/heading.ws.tsx

@@ -1,5 +1,5 @@
 import { HeadingIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/heading.props.json";
 
 export const meta: WsComponentMeta = {
@@ -9,7 +9,7 @@ export const meta: WsComponentMeta = {
   children: ["Heading you can edit"],
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
   initialProps: ["tag"],
-});
+} as WsComponentPropsMeta;

package/src/components/image.ws.tsx

@@ -1,5 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/image.props.json";
 
 const presetStyle = {
@@ -24,10 +24,10 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props: {
     ...props,
     src: { ...props.src, control: "file-image", name: "Source" },
   },
   initialProps: ["src", "width", "height", "alt", "loading"],
-});
+} as WsComponentPropsMeta;

package/src/components/input.ws.tsx

@@ -1,5 +1,5 @@
 import { InputIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/input.props.json";
 
 export const meta: WsComponentMeta = {
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: InputIcon,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/italic.ws.tsx

@@ -1,5 +1,5 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/italic.props.json";
 
 const presetStyle = {
@@ -16,6 +16,6 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/link.ws.tsx

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/link.props.json";
 
 const presetStyle = {
@@ -22,7 +22,7 @@ export const meta: WsComponentMeta = {
   children: ["Link text you can edit"],
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
   initialProps: ["href"],
-});
+} as WsComponentPropsMeta;

package/src/components/paragraph.ws.tsx

@@ -1,5 +1,5 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/paragraph.props.json";
 
 export const meta: WsComponentMeta = {
@@ -9,6 +9,6 @@ export const meta: WsComponentMeta = {
   children: ["Pragraph you can edit"],
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/rich-text-link.ws.tsx

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/rich-text-link.props.json";
 
 export const meta: WsComponentMeta = {
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: Link2Icon,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/span.ws.tsx

@@ -1,5 +1,5 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/span.props.json";
 
 export const meta: WsComponentMeta = {
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: BrushIcon,
 };
 
-export const propsMeta = WsComponentPropsMeta.parse({
+export const propsMeta = {
   props,
-});
+} as WsComponentPropsMeta;

package/src/components/subscript.ws.tsx

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

package/src/components/superscript.ws.tsx

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

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

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

package/src/css/index.ts

@@ -1,3 +1,2 @@
 export * from "./get-browser-style";
 export * from "./categories";
-export * from "./breakpoints";

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

@@ -7,43 +7,22 @@ import type { Assets, PropsByInstanceId } from "../props";
 import type { WrapperComponent } from "./wrapper-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
-export type ChildrenUpdates = Array<
-  | {
-      type: "text";
-      value: string;
-    }
-  | {
-      type: "instance";
-      id: undefined | Instance["id"];
-      component: Instance["component"];
-      children: ChildrenUpdates;
-    }
->;
-
-export type OnChangeChildren = (change: {
-  instanceId: Instance["id"];
-  updates: ChildrenUpdates;
-}) => void;
-
 export const createElementsTree = ({
   sandbox,
   instance,
   propsByInstanceIdStore,
   assetsStore,
   Component,
-  onChangeChildren,
 }: {
   sandbox?: boolean;
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
 }) => {
   const children = createInstanceChildrenElements({
     Component,
     children: instance.children,
-    onChangeChildren,
   });
   const body = createInstanceElement({
     Component,
@@ -67,11 +46,9 @@ export const createElementsTree = ({
 const createInstanceChildrenElements = ({
   children,
   Component,
-  onChangeChildren,
 }: {
   children: Instance["children"];
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
 }) => {
   const elements = [];
   for (const child of children) {
@@ -82,12 +59,10 @@ const createInstanceChildrenElements = ({
     const children = createInstanceChildrenElements({
       children: child.children,
       Component,
-      onChangeChildren,
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children,
     });
     elements.push(element);
@@ -99,18 +74,15 @@ const createInstanceElement = ({
   Component,
   instance,
   children = [],
-  onChangeChildren,
 }: {
   instance: Instance;
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
   children?: Array<JSX.Element | string>;
 }) => {
   const props = {
     instance,
     children,
     key: instance.id,
-    onChangeChildren,
   };
 
   return <Component {...props} />;

package/src/tree/wrapper-component.tsx

@@ -2,7 +2,6 @@ import { Fragment } from "react";
 import type { Instance } from "@webstudio-is/project-build";
 import { getComponent } from "../components";
 import { useInstanceProps } from "../props";
-import type { OnChangeChildren } from "./create-elements-tree";
 
 const renderText = (text: string): Array<JSX.Element> => {
   const lines = text.split("\n");
@@ -30,12 +29,10 @@ export const renderWrapperComponentChildren = (
 type WrapperComponentProps = {
   instance: Instance;
   children: Array<JSX.Element | string>;
-  onChangeChildren?: OnChangeChildren;
 };
 
 export const WrapperComponent = ({
   instance,
-  onChangeChildren, // prevent it from passing to sdk component
   children,
   ...rest
 }: WrapperComponentProps) => {
@@ -57,3 +54,4 @@ export const WrapperComponent = ({
 
 export const idAttribute = "data-ws-id";
 export const componentAttribute = "data-ws-component";
+export const collapsedAttribute = "data-ws-collapsed";