@webstudio-is/react-sdk 0.117.0 → 0.119.0

package/lib/index.js

@@ -14,143 +14,79 @@ var addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   }
 };
 
-// src/tree/create-elements-tree.tsx
-import {
-  Fragment
-} from "react";
-
-// src/context.tsx
-import { createContext } from "react";
-var ReactSdkContext = createContext({
-  assetBaseUrl: "/",
-  imageBaseUrl: "/",
-  imageLoader: ({ src }) => src,
-  pagesPaths: /* @__PURE__ */ new Set()
-});
-
-// src/tree/create-elements-tree.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var createElementsTree = ({
-  renderer,
+// src/props.ts
+var normalizeProps = ({
+  props,
   assetBaseUrl,
-  imageBaseUrl,
-  imageLoader,
-  instances,
-  rootInstanceId,
-  Component,
-  components,
-  scripts
-}) => {
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === void 0) {
-    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: [
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        children,
-        scripts
-      ] }, "children")
-    ],
-    components
-  });
-  return /* @__PURE__ */ jsx(
-    ReactSdkContext.Provider,
-    {
-      value: {
-        renderer,
-        imageLoader,
-        pagesPaths: /* @__PURE__ */ new Set(),
-        assetBaseUrl,
-        imageBaseUrl
-      },
-      children: root
-    }
-  );
-};
-var createInstanceChildrenElements = ({
-  instances,
-  instanceSelector,
-  children,
-  Component,
-  components
+  assets,
+  pages
 }) => {
-  const elements = [];
-  for (const child of children) {
-    if (child.type === "text") {
-      elements.push(child.value);
+  const newProps = [];
+  for (const prop of props) {
+    if (prop.type === "asset") {
+      const assetId = prop.value;
+      const asset = assets.get(assetId);
+      if (asset === void 0) {
+        continue;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value: `${assetBaseUrl}${asset.name}`
+      });
       continue;
     }
-    const childInstance = instances.get(child.value);
-    if (childInstance === void 0) {
+    if (prop.type === "page") {
+      let page;
+      let idProp;
+      if (typeof prop.value === "string") {
+        const pageId = prop.value;
+        page = pages.get(pageId);
+      } else {
+        const { pageId, instanceId } = prop.value;
+        page = pages.get(pageId);
+        idProp = props.find(
+          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
+        );
+      }
+      if (page === void 0) {
+        continue;
+      }
+      const url = new URL(page.path, "https://any-valid.url");
+      let value = url.pathname;
+      if (idProp?.type === "string") {
+        const hash = idProp.value;
+        url.hash = encodeURIComponent(hash);
+        value = `${url.pathname}${url.hash}`;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value
+      });
       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);
+    newProps.push(prop);
   }
-  return elements;
-};
-var createInstanceElement = ({
-  Component,
-  instance,
-  instanceSelector,
-  children = [],
-  components
-}) => {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      instance,
-      instanceSelector,
-      components,
-      children
-    },
-    instance.id
-  );
-};
-
-// src/tree/webstudio-component.tsx
-import { Fragment as Fragment2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var renderText = (text) => {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    line,
-    index < lines.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
-  ] }, index));
+  return newProps;
 };
-var renderWebstudioComponentChildren = (children) => {
-  if (children === void 0 || children.length === 0) {
-    return;
+var getPropsByInstanceId = (props) => {
+  const propsByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === void 0) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
   }
-  return children.map((child) => {
-    return typeof child === "string" ? renderText(child) : child;
-  });
+  return propsByInstanceId;
 };
 var idAttribute = "data-ws-id";
 var selectorIdAttribute = "data-ws-selector";
@@ -158,6 +94,12 @@ var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
+var getInstanceIdFromComponentProps = (props) => {
+  return props[idAttribute];
+};
+var getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[indexAttribute];
+};
 
 // src/css/style-rules.ts
 var getStyleRules = (styles, styleSourceSelections) => {
@@ -279,23 +221,150 @@ var generateCssText = (data, options) => {
   return engine.cssText;
 };
 
+// src/tree/create-elements-tree.tsx
+import {
+  Fragment
+} from "react";
+
+// src/context.tsx
+import { createContext } from "react";
+var ReactSdkContext = createContext({
+  assetBaseUrl: "/",
+  imageBaseUrl: "/",
+  imageLoader: ({ src }) => src,
+  pagesPaths: /* @__PURE__ */ new Set()
+});
+
+// src/tree/create-elements-tree.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var createElementsTree = ({
+  renderer,
+  assetBaseUrl,
+  imageBaseUrl,
+  imageLoader,
+  instances,
+  rootInstanceId,
+  Component,
+  components
+}) => {
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    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(
+    ReactSdkContext.Provider,
+    {
+      value: {
+        renderer,
+        imageLoader,
+        pagesPaths: /* @__PURE__ */ new Set(),
+        assetBaseUrl,
+        imageBaseUrl
+      },
+      children: root
+    }
+  );
+};
+var renderText = (text) => {
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    line,
+    index < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
+  ] }, index));
+};
+var createInstanceChildrenElements = ({
+  instances,
+  instanceSelector,
+  children,
+  Component,
+  components
+}) => {
+  const elements = [];
+  for (const child of children) {
+    if (child.type === "text") {
+      elements.push(renderText(child.value));
+      continue;
+    }
+    const childInstance = instances.get(child.value);
+    if (childInstance === void 0) {
+      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);
+  }
+  if (elements.length === 0) {
+    return;
+  }
+  return elements;
+};
+var createInstanceElement = ({
+  Component,
+  instance,
+  instanceSelector,
+  children,
+  components
+}) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      components,
+      children
+    },
+    instance.id
+  );
+};
+
 // src/app/root.tsx
 import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Root = ({
   Outlet = DefaultOutlet
 }) => {
-  return /* @__PURE__ */ jsxs3("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs3("head", { children: [
-      /* @__PURE__ */ jsx3("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx3("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx3(Meta, {}),
-      /* @__PURE__ */ jsx3(Links, {})
+  return /* @__PURE__ */ jsxs2("html", { lang: "en", children: [
+    /* @__PURE__ */ jsxs2("head", { children: [
+      /* @__PURE__ */ jsx2("meta", { charSet: "utf-8" }),
+      /* @__PURE__ */ jsx2("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
+      /* @__PURE__ */ jsx2(Meta, {}),
+      /* @__PURE__ */ jsx2(Links, {})
     ] }),
-    /* @__PURE__ */ jsx3(Outlet, {})
+    /* @__PURE__ */ jsx2(Outlet, {})
   ] });
 };
 
+// src/core-components.ts
+var collectionComponent = "ws:component";
+
 // src/prop-meta.ts
 import { z } from "zod";
 var common = {
@@ -405,13 +474,11 @@ var Url = z.object({
   type: z.literal("string"),
   defaultValue: z.string().optional()
 });
-var ObjectType = z.object({
+var Json = z.object({
   ...common,
-  control: z.literal("object"),
-  // @todo not sure what type should be here
-  // (we don't support Object yet, added for completeness)
-  type: z.literal("Record<string, string>"),
-  defaultValue: z.record(z.string()).optional()
+  control: z.literal("json"),
+  type: z.literal("json"),
+  defaultValue: z.unknown().optional()
 });
 var Date = z.object({
   ...common,
@@ -442,7 +509,7 @@ var PropMeta = z.union([
   InlineCheck,
   File,
   Url,
-  ObjectType,
+  Json,
   Date,
   Action
 ]);
@@ -618,50 +685,15 @@ var generateDataSources = ({
     }
   }
   for (const prop of props.values()) {
-    if (prop.type === "dataSource") {
-      const dataSource = dataSources.get(prop.value);
-      if (dataSource?.type !== "expression") {
-        continue;
-      }
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const code = validateExpression(dataSource.code, {
-        optional: true,
-        transformIdentifier: (identifier) => {
-          const depId = decodeDataSourceVariable(identifier);
-          const dep = depId ? dataSources.get(depId) : void 0;
-          if (dep) {
-            return scope.getName(dep.id, dep.name);
-          }
-          console.error(`Unknown dependency "${identifier}"`);
-          return identifier;
-        }
-      });
-      body += `let ${name} = (${code});
-`;
-    }
-    if (prop.type === "expression") {
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const code = validateExpression(prop.value, {
-        transformIdentifier: (identifier) => {
-          const depId = decodeDataSourceVariable(identifier);
-          const dep = depId ? dataSources.get(depId) : void 0;
-          if (dep) {
-            return scope.getName(dep.id, dep.name);
-          }
-          console.error(`Unknown dependency "${identifier}"`);
-          return identifier;
-        }
-      });
-      body += `let ${name} = (${code});
-`;
+    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);
       const setters = /* @__PURE__ */ new Set();
-      let args = void 0;
+      let args = [];
       let newCode = "";
       for (const value of prop.value) {
         args = value.args;
@@ -688,9 +720,6 @@ var generateDataSources = ({
         newCode += `
 `;
       }
-      if (args === void 0) {
-        continue;
-      }
       if (typed) {
         args = args.map((arg) => `${arg}: any`);
       }
@@ -1093,87 +1122,6 @@ var WsComponentMeta = z3.object({
   order: z3.number().optional()
 });
 
-// src/props.ts
-var normalizeProps = ({
-  props,
-  assetBaseUrl,
-  assets,
-  pages
-}) => {
-  const newProps = [];
-  for (const prop of props) {
-    if (prop.type === "asset") {
-      const assetId = prop.value;
-      const asset = assets.get(assetId);
-      if (asset === void 0) {
-        continue;
-      }
-      newProps.push({
-        id: prop.id,
-        name: prop.name,
-        required: prop.required,
-        instanceId: prop.instanceId,
-        type: "string",
-        value: `${assetBaseUrl}${asset.name}`
-      });
-      continue;
-    }
-    if (prop.type === "page") {
-      let page;
-      let idProp;
-      if (typeof prop.value === "string") {
-        const pageId = prop.value;
-        page = pages.get(pageId);
-      } else {
-        const { pageId, instanceId } = prop.value;
-        page = pages.get(pageId);
-        idProp = props.find(
-          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
-        );
-      }
-      if (page === void 0) {
-        continue;
-      }
-      const url = new URL(page.path, "https://any-valid.url");
-      let value = url.pathname;
-      if (idProp?.type === "string") {
-        const hash = idProp.value;
-        url.hash = encodeURIComponent(hash);
-        value = `${url.pathname}${url.hash}`;
-      }
-      newProps.push({
-        id: prop.id,
-        name: prop.name,
-        required: prop.required,
-        instanceId: prop.instanceId,
-        type: "string",
-        value
-      });
-      continue;
-    }
-    newProps.push(prop);
-  }
-  return newProps;
-};
-var getPropsByInstanceId = (props) => {
-  const propsByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    let instanceProps = propsByInstanceId.get(prop.instanceId);
-    if (instanceProps === void 0) {
-      instanceProps = [];
-      propsByInstanceId.set(prop.instanceId, instanceProps);
-    }
-    instanceProps.push(prop);
-  }
-  return propsByInstanceId;
-};
-var getInstanceIdFromComponentProps = (props) => {
-  return props[idAttribute];
-};
-var getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[indexAttribute];
-};
-
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
@@ -1265,6 +1213,43 @@ var generateUtilsExport = (siteData) => {
 
 // src/component-generator.ts
 import { parseComponentName } from "@webstudio-is/sdk";
+var generatePropValue = ({
+  scope,
+  prop,
+  dataSources
+}) => {
+  if (prop.type === "asset" || prop.type === "page") {
+    return;
+  }
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+    return JSON.stringify(prop.value);
+  }
+  if (prop.type === "parameter") {
+    const dataSource = dataSources.get(prop.value);
+    if (dataSource === void 0) {
+      return;
+    }
+    return scope.getName(dataSource.id, dataSource.name);
+  }
+  if (prop.type === "expression") {
+    return validateExpression(prop.value, {
+      // transpile to safely executable member expressions
+      optional: true,
+      transformIdentifier: (identifier) => {
+        const depId = decodeDataSourceVariable(identifier);
+        const dep = depId ? dataSources.get(depId) : void 0;
+        if (dep) {
+          return scope.getName(dep.id, dep.name);
+        }
+        return identifier;
+      }
+    });
+  }
+  if (prop.type === "action") {
+    return scope.getName(prop.id, prop.name);
+  }
+  prop;
+};
 var generateJsxElement = ({
   scope,
   instance,
@@ -1273,7 +1258,6 @@ var generateJsxElement = ({
   indexesWithinAncestors,
   children
 }) => {
-  let conditionVariableName;
   let generatedProps = "";
   generatedProps += `
 ${idAttribute}=${JSON.stringify(instance.id)}`;
@@ -1286,93 +1270,72 @@ ${componentAttribute}=${JSON.stringify(
     generatedProps += `
 ${indexAttribute}="${index}"`;
   }
+  let conditionValue;
+  let collectionDataValue;
+  let collectionItemValue;
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
       continue;
     }
+    const propValue = generatePropValue({ scope, prop, dataSources });
     if (prop.name === showAttribute) {
-      if (prop.type === "boolean" && prop.value === false) {
-        return "";
-      }
-      if (prop.type === "dataSource") {
-        const dataSourceId = prop.value;
-        const dataSource = dataSources.get(dataSourceId);
-        if (dataSource === void 0) {
-          continue;
-        }
-        if (dataSource.type === "variable") {
-          conditionVariableName = scope.getName(dataSource.id, dataSource.name);
-        }
-        if (dataSource.type === "expression") {
-          conditionVariableName = scope.getName(prop.id, prop.name);
-        }
+      if (propValue === "true") {
+        continue;
       }
-      if (prop.type === "expression") {
-        conditionVariableName = scope.getName(prop.id, prop.name);
+      if (propValue === "false") {
+        return "";
       }
+      conditionValue = propValue;
       continue;
     }
-    if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
-      generatedProps += `
-${prop.name}={${JSON.stringify(prop.value)}}`;
-      continue;
-    }
-    if (prop.type === "asset" || prop.type === "page") {
-      continue;
-    }
-    if (prop.type === "dataSource") {
-      const dataSourceId = prop.value;
-      const dataSource = dataSources.get(dataSourceId);
-      if (dataSource === void 0) {
-        continue;
+    if (instance.component === collectionComponent) {
+      if (prop.name === "data") {
+        collectionDataValue = propValue;
       }
-      if (dataSource.type === "variable") {
-        const dataSourceVariable = scope.getName(
-          dataSource.id,
-          dataSource.name
-        );
-        generatedProps += `
-${prop.name}={${dataSourceVariable}}`;
-      }
-      if (dataSource.type === "expression") {
-        const dataSourceVariable = scope.getName(prop.id, prop.name);
-        generatedProps += `
-${prop.name}={${dataSourceVariable}}`;
+      if (prop.name === "item") {
+        collectionItemValue = propValue;
       }
       continue;
     }
-    if (prop.type === "expression") {
-      const propVariable = scope.getName(prop.id, prop.name);
+    if (propValue !== void 0) {
       generatedProps += `
-${prop.name}={${propVariable}}`;
-      continue;
+${prop.name}={${propValue}}`;
     }
-    if (prop.type === "action") {
-      const propVariable = scope.getName(prop.id, prop.name);
-      generatedProps += `
-${prop.name}={${propVariable}}`;
-      continue;
-    }
-    prop;
   }
   let generatedElement = "";
-  if (conditionVariableName) {
-    generatedElement += `{${conditionVariableName} &&
+  if (conditionValue) {
+    generatedElement += `{(${conditionValue}) &&
 `;
   }
-  const [_namespace, shortName] = parseComponentName(instance.component);
-  const componentVariable = scope.getName(instance.component, shortName);
-  if (instance.children.length === 0) {
-    generatedElement += `<${componentVariable}${generatedProps} />
+  if (instance.component === collectionComponent) {
+    if (collectionDataValue === void 0 || collectionItemValue === void 0) {
+      return "";
+    }
+    const indexVariable = scope.getName(`${instance.id}-index`, "index");
+    generatedElement += `{${collectionDataValue}.map((${collectionItemValue}, ${indexVariable}) =>
 `;
-  } else {
-    generatedElement += `<${componentVariable}${generatedProps}>
+    generatedElement += `<Fragment key={${indexVariable}}>
 `;
     generatedElement += children;
-    generatedElement += `</${componentVariable}>
+    generatedElement += `</Fragment>
+`;
+    generatedElement += `)}
 `;
+  } else {
+    const [_namespace, shortName] = parseComponentName(instance.component);
+    const componentVariable = scope.getName(instance.component, shortName);
+    if (instance.children.length === 0) {
+      generatedElement += `<${componentVariable}${generatedProps} />
+`;
+    } else {
+      generatedElement += `<${componentVariable}${generatedProps}>
+`;
+      generatedElement += children;
+      generatedElement += `</${componentVariable}>
+`;
+    }
   }
-  if (conditionVariableName) {
+  if (conditionValue) {
     generatedElement += `}
 `;
   }
@@ -1459,10 +1422,10 @@ var generatePageComponent = ({
       props,
       dataSources,
       indexesWithinAncestors
-    }) + "{props.scripts}\n"
+    })
   });
   let generatedComponent = "";
-  generatedComponent += `const Page = (props: { scripts?: ReactNode }) => {
+  generatedComponent += `const Page = () => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1481,6 +1444,7 @@ export {
   WsEmbedTemplate,
   addGlobalRules,
   collapsedAttribute,
+  collectionComponent,
   componentAttribute,
   componentCategories,
   createElementsTree,
@@ -1506,7 +1470,6 @@ export {
   indexAttribute,
   namespaceMeta,
   normalizeProps,
-  renderWebstudioComponentChildren,
   selectorIdAttribute,
   showAttribute,
   stateCategories,

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

@@ -60,7 +60,7 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         required?: boolean | undefined;
     } | {
         value: string;
-        type: "dataSource";
+        type: "parameter";
         name: string;
         id: string;
         instanceId: string;
@@ -105,20 +105,10 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
 }) => string;
-/**
- * Jsx element and children are generated separately to be able
- * to inject some scripts into Body if necessary
- */
 export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, }: {
     scope: Scope;
     children: Instance["children"];
@@ -192,7 +182,7 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         required?: boolean | undefined;
     } | {
         value: string;
-        type: "dataSource";
+        type: "parameter";
         name: string;
         id: string;
         instanceId: string;
@@ -237,12 +227,6 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;
@@ -319,7 +303,7 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         required?: boolean | undefined;
     } | {
         value: string;
-        type: "dataSource";
+        type: "parameter";
         name: string;
         id: string;
         instanceId: string;
@@ -364,12 +348,6 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;

package/lib/types/components/component-meta.d.ts

@@ -325,24 +325,24 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         label?: string | undefined;
         description?: string | undefined;
     }>, z.ZodObject<{
-        control: z.ZodLiteral<"object">;
-        type: z.ZodLiteral<"Record<string, string>">;
-        defaultValue: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+        control: z.ZodLiteral<"json">;
+        type: z.ZodLiteral<"json">;
+        defaultValue: z.ZodOptional<z.ZodUnknown>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
         required: z.ZodBoolean;
     }, "strip", z.ZodTypeAny, {
-        type: "Record<string, string>";
+        type: "json";
         required: boolean;
-        control: "object";
-        defaultValue?: Record<string, string> | undefined;
+        control: "json";
+        defaultValue?: unknown;
         label?: string | undefined;
         description?: string | undefined;
     }, {
-        type: "Record<string, string>";
+        type: "json";
         required: boolean;
-        control: "object";
-        defaultValue?: Record<string, string> | undefined;
+        control: "json";
+        defaultValue?: unknown;
         label?: string | undefined;
         description?: string | undefined;
     }>, z.ZodObject<{
@@ -498,10 +498,10 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         label?: string | undefined;
         description?: string | undefined;
     } | {
-        type: "Record<string, string>";
+        type: "json";
         required: boolean;
-        control: "object";
-        defaultValue?: Record<string, string> | undefined;
+        control: "json";
+        defaultValue?: unknown;
         label?: string | undefined;
         description?: string | undefined;
     } | {
@@ -629,10 +629,10 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         label?: string | undefined;
         description?: string | undefined;
     } | {
-        type: "Record<string, string>";
+        type: "json";
         required: boolean;
-        control: "object";
-        defaultValue?: Record<string, string> | undefined;
+        control: "json";
+        defaultValue?: unknown;
         label?: string | undefined;
         description?: string | undefined;
     } | {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { componentAttribute, idAttribute } from "../tree";
+import { componentAttribute, idAttribute } from "../props";
 export type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     [componentAttribute]: string;
     [idAttribute]: string;

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

@@ -0,0 +1 @@
+export declare const collectionComponent = "ws:component";

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

@@ -2262,7 +2262,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         required?: boolean | undefined;
     } | {
         value: string;
-        type: "dataSource";
+        type: "parameter";
         name: string;
         id: string;
         instanceId: string;
@@ -2286,7 +2286,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         instanceId: string;
         required?: boolean | undefined;
     })[];
-    dataSources: ({
+    dataSources: {
         value: {
             value: number;
             type: "number";
@@ -2307,13 +2307,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    })[];
+    }[];
     styleSourceSelections: {
         values: string[];
         instanceId: string;

package/lib/types/expression.d.ts

@@ -39,12 +39,6 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     props: Map<string, {
         value: number;
@@ -103,7 +97,7 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         required?: boolean | undefined;
     } | {
         value: string;
-        type: "dataSource";
+        type: "parameter";
         name: string;
         id: string;
         instanceId: string;

package/lib/types/index.d.ts

@@ -1,11 +1,12 @@
 export * from "./css/index";
 export * from "./tree/index";
 export * from "./app/index";
+export * from "./core-components";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";
 export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
-export { normalizeProps, getPropsByInstanceId, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
+export * from "./props";
 export { type Params, ReactSdkContext } from "./context";
 export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";

package/lib/types/prop-meta.d.ts

@@ -330,24 +330,24 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     label?: string | undefined;
     description?: string | undefined;
 }>, z.ZodObject<{
-    control: z.ZodLiteral<"object">;
-    type: z.ZodLiteral<"Record<string, string>">;
-    defaultValue: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    control: z.ZodLiteral<"json">;
+    type: z.ZodLiteral<"json">;
+    defaultValue: z.ZodOptional<z.ZodUnknown>;
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     required: z.ZodBoolean;
 }, "strip", z.ZodTypeAny, {
-    type: "Record<string, string>";
+    type: "json";
     required: boolean;
-    control: "object";
-    defaultValue?: Record<string, string> | undefined;
+    control: "json";
+    defaultValue?: unknown;
     label?: string | undefined;
     description?: string | undefined;
 }, {
-    type: "Record<string, string>";
+    type: "json";
     required: boolean;
-    control: "object";
-    defaultValue?: Record<string, string> | undefined;
+    control: "json";
+    defaultValue?: unknown;
     label?: string | undefined;
     description?: string | undefined;
 }>, z.ZodObject<{

package/lib/types/props.d.ts

@@ -110,7 +110,7 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     required?: boolean | undefined;
 } | {
     value: string;
-    type: "dataSource";
+    type: "parameter";
     name: string;
     id: string;
     instanceId: string;
@@ -191,7 +191,7 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     required?: boolean | undefined;
 } | {
     value: string;
-    type: "dataSource";
+    type: "parameter";
     name: string;
     id: string;
     instanceId: string;
@@ -215,5 +215,11 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     instanceId: string;
     required?: boolean | undefined;
 }>) => PropsByInstanceId;
+export declare const idAttribute: "data-ws-id";
+export declare const selectorIdAttribute: "data-ws-selector";
+export declare const componentAttribute: "data-ws-component";
+export declare const showAttribute: "data-ws-show";
+export declare const indexAttribute: "data-ws-index";
+export declare const collapsedAttribute: "data-ws-collapsed";
 export declare const getInstanceIdFromComponentProps: (props: Record<string, unknown>) => string;
 export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

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

@@ -1,10 +1,15 @@
-import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
+import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from "react";
 import type { Instance, Instances } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
 import { type Params } from "../context";
-import type { WebstudioComponentProps } from "./webstudio-component";
 import type { ImageLoader } from "@webstudio-is/image";
-export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, Component, components, scripts, }: Params & {
+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 & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -22,5 +27,4 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     rootInstanceId: Instance["id"];
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
-    scripts?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/lib/types/tree/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.117.0",
+  "version": "0.119.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,10 +33,10 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.117.0",
-    "@webstudio-is/image": "0.117.0",
-    "@webstudio-is/fonts": "0.117.0",
-    "@webstudio-is/sdk": "0.117.0"
+    "@webstudio-is/css-engine": "0.119.0",
+    "@webstudio-is/image": "0.119.0",
+    "@webstudio-is/fonts": "0.119.0",
+    "@webstudio-is/sdk": "0.119.0"
   },
   "exports": {
     ".": {

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Instance } from "@webstudio-is/sdk";
-import type { Components } from "../components/components-utils";
-export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
-export type WebstudioComponentProps = {
-    instance: Instance;
-    instanceSelector: Instance["id"][];
-    children: Array<JSX.Element | string>;
-    components: Components;
-};
-export declare const idAttribute: "data-ws-id";
-export declare const selectorIdAttribute: "data-ws-selector";
-export declare const componentAttribute: "data-ws-component";
-export declare const showAttribute: "data-ws-show";
-export declare const indexAttribute: "data-ws-index";
-export declare const collapsedAttribute: "data-ws-collapsed";