@webstudio-is/sdk 0.142.0 → 0.143.0

package/lib/index.js

@@ -579,6 +579,510 @@ var loadResource = async (resourceData) => {
     };
   }
 };
+
+// src/expression.ts
+import { parseExpressionAt } from "acorn";
+import { simple } from "acorn-walk";
+var lintExpression = ({
+  expression,
+  availableVariables = /* @__PURE__ */ new Set(),
+  allowAssignment = false
+}) => {
+  const diagnostics = [];
+  const addError = (message) => {
+    return (node) => {
+      diagnostics.push({
+        from: node.start,
+        to: node.end,
+        severity: "error",
+        message
+      });
+    };
+  };
+  if (expression.trim().length === 0) {
+    return diagnostics;
+  }
+  try {
+    const root = parseExpressionAt(expression, 0, {
+      ecmaVersion: "latest",
+      // support parsing import to forbid explicitly
+      sourceType: "module"
+    });
+    simple(root, {
+      Identifier(node) {
+        if (availableVariables.has(node.name) === false) {
+          addError(`"${node.name}" is not available in the scope`)(node);
+        }
+      },
+      Literal() {
+      },
+      ArrayExpression() {
+      },
+      ObjectExpression() {
+      },
+      UnaryExpression() {
+      },
+      BinaryExpression() {
+      },
+      LogicalExpression() {
+      },
+      MemberExpression() {
+      },
+      ConditionalExpression() {
+      },
+      TemplateLiteral() {
+      },
+      ChainExpression() {
+      },
+      ParenthesizedExpression() {
+      },
+      AssignmentExpression(node) {
+        if (allowAssignment === false) {
+          addError("Assignment is supported only inside actions")(node);
+          return;
+        }
+        simple(node.left, {
+          Identifier(node2) {
+            if (availableVariables.has(node2.name) === false) {
+              addError(`"${node2.name}" is not available in the scope`)(node2);
+            }
+          }
+        });
+      },
+      // parser forbids to yield inside module
+      YieldExpression() {
+      },
+      ThisExpression: addError(`"this" keyword is not supported`),
+      FunctionExpression: addError("Functions are not supported"),
+      UpdateExpression: addError("Increment and decrement are not supported"),
+      CallExpression: addError("Functions are not supported"),
+      NewExpression: addError("Classes are not supported"),
+      SequenceExpression: addError(`Only single expression is supported`),
+      ArrowFunctionExpression: addError("Functions are not supported"),
+      TaggedTemplateExpression: addError("Tagged template is not supported"),
+      ClassExpression: addError("Classes are not supported"),
+      MetaProperty: addError("Imports are not supported"),
+      AwaitExpression: addError(`"await" keyword is not supported`),
+      ImportExpression: addError("Imports are not supported")
+    });
+  } catch (error) {
+    const castedError = error;
+    diagnostics.push({
+      from: castedError.pos,
+      to: castedError.pos,
+      severity: "error",
+      message: castedError.message
+    });
+  }
+  return diagnostics;
+};
+var isLiteralNode = (node) => {
+  if (node.type === "Literal") {
+    return true;
+  }
+  if (node.type === "ArrayExpression") {
+    return node.elements.every((node2) => {
+      if (node2 === null || node2.type === "SpreadElement") {
+        return false;
+      }
+      return isLiteralNode(node2);
+    });
+  }
+  if (node.type === "ObjectExpression") {
+    return node.properties.every((property) => {
+      if (property.type === "SpreadElement") {
+        return false;
+      }
+      const key = property.key;
+      const isIdentifierKey = key.type === "Identifier" && property.computed === false;
+      const isLiteralKey = key.type === "Literal";
+      return (isLiteralKey || isIdentifierKey) && isLiteralNode(property.value);
+    });
+  }
+  return false;
+};
+var isLiteralExpression = (expression) => {
+  try {
+    const node = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
+    return isLiteralNode(node);
+  } catch {
+    return false;
+  }
+};
+var getExpressionIdentifiers = (expression) => {
+  const identifiers = /* @__PURE__ */ new Set();
+  try {
+    const root = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
+    simple(root, {
+      Identifier: (node) => identifiers.add(node.name),
+      AssignmentExpression(node) {
+        simple(node.left, {
+          Identifier: (node2) => identifiers.add(node2.name)
+        });
+      }
+    });
+  } catch {
+  }
+  return identifiers;
+};
+var transpileExpression = ({
+  expression,
+  executable = false,
+  replaceVariable
+}) => {
+  const root = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
+  const replacements = [];
+  const replaceIdentifier = (node, assignee) => {
+    const newName = replaceVariable?.(node.name, assignee);
+    if (newName) {
+      replacements.push([node.start, node.end, newName]);
+    }
+  };
+  simple(root, {
+    Identifier: (node) => replaceIdentifier(node, false),
+    AssignmentExpression(node) {
+      simple(node.left, {
+        Identifier: (node2) => replaceIdentifier(node2, true)
+      });
+    },
+    MemberExpression(node) {
+      if (executable === false || node.optional) {
+        return;
+      }
+      if (node.computed === false) {
+        const dotIndex = expression.indexOf(".", node.object.end);
+        replacements.push([dotIndex, dotIndex, "?"]);
+      }
+      if (node.computed === true) {
+        const dotIndex = expression.indexOf("[", node.object.end);
+        replacements.push([dotIndex, dotIndex, "?."]);
+      }
+    }
+  });
+  replacements.sort(([leftStart], [rightStart]) => rightStart - leftStart);
+  for (const [start, end, fragment] of replacements) {
+    const before = expression.slice(0, start);
+    const after = expression.slice(end);
+    expression = before + fragment + after;
+  }
+  return expression;
+};
+var dataSourceVariablePrefix = "$ws$dataSource$";
+var encodeDataSourceVariable = (id) => {
+  const encoded = id.replaceAll("-", "__DASH__");
+  return `${dataSourceVariablePrefix}${encoded}`;
+};
+var decodeDataSourceVariable = (name) => {
+  if (name.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};
+var generateExpression = ({
+  expression,
+  dataSources,
+  usedDataSources,
+  scope
+}) => {
+  return transpileExpression({
+    expression,
+    executable: true,
+    replaceVariable: (identifier) => {
+      const depId = decodeDataSourceVariable(identifier);
+      const dep = depId ? dataSources.get(depId) : void 0;
+      if (dep) {
+        usedDataSources?.set(dep.id, dep);
+        return scope.getName(dep.id, dep.name);
+      }
+    }
+  });
+};
+var executeExpression = (expression) => {
+  try {
+    const fn = new Function(`return (${expression})`);
+    return fn();
+  } catch {
+  }
+};
+
+// src/forms-generator.ts
+var generateFormsProperties = (props) => {
+  const formsProperties = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.type === "string") {
+      if (prop.name === "action" || prop.name === "method") {
+        let properties = formsProperties.get(prop.instanceId);
+        if (properties === void 0) {
+          properties = {};
+        }
+        properties[prop.name] = prop.value;
+        formsProperties.set(prop.instanceId, properties);
+      }
+    }
+  }
+  const entriesString = JSON.stringify(Array.from(formsProperties.entries()));
+  let generated = "";
+  generated += `type FormProperties = { method?: string, action?: string }
+`;
+  generated += `export const formsProperties = new Map<string, FormProperties>(${entriesString})
+`;
+  return generated;
+};
+
+// src/resources-generator.ts
+var generateResourcesLoader = ({
+  scope,
+  page,
+  dataSources,
+  resources
+}) => {
+  let generatedOutput = "";
+  let generatedLoaders = "";
+  let hasResources = false;
+  const usedDataSources = /* @__PURE__ */ new Map();
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "resource") {
+      const resource = resources.get(dataSource.resourceId);
+      if (resource === void 0) {
+        continue;
+      }
+      hasResources = true;
+      const resourceName = scope.getName(resource.id, dataSource.name);
+      generatedOutput += `${resourceName},
+`;
+      generatedLoaders += `loadResource({
+`;
+      generatedLoaders += `id: "${resource.id}",
+`;
+      generatedLoaders += `name: ${JSON.stringify(resource.name)},
+`;
+      const url = generateExpression({
+        expression: resource.url,
+        dataSources,
+        usedDataSources,
+        scope
+      });
+      generatedLoaders += `url: ${url},
+`;
+      generatedLoaders += `method: "${resource.method}",
+`;
+      generatedLoaders += `headers: [
+`;
+      for (const header of resource.headers) {
+        const value = generateExpression({
+          expression: header.value,
+          dataSources,
+          usedDataSources,
+          scope
+        });
+        generatedLoaders += `{ name: "${header.name}", value: ${value} },
+`;
+      }
+      generatedLoaders += `],
+`;
+      if (resource.body !== void 0 && resource.body.length > 0) {
+        const body = generateExpression({
+          expression: resource.body,
+          dataSources,
+          usedDataSources,
+          scope
+        });
+        generatedLoaders += `body: ${body},
+`;
+      }
+      generatedLoaders += `}),
+`;
+    }
+  }
+  let generatedVariables = "";
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const name = scope.getName(dataSource.id, dataSource.name);
+      const value = JSON.stringify(dataSource.value.value);
+      generatedVariables += `let ${name} = ${value}
+`;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id !== page.systemDataSourceId) {
+        continue;
+      }
+      const name = scope.getName(dataSource.id, dataSource.name);
+      generatedVariables += `const ${name} = _props.system
+`;
+    }
+  }
+  let generated = "";
+  generated += `import { loadResource, type System } from "@webstudio-is/sdk";
+`;
+  generated += `export const loadResources = async (_props: { system: System }) => {
+`;
+  generated += generatedVariables;
+  if (hasResources) {
+    generated += `const [
+`;
+    generated += generatedOutput;
+    generated += `] = await Promise.all([
+`;
+    generated += generatedLoaders;
+    generated += `])
+`;
+  }
+  generated += `return {
+`;
+  generated += generatedOutput;
+  generated += `} as Record<string, unknown>
+`;
+  generated += `}
+`;
+  return generated;
+};
+
+// src/page-meta-generator.ts
+var generatePageMeta = ({
+  globalScope,
+  page,
+  dataSources
+}) => {
+  const localScope = createScope(["system", "resources"]);
+  const usedDataSources = /* @__PURE__ */ new Map();
+  const titleExpression = generateExpression({
+    expression: page.title,
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const descriptionExpression = generateExpression({
+    expression: page.meta.description ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const excludePageFromSearchExpression = generateExpression({
+    expression: page.meta.excludePageFromSearch ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const languageExpression = generateExpression({
+    expression: page.meta.language ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const socialImageAssetIdExpression = JSON.stringify(
+    page.meta.socialImageAssetId
+  );
+  const socialImageUrlExpression = generateExpression({
+    expression: page.meta.socialImageUrl ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const statusExpression = generateExpression({
+    expression: page.meta.status ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const redirectExpression = generateExpression({
+    expression: page.meta.redirect ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  let customExpression = "";
+  customExpression += `[
+`;
+  for (const customMeta of page.meta.custom ?? []) {
+    if (customMeta.property.trim().length === 0) {
+      continue;
+    }
+    const propertyExpression = JSON.stringify(customMeta.property);
+    const contentExpression = generateExpression({
+      expression: customMeta.content,
+      dataSources,
+      usedDataSources,
+      scope: localScope
+    });
+    customExpression += `      {
+`;
+    customExpression += `        property: ${propertyExpression},
+`;
+    customExpression += `        content: ${contentExpression},
+`;
+    customExpression += `      },
+`;
+  }
+  customExpression += `    ]`;
+  let generated = "";
+  generated += `export const getPageMeta = ({
+`;
+  generated += `  system,
+`;
+  generated += `  resources,
+`;
+  generated += `}: {
+`;
+  generated += `  system: System;
+`;
+  generated += `  resources: Record<string, any>;
+`;
+  generated += `}): PageMeta => {
+`;
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const initialValueString = JSON.stringify(dataSource.value.value);
+      generated += `  let ${valueName} = ${initialValueString}
+`;
+      continue;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id === page.systemDataSourceId) {
+        const valueName = localScope.getName(dataSource.id, dataSource.name);
+        generated += `  let ${valueName} = system
+`;
+      }
+      continue;
+    }
+    if (dataSource.type === "resource") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const resourceName = globalScope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      generated += `  let ${valueName} = resources.${resourceName}
+`;
+      continue;
+    }
+  }
+  generated += `  return {
+`;
+  generated += `    title: ${titleExpression},
+`;
+  generated += `    description: ${descriptionExpression},
+`;
+  generated += `    excludePageFromSearch: ${excludePageFromSearchExpression},
+`;
+  generated += `    language: ${languageExpression},
+`;
+  generated += `    socialImageAssetId: ${socialImageAssetIdExpression},
+`;
+  generated += `    socialImageUrl: ${socialImageUrlExpression},
+`;
+  generated += `    status: ${statusExpression},
+`;
+  generated += `    redirect: ${redirectExpression},
+`;
+  generated += `    custom: ${customExpression},
+`;
+  generated += `  };
+`;
+  generated += `};
+`;
+  return generated;
+};
 export {
   Asset,
   Assets,
@@ -621,14 +1125,25 @@ export {
   TextChild,
   WebstudioFragment,
   createScope,
+  decodeDataSourceVariable,
+  encodeDataSourceVariable,
+  executeExpression,
   findPageByIdOrPath,
   findParentFolderByChildId,
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
+  generateExpression,
+  generateFormsProperties,
+  generatePageMeta,
+  generateResourcesLoader,
+  getExpressionIdentifiers,
   getPagePath,
   getStyleDeclKey,
   initialBreakpoints,
+  isLiteralExpression,
   isRoot,
+  lintExpression,
   loadResource,
-  parseComponentName
+  parseComponentName,
+  transpileExpression
 };

package/lib/types/expression.d.ts

@@ -0,0 +1,107 @@
+import { type Identifier } from "acorn";
+import type { DataSources } from "./schema/data-sources";
+import type { Scope } from "./scope";
+export type Diagnostic = {
+    from: number;
+    to: number;
+    severity: "error" | "hint" | "info" | "warning";
+    message: string;
+};
+export declare const lintExpression: ({ expression, availableVariables, allowAssignment, }: {
+    expression: string;
+    availableVariables?: Set<string> | undefined;
+    allowAssignment?: boolean | undefined;
+}) => Diagnostic[];
+/**
+ * check whether provided expression is a literal value
+ * like "", 0 or { param: "value" }
+ * which does not depends on any variable
+ */
+export declare const isLiteralExpression: (expression: string) => boolean;
+export declare const getExpressionIdentifiers: (expression: string) => Set<string>;
+/**
+ * transpile expression into executable one
+ *
+ * add optional chaining operator to every member expression
+ * to access any field without runtime errors
+ *
+ * replace variable names if necessary
+ */
+export declare const transpileExpression: ({ expression, executable, replaceVariable, }: {
+    expression: string;
+    executable?: boolean | undefined;
+    replaceVariable?: ((identifier: string, assignee: boolean) => string | undefined | void) | undefined;
+}) => string;
+export declare const encodeDataSourceVariable: (id: string) => string;
+export declare const decodeDataSourceVariable: (name: string) => string | undefined;
+export declare const generateExpression: ({ expression, dataSources, usedDataSources, scope, }: {
+    expression: string;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
+        };
+        type: "variable";
+        id: string;
+        name: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        id: string;
+        name: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        id: string;
+        name: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    usedDataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
+        };
+        type: "variable";
+        id: string;
+        name: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        id: string;
+        name: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        id: string;
+        name: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    scope: Scope;
+}) => string;
+export declare const executeExpression: (expression: undefined | string) => any;