@webstudio-is/react-sdk 0.181.0 → 0.185.0

package/lib/index.js

@@ -57,7 +57,6 @@ var generateRemixParams = (pathname) => {
 // src/css/global-rules.ts
 import { getFontFaces } from "@webstudio-is/fonts";
 var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
-  sheet.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
     if (asset.type === "font") {
@@ -76,12 +75,31 @@ import {
   generateAtomic
 } from "@webstudio-is/css-engine";
 import {
+  ROOT_INSTANCE_ID,
   createScope,
   parseComponentName
 } from "@webstudio-is/sdk";
 
 // src/core-components.ts
-import { ListViewIcon, PaintBrushIcon } from "@webstudio-is/icons/svg";
+import {
+  ListViewIcon,
+  PaintBrushIcon,
+  EmbedIcon
+} from "@webstudio-is/icons/svg";
+import { html } from "@webstudio-is/sdk/normalize.css";
+var rootComponent = "ws:root";
+var rootMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Global Root",
+  icon: EmbedIcon,
+  presetStyle: {
+    html
+  }
+};
+var rootPropsMeta = {
+  props: {}
+};
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
@@ -175,14 +193,16 @@ var descendantPropsMeta = {
   initialProps: ["selector"]
 };
 var coreMetas = {
+  [rootComponent]: rootMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta
 };
 var corePropsMetas = {
+  [rootComponent]: rootPropsMeta,
   [collectionComponent]: collectionPropsMeta,
   [descendantComponent]: descendantPropsMeta
 };
-var isCoreComponent = (component) => component === collectionComponent || component === descendantComponent;
+var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent;
 
 // src/css/css.ts
 import { kebabCase } from "change-case";
@@ -229,7 +249,8 @@ var generateCss = ({
       presetClasses.set(component, className);
     }
     for (const [tag, styles2] of presetStyle) {
-      const rule = globalSheet.addNestingRule(`:where(${tag}.${className})`);
+      const selector = component === rootComponent ? ":root" : `:where(${tag}.${className})`;
+      const rule = globalSheet.addNestingRule(selector);
       for (const declaration of styles2) {
         rule.setDeclaration({
           breakpoint: "presets",
@@ -279,6 +300,11 @@ var generateCss = ({
   for (const selection of styleSourceSelections.values()) {
     let { instanceId } = selection;
     const { values } = selection;
+    if (instanceId === ROOT_INSTANCE_ID) {
+      const rule2 = sheet.addNestingRule(`:root`);
+      rule2.applyMixins(values);
+      continue;
+    }
     let descendantSuffix = "";
     const instance = instances.get(instanceId);
     if (instance?.component === descendantComponent) {
@@ -306,7 +332,7 @@ var generateCss = ({
   }
   if (atomic) {
     const { cssText } = generateAtomic(sheet, {
-      getKey: (rule) => instanceByRule.get(rule) ?? "",
+      getKey: (rule) => instanceByRule.get(rule),
       transformValue: imageValueTransformer,
       classes
     });
@@ -536,6 +562,28 @@ var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
+var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
+var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
+var validAttributeNameRegex = new RegExp(
+  // eslint-disable-next-line no-misleading-character-class
+  "^[" + attributeNameStartChar + "][" + attributeNameChar + "]*$"
+);
+var illegalAttributeNameCache = /* @__PURE__ */ new Map();
+var validatedAttributeNameCache = /* @__PURE__ */ new Map();
+var isAttributeNameSafe = (attributeName) => {
+  if (validatedAttributeNameCache.has(attributeName)) {
+    return true;
+  }
+  if (illegalAttributeNameCache.has(attributeName)) {
+    return false;
+  }
+  if (validAttributeNameRegex.test(attributeName)) {
+    validatedAttributeNameCache.set(attributeName, true);
+    return true;
+  }
+  illegalAttributeNameCache.set(attributeName, true);
+  return false;
+};
 
 // src/prop-meta.ts
 import { z } from "zod";
@@ -1282,6 +1330,7 @@ var generatePropValue = ({
   prop;
 };
 var generateJsxElement = ({
+  context = "jsx",
   scope,
   instance,
   props,
@@ -1303,7 +1352,8 @@ ${indexAttribute}="${index}"`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
-  const classes = Array.from(classesMap?.get(instance.id) ?? []);
+  const classMapArray = classesMap?.get(instance.id);
+  const classes = classMapArray !== void 0 ? [JSON.stringify(classMapArray.join(" "))] : [];
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
       continue;
@@ -1314,6 +1364,9 @@ ${indexAttribute}="${index}"`;
       dataSources,
       usedDataSources
     });
+    if (isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -1333,10 +1386,8 @@ ${indexAttribute}="${index}"`;
       }
       continue;
     }
-    if (prop.name === "className") {
-      if (prop.type === "string") {
-        classes.push(prop.value);
-      }
+    if (prop.name === "className" && propValue !== void 0) {
+      classes.push(propValue);
       continue;
     }
     if (propValue !== void 0) {
@@ -1346,7 +1397,7 @@ ${prop.name}={${propValue}}`;
   }
   if (classes.length !== 0) {
     generatedProps += `
-className=${JSON.stringify(classes.join(" "))}`;
+className={${classes.join(` + " " + `)}}`;
   }
   let generatedElement = "";
   if (instance.component === collectionComponent) {
@@ -1379,7 +1430,13 @@ className=${JSON.stringify(classes.join(" "))}`;
   }
   if (conditionValue) {
     let conditionalElement = "";
-    conditionalElement += `{(${conditionValue}) &&
+    let before = "";
+    let after = "";
+    if (context === "jsx") {
+      before = "{";
+      after = "}";
+    }
+    conditionalElement += `${before}(${conditionValue}) &&
 `;
     if (instance.component === collectionComponent) {
       conditionalElement += "<>\n";
@@ -1388,7 +1445,7 @@ className=${JSON.stringify(classes.join(" "))}`;
     } else {
       conditionalElement += generatedElement;
     }
-    conditionalElement += `}
+    conditionalElement += `${after}
 `;
     return conditionalElement;
   }
@@ -1434,6 +1491,7 @@ var generateJsxChildren = ({
         continue;
       }
       generatedChildren += generateJsxElement({
+        context: "jsx",
         scope,
         instance,
         props,
@@ -1476,6 +1534,7 @@ var generateWebstudioComponent = ({
   }
   const usedDataSources = /* @__PURE__ */ new Map();
   const generatedJsx = generateJsxElement({
+    context: "expression",
     scope,
     instance,
     props,
@@ -1572,10 +1631,12 @@ export {
   getIndexesWithinAncestors,
   idAttribute,
   indexAttribute,
+  isAttributeNameSafe,
   isCoreComponent,
   namespaceMeta,
   normalizeProps,
   portalComponent,
+  rootComponent,
   selectorIdAttribute,
   showAttribute,
   stateCategories,

package/lib/types/component-generator.d.ts

@@ -1,6 +1,7 @@
 import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
-export declare const generateJsxElement: ({ scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
+export declare const generateJsxElement: ({ context, scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
+    context?: "expression" | "jsx";
     scope: Scope;
     instance: Instance;
     props: Props;