@webstudio-is/react-sdk 0.182.0 → 0.189.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,
+  SettingsIcon
+} 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: SettingsIcon,
+  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
     });
@@ -320,120 +346,6 @@ ${sheet.cssText}`,
   };
 };
 
-// src/tree/create-elements-tree.tsx
-import {
-  Fragment
-} from "react";
-
-// src/context.tsx
-import { createContext, useContext, useMemo } from "react";
-import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
-var ReactSdkContext = createContext({
-  assetBaseUrl: "/",
-  imageBaseUrl: "/",
-  imageLoader: ({ src }) => src,
-  resources: {}
-});
-
-// src/tree/create-elements-tree.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var createElementsTree = ({
-  renderer,
-  assetBaseUrl,
-  imageBaseUrl,
-  imageLoader,
-  instances,
-  rootInstanceId,
-  Component,
-  components
-}) => {
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === void 0) {
-    return null;
-  }
-  const rootInstanceSelector = [rootInstanceId];
-  const root = createInstanceElement({
-    Component,
-    instance: rootInstance,
-    instanceSelector: rootInstanceSelector,
-    components
-  });
-  return /* @__PURE__ */ jsx(
-    ReactSdkContext.Provider,
-    {
-      value: {
-        renderer,
-        imageLoader,
-        assetBaseUrl,
-        imageBaseUrl,
-        resources: {}
-      },
-      children: root
-    }
-  );
-};
-var renderText = (text) => {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    line,
-    index < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
-  ] }, index));
-};
-var createInstanceChildrenElements = ({
-  instances,
-  instanceSelector,
-  children,
-  Component,
-  components
-}) => {
-  const elements = [];
-  for (const child of children) {
-    if (child.type === "text") {
-      elements.push(renderText(child.value));
-      continue;
-    }
-    if (child.type === "expression") {
-      continue;
-    }
-    if (child.type === "id") {
-      const childInstance = instances.get(child.value);
-      if (childInstance === void 0) {
-        continue;
-      }
-      const childInstanceSelector = [child.value, ...instanceSelector];
-      const element = createInstanceElement({
-        instance: childInstance,
-        instanceSelector: childInstanceSelector,
-        Component,
-        components
-      });
-      elements.push(element);
-      continue;
-    }
-    child;
-  }
-  if (elements.length === 0) {
-    return;
-  }
-  return elements;
-};
-var createInstanceElement = ({
-  Component,
-  instance,
-  instanceSelector,
-  components
-}) => {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      instance,
-      instanceSelector,
-      components
-    },
-    instance.id
-  );
-};
-
 // src/props.ts
 import {
   getPagePath,
@@ -536,6 +448,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 +1216,7 @@ var generatePropValue = ({
   prop;
 };
 var generateJsxElement = ({
+  context = "jsx",
   scope,
   instance,
   props,
@@ -1303,7 +1238,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 +1250,9 @@ ${indexAttribute}="${index}"`;
       dataSources,
       usedDataSources
     });
+    if (isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -1333,10 +1272,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 +1283,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 +1316,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 +1331,7 @@ className=${JSON.stringify(classes.join(" "))}`;
     } else {
       conditionalElement += generatedElement;
     }
-    conditionalElement += `}
+    conditionalElement += `${after}
 `;
     return conditionalElement;
   }
@@ -1434,6 +1377,7 @@ var generateJsxChildren = ({
         continue;
       }
       generatedChildren += generateJsxElement({
+        context: "jsx",
         scope,
         instance,
         props,
@@ -1476,6 +1420,7 @@ var generateWebstudioComponent = ({
   }
   const usedDataSources = /* @__PURE__ */ new Map();
   const generatedJsx = generateJsxElement({
+    context: "expression",
     scope,
     instance,
     props,
@@ -1557,9 +1502,7 @@ export {
   componentCategories,
   coreMetas,
   corePropsMetas,
-  createElementsTree,
   createImageValueTransformer,
-  createInstanceChildrenElements,
   defaultStates,
   descendantComponent,
   generateCss,
@@ -1572,10 +1515,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;