@webstudio-is/react-sdk 0.91.0 → 0.92.0

package/src/expression.ts

@@ -1,401 +0,0 @@
-import jsep from "jsep";
-import jsepAssignment from "@jsep-plugin/assignment";
-import type {
-  UpdateExpression,
-  AssignmentExpression,
-} from "@jsep-plugin/assignment";
-
-jsep.plugins.register(jsepAssignment);
-
-type TransformIdentifier = (id: string, assignee: boolean) => string;
-
-type Node = jsep.CoreExpression | UpdateExpression | AssignmentExpression;
-
-const generateCode = (
-  node: Node,
-  failOnForbidden: boolean,
-  effectful: boolean,
-  transformIdentifier: TransformIdentifier
-): string => {
-  if (node.type === "Identifier") {
-    return transformIdentifier(node.name, false);
-  }
-  if (node.type === "MemberExpression") {
-    if (failOnForbidden) {
-      const object = generateCode(
-        node.object as Node,
-        false,
-        effectful,
-        transformIdentifier
-      );
-      const property = generateCode(
-        node.property as Node,
-        false,
-        effectful,
-        transformIdentifier
-      );
-      throw Error(`Cannot access "${property}" of "${object}"`);
-    }
-    const object = generateCode(
-      node.object as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    const property = generateCode(
-      node.property as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    return `${object}.${property}`;
-  }
-  if (node.type === "Literal") {
-    return node.raw;
-  }
-  if (node.type === "UnaryExpression") {
-    const arg = generateCode(
-      node.argument as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    return `${node.operator}${arg}`;
-  }
-  if (node.type === "BinaryExpression") {
-    const left = generateCode(
-      node.left as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    const right = generateCode(
-      node.right as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    return `${left} ${node.operator} ${right}`;
-  }
-  if (node.type === "ArrayExpression") {
-    const elements = node.elements.map((element) =>
-      generateCode(
-        element as Node,
-        failOnForbidden,
-        effectful,
-        transformIdentifier
-      )
-    );
-    return `[${elements.join(", ")}]`;
-  }
-  if (node.type === "CallExpression") {
-    if (failOnForbidden) {
-      const callee = generateCode(
-        node.callee as Node,
-        false,
-        effectful,
-        transformIdentifier
-      );
-      throw Error(`Cannot call "${callee}"`);
-    }
-    const callee = generateCode(
-      node.callee as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    const args = node.arguments.map((arg) =>
-      generateCode(arg as Node, failOnForbidden, effectful, transformIdentifier)
-    );
-    return `${callee}(${args.join(", ")})`;
-  }
-  if (node.type === "ThisExpression") {
-    if (failOnForbidden) {
-      throw Error(`"this" is not supported`);
-    }
-    return "this";
-  }
-  if (node.type === "ConditionalExpression") {
-    throw Error("Ternary operator is not supported");
-  }
-  if (node.type === "Compound") {
-    throw Error("Cannot use multiple expressions");
-  }
-  if (node.type === "AssignmentExpression") {
-    if (node.operator !== "=") {
-      throw Error(`Only "=" assignment operator is supported`);
-    }
-    if (effectful === false) {
-      throw Error(`Cannot use assignment in this expression`);
-    }
-    const left = generateCode(
-      node.left as Node,
-      failOnForbidden,
-      effectful,
-      // override and mark all identifiers inside of left expression as assignee
-      (id) => transformIdentifier(id, true)
-    );
-    const right = generateCode(
-      node.right as Node,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    return `${left} ${node.operator} ${right}`;
-  }
-  if (node.type === "UpdateExpression") {
-    throw Error(`"${node.operator}" operator is not supported`);
-  }
-  node satisfies never;
-  return "";
-};
-
-export const validateExpression = (
-  code: string,
-  options?: { effectful?: boolean; transformIdentifier?: TransformIdentifier }
-) => {
-  const { effectful = false, transformIdentifier = (id: string) => id } =
-    options ?? {};
-  const expression = jsep(code) as Node;
-  return generateCode(expression, true, effectful, transformIdentifier);
-};
-
-const sortTopologically = (
-  list: Set<string>,
-  depsById: Map<string, Set<string>>,
-  explored = new Set<string>(),
-  sorted: string[] = []
-) => {
-  for (const id of list) {
-    if (explored.has(id)) {
-      continue;
-    }
-    explored.add(id);
-    const deps = depsById.get(id);
-    if (deps) {
-      sortTopologically(deps, depsById, explored, sorted);
-    }
-    sorted.push(id);
-  }
-  return sorted;
-};
-
-/**
- * Generates a function body expecting map as _variables argument
- * and outputing map of results
- */
-export const generateComputingExpressions = (
-  expressions: Map<string, string>,
-  allowedVariables: Set<string>
-) => {
-  const depsById = new Map<string, Set<string>>();
-  const inputVariables = new Set<string>();
-  for (const [id, code] of expressions) {
-    const deps = new Set<string>();
-    validateExpression(code, {
-      transformIdentifier: (identifier) => {
-        if (allowedVariables.has(identifier)) {
-          inputVariables.add(identifier);
-          return identifier;
-        }
-        if (expressions.has(identifier)) {
-          deps.add(identifier);
-          return identifier;
-        }
-        throw Error(`Unknown dependency "${identifier}"`);
-      },
-    });
-    depsById.set(id, deps);
-  }
-
-  const sortedExpressions = sortTopologically(
-    new Set(expressions.keys()),
-    depsById
-  );
-
-  // generate code computing all expressions
-  let generatedCode = "";
-
-  for (const id of inputVariables) {
-    generatedCode += `const ${id} = _variables.get('${id}');\n`;
-  }
-
-  for (const id of sortedExpressions) {
-    const code = expressions.get(id);
-    if (code === undefined) {
-      continue;
-    }
-    generatedCode += `const ${id} = (${code});\n`;
-  }
-
-  generatedCode += `return new Map([\n`;
-  for (const id of sortedExpressions) {
-    generatedCode += `  ['${id}', ${id}],\n`;
-  }
-  generatedCode += `]);`;
-
-  return generatedCode;
-};
-
-export const executeComputingExpressions = (
-  expressions: Map<string, string>,
-  variables: Map<string, unknown>
-) => {
-  const generatedCode = generateComputingExpressions(
-    expressions,
-    new Set(variables.keys())
-  );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables) as Map<string, unknown>;
-  return values;
-};
-
-export const generateEffectfulExpression = (
-  code: string,
-  args: Set<string>,
-  allowedVariables: Set<string>
-) => {
-  const inputVariables = new Set<string>();
-  const outputVariables = new Set<string>();
-  validateExpression(code, {
-    effectful: true,
-    transformIdentifier: (identifier, assignee) => {
-      if (args.has(identifier)) {
-        return identifier;
-      }
-      if (allowedVariables.has(identifier)) {
-        if (assignee) {
-          outputVariables.add(identifier);
-        } else {
-          inputVariables.add(identifier);
-        }
-        return identifier;
-      }
-      throw Error(`Unknown dependency "${identifier}"`);
-    },
-  });
-
-  // generate code computing all expressions
-  let generatedCode = "";
-
-  for (const id of args) {
-    generatedCode += `let ${id} = _args.get('${id}');\n`;
-  }
-  for (const id of inputVariables) {
-    generatedCode += `let ${id} = _variables.get('${id}');\n`;
-  }
-  for (const id of outputVariables) {
-    if (inputVariables.has(id) === false) {
-      generatedCode += `let ${id};\n`;
-    }
-  }
-
-  generatedCode += `${code};\n`;
-
-  generatedCode += `return new Map([\n`;
-  for (const id of outputVariables) {
-    generatedCode += `  ['${id}', ${id}],\n`;
-  }
-  generatedCode += `]);`;
-
-  return generatedCode;
-};
-
-export const executeEffectfulExpression = (
-  code: string,
-  args: Map<string, unknown>,
-  variables: Map<string, unknown>
-) => {
-  const generatedCode = generateEffectfulExpression(
-    code,
-    new Set(args.keys()),
-    new Set(variables.keys())
-  );
-  const executeFn = new Function("_variables", "_args", generatedCode);
-  const values = executeFn(variables, args) as Map<string, unknown>;
-  return values;
-};
-
-const computeExpressionDependencies = (
-  expressions: Map<string, string>,
-  expressionId: string,
-  dependencies: Map<string, Set<string>>
-) => {
-  // prevent recalculating expressions over again
-  const depsById = dependencies.get(expressionId);
-  if (depsById) {
-    return depsById;
-  }
-  const parentDeps = new Set<string>();
-  const code = expressions.get(expressionId);
-  if (code === undefined) {
-    return parentDeps;
-  }
-  // write before recursive call to avoid infinite cycle
-  dependencies.set(expressionId, parentDeps);
-  validateExpression(code, {
-    transformIdentifier: (id) => {
-      parentDeps.add(id);
-      const childDeps = computeExpressionDependencies(
-        expressions,
-        id,
-        dependencies
-      );
-      for (const depId of childDeps) {
-        parentDeps.add(depId);
-      }
-      return id;
-    },
-  });
-  return parentDeps;
-};
-
-export const computeExpressionsDependencies = (
-  expressions: Map<string, string>
-) => {
-  const dependencies = new Map<string, Set<string>>();
-  for (const id of expressions.keys()) {
-    computeExpressionDependencies(expressions, id, dependencies);
-  }
-  return dependencies;
-};
-
-type Values = Map<string, unknown>;
-
-const dataSourceVariablePrefix = "$ws$dataSource$";
-
-// data source id is generated with nanoid which has "-" in alphabeta
-// here "-" is encoded with "__DASH__' in variable name
-// https://github.com/ai/nanoid/blob/047686abad8f15aff05f3a2eeedb7c98b6847392/url-alphabet/index.js
-
-export const encodeDataSourceVariable = (id: string) => {
-  const encoded = id.replaceAll("-", "__DASH__");
-  return `${dataSourceVariablePrefix}${encoded}`;
-};
-
-export const encodeVariablesMap = (values: Values) => {
-  const encodedValues: Values = new Map();
-  for (const [id, value] of values) {
-    encodedValues.set(encodeDataSourceVariable(id), value);
-  }
-  return encodedValues;
-};
-
-export const decodeDataSourceVariable = (name: string) => {
-  if (name.startsWith(dataSourceVariablePrefix)) {
-    const encoded = name.slice(dataSourceVariablePrefix.length);
-    return encoded.replaceAll("__DASH__", "-");
-  }
-  return;
-};
-
-export const decodeVariablesMap = (values: Values) => {
-  const decodedValues: Values = new Map();
-  for (const [name, value] of values) {
-    const id = decodeDataSourceVariable(name);
-    if (id !== undefined) {
-      decodedValues.set(id, value);
-    }
-  }
-  return decodedValues;
-};

package/src/generator.ts

@@ -1,147 +0,0 @@
-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.ts

@@ -1,52 +0,0 @@
-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 InstancePath = Instance[];
-
-type NavigatorEvent = {
-  /**
-   * 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;
-};
-
-/**
- * Find closest matching instance by component name
- * by lookup in instance path
- */
-export const getClosestInstance = (
-  instancePath: InstancePath,
-  currentInstance: Instance,
-  closestComponent: Instance["component"]
-) => {
-  let matched = false;
-  for (const instance of instancePath) {
-    if (currentInstance === instance) {
-      matched = true;
-    }
-    if (matched && instance.component === closestComponent) {
-      return instance;
-    }
-  }
-};

package/src/index.ts

@@ -1,39 +0,0 @@
-export * from "./css";
-export * from "./tree";
-export * from "./pubsub";
-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,
-  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";
-export { generateUtilsExport } from "./generator";

package/src/instance-utils.ts

@@ -1,65 +0,0 @@
-import type { Instance, Instances } from "@webstudio-is/project-build";
-import type { WsComponentMeta } from "./components/component-meta";
-
-export type IndexesWithinAncestors = Map<Instance["id"], number>;
-
-export const getIndexesWithinAncestors = (
-  metas: Map<Instance["component"], WsComponentMeta>,
-  instances: Instances,
-  rootIds: Instance["id"][]
-) => {
-  const ancestors = new Set<Instance["component"]>();
-  for (const meta of metas.values()) {
-    if (meta.indexWithinAncestor !== undefined) {
-      ancestors.add(meta.indexWithinAncestor);
-    }
-  }
-
-  const indexes: IndexesWithinAncestors = new Map();
-
-  const traverseInstances = (
-    instances: Instances,
-    instanceId: Instance["id"],
-    latestIndexes = new Map<
-      Instance["component"],
-      Map<Instance["component"], number>
-    >()
-  ) => {
-    const instance = instances.get(instanceId);
-    if (instance === undefined) {
-      return;
-    }
-    const meta = metas.get(instance.component);
-    if (meta === undefined) {
-      return;
-    }
-
-    if (ancestors.has(instance.component)) {
-      latestIndexes = new Map(latestIndexes);
-      latestIndexes.set(instance.component, new Map());
-    }
-
-    if (meta.indexWithinAncestor !== undefined) {
-      const ancestorIndexes = latestIndexes.get(meta.indexWithinAncestor);
-      if (ancestorIndexes !== undefined) {
-        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(instances, child.value, latestIndexes);
-      }
-    }
-  };
-
-  const latestIndexes = new Map();
-  for (const instanceId of rootIds) {
-    traverseInstances(instances, instanceId, latestIndexes);
-  }
-
-  return indexes;
-};