@webstudio-is/react-sdk 0.238.0 → 0.252.1

package/lib/index.js

@@ -186,6 +186,33 @@ var isAttributeNameSafe = (attributeName) => {
   return false;
 };
 
+// src/collection-utils.ts
+var getCollectionEntries = (data) => {
+  if (data === null || data === void 0) {
+    return [];
+  }
+  if (typeof data !== "object") {
+    return [];
+  }
+  const entries = Object.entries(data);
+  if (Array.isArray(data)) {
+    return entries.map(([key, value]) => [Number(key), value]);
+  }
+  return entries;
+};
+var generateCollectionIterationCode = ({
+  dataExpression,
+  keyVariable,
+  itemVariable
+}) => {
+  return `Object.entries(
+  // @ts-ignore
+  ${dataExpression} ?? {}
+).map(([_key, ${itemVariable}]: any) => {
+  const ${keyVariable} = Array.isArray(${dataExpression}) ? Number(_key) : _key;
+  return`;
+};
+
 // src/component-generator.ts
 import {
   parseComponentName,
@@ -540,6 +567,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
+  let collectionItemKeyValue;
   let classNameValue;
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
@@ -575,6 +603,9 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       if (prop.name === "item") {
         collectionItemValue = propValue;
       }
+      if (prop.name === "itemKey") {
+        collectionItemKeyValue = propValue;
+      }
       continue;
     }
     if (name === "className" && propValue !== void 0) {
@@ -606,14 +637,23 @@ ${name}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>
+    const keyVariable = collectionItemKeyValue ?? indexVariable;
+    generatedElement += `{${generateCollectionIterationCode({
+      dataExpression: collectionDataValue,
+      keyVariable,
+      itemVariable: collectionItemValue
+    })} (
 `;
-    generatedElement += `<Fragment key={${indexVariable}}>
+    generatedElement += `<Fragment key={${keyVariable}}>
 `;
     generatedElement += children;
     generatedElement += `</Fragment>
 `;
-    generatedElement += `)}
+    generatedElement += `)
+`;
+    generatedElement += `})
+`;
+    generatedElement += `}
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
@@ -837,11 +877,13 @@ var generateWebstudioComponent = ({
 export {
   collapsedAttribute,
   componentAttribute,
+  generateCollectionIterationCode,
   generateJsxChildren,
   generateJsxElement,
   generateRemixParams,
   generateRemixRoute,
   generateWebstudioComponent,
+  getCollectionEntries,
   idAttribute,
   isAttributeNameSafe,
   normalizeProps,

package/lib/runtime.js

@@ -127,9 +127,10 @@ var PageSettingsMeta = ({
     });
   }
   if (pageMeta.socialImageAssetName) {
+    const origin = host ? `https://${host}` : "";
     metas.push({
       property: "og:image",
-      content: `https://${host}${imageLoader({
+      content: `${origin}${imageLoader({
         src: `${assetBaseUrl}${pageMeta.socialImageAssetName}`,
         // Do not transform social image (not enough information do we need to do this)
         format: "raw"

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

@@ -0,0 +1,24 @@
+/**
+ * Shared collection iteration logic for both builder and published sites.
+ *
+ * Collections support both arrays and objects:
+ * - Arrays: [item1, item2] -> entries are [["0", item1], ["1", item2]]
+ * - Objects: {key1: val1, key2: val2} -> entries are [["key1", val1], ["key2", val2]]
+ *
+ * Using Object.entries() unifies both cases since arrays are objects with numeric keys.
+ */
+/**
+ * Normalize collection data to entries format [key, value][].
+ * Returns empty array if data is not iterable.
+ * For arrays, keys are converted to numbers.
+ */
+export declare const getCollectionEntries: (data: unknown) => Array<[string | number, unknown]>;
+/**
+ * Template for generated code that iterates over collections.
+ * Used by component-generator.ts to ensure consistency.
+ */
+export declare const generateCollectionIterationCode: ({ dataExpression, keyVariable, itemVariable, }: {
+    dataExpression: string;
+    keyVariable: string;
+    itemVariable: string;
+}) => string;

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./remix";
 export * from "./components/components-utils";
 export * from "./props";
+export * from "./collection-utils";
 export type * from "./context";
 export type * from "./hook";
 export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";

package/lib/types/page-settings-meta.d.ts

@@ -3,8 +3,8 @@ import type { PageMeta } from "@webstudio-is/sdk";
 export declare const isElementRenderedWithReact: (element: Element) => boolean;
 export declare const PageSettingsMeta: ({ url, host, siteName, pageMeta, imageLoader, assetBaseUrl, }: {
     url?: string;
-    host: string;
-    siteName: string;
+    host?: string;
+    siteName?: string;
     pageMeta: PageMeta;
     imageLoader: ImageLoader;
     assetBaseUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.238.0",
+  "version": "0.252.1",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,7 +14,7 @@
     "type-fest": "^4.37.0",
     "vitest": "^3.1.2",
     "zod": "^3.24.2",
-    "@webstudio-is/template": "0.238.0",
+    "@webstudio-is/template": "0.252.1",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,11 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.1.5",
-    "@webstudio-is/css-engine": "0.238.0",
-    "@webstudio-is/fonts": "0.238.0",
-    "@webstudio-is/icons": "^0.238.0",
-    "@webstudio-is/image": "0.238.0",
-    "@webstudio-is/sdk": "0.238.0"
+    "@webstudio-is/fonts": "0.252.1",
+    "@webstudio-is/image": "0.252.1",
+    "@webstudio-is/css-engine": "0.252.1",
+    "@webstudio-is/icons": "^0.252.1",
+    "@webstudio-is/sdk": "0.252.1"
   },
   "exports": {
     ".": {
@@ -58,7 +58,7 @@
   "scripts": {
     "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc",
+    "typecheck": "tsgo --noEmit",
     "test": "vitest run"
   }
 }

package/placeholder.d.ts

@@ -58,6 +58,11 @@ declare module "__SITEMAP__" {
   }>;
 }
 
+declare module "__ASSETS__" {
+  import type { RuntimeAsset } from "@webstudio-is/sdk";
+  export const assets: Record<string, RuntimeAsset>;
+}
+
 declare module "__REDIRECT__" {
   export const url: string;
   export const status: number;