@webstudio-is/react-sdk 0.142.0 → 0.144.0

package/lib/index.js

@@ -233,11 +233,15 @@ var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) =>
     };
   }
 };
-var generateCss = (data, { assetBaseUrl, atomic = false }) => {
-  const assets = new Map(data.assets.map((asset) => [asset.id, asset]));
-  const breakpoints = new Map(data.breakpoints);
-  const styles = new Map(data.styles);
-  const styleSourceSelections = new Map(data.styleSourceSelections);
+var generateCss = ({
+  assets,
+  breakpoints,
+  styles,
+  styleSourceSelections,
+  componentMetas,
+  assetBaseUrl,
+  atomic
+}) => {
   const classesMap = /* @__PURE__ */ new Map();
   const regularSheet = createRegularStyleSheet({ name: "ssr-regular" });
   const atomicSheet = atomic ? createAtomicStyleSheet({ name: "ssr-atomic" }) : void 0;
@@ -245,7 +249,7 @@ var generateCss = (data, { assetBaseUrl, atomic = false }) => {
   for (const breakpoint of breakpoints.values()) {
     (atomicSheet ?? regularSheet).addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const [component, meta] of data.componentMetas) {
+  for (const [component, meta] of componentMetas) {
     const presetStyle = meta.presetStyle;
     if (presetStyle === void 0) {
       continue;
@@ -401,23 +405,6 @@ var createInstanceElement = ({
   );
 };
 
-// src/app/root.tsx
-import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Root = ({
-  Outlet = DefaultOutlet
-}) => {
-  return /* @__PURE__ */ jsxs2("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs2("head", { children: [
-      /* @__PURE__ */ jsx2("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx2("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx2(Meta, {}),
-      /* @__PURE__ */ jsx2(Links, {})
-    ] }),
-    /* @__PURE__ */ jsx2(Outlet, {})
-  ] });
-};
-
 // src/core-components.ts
 import { ListViewIcon } from "@webstudio-is/icons/svg";
 var portalComponent = "Slot";
@@ -641,204 +628,11 @@ import { z as z2 } from "zod";
 import { nanoid } from "nanoid";
 import { titleCase } from "title-case";
 import { noCase } from "change-case";
+import {
+  encodeDataSourceVariable,
+  transpileExpression
+} from "@webstudio-is/sdk";
 import { StyleValue } from "@webstudio-is/css-engine";
-
-// src/expression.ts
-import jsep from "jsep";
-import jsepAssignment from "@jsep-plugin/assignment";
-import jsepObject from "@jsep-plugin/object";
-jsep.literals["undefined"] = "undefined";
-jsep.plugins.register(jsepAssignment);
-jsep.plugins.register(jsepObject);
-var generateCode = (node, failOnForbidden, options) => {
-  if (node.type === "Identifier") {
-    return options.transformIdentifier(node.name, false);
-  }
-  if (node.type === "MemberExpression") {
-    const object = generateCode(node.object, failOnForbidden, options);
-    const property = node.property;
-    let propertyString;
-    if (property.type === "Identifier" && node.computed === false) {
-      propertyString = property.name;
-    } else {
-      propertyString = generateCode(property, failOnForbidden, options);
-    }
-    if (node.computed) {
-      if (options.optional) {
-        return `${object}?.[${propertyString}]`;
-      } else {
-        return `${object}[${propertyString}]`;
-      }
-    }
-    if (options.optional) {
-      return `${object}?.${propertyString}`;
-    } else {
-      return `${object}.${propertyString}`;
-    }
-  }
-  if (node.type === "Literal") {
-    return node.raw;
-  }
-  if (node.type === "UnaryExpression") {
-    const arg = generateCode(node.argument, failOnForbidden, options);
-    return `${node.operator}${arg}`;
-  }
-  if (node.type === "BinaryExpression") {
-    const left = generateCode(node.left, failOnForbidden, options);
-    const right = generateCode(node.right, failOnForbidden, options);
-    return `${left} ${node.operator} ${right}`;
-  }
-  if (node.type === "ArrayExpression") {
-    const elements = node.elements.map(
-      (element) => generateCode(element, failOnForbidden, options)
-    );
-    return `[${elements.join(", ")}]`;
-  }
-  if (node.type === "CallExpression") {
-    if (failOnForbidden) {
-      const callee2 = generateCode(node.callee, false, options);
-      throw Error(`Cannot call "${callee2}"`);
-    }
-    const callee = generateCode(node.callee, failOnForbidden, options);
-    const args = node.arguments.map(
-      (arg) => generateCode(arg, failOnForbidden, options)
-    );
-    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 (options.effectful === false) {
-      throw Error(`Cannot use assignment in this expression`);
-    }
-    const left = generateCode(node.left, failOnForbidden, {
-      ...options,
-      // override and mark all identifiers inside of left expression as assignee
-      transformIdentifier: (id) => options.transformIdentifier(id, true)
-    });
-    const right = generateCode(node.right, failOnForbidden, options);
-    return `${left} ${node.operator} ${right}`;
-  }
-  if (node.type === "UpdateExpression") {
-    throw Error(`"${node.operator}" operator is not supported`);
-  }
-  if (node.type === "ObjectExpression") {
-    const properties = node.properties.map(
-      (property) => generateCode(property, failOnForbidden, options)
-    );
-    return `{${properties.join(", ")}}`;
-  }
-  if (node.type === "Property") {
-    const key = node.key;
-    let keyString;
-    if (key.type === "Identifier" && node.computed === false) {
-      keyString = key.name;
-    } else {
-      keyString = generateCode(key, failOnForbidden, options);
-    }
-    const value = generateCode(node.value, failOnForbidden, options);
-    if (node.computed) {
-      return `[${keyString}]: ${value}`;
-    }
-    return `${keyString}: ${value}`;
-  }
-  node;
-  return "";
-};
-var validateExpression = (code, options) => {
-  const {
-    effectful = false,
-    optional = false,
-    transformIdentifier = (id) => id
-  } = options ?? {};
-  const expression = jsep(code);
-  return generateCode(expression, true, {
-    effectful,
-    optional,
-    transformIdentifier
-  });
-};
-var isLiteralNode = (node) => {
-  if (node.type === "Literal") {
-    return true;
-  }
-  if (node.type === "ArrayExpression") {
-    return node.elements.every(isLiteralNode);
-  }
-  if (node.type === "ObjectExpression") {
-    return node.properties.every((property) => {
-      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 = jsep(expression);
-    return isLiteralNode(node);
-  } catch {
-    return false;
-  }
-};
-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 validateExpression(expression, {
-    // parse any expression
-    effectful: true,
-    // transpile to safely executable member expressions
-    optional: true,
-    transformIdentifier: (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);
-      }
-      return identifier;
-    }
-  });
-};
-var executeExpression = (expression) => {
-  try {
-    const fn = new Function(`return (${expression})`);
-    return fn();
-  } catch {
-  }
-};
-
-// src/embed-template.ts
 var EmbedTemplateText = z2.object({
   type: z2.literal("text"),
   value: z2.string()
@@ -968,8 +762,9 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
               name: prop.name,
               type: "expression",
               // replace all references with variable names
-              value: validateExpression(prop.code, {
-                transformIdentifier: (ref) => {
+              value: transpileExpression({
+                expression: prop.code,
+                replaceVariable: (ref) => {
                   const id = dataSourceByRef.get(ref)?.id ?? ref;
                   return encodeDataSourceVariable(id);
                 }
@@ -989,11 +784,11 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
                   type: "execute",
                   args,
                   // replace all references with variable names
-                  code: validateExpression(value.code, {
-                    effectful: true,
-                    transformIdentifier: (ref) => {
+                  code: transpileExpression({
+                    expression: value.code,
+                    replaceVariable: (ref) => {
                       if (args.includes(ref)) {
-                        return ref;
+                        return;
                       }
                       const id = dataSourceByRef.get(ref)?.id ?? ref;
                       return encodeDataSourceVariable(id);
@@ -1110,8 +905,9 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
       parentChildren.push({
         type: "expression",
         // replace all references with variable names
-        value: validateExpression(item.value, {
-          transformIdentifier: (ref) => {
+        value: transpileExpression({
+          expression: item.value,
+          replaceVariable: (ref) => {
             const id = dataSourceByRef.get(ref)?.id ?? ref;
             return encodeDataSourceVariable(id);
           }
@@ -1322,31 +1118,13 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
   }
 };
 
-// src/generator.ts
-var generateUtilsExport = (siteData) => {
-  const formsProperties = /* @__PURE__ */ new Map();
-  for (const prop of siteData.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 generatedFormsProperties = `export const formsProperties = new Map<string, { method?: string, action?: string }>(${JSON.stringify(
-    Array.from(formsProperties.entries())
-  )})`;
-  return `
-  ${generatedFormsProperties}
-  `;
-};
-
 // src/component-generator.ts
-import { parseComponentName } from "@webstudio-is/sdk";
+import {
+  parseComponentName,
+  generateExpression,
+  decodeDataSourceVariable,
+  transpileExpression as transpileExpression2
+} from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
   prop,
@@ -1358,12 +1136,12 @@ var generateAction = ({
   let assignersCode = "";
   for (const value of prop.value) {
     args = value.args;
-    assignersCode += validateExpression(value.code, {
-      optional: true,
-      effectful: true,
-      transformIdentifier: (identifier, assignee) => {
+    assignersCode += transpileExpression2({
+      expression: value.code,
+      executable: true,
+      replaceVariable: (identifier, assignee) => {
         if (args?.includes(identifier)) {
-          return identifier;
+          return;
         }
         const depId = decodeDataSourceVariable(identifier);
         const dep = depId ? dataSources.get(depId) : void 0;
@@ -1376,7 +1154,6 @@ var generateAction = ({
           return valueName;
         }
         console.error(`Unknown dependency "${identifier}"`);
-        return identifier;
       }
     });
     assignersCode += `
@@ -1687,270 +1464,12 @@ var generateWebstudioComponent = ({
 `;
   return generatedComponent;
 };
-
-// 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
-import {
-  createScope
-} from "@webstudio-is/sdk";
-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 {
   EmbedTemplateInstance,
   EmbedTemplateProp,
   EmbedTemplateStyleDecl,
   PropMeta,
   ReactSdkContext,
-  Root,
   WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
@@ -1963,20 +1482,13 @@ export {
   createElementsTree,
   createImageValueTransformer,
   createInstanceChildrenElements,
-  decodeDataSourceVariable,
   defaultStates,
-  encodeDataSourceVariable,
-  executeExpression,
   generateCss,
   generateDataFromEmbedTemplate,
-  generateExpression,
   generateJsxChildren,
   generateJsxElement,
-  generatePageMeta,
   generateRemixParams,
   generateRemixRoute,
-  generateResourcesLoader,
-  generateUtilsExport,
   generateWebstudioComponent,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
@@ -1986,7 +1498,6 @@ export {
   getStyleRules,
   idAttribute,
   indexAttribute,
-  isLiteralExpression,
   namespaceMeta,
   normalizeProps,
   portalComponent,
@@ -1994,6 +1505,5 @@ export {
   showAttribute,
   stateCategories,
   textContentAttribute,
-  useResource,
-  validateExpression
+  useResource
 };