@webstudio-is/react-sdk 0.167.0 → 0.173.0

package/lib/index.js

@@ -70,152 +70,15 @@ var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
   }
 };
 
-// src/props.ts
-import {
-  getPagePath,
-  findPageByIdOrPath
-} from "@webstudio-is/sdk";
-var normalizeProps = ({
-  props,
-  assetBaseUrl,
-  assets,
-  pages
-}) => {
-  const newProps = [];
-  for (const prop of props) {
-    if (prop.type === "asset") {
-      const assetId = prop.value;
-      const asset = assets.get(assetId);
-      if (asset === void 0) {
-        continue;
-      }
-      newProps.push({
-        id: prop.id,
-        name: prop.name,
-        required: prop.required,
-        instanceId: prop.instanceId,
-        type: "string",
-        value: `${assetBaseUrl}${asset.name}`
-      });
-      continue;
-    }
-    if (prop.type === "page") {
-      let idProp;
-      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
-      const page = findPageByIdOrPath(pageId, pages);
-      if (page === void 0) {
-        continue;
-      }
-      if (typeof prop.value !== "string") {
-        const { instanceId } = prop.value;
-        idProp = props.find(
-          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
-        );
-      }
-      const path = getPagePath(page.id, pages);
-      const url = new URL(path, "https://any-valid.url");
-      let value = url.pathname;
-      if (idProp?.type === "string") {
-        const hash = idProp.value;
-        url.hash = encodeURIComponent(hash);
-        value = `${url.pathname}${url.hash}`;
-      }
-      newProps.push({
-        id: prop.id,
-        name: prop.name,
-        required: prop.required,
-        instanceId: prop.instanceId,
-        type: "string",
-        value
-      });
-      continue;
-    }
-    newProps.push(prop);
-  }
-  return newProps;
-};
-var idAttribute = "data-ws-id";
-var selectorIdAttribute = "data-ws-selector";
-var componentAttribute = "data-ws-component";
-var showAttribute = "data-ws-show";
-var indexAttribute = "data-ws-index";
-var collapsedAttribute = "data-ws-collapsed";
-var textContentAttribute = "data-ws-text-content";
-var getInstanceIdFromComponentProps = (props) => {
-  return props[idAttribute];
-};
-var getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[indexAttribute];
-};
-
-// src/css/style-rules.ts
-var getStyleRules = (styles, styleSourceSelections) => {
-  if (styles === void 0 || styleSourceSelections === void 0) {
-    return [];
-  }
-  const stylesByStyleSourceId = /* @__PURE__ */ new Map();
-  for (const styleDecl of styles.values()) {
-    const { styleSourceId } = styleDecl;
-    let styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
-    if (styleSourceStyles === void 0) {
-      styleSourceStyles = [];
-      stylesByStyleSourceId.set(styleSourceId, styleSourceStyles);
-    }
-    styleSourceStyles.push(styleDecl);
-  }
-  const styleRules = [];
-  for (const { instanceId, values } of styleSourceSelections.values()) {
-    const styleRuleByBreakpointId = /* @__PURE__ */ new Map();
-    for (const styleSourceId of values) {
-      const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
-      if (styleSourceStyles === void 0) {
-        continue;
-      }
-      for (const {
-        breakpointId,
-        state,
-        property,
-        value
-      } of styleSourceStyles) {
-        const key = `${breakpointId}:${state ?? ""}`;
-        let styleRule = styleRuleByBreakpointId.get(key);
-        if (styleRule === void 0) {
-          styleRule = {
-            instanceId,
-            breakpointId,
-            state,
-            style: {}
-          };
-          styleRuleByBreakpointId.set(key, styleRule);
-        }
-        styleRule.style[property] = value;
-      }
-    }
-    styleRules.push(...styleRuleByBreakpointId.values());
-  }
-  return styleRules;
-};
-var getPresetStyleRules = (component, presetStyle) => {
-  const presetStyleRules = /* @__PURE__ */ new Map();
-  for (const [tag, styles] of Object.entries(presetStyle)) {
-    for (const styleDecl of styles) {
-      const selector = `${tag}:where([${componentAttribute}="${component}"])${styleDecl.state ?? ""}`;
-      let rule = presetStyleRules.get(selector);
-      if (rule === void 0) {
-        rule = {};
-        presetStyleRules.set(selector, rule);
-      }
-      rule[styleDecl.property] = styleDecl.value;
-    }
-  }
-  return presetStyleRules;
-};
-
 // src/css/css.ts
 import {
   createRegularStyleSheet,
   generateAtomic
 } from "@webstudio-is/css-engine";
+import {
+  createScope,
+  parseComponentName
+} from "@webstudio-is/sdk";
 
 // src/core-components.ts
 import { ListViewIcon, PaintBrushIcon } from "@webstudio-is/icons/svg";
@@ -253,7 +116,13 @@ var collectionMeta = {
         {
           type: "instance",
           component: "Box",
-          children: [{ type: "expression", value: "collectionItem" }]
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "expression", value: "collectionItem" }]
+            }
+          ]
         }
       ]
     }
@@ -316,6 +185,7 @@ var corePropsMetas = {
 var isCoreComponent = (component) => component === collectionComponent || component === descendantComponent;
 
 // src/css/css.ts
+import { kebabCase } from "change-case";
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -333,6 +203,7 @@ var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) =>
     };
   }
 };
+var normalizeClassName = (name) => kebabCase(name);
 var generateCss = ({
   assets,
   instances,
@@ -344,35 +215,34 @@ var generateCss = ({
   assetBaseUrl,
   atomic
 }) => {
+  const globalSheet = createRegularStyleSheet({ name: "ssr" });
   const sheet = createRegularStyleSheet({ name: "ssr" });
-  const parentIdByInstanceId = /* @__PURE__ */ new Map();
-  for (const instance of instances.values()) {
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        parentIdByInstanceId.set(child.value, instance.id);
-      }
+  addGlobalRules(globalSheet, { assets, assetBaseUrl });
+  globalSheet.addMediaRule("presets");
+  const presetClasses = /* @__PURE__ */ new Map();
+  const scope = createScope([], normalizeClassName, "-");
+  for (const [component, meta] of componentMetas) {
+    const [_namespace, componentName] = parseComponentName(component);
+    const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
+    const presetStyle = Object.entries(meta.presetStyle ?? {});
+    if (presetStyle.length > 0) {
+      presetClasses.set(component, className);
     }
-  }
-  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    if (prop.name === "selector" && prop.type === "string") {
-      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
+    for (const [tag, styles2] of presetStyle) {
+      const rule = globalSheet.addNestingRule(`:where(${tag}.${className})`);
+      for (const declaration of styles2) {
+        rule.setDeclaration({
+          breakpoint: "presets",
+          selector: declaration.state ?? "",
+          property: declaration.property,
+          value: declaration.value
+        });
+      }
     }
   }
-  addGlobalRules(sheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
     sheet.addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const [component, meta] of componentMetas) {
-    const presetStyle = meta.presetStyle;
-    if (presetStyle === void 0) {
-      continue;
-    }
-    const rules = getPresetStyleRules(component, presetStyle);
-    for (const [selector, style] of rules) {
-      sheet.addStyleRule({ style }, selector);
-    }
-  }
   const imageValueTransformer = createImageValueTransformer(assets, {
     assetBaseUrl
   });
@@ -386,6 +256,25 @@ var generateCss = ({
       value: styleDecl.value
     });
   }
+  const classes = /* @__PURE__ */ new Map();
+  const parentIdByInstanceId = /* @__PURE__ */ new Map();
+  for (const instance of instances.values()) {
+    const presetClass = presetClasses.get(instance.component);
+    if (presetClass) {
+      classes.set(instance.id, [presetClass]);
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        parentIdByInstanceId.set(child.value, instance.id);
+      }
+    }
+  }
+  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.name === "selector" && prop.type === "string") {
+      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
   const instanceByRule = /* @__PURE__ */ new Map();
   for (const selection of styleSourceSelections.values()) {
     let { instanceId } = selection;
@@ -400,22 +289,34 @@ var generateCss = ({
         instanceId = parentId;
       }
     }
-    const rule = sheet.addNestingRule(
-      `[${idAttribute}="${instanceId}"]`,
-      descendantSuffix
-    );
+    const meta = instance ? componentMetas.get(instance.component) : void 0;
+    const baseName = instance?.label ?? meta?.label ?? instance?.component ?? instanceId;
+    const className = `w-${scope.getName(instanceId, baseName)}`;
+    if (atomic === false) {
+      let classList = classes.get(instanceId);
+      if (classList === void 0) {
+        classList = [];
+        classes.set(instanceId, classList);
+      }
+      classList.push(className);
+    }
+    const rule = sheet.addNestingRule(`.${className}`, descendantSuffix);
     rule.applyMixins(values);
     instanceByRule.set(rule, instanceId);
   }
   if (atomic) {
-    return generateAtomic(sheet, {
+    const { cssText } = generateAtomic(sheet, {
       getKey: (rule) => instanceByRule.get(rule) ?? "",
-      transformValue: imageValueTransformer
+      transformValue: imageValueTransformer,
+      classes
     });
+    return { cssText: `${globalSheet.cssText}
+${cssText}`, classes };
   }
   return {
-    cssText: sheet.cssText,
-    classesMap: /* @__PURE__ */ new Map()
+    cssText: `${globalSheet.cssText}
+${sheet.cssText}`,
+    classes
   };
 };
 
@@ -536,6 +437,112 @@ var createInstanceElement = ({
   );
 };
 
+// src/props.ts
+import {
+  getPagePath,
+  findPageByIdOrPath
+} from "@webstudio-is/sdk";
+var normalizeProps = ({
+  props,
+  assetBaseUrl,
+  assets,
+  uploadingImageAssets,
+  pages,
+  source
+}) => {
+  const newProps = [];
+  for (const prop of props) {
+    if (prop.type === "asset") {
+      const assetId = prop.value;
+      const asset = assets.get(assetId) ?? uploadingImageAssets.find((asset2) => asset2.id === assetId);
+      if (asset === void 0) {
+        continue;
+      }
+      const propBase = {
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId
+      };
+      if (prop.name === "width" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.width
+        });
+        continue;
+      }
+      if (prop.name === "height" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.height
+        });
+        continue;
+      }
+      newProps.push({
+        ...propBase,
+        type: "string",
+        value: `${assetBaseUrl}${asset.name}`
+      });
+      if (source === "canvas") {
+        newProps.push({
+          id: `${prop.instanceId}-${asset.id}-assetId`,
+          name: "$webstudio$canvasOnly$assetId",
+          required: false,
+          instanceId: prop.instanceId,
+          type: "string",
+          value: asset.id
+        });
+      }
+      continue;
+    }
+    if (prop.type === "page") {
+      let idProp;
+      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
+      const page = findPageByIdOrPath(pageId, pages);
+      if (page === void 0) {
+        continue;
+      }
+      if (typeof prop.value !== "string") {
+        const { instanceId } = prop.value;
+        idProp = props.find(
+          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
+        );
+      }
+      const path = getPagePath(page.id, pages);
+      const url = new URL(path, "https://any-valid.url");
+      let value = url.pathname;
+      if (idProp?.type === "string") {
+        const hash = idProp.value;
+        url.hash = encodeURIComponent(hash);
+        value = `${url.pathname}${url.hash}`;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value
+      });
+      continue;
+    }
+    newProps.push(prop);
+  }
+  return newProps;
+};
+var idAttribute = "data-ws-id";
+var selectorIdAttribute = "data-ws-selector";
+var componentAttribute = "data-ws-component";
+var showAttribute = "data-ws-show";
+var indexAttribute = "data-ws-index";
+var collapsedAttribute = "data-ws-collapsed";
+var textContentAttribute = "data-ws-text-content";
+var getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[indexAttribute];
+};
+
 // src/prop-meta.ts
 import { z } from "zod";
 var common = {
@@ -1192,10 +1199,19 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
     }
   }
 };
+var getInstanceSelectorById = (instanceSelector, instanceId) => {
+  const index = instanceSelector.findIndex(
+    (selector) => selector === instanceId
+  );
+  if (index === -1) {
+    return [];
+  }
+  return instanceSelector.slice(index);
+};
 
 // src/component-generator.ts
 import {
-  parseComponentName,
+  parseComponentName as parseComponentName2,
   generateExpression,
   decodeDataSourceVariable,
   transpileExpression as transpileExpression2
@@ -1284,6 +1300,9 @@ var generatePropValue = ({
   if (prop.type === "action") {
     return generateAction({ scope, prop, dataSources, usedDataSources });
   }
+  if (prop.type === "resource") {
+    return JSON.stringify(scope.getName(prop.value, prop.name));
+  }
   prop;
 };
 var generateJsxElement = ({
@@ -1296,13 +1315,10 @@ var generateJsxElement = ({
   children,
   classesMap
 }) => {
+  if (instance.component === descendantComponent) {
+    return "";
+  }
   let generatedProps = "";
-  generatedProps += `
-${idAttribute}=${JSON.stringify(instance.id)}`;
-  generatedProps += `
-${componentAttribute}=${JSON.stringify(
-    instance.component
-  )}`;
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
     generatedProps += `
@@ -1357,10 +1373,6 @@ ${prop.name}={${propValue}}`;
 className=${JSON.stringify(classes.join(" "))}`;
   }
   let generatedElement = "";
-  if (conditionValue) {
-    generatedElement += `{(${conditionValue}) &&
-`;
-  }
   if (instance.component === collectionComponent) {
     if (collectionDataValue === void 0 || collectionItemValue === void 0) {
       return "";
@@ -1376,7 +1388,7 @@ className=${JSON.stringify(classes.join(" "))}`;
     generatedElement += `)}
 `;
   } else {
-    const [_namespace, shortName] = parseComponentName(instance.component);
+    const [_namespace, shortName] = parseComponentName2(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
     if (instance.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
@@ -1389,12 +1401,20 @@ className=${JSON.stringify(classes.join(" "))}`;
 `;
     }
   }
-  if (instance.component === descendantComponent) {
-    return "";
-  }
   if (conditionValue) {
-    generatedElement += `}
+    let conditionalElement = "";
+    conditionalElement += `{(${conditionValue}) &&
+`;
+    if (instance.component === collectionComponent) {
+      conditionalElement += "<>\n";
+      conditionalElement += generatedElement;
+      conditionalElement += "</>\n";
+    } else {
+      conditionalElement += generatedElement;
+    }
+    conditionalElement += `}
 `;
+    return conditionalElement;
   }
   return generatedElement;
 };
@@ -1577,9 +1597,7 @@ export {
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
   getIndexesWithinAncestors,
-  getInstanceIdFromComponentProps,
-  getPresetStyleRules,
-  getStyleRules,
+  getInstanceSelectorById,
   idAttribute,
   indexAttribute,
   isCoreComponent,