@webstudio-is/react-sdk 0.121.0 → 0.123.0

package/lib/index.js

@@ -240,18 +240,10 @@ var createElementsTree = ({
     return null;
   }
   const rootInstanceSelector = [rootInstanceId];
-  const children = createInstanceChildrenElements({
-    instances,
-    instanceSelector: rootInstanceSelector,
-    Component,
-    children: rootInstance.children,
-    components
-  });
   const root = createInstanceElement({
     Component,
     instance: rootInstance,
     instanceSelector: rootInstanceSelector,
-    children,
     components
   });
   return /* @__PURE__ */ jsx(
@@ -293,18 +285,10 @@ var createInstanceChildrenElements = ({
       continue;
     }
     const childInstanceSelector = [child.value, ...instanceSelector];
-    const children2 = createInstanceChildrenElements({
-      instances,
-      instanceSelector: childInstanceSelector,
-      children: childInstance.children,
-      Component,
-      components
-    });
     const element = createInstanceElement({
       instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
-      children: children2,
       components
     });
     elements.push(element);
@@ -318,7 +302,6 @@ var createInstanceElement = ({
   Component,
   instance,
   instanceSelector,
-  children,
   components
 }) => {
   return /* @__PURE__ */ jsx(
@@ -326,8 +309,7 @@ var createInstanceElement = ({
     {
       instance,
       instanceSelector,
-      components,
-      children
+      components
     },
     instance.id
   );
@@ -351,7 +333,63 @@ var Root = ({
 };
 
 // src/core-components.ts
-var collectionComponent = "ws:component";
+import { ListIcon } from "@webstudio-is/icons/svg";
+var portalComponent = "Slot";
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  category: "general",
+  order: 7,
+  type: "container",
+  label: "Collection",
+  icon: ListIcon,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: collectionComponent,
+      props: [
+        {
+          name: "data",
+          type: "json",
+          value: ["apple", "orange", "banana"]
+        },
+        { name: "item", type: "parameter", variableName: "collectionItem" }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "Box",
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              props: [
+                { name: "code", type: "expression", code: "collectionItem" }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var coreMetas = {
+  [collectionComponent]: collectionMeta
+};
+var corePropsMetas = {
+  [collectionComponent]: collectionPropsMeta
+};
 
 // src/prop-meta.ts
 import { z } from "zod";
@@ -673,10 +711,6 @@ var generateDataSources = ({
     }
   }
   for (const prop of props.values()) {
-    if (prop.type === "parameter") {
-      output.delete(prop.value);
-      variables.delete(prop.value);
-    }
     if (prop.type === "action") {
       const name = scope.getName(prop.id, prop.name);
       output.set(prop.id, name);
@@ -738,12 +772,7 @@ var EmbedTemplateText = z2.object({
   value: z2.string()
 });
 var EmbedTemplateVariable = z2.object({
-  initialValue: z2.union([
-    z2.string(),
-    z2.number(),
-    z2.boolean(),
-    z2.array(z2.string())
-  ])
+  initialValue: z2.unknown()
 });
 var EmbedTemplateProp = z2.union([
   z2.object({
@@ -766,11 +795,21 @@ var EmbedTemplateProp = z2.union([
     name: z2.string(),
     value: z2.array(z2.string())
   }),
+  z2.object({
+    type: z2.literal("json"),
+    name: z2.string(),
+    value: z2.unknown()
+  }),
   z2.object({
     type: z2.literal("expression"),
     name: z2.string(),
     code: z2.string()
   }),
+  z2.object({
+    type: z2.literal("parameter"),
+    name: z2.string(),
+    variableName: z2.string()
+  }),
   z2.object({
     type: z2.literal("action"),
     name: z2.string(),
@@ -818,8 +857,7 @@ var getVariablValue = (value) => {
   if (Array.isArray(value)) {
     return { type: "string[]", value };
   }
-  value;
-  throw Error("Impossible case");
+  return { type: "json", value };
 };
 var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId, generateId) => {
   const parentChildren = [];
@@ -886,6 +924,24 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
             });
             continue;
           }
+          if (prop.type === "parameter") {
+            const dataSourceId = generateId();
+            dataSourceByRef.set(prop.variableName, {
+              type: "parameter",
+              id: dataSourceId,
+              scopeInstanceId: instanceId,
+              name: prop.variableName
+            });
+            props.push({
+              id: propId,
+              instanceId,
+              name: prop.name,
+              type: "parameter",
+              // replace variable reference with variable id
+              value: dataSourceId
+            });
+            continue;
+          }
           props.push({ id: propId, instanceId, ...prop });
         }
       }
@@ -1435,8 +1491,11 @@ export {
   collectionComponent,
   componentAttribute,
   componentCategories,
+  coreMetas,
+  corePropsMetas,
   createElementsTree,
   createImageValueTransformer,
+  createInstanceChildrenElements,
   decodeDataSourceVariable,
   defaultStates,
   encodeDataSourceVariable,
@@ -1457,6 +1516,7 @@ export {
   indexAttribute,
   namespaceMeta,
   normalizeProps,
+  portalComponent,
   selectorIdAttribute,
   showAttribute,
   stateCategories,

package/lib/types/component-generator.d.ts

@@ -105,6 +105,11 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
@@ -227,6 +232,11 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;
@@ -348,6 +358,11 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;

package/lib/types/core-components.d.ts

@@ -1 +1,140 @@
-export declare const collectionComponent = "ws:component";
+import type { WsComponentMeta } from "./components/component-meta";
+export declare const portalComponent = "Slot";
+export declare const collectionComponent = "ws:collection";
+export declare const coreMetas: {
+    "ws:collection": WsComponentMeta;
+};
+export declare const corePropsMetas: {
+    "ws:collection": {
+        props: Record<string, {
+            type: "number";
+            required: boolean;
+            control: "number";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "number";
+            required: boolean;
+            control: "range";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "text";
+            defaultValue?: string | undefined;
+            rows?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "code";
+            defaultValue?: string | undefined;
+            rows?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "color";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "boolean";
+            required: boolean;
+            control: "boolean";
+            defaultValue?: boolean | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "inline-radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "select";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "inline-check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "multi-select";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "file";
+            defaultValue?: string | undefined;
+            accept?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "url";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "json";
+            required: boolean;
+            control: "json";
+            defaultValue?: unknown;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "date";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "action";
+            required: boolean;
+            control: "action";
+            defaultValue?: undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        }>;
+        initialProps?: string[] | undefined;
+    };
+};

package/lib/types/embed-template.d.ts

@@ -15,11 +15,11 @@ declare const EmbedTemplateText: z.ZodObject<{
 }>;
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 declare const EmbedTemplateVariable: z.ZodObject<{
-    initialValue: z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodString, "many">]>;
+    initialValue: z.ZodUnknown;
 }, "strip", z.ZodTypeAny, {
-    initialValue: (string | number | boolean | string[]) & (string | number | boolean | string[] | undefined);
+    initialValue?: unknown;
 }, {
-    initialValue: (string | number | boolean | string[]) & (string | number | boolean | string[] | undefined);
+    initialValue?: unknown;
 }>;
 type EmbedTemplateVariable = z.infer<typeof EmbedTemplateVariable>;
 export declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
@@ -70,6 +70,18 @@ export declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     value: string[];
     type: "string[]";
     name: string;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"json">;
+    name: z.ZodString;
+    value: z.ZodUnknown;
+}, "strip", z.ZodTypeAny, {
+    type: "json";
+    name: string;
+    value?: unknown;
+}, {
+    type: "json";
+    name: string;
+    value?: unknown;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"expression">;
     name: z.ZodString;
@@ -82,6 +94,18 @@ export declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     code: string;
     type: "expression";
     name: string;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"parameter">;
+    name: z.ZodString;
+    variableName: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    type: "parameter";
+    name: string;
+    variableName: string;
+}, {
+    type: "parameter";
+    name: string;
+    variableName: string;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"action">;
     name: z.ZodString;
@@ -2286,7 +2310,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         instanceId: string;
         required?: boolean | undefined;
     })[];
-    dataSources: {
+    dataSources: ({
         value: {
             value: number;
             type: "number";
@@ -2307,7 +2331,12 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    }[];
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    })[];
     styleSourceSelections: {
         values: string[];
         instanceId: string;

package/lib/types/expression.d.ts

@@ -39,6 +39,11 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
     }>;
     props: Map<string, {
         value: number;

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

@@ -3,10 +3,10 @@ import type { Instance, Instances } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
 import { type Params } from "../context";
 import type { ImageLoader } from "@webstudio-is/image";
+type InstanceSelector = Instance["id"][];
 export type WebstudioComponentProps = {
     instance: Instance;
     instanceSelector: Instance["id"][];
-    children: ReactNode;
     components: Components;
 };
 export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, Component, components, }: Params & {
@@ -28,3 +28,23 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
 }) => import("react/jsx-runtime").JSX.Element | null;
+export declare const createInstanceChildrenElements: ({ instances, instanceSelector, children, Component, components, }: {
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            value: string;
+            type: "text";
+        } | {
+            value: string;
+            type: "id";
+        })[];
+        label?: string | undefined;
+    }>;
+    instanceSelector: InstanceSelector;
+    children: Instance["children"];
+    Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
+    components: Components;
+}) => ReactNode[] | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.121.0",
+  "version": "0.123.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,8 +16,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/jest-config": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -33,10 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.121.0",
-    "@webstudio-is/sdk": "0.121.0",
-    "@webstudio-is/fonts": "0.121.0",
-    "@webstudio-is/image": "0.121.0"
+    "@webstudio-is/css-engine": "0.123.0",
+    "@webstudio-is/icons": "^0.123.0",
+    "@webstudio-is/fonts": "0.123.0",
+    "@webstudio-is/image": "0.123.0",
+    "@webstudio-is/sdk": "0.123.0"
   },
   "exports": {
     ".": {