@webstudio-is/react-sdk 0.85.0 → 0.87.0

package/lib/types/hook.d.ts

@@ -1,21 +1,31 @@
 import type { Instance, Prop } from "@webstudio-is/project-build";
+import type { IndexesWithinAncestors } from "./instance-utils";
 /**
  * Hooks are subscriptions to builder events
  * with limited way to interact with it.
  * Called independently from components.
  */
 export type HookContext = {
+    indexesWithinAncestors: IndexesWithinAncestors;
+    getPropValue: (instanceId: Instance["id"], propName: Prop["name"]) => unknown;
     setPropVariable: (instanceId: Instance["id"], propName: Prop["name"], value: unknown) => void;
 };
-export type InstanceSelection = Instance[];
+export type InstancePath = Instance[];
 type NavigatorEvent = {
-    instanceSelection: InstanceSelection;
+    /**
+     * List of instances from selected to the root
+     */
+    instancePath: InstancePath;
 };
 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"]) => {
+/**
+ * Find closest matching instance by component name
+ * by lookup in instance path
+ */
+export declare const getClosestInstance: (instancePath: InstancePath, currentInstance: Instance, closestComponent: Instance["component"]) => {
     type: "instance";
     id: string;
     component: string;

package/lib/types/hook.test.d.ts

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

package/lib/types/index.d.ts

@@ -11,3 +11,4 @@ export { validateExpression, generateComputingExpressions, executeComputingExpre
 export { renderComponentTemplate } from "./component-renderer";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
+export { generateUtilsExport } from "./generator";

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

@@ -3,8 +3,8 @@ 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";
+import type { Params } from "../context";
+import type { GeneratedUtils } from "../generator";
 export type Data = {
     page: Page;
     pages: Array<Page>;
@@ -17,12 +17,10 @@ export type RootPropsData = Omit<Data, "build"> & {
 };
 type RootProps = {
     data: RootPropsData;
-    indexesWithinAncestors: IndexesWithinAncestors;
-    executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
+    utils: GeneratedUtils;
     Component?: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
     scripts?: ReactNode;
 };
-export declare const InstanceRoot: ({ data, indexesWithinAncestors, executeComputingExpressions, executeEffectfulExpression, Component, components, scripts, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, utils, Component, components, scripts, }: RootProps) => JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.85.0",
+  "version": "0.87.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,12 +8,12 @@
   "devDependencies": {
     "@jest/globals": "^29.6.2",
     "@remix-run/react": "^1.19.2",
-    "@types/react": "^18.2.16",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "jest": "^29.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "type-fest": "^3.7.1",
+    "type-fest": "^4.2.0",
     "typescript": "5.1.6",
     "zod": "^3.21.4",
     "@webstudio-is/jest-config": "^1.0.7",
@@ -34,12 +34,12 @@
     "nanoevents": "^8.0.0",
     "nanoid": "^4.0.2",
     "nanostores": "^0.9.3",
-    "@webstudio-is/asset-uploader": "^0.85.0",
-    "@webstudio-is/css-data": "^0.85.0",
-    "@webstudio-is/css-engine": "^0.85.0",
-    "@webstudio-is/fonts": "^0.85.0",
-    "@webstudio-is/generate-arg-types": "^0.85.0",
-    "@webstudio-is/project-build": "^0.85.0"
+    "@webstudio-is/asset-uploader": "^0.87.0",
+    "@webstudio-is/css-data": "^0.87.0",
+    "@webstudio-is/css-engine": "^0.87.0",
+    "@webstudio-is/fonts": "^0.87.0",
+    "@webstudio-is/generate-arg-types": "^0.87.0",
+    "@webstudio-is/project-build": "^0.87.0"
   },
   "exports": {
     ".": {

package/src/component-renderer.tsx

@@ -2,7 +2,10 @@ 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 {
+  WsEmbedTemplate,
+  generateDataFromEmbedTemplate,
+} from "./embed-template";
 import { generateCssText } from "./css";
 import { InstanceRoot, WebstudioComponent } from "./tree";
 import {
@@ -18,23 +21,43 @@ export const renderComponentTemplate = ({
   name,
   metas: metasRecord,
   components,
+  props,
 }: {
   name: Instance["component"];
   metas: Record<string, WsComponentMeta>;
+  props?: Record<string, unknown>;
   // 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 template: WsEmbedTemplate = metas.get(name)?.template ?? [
+    {
+      type: "instance",
+      component: name,
+      children: [],
+    },
+  ];
+
+  if (template[0].type === "instance" && props !== undefined) {
+    template[0].props = Object.entries(props).map(([prop, value]) => {
+      if (typeof value === "string") {
+        return { type: "string", name: prop, value: value };
+      }
+
+      if (typeof value === "number") {
+        return { type: "number", name: prop, value: value };
+      }
+
+      if (typeof value === "boolean") {
+        return { type: "boolean", name: prop, value: value };
+      }
+      throw new Error(`Unsupported prop ${props} with value ${value}`);
+    });
+  }
+
+  const data = generateDataFromEmbedTemplate(template, "base");
+
   const instances: [Instance["id"], Instance][] = [
     [
       "root",
@@ -49,6 +72,7 @@ export const renderComponentTemplate = ({
       (instance) => [instance.id, instance] satisfies [Instance["id"], Instance]
     ),
   ];
+
   return (
     <>
       <style>
@@ -87,30 +111,35 @@ export const renderComponentTemplate = ({
             ]),
           },
         }}
-        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);
+        utils={{
+          indexesWithinAncestors: getIndexesWithinAncestors(
+            metas,
+            new Map(instances),
+            ["root"]
+          ),
+          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))
-          );
+            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

@@ -63,7 +63,7 @@ const WsComponentMeta = z.object({
   // copied or dragged out of its parent instance
   // true by default
   detachable: z.optional(z.boolean()),
-  label: z.string(),
+  label: z.optional(z.string()),
   description: z.string().optional(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),

package/src/generator.test.ts

@@ -0,0 +1,169 @@
+import { expect, test } from "@jest/globals";
+import { generateUtilsExport } from "./generator";
+
+test("generates utils", () => {
+  expect(
+    generateUtilsExport({
+      page: {
+        id: "",
+        path: "",
+        name: "",
+        title: "",
+        meta: {},
+        rootInstanceId: "tabs",
+      },
+      metas: new Map([
+        ["Tabs", { type: "container", label: "", icon: "" }],
+        [
+          "TabsContent",
+          {
+            type: "container",
+            label: "",
+            icon: "",
+            indexWithinAncestor: "Tabs",
+          },
+        ],
+      ]),
+      instances: new Map([
+        [
+          "tabs",
+          {
+            id: "tabs",
+            type: "instance",
+            component: "Tabs",
+            children: [
+              { type: "id", value: "content1" },
+              { type: "id", value: "content2" },
+            ],
+          },
+        ],
+
+        [
+          "content1",
+          {
+            id: "content1",
+            type: "instance",
+            component: "TabsContent",
+            children: [],
+          },
+        ],
+
+        [
+          "content2",
+          {
+            id: "content2",
+            type: "instance",
+            component: "TabsContent",
+            children: [],
+          },
+        ],
+      ]),
+      props: new Map([
+        [
+          "open",
+          {
+            type: "dataSource",
+            id: "open",
+            instanceId: "tabs",
+            name: "open",
+            value: "tabsOpen",
+          },
+        ],
+
+        [
+          "onOpenChange",
+          {
+            type: "action",
+            id: "onOpenChange",
+            instanceId: "tabs",
+            name: "onOpenChange",
+            value: [
+              {
+                type: "execute",
+                args: ["open"],
+                code: `$ws$dataSource$tabsOpen = open`,
+              },
+            ],
+          },
+        ],
+      ]),
+      dataSources: new Map([
+        [
+          "tabsOpen",
+          {
+            id: "tabsOpen",
+            name: "tabsOpen",
+            scopeInstanceId: "tabs",
+            type: "variable",
+            value: { type: "string", value: "0" },
+          },
+        ],
+      ]),
+    })
+  ).toMatchInlineSnapshot(`
+"
+  /* eslint-disable */
+
+  const indexesWithinAncestors = new Map<string, number>([
+  ["content1", 0],
+["content2", 1],
+
+  ]);
+
+  const rawExecuteComputingExpressions = (
+    _variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    return new Map([
+]);
+  };
+  const executeComputingExpressions = (variables: Map<string, unknown>) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteComputingExpressions(encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+
+  const generatedEffectfulExpressions = new Map<
+    string,
+    (args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
+  >([
+  ["$ws$dataSource$tabsOpen = open", (_args: Map<string, any>, _variables: Map<string, any>) => { let open = _args.get('open');
+let $ws$dataSource$tabsOpen;
+$ws$dataSource$tabsOpen = open;
+return new Map([
+  ['$ws$dataSource$tabsOpen', $ws$dataSource$tabsOpen],
+]); })],
+
+  ]);
+
+  const rawExecuteEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    if(generatedEffectfulExpressions.has(code)) {
+      return generatedEffectfulExpressions.get(code)!(args, variables);
+    }
+    console.error("Effectful expression not found", code);
+    throw new Error("Effectful expression not found");
+  };
+
+  const executeEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+
+  export const utils = {
+    indexesWithinAncestors,
+    executeComputingExpressions,
+    executeEffectfulExpression,
+  };
+
+  /* eslint-enable */
+  "
+`);
+});

package/src/generator.ts

@@ -0,0 +1,147 @@
+import type {
+  DataSources,
+  Instance,
+  Instances,
+  Page,
+  Props,
+} from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "./components/component-meta";
+import {
+  getIndexesWithinAncestors,
+  type IndexesWithinAncestors,
+} from "./instance-utils";
+import {
+  encodeDataSourceVariable,
+  generateComputingExpressions,
+  generateEffectfulExpression,
+} from "./expression";
+import type { DataSourceValues } from "./context";
+
+type PageData = {
+  page: Page;
+  metas: Map<Instance["component"], WsComponentMeta>;
+  instances: Instances;
+  props: Props;
+  dataSources: DataSources;
+};
+
+export type GeneratedUtils = {
+  indexesWithinAncestors: IndexesWithinAncestors;
+  executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
+  executeEffectfulExpression: (
+    expression: string,
+    args: DataSourceValues,
+    values: DataSourceValues
+  ) => DataSourceValues;
+};
+
+/**
+ * Generates data based utilities at build time
+ * Requires this import statement in scope
+ * import * as sdk from "@webstudio-is/react-sdk";
+ */
+export const generateUtilsExport = (siteData: PageData) => {
+  const indexesWithinAncestors = getIndexesWithinAncestors(
+    siteData.metas,
+    siteData.instances,
+    [siteData.page.rootInstanceId]
+  );
+  let indexesWithinAncestorsEntries = "";
+  for (const [key, value] of indexesWithinAncestors) {
+    const keyString = JSON.stringify(key);
+    const valueString = JSON.stringify(value);
+    indexesWithinAncestorsEntries += `[${keyString}, ${valueString}],\n`;
+  }
+  const generatedIndexesWithinAncestors = `
+  const indexesWithinAncestors = new Map<string, number>([
+  ${indexesWithinAncestorsEntries}
+  ]);
+  `;
+
+  const variables = new Set<string>();
+  const expressions = new Map<string, string>();
+  for (const dataSource of siteData.dataSources.values()) {
+    if (dataSource.type === "variable") {
+      variables.add(encodeDataSourceVariable(dataSource.id));
+    }
+    if (dataSource.type === "expression") {
+      expressions.set(encodeDataSourceVariable(dataSource.id), dataSource.code);
+    }
+  }
+  const generatedExecuteComputingExpressions = `
+  const rawExecuteComputingExpressions = (
+    _variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    ${generateComputingExpressions(expressions, variables)}
+  };
+  const executeComputingExpressions = (variables: Map<string, unknown>) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteComputingExpressions(encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+  `;
+
+  let effectfulExpressionsEntries = "";
+  for (const prop of siteData.props.values()) {
+    if (prop.type === "action") {
+      for (const executableValue of prop.value) {
+        const codeString = JSON.stringify(executableValue.code);
+        const generatedCode = generateEffectfulExpression(
+          executableValue.code,
+          new Set(executableValue.args),
+          variables
+        );
+        const generatedFunction = `(_args: Map<string, any>, _variables: Map<string, any>) => { ${generatedCode} })`;
+
+        effectfulExpressionsEntries += `[${codeString}, ${generatedFunction}],\n`;
+      }
+    }
+  }
+  const generatedExecuteEffectfulExpression = `const generatedEffectfulExpressions = new Map<
+    string,
+    (args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
+  >([
+  ${effectfulExpressionsEntries}
+  ]);
+
+  const rawExecuteEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ): Map<string, unknown> => {
+    if(generatedEffectfulExpressions.has(code)) {
+      return generatedEffectfulExpressions.get(code)!(args, variables);
+    }
+    console.error("Effectful expression not found", code);
+    throw new Error("Effectful expression not found");
+  };
+
+  const executeEffectfulExpression = (
+    code: string,
+    args: Map<string, unknown>,
+    variables: Map<string, unknown>
+  ) => {
+    const encodedvariables = sdk.encodeVariablesMap(variables);
+    const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
+    return sdk.decodeVariablesMap(encodedResult);
+  };
+  `;
+
+  return `
+  /* eslint-disable */
+
+  ${generatedIndexesWithinAncestors.trim()}
+
+  ${generatedExecuteComputingExpressions.trim()}
+
+  ${generatedExecuteEffectfulExpression.trim()}
+
+  export const utils = {
+    indexesWithinAncestors,
+    executeComputingExpressions,
+    executeEffectfulExpression,
+  };
+
+  /* eslint-enable */
+  `;
+};

package/src/hook.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "@jest/globals";
+import { getClosestInstance, type InstancePath } from ".";
+
+test("get closest instance", () => {
+  const instancePath: InstancePath = [
+    { type: "instance", id: "4", component: "Content", children: [] },
+    { type: "instance", id: "3", component: "Tabs", children: [] },
+    { type: "instance", id: "2", component: "Content", children: [] },
+    { type: "instance", id: "1", component: "Tabs", children: [] },
+    { type: "instance", id: "0", component: "Body", children: [] },
+  ];
+  const [content2, tabs2, content1, tabs1, _body] = instancePath;
+  expect(getClosestInstance(instancePath, content2, "Tabs")).toBe(tabs2);
+  expect(getClosestInstance(instancePath, content1, "Tabs")).toBe(tabs1);
+});

package/src/hook.ts

@@ -1,4 +1,5 @@
 import type { Instance, Prop } from "@webstudio-is/project-build";
+import type { IndexesWithinAncestors } from "./instance-utils";
 
 /**
  * Hooks are subscriptions to builder events
@@ -7,6 +8,8 @@ import type { Instance, Prop } from "@webstudio-is/project-build";
  */
 
 export type HookContext = {
+  indexesWithinAncestors: IndexesWithinAncestors;
+  getPropValue: (instanceId: Instance["id"], propName: Prop["name"]) => unknown;
   setPropVariable: (
     instanceId: Instance["id"],
     propName: Prop["name"],
@@ -14,10 +17,13 @@ export type HookContext = {
   ) => void;
 };
 
-export type InstanceSelection = Instance[];
+export type InstancePath = Instance[];
 
 type NavigatorEvent = {
-  instanceSelection: InstanceSelection;
+  /**
+   * List of instances from selected to the root
+   */
+  instancePath: InstancePath;
 };
 
 export type Hook = {
@@ -25,13 +31,17 @@ export type Hook = {
   onNavigatorUnselect?: (context: HookContext, event: NavigatorEvent) => void;
 };
 
+/**
+ * Find closest matching instance by component name
+ * by lookup in instance path
+ */
 export const getClosestInstance = (
-  instanceSelection: InstanceSelection,
+  instancePath: InstancePath,
   currentInstance: Instance,
   closestComponent: Instance["component"]
 ) => {
   let matched = false;
-  for (const instance of instanceSelection) {
+  for (const instance of instancePath) {
     if (currentInstance === instance) {
       matched = true;
     }

package/src/index.ts

@@ -36,3 +36,4 @@ export {
 export { renderComponentTemplate } from "./component-renderer";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
+export { generateUtilsExport } from "./generator";

package/src/tree/root.ts

@@ -21,7 +21,7 @@ import {
 import { getPropsByInstanceId } from "../props";
 import type { Components } from "../components/components-utils";
 import type { Params, DataSourceValues } from "../context";
-import type { IndexesWithinAncestors } from "../instance-utils";
+import type { GeneratedUtils } from "../generator";
 
 export type Data = {
   page: Page;
@@ -37,13 +37,7 @@ export type RootPropsData = Omit<Data, "build"> & {
 
 type RootProps = {
   data: RootPropsData;
-  indexesWithinAncestors: IndexesWithinAncestors;
-  executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
-  executeEffectfulExpression: (
-    expression: string,
-    args: DataSourceValues,
-    values: DataSourceValues
-  ) => DataSourceValues;
+  utils: GeneratedUtils;
   Component?: ForwardRefExoticComponent<
     WebstudioComponentProps & RefAttributes<HTMLElement>
   >;
@@ -53,13 +47,16 @@ type RootProps = {
 
 export const InstanceRoot = ({
   data,
-  indexesWithinAncestors,
-  executeComputingExpressions,
-  executeEffectfulExpression,
+  utils,
   Component,
   components,
   scripts,
 }: RootProps): JSX.Element | null => {
+  const {
+    indexesWithinAncestors,
+    executeComputingExpressions,
+    executeEffectfulExpression,
+  } = utils;
   const dataSourceVariablesStoreRef = useRef<
     undefined | WritableAtom<DataSourceValues>
   >(undefined);