@webstudio-is/react-sdk 0.83.0 → 0.84.0

package/lib/types/hook.d.ts

@@ -0,0 +1,31 @@
+import type { Instance, Prop } from "@webstudio-is/project-build";
+/**
+ * Hooks are subscriptions to builder events
+ * with limited way to interact with it.
+ * Called independently from components.
+ */
+export type HookContext = {
+    setPropVariable: (instanceId: Instance["id"], propName: Prop["name"], value: unknown) => void;
+};
+export type InstanceSelection = Instance[];
+type NavigatorEvent = {
+    instanceSelection: InstanceSelection;
+};
+export type Hook = {
+    onNavigatorSelect?: (context: HookContext, event: NavigatorEvent) => void;
+    onNavigatorUnselect?: (context: HookContext, event: NavigatorEvent) => void;
+};
+export declare const getClosestInstance: (instanceSelection: InstanceSelection, currentInstance: Instance, closestComponent: Instance["component"]) => {
+    type: "instance";
+    id: string;
+    component: string;
+    children: ({
+        type: "text";
+        value: string;
+    } | {
+        type: "id";
+        value: string;
+    })[];
+    label?: string | undefined;
+} | undefined;
+export {};

package/lib/types/index.d.ts

@@ -5,6 +5,9 @@ export * from "./app";
 export * from "./components/components-utils";
 export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
-export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
+export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
 export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, computeExpressionsDependencies, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";
+export { renderComponentTemplate } from "./component-renderer";
+export { getIndexesWithinAncestors } from "./instance-utils";
+export * from "./hook";

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

@@ -0,0 +1,16 @@
+import type { Instance } from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "./components/component-meta";
+export type IndexesWithinAncestors = Map<Instance["id"], number>;
+export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Map<string, {
+    type: "instance";
+    id: string;
+    component: string;
+    children: ({
+        type: "text";
+        value: string;
+    } | {
+        type: "id";
+        value: string;
+    })[];
+    label?: string | undefined;
+}>, rootIds: Instance["id"][]) => IndexesWithinAncestors;

package/lib/types/instance-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/props.d.ts

@@ -3,35 +3,34 @@ import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 export type Pages = Map<Page["id"], Page>;
 export declare const getPropsByInstanceId: (props: Map<string, {
-    name: string;
     type: "number";
     value: number;
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "string";
     value: string;
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "boolean";
     value: boolean;
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "asset";
     value: string;
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "page";
     value: (string | {
         instanceId: string;
@@ -41,24 +40,24 @@ export declare const getPropsByInstanceId: (props: Map<string, {
         pageId: string;
     } | undefined);
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "string[]";
     value: string[];
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "dataSource";
     value: string;
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    name: string;
     type: "action";
     value: {
         code: string;
@@ -66,108 +65,109 @@ export declare const getPropsByInstanceId: (props: Map<string, {
         args: string[];
     }[];
     id: string;
+    name: string;
     instanceId: string;
     required?: boolean | undefined;
 }>) => PropsByInstanceId;
 export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, unknown>;
 export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
-    name: string;
     type: "font";
-    format: "ttf" | "woff" | "woff2" | "otf";
     id: string;
-    projectId: string;
-    size: number;
-    description: string | null;
-    createdAt: string;
+    name: string;
     meta: ({
-        style: "normal" | "italic" | "oblique";
         weight: number;
+        style: "normal" | "italic" | "oblique";
         family: string;
     } | {
         variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            name: string;
             min: number;
-            default: number;
             max: number;
+            name: string;
+            default: number;
         }>>;
         family: string;
     }) & ({
-        style: "normal" | "italic" | "oblique";
         weight: number;
+        style: "normal" | "italic" | "oblique";
         family: string;
     } | {
         variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            name: string;
             min: number;
-            default: number;
             max: number;
+            name: string;
+            default: number;
         }>>;
         family: string;
     } | undefined);
-} | {
-    name: string;
-    type: "image";
-    format: string;
-    id: string;
-    projectId: string;
     size: number;
     description: string | null;
+    format: "ttf" | "woff" | "woff2" | "otf";
+    projectId: string;
     createdAt: string;
+} | {
+    type: "image";
+    id: string;
+    name: string;
     meta: {
-        width: number;
         height: number;
+        width: number;
     };
+    size: number;
+    description: string | null;
+    format: string;
+    projectId: string;
+    createdAt: string;
 } | undefined;
 export declare const resolveUrlProp: (instanceId: Instance["id"], name: string, { props, pages, assets, }: {
     props: PropsByInstanceId;
     pages: Pages;
     assets: Map<string, {
-        name: string;
         type: "font";
-        format: "ttf" | "woff" | "woff2" | "otf";
         id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
+        name: string;
         meta: ({
-            style: "normal" | "italic" | "oblique";
             weight: number;
+            style: "normal" | "italic" | "oblique";
             family: string;
         } | {
             variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
                 min: number;
-                default: number;
                 max: number;
+                name: string;
+                default: number;
             }>>;
             family: string;
         }) & ({
-            style: "normal" | "italic" | "oblique";
             weight: number;
+            style: "normal" | "italic" | "oblique";
             family: string;
         } | {
             variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
                 min: number;
-                default: number;
                 max: number;
+                name: string;
+                default: number;
             }>>;
             family: string;
         } | undefined);
-    } | {
-        name: string;
-        type: "image";
-        format: string;
-        id: string;
-        projectId: string;
         size: number;
         description: string | null;
+        format: "ttf" | "woff" | "woff2" | "otf";
+        projectId: string;
         createdAt: string;
+    } | {
+        type: "image";
+        id: string;
+        name: string;
         meta: {
-            width: number;
             height: number;
+            width: number;
         };
+        size: number;
+        description: string | null;
+        format: string;
+        projectId: string;
+        createdAt: string;
     } | undefined>;
 }) => {
     type: "page";
@@ -194,3 +194,4 @@ export declare const usePropUrl: (instanceId: Instance["id"], name: string) => {
     url: string;
 } | undefined;
 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,4 +1,4 @@
-import { type ForwardRefExoticComponent, type RefAttributes } from "react";
+import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Instance, Instances } from "@webstudio-is/project-build";
@@ -6,7 +6,8 @@ import type { Components } from "../components/components-utils";
 import { type Params, type DataSourceValues } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
-export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, Component, components, }: Params & {
+import type { IndexesWithinAncestors } from "../instance-utils";
+export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, indexesWithinAncestors, Component, components, scripts, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -27,6 +28,8 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
     executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
     dataSourceValuesStore: ReadableAtom<DataSourceValues>;
     onDataSourceUpdate: (newValues: DataSourceValues) => void;
+    indexesWithinAncestors: IndexesWithinAncestors;
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
+    scripts?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,9 +1,10 @@
-import { type ForwardRefExoticComponent, type RefAttributes } from "react";
+import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
 import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { type WebstudioComponentProps } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
 import type { Params, DataSourceValues } from "../context";
+import type { IndexesWithinAncestors } from "../instance-utils";
 export type Data = {
     page: Page;
     pages: Array<Page>;
@@ -16,10 +17,12 @@ export type RootPropsData = Omit<Data, "build"> & {
 };
 type RootProps = {
     data: RootPropsData;
+    indexesWithinAncestors: IndexesWithinAncestors;
     executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
     executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
     Component?: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
+    scripts?: ReactNode;
 };
-export declare const InstanceRoot: ({ data, executeComputingExpressions, executeEffectfulExpression, Component, components, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, indexesWithinAncestors, executeComputingExpressions, executeEffectfulExpression, Component, components, scripts, }: RootProps) => JSX.Element | null;
 export {};

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

@@ -13,6 +13,7 @@ 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 type WebstudioAttributes = {
     [idAttribute]?: string | undefined;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.83.0",
+  "version": "0.84.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
     "@jest/globals": "^29.6.2",
-    "@remix-run/react": "^1.18.1",
+    "@remix-run/react": "^1.19.2",
     "@types/react": "^18.2.16",
     "@types/react-dom": "^18.2.7",
     "jest": "^29.6.2",
@@ -16,12 +16,12 @@
     "type-fest": "^3.7.1",
     "typescript": "5.1.6",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "^1.0.6",
+    "@webstudio-is/jest-config": "^1.0.7",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.6"
+    "@webstudio-is/tsconfig": "^1.0.7"
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.18.0",
+    "@remix-run/react": "^1.19.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.19.1"
@@ -34,12 +34,12 @@
     "nanoevents": "^8.0.0",
     "nanoid": "^4.0.2",
     "nanostores": "^0.9.3",
-    "@webstudio-is/asset-uploader": "^0.83.0",
-    "@webstudio-is/css-data": "^0.83.0",
-    "@webstudio-is/css-engine": "^0.83.0",
-    "@webstudio-is/fonts": "^0.83.0",
-    "@webstudio-is/generate-arg-types": "^0.83.0",
-    "@webstudio-is/project-build": "^0.83.0"
+    "@webstudio-is/css-data": "^0.84.0",
+    "@webstudio-is/css-engine": "^0.84.0",
+    "@webstudio-is/fonts": "^0.84.0",
+    "@webstudio-is/generate-arg-types": "^0.84.0",
+    "@webstudio-is/project-build": "^0.84.0",
+    "@webstudio-is/asset-uploader": "^0.84.0"
   },
   "exports": {
     ".": {

package/src/component-renderer.tsx

@@ -0,0 +1,117 @@
+import type { ExoticComponent } from "react";
+import type { Instance } from "@webstudio-is/project-build";
+import { getStyleDeclKey } from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "./components/component-meta";
+import { generateDataFromEmbedTemplate } from "./embed-template";
+import { generateCssText } from "./css";
+import { InstanceRoot, WebstudioComponent } from "./tree";
+import {
+  decodeVariablesMap,
+  encodeDataSourceVariable,
+  encodeVariablesMap,
+  executeComputingExpressions,
+  executeEffectfulExpression,
+} from "./expression";
+import { getIndexesWithinAncestors } from "./instance-utils";
+
+export const renderComponentTemplate = ({
+  name,
+  metas: metasRecord,
+  components,
+}: {
+  name: Instance["component"];
+  metas: Record<string, WsComponentMeta>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components: Record<string, ExoticComponent<any>>;
+}) => {
+  const metas = new Map(Object.entries(metasRecord));
+  const data = generateDataFromEmbedTemplate(
+    metas.get(name)?.template ?? [
+      {
+        type: "instance",
+        component: name,
+        children: [],
+      },
+    ],
+    "base"
+  );
+  const instances: [Instance["id"], Instance][] = [
+    [
+      "root",
+      {
+        type: "instance",
+        id: "root",
+        component: "Box",
+        children: data.children,
+      },
+    ],
+    ...data.instances.map(
+      (instance) => [instance.id, instance] satisfies [Instance["id"], Instance]
+    ),
+  ];
+  return (
+    <>
+      <style>
+        {generateCssText(
+          {
+            assets: [],
+            breakpoints: [["base", { id: "base", label: "base" }]],
+            styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
+            styleSourceSelections: data.styleSourceSelections.map((item) => [
+              item.instanceId,
+              item,
+            ]),
+            componentMetas: metas,
+          },
+          { assetBaseUrl: "/" }
+        )}
+      </style>
+      <InstanceRoot
+        data={{
+          page: {
+            path: "",
+            id: "",
+            name: "",
+            title: "",
+            meta: {},
+            rootInstanceId: "root",
+          },
+          pages: [],
+          assets: [],
+          build: {
+            instances,
+            props: data.props.map((prop) => [prop.id, prop]),
+            dataSources: data.dataSources.map((dataSource) => [
+              dataSource.id,
+              dataSource,
+            ]),
+          },
+        }}
+        executeComputingExpressions={(values) => {
+          const expressions = new Map<string, string>();
+          for (const dataSource of data.dataSources) {
+            const name = encodeDataSourceVariable(dataSource.id);
+            if (dataSource.type === "expression") {
+              expressions.set(name, dataSource.code);
+            }
+          }
+          return decodeVariablesMap(
+            executeComputingExpressions(expressions, encodeVariablesMap(values))
+          );
+        }}
+        executeEffectfulExpression={(code, args, values) => {
+          return decodeVariablesMap(
+            executeEffectfulExpression(code, args, encodeVariablesMap(values))
+          );
+        }}
+        Component={WebstudioComponent}
+        components={new Map(Object.entries(components))}
+        indexesWithinAncestors={getIndexesWithinAncestors(
+          metas,
+          new Map(instances),
+          ["root"]
+        )}
+      />
+    </>
+  );
+};

package/src/components/component-meta.ts

@@ -53,6 +53,11 @@ const WsComponentMeta = z.object({
   type: z.enum(["container", "control", "embed", "rich-text-child"]),
   requiredAncestors: z.optional(z.array(z.string())),
   invalidAncestors: z.optional(z.array(z.string())),
+  // when this field is specified component receives
+  // prop with index of same components withiin specified ancestor
+  // important to automatically enumerate collections without
+  // naming every item manually
+  indexWithinAncestor: z.optional(z.string()),
   stylable: z.optional(z.boolean()),
   // specifies whether the instance can be deleted,
   // copied or dragged out of its parent instance

package/src/context.tsx

@@ -3,6 +3,7 @@ import { createContext } from "react";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
 import type { Pages, PropsByInstanceId } from "./props";
+import type { IndexesWithinAncestors } from "./instance-utils";
 
 export type Params = {
   renderer?: "canvas" | "preview";
@@ -50,6 +51,7 @@ export const ReactSdkContext = createContext<
       prop: Prop["name"],
       value: unknown
     ) => void;
+    indexesWithinAncestors: IndexesWithinAncestors;
   }
 >({
   imageBaseUrl: "/",
@@ -67,4 +69,5 @@ export const ReactSdkContext = createContext<
   setBoundDataSourceValue: () => {
     throw Error("React SDK setBoundDataSourceValue is not implemented");
   },
+  indexesWithinAncestors: new Map(),
 });

package/src/css/style-rules.ts

@@ -86,7 +86,7 @@ export const getPresetStyleRules = (
   const presetStyleRules = new Map<string, Style>();
   for (const [tag, styles] of Object.entries(presetStyle)) {
     for (const styleDecl of styles) {
-      const selector = `${tag}:where([${componentAttribute}=${component}])${
+      const selector = `${tag}:where([${componentAttribute}="${component}"])${
         styleDecl.state ?? ""
       }`;
       let rule = presetStyleRules.get(selector);