@webstudio-is/react-sdk 0.95.0 → 0.97.0

package/lib/generator.js

@@ -1,112 +0,0 @@
-"use strict";
-import {
-  getIndexesWithinAncestors
-} from "./instance-utils";
-import {
-  encodeDataSourceVariable,
-  generateComputingExpressions,
-  generateEffectfulExpression
-} from "./expression";
-export const generateUtilsExport = (siteData) => {
-  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}],
-`;
-  }
-  const generatedIndexesWithinAncestors = `
-  const indexesWithinAncestors = new Map<string, number>([
-  ${indexesWithinAncestorsEntries}
-  ]);
-  `;
-  const variables = /* @__PURE__ */ new Set();
-  const expressions = /* @__PURE__ */ new Map();
-  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}],
-`;
-      }
-    }
-  }
-  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/lib/generator.test.js

@@ -1,166 +0,0 @@
-"use strict";
-import { expect, test } from "@jest/globals";
-import { generateUtilsExport } from "./generator";
-test("generates utils", () => {
-  expect(
-    generateUtilsExport({
-      page: {
-        id: "",
-        path: "",
-        name: "",
-        title: "",
-        meta: {},
-        rootInstanceId: "tabs"
-      },
-      metas: /* @__PURE__ */ new Map([
-        ["Tabs", { type: "container", label: "", icon: "" }],
-        [
-          "TabsContent",
-          {
-            type: "container",
-            label: "",
-            icon: "",
-            indexWithinAncestor: "Tabs"
-          }
-        ]
-      ]),
-      instances: /* @__PURE__ */ 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: /* @__PURE__ */ 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: /* @__PURE__ */ 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/lib/hook.js

@@ -1,12 +0,0 @@
-"use strict";
-export const getClosestInstance = (instancePath, currentInstance, closestComponent) => {
-  let matched = false;
-  for (const instance of instancePath) {
-    if (currentInstance === instance) {
-      matched = true;
-    }
-    if (matched && instance.component === closestComponent) {
-      return instance;
-    }
-  }
-};

package/lib/hook.test.js

@@ -1,15 +0,0 @@
-"use strict";
-import { expect, test } from "@jest/globals";
-import { getClosestInstance } from ".";
-test("get closest instance", () => {
-  const 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/lib/instance-utils.js

@@ -1,43 +0,0 @@
-"use strict";
-export const getIndexesWithinAncestors = (metas, instances, rootIds) => {
-  const ancestors = /* @__PURE__ */ new Set();
-  for (const meta of metas.values()) {
-    if (meta.indexWithinAncestor !== void 0) {
-      ancestors.add(meta.indexWithinAncestor);
-    }
-  }
-  const indexes = /* @__PURE__ */ new Map();
-  const traverseInstances = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
-    const instance = instances2.get(instanceId);
-    if (instance === void 0) {
-      return;
-    }
-    const meta = metas.get(instance.component);
-    if (meta === void 0) {
-      return;
-    }
-    if (ancestors.has(instance.component)) {
-      latestIndexes2 = new Map(latestIndexes2);
-      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
-    }
-    if (meta.indexWithinAncestor !== void 0) {
-      const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
-      if (ancestorIndexes !== void 0) {
-        let index = ancestorIndexes.get(instance.component) ?? -1;
-        index += 1;
-        ancestorIndexes.set(instance.component, index);
-        indexes.set(instance.id, index);
-      }
-    }
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        traverseInstances(instances2, child.value, latestIndexes2);
-      }
-    }
-  };
-  const latestIndexes = /* @__PURE__ */ new Map();
-  for (const instanceId of rootIds) {
-    traverseInstances(instances, instanceId, latestIndexes);
-  }
-  return indexes;
-};

package/lib/instance-utils.test.js

@@ -1,65 +0,0 @@
-"use strict";
-import { test, expect } from "@jest/globals";
-import { getIndexesWithinAncestors } from "./instance-utils";
-const getIdValuePair = (item) => [item.id, item];
-const toMap = (list) => new Map(list.map(getIdValuePair));
-const createInstance = (id, component, children) => {
-  return { type: "instance", id, component, children };
-};
-const createMeta = (meta) => {
-  return { type: "container", label: "", icon: "", ...meta };
-};
-test("get indexes within ancestors", () => {
-  const instances = toMap([
-    createInstance("body0", "Body", [{ type: "id", value: "tabs1" }]),
-    // tabs1
-    createInstance("tabs1", "Tabs", [
-      { type: "id", value: "tabs1list" },
-      { type: "id", value: "tabs1content1" },
-      { type: "id", value: "tabs1content2" }
-    ]),
-    createInstance("tabs1list", "TabsList", [
-      { type: "id", value: "tabs1box" }
-    ]),
-    createInstance("tabs1box", "Box", [
-      { type: "id", value: "tabs1trigger1" },
-      { type: "id", value: "tabs1trigger2" }
-    ]),
-    createInstance("tabs1trigger1", "TabsTrigger", []),
-    createInstance("tabs1trigger2", "TabsTrigger", []),
-    createInstance("tabs1content1", "TabsContent", [
-      { type: "id", value: "tabs2" }
-    ]),
-    createInstance("tabs1content2", "TabsContent", []),
-    // tabs2
-    createInstance("tabs2", "Tabs", [
-      { type: "id", value: "tabs2list" },
-      { type: "id", value: "tabs2content1" }
-    ]),
-    createInstance("tabs2list", "TabsList", [
-      { type: "id", value: "tabs2trigger1" }
-    ]),
-    createInstance("tabs2trigger1", "TabsTrigger", []),
-    createInstance("tabs2content1", "TabsContent", [])
-  ]);
-  const metas = /* @__PURE__ */ new Map([
-    ["Body", createMeta()],
-    ["Box", createMeta()],
-    ["Tabs", createMeta()],
-    ["TabsList", createMeta({ indexWithinAncestor: "Tabs" })],
-    ["TabsTrigger", createMeta({ indexWithinAncestor: "TabsList" })],
-    ["TabsContent", createMeta({ indexWithinAncestor: "Tabs" })]
-  ]);
-  expect(getIndexesWithinAncestors(metas, instances, ["body0"])).toEqual(
-    /* @__PURE__ */ new Map([
-      ["tabs1list", 0],
-      ["tabs1trigger1", 0],
-      ["tabs1trigger2", 1],
-      ["tabs1content1", 0],
-      ["tabs1content2", 1],
-      ["tabs2list", 0],
-      ["tabs2trigger1", 0],
-      ["tabs2content1", 0]
-    ])
-  );
-});

package/lib/prop-meta.js

@@ -1,150 +0,0 @@
-"use strict";
-import { z } from "zod";
-const common = {
-  label: z.string().optional(),
-  description: z.string().optional(),
-  required: z.boolean()
-};
-const Number = z.object({
-  ...common,
-  control: z.literal("number"),
-  type: z.literal("number"),
-  defaultValue: z.number().optional()
-});
-const Range = z.object({
-  ...common,
-  control: z.literal("range"),
-  type: z.literal("number"),
-  defaultValue: z.number().optional()
-});
-const Text = z.object({
-  ...common,
-  control: z.literal("text"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
-});
-const Code = z.object({
-  ...common,
-  control: z.literal("code"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
-});
-const Color = z.object({
-  ...common,
-  control: z.literal("color"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-const Boolean = z.object({
-  ...common,
-  control: z.literal("boolean"),
-  type: z.literal("boolean"),
-  defaultValue: z.boolean().optional()
-});
-const Radio = z.object({
-  ...common,
-  control: z.literal("radio"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-const InlineRadio = z.object({
-  ...common,
-  control: z.literal("inline-radio"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-const Select = z.object({
-  ...common,
-  control: z.literal("select"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-const Check = z.object({
-  ...common,
-  control: z.literal("check"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-const InlineCheck = z.object({
-  ...common,
-  control: z.literal("inline-check"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-const MultiSelect = z.object({
-  ...common,
-  control: z.literal("multi-select"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-const File = z.object({
-  ...common,
-  control: z.literal("file"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
-  accept: z.string().optional()
-});
-const Url = z.object({
-  ...common,
-  control: z.literal("url"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-const ObjectType = 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()
-});
-const Date = z.object({
-  ...common,
-  control: z.literal("date"),
-  // @todo not sure what type should be here
-  // (we don't support Date yet, added for completeness)
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-const Action = z.object({
-  ...common,
-  control: z.literal("action"),
-  type: z.literal("action"),
-  defaultValue: z.undefined().optional()
-});
-export const PropMeta = z.union([
-  Number,
-  Range,
-  Text,
-  Code,
-  Color,
-  Boolean,
-  Radio,
-  InlineRadio,
-  Select,
-  MultiSelect,
-  Check,
-  InlineCheck,
-  File,
-  Url,
-  ObjectType,
-  Date,
-  Action
-]);