@webstudio-is/react-sdk 0.198.0 → 0.199.0

package/lib/index.js

@@ -77,438 +77,10 @@ import {
 import {
   ROOT_INSTANCE_ID,
   createScope,
-  parseComponentName
+  parseComponentName,
+  descendantComponent,
+  rootComponent
 } from "@webstudio-is/sdk";
-
-// src/core-components.ts
-import {
-  ContentBlockIcon,
-  ListViewIcon,
-  PaintBrushIcon,
-  SettingsIcon,
-  AddTemplateInstanceIcon
-} 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 = {
-  category: "data",
-  order: 2,
-  type: "container",
-  label: "Collection",
-  icon: ListViewIcon,
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: collectionComponent,
-      props: [
-        {
-          name: "data",
-          type: "json",
-          value: [
-            "Collection Item 1",
-            "Collection Item 2",
-            "Collection Item 3"
-          ]
-        },
-        {
-          name: "item",
-          type: "parameter",
-          variableName: "collectionItem",
-          variableAlias: "Collection Item"
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "Box",
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "expression", value: "collectionItem" }]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-var collectionPropsMeta = {
-  props: {
-    data: {
-      required: true,
-      control: "json",
-      type: "json"
-    }
-  },
-  initialProps: ["data"]
-};
-var descendantComponent = "ws:descendant";
-var descendantMeta = {
-  category: "internal",
-  type: "control",
-  label: "Descendant",
-  icon: PaintBrushIcon,
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
-};
-var descendantPropsMeta = {
-  props: {
-    selector: {
-      required: true,
-      type: "string",
-      control: "select",
-      options: [
-        " p",
-        " h1",
-        " h2",
-        " h3",
-        " h4",
-        " h5",
-        " h6",
-        " :where(strong, b)",
-        " :where(em, i)",
-        " a",
-        " img",
-        " blockquote",
-        " code",
-        " :where(ul, ol)",
-        " li",
-        " hr"
-      ]
-    }
-  },
-  initialProps: ["selector"]
-};
-var blockComponent = "ws:block";
-var blockTemplateComponent = "ws:block-template";
-var blockTemplateMeta = {
-  category: "hidden",
-  type: "container",
-  icon: AddTemplateInstanceIcon,
-  stylable: false,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
-  }
-};
-var blockTemplatePropsMeta = {
-  props: {},
-  initialProps: []
-};
-var blockMeta = {
-  category: "typography",
-  type: "container",
-  label: "Content Block",
-  icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ],
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: blockComponent,
-      props: [],
-      children: [
-        {
-          component: blockTemplateComponent,
-          type: "instance",
-          label: "Templates",
-          children: [
-            {
-              component: "Paragraph",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 1",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h1"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 2",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h2"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 3",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h3"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 4",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h4"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 5",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h5"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 6",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h6"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "List",
-              type: "instance",
-              label: "List (Unordered)",
-              children: [
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: []
-                }
-              ]
-            },
-            {
-              component: "List",
-              type: "instance",
-              label: "List (Ordered)",
-              props: [
-                {
-                  name: "ordered",
-                  type: "boolean",
-                  value: true
-                }
-              ],
-              children: [
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: []
-                }
-              ]
-            },
-            {
-              component: "Link",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Image",
-              type: "instance",
-              styles: [
-                {
-                  property: "marginRight",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                },
-                {
-                  property: "marginLeft",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                },
-                {
-                  property: "width",
-                  value: {
-                    type: "unit",
-                    unit: "%",
-                    value: 100
-                  }
-                },
-                {
-                  property: "height",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Separator",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Blockquote",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "HtmlEmbed",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "CodeText",
-              type: "instance",
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "Paragraph",
-          children: [
-            {
-              type: "text",
-              value: "The Content Block component designates regions on the page where pre-styled instances can be inserted in "
-            },
-            {
-              type: "instance",
-              component: "RichTextLink",
-              children: [
-                {
-                  type: "text",
-                  value: "Content mode"
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "href",
-                  value: "https://wstd.us/content-block"
-                }
-              ]
-            },
-            {
-              type: "text",
-              value: "."
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "List",
-          children: [
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates."
-                }
-              ]
-            },
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container."
-                }
-              ]
-            },
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list."
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-var blockPropsMeta = {
-  props: {},
-  initialProps: []
-};
-var coreMetas = {
-  [rootComponent]: rootMeta,
-  [collectionComponent]: collectionMeta,
-  [descendantComponent]: descendantMeta,
-  [blockComponent]: blockMeta,
-  [blockTemplateComponent]: blockTemplateMeta
-};
-var corePropsMetas = {
-  [rootComponent]: rootPropsMeta,
-  [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta,
-  [blockComponent]: blockPropsMeta,
-  [blockTemplateComponent]: blockTemplatePropsMeta
-};
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
-
-// src/css/css.ts
 import { kebabCase } from "change-case";
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
@@ -1118,7 +690,11 @@ import {
   parseComponentName as parseComponentName2,
   generateExpression,
   decodeDataSourceVariable,
-  transpileExpression as transpileExpression2
+  transpileExpression as transpileExpression2,
+  blockComponent,
+  blockTemplateComponent,
+  collectionComponent,
+  descendantComponent as descendantComponent2
 } from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
@@ -1220,7 +796,7 @@ var generateJsxElement = ({
   children,
   classesMap
 }) => {
-  if (instance.component === descendantComponent) {
+  if (instance.component === descendantComponent2) {
     return "";
   }
   let generatedProps = "";
@@ -1232,8 +808,7 @@ ${indexAttribute}="${index}"`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
-  const classMapArray = classesMap?.get(instance.id);
-  const classes = classMapArray !== void 0 ? [JSON.stringify(classMapArray.join(" "))] : [];
+  let classNameValue;
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
       continue;
@@ -1267,7 +842,7 @@ ${indexAttribute}="${index}"`;
       continue;
     }
     if (prop.name === "className" && propValue !== void 0) {
-      classes.push(propValue);
+      classNameValue = propValue;
       continue;
     }
     if (propValue !== void 0) {
@@ -1275,9 +850,16 @@ ${indexAttribute}="${index}"`;
 ${prop.name}={${propValue}}`;
     }
   }
-  if (classes.length !== 0) {
-    generatedProps += `
-className={${classes.join(` + " " + `)}}`;
+  const classMapArray = classesMap?.get(instance.id);
+  if (classMapArray || classNameValue) {
+    let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
+    if (classNameValue) {
+      if (classNameTemplate) {
+        classNameTemplate += " ";
+      }
+      classNameTemplate += "${" + classNameValue + "}";
+    }
+    generatedProps += "\nclassName={`" + classNameTemplate + "`}";
   }
   let generatedElement = "";
   if (instance.component === blockTemplateComponent) {
@@ -1489,16 +1071,9 @@ var generateWebstudioComponent = ({
 };
 export {
   addGlobalRules,
-  blockComponent,
-  blockTemplateComponent,
-  blockTemplateMeta,
   collapsedAttribute,
-  collectionComponent,
   componentAttribute,
-  coreMetas,
-  corePropsMetas,
   createImageValueTransformer,
-  descendantComponent,
   editablePlaceholderVariable,
   editingPlaceholderVariable,
   generateCss,
@@ -1512,11 +1087,8 @@ export {
   idAttribute,
   indexAttribute,
   isAttributeNameSafe,
-  isCoreComponent,
   namespaceMeta,
   normalizeProps,
-  portalComponent,
-  rootComponent,
   selectorIdAttribute,
   showAttribute,
   textContentAttribute

package/lib/runtime.js

@@ -47,12 +47,134 @@ var useVariableState = (initialState) => {
   return [value, setState];
 };
 
+// src/page-settings-meta.tsx
+import { useEffect, useState as useState2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var isElementRenderedWithReact = (element) => {
+  return Object.keys(element).some((key) => key.startsWith("__react"));
+};
+var isServer = typeof window === "undefined";
+var Meta = (props) => {
+  const [localProps, setLocalProps] = useState2();
+  useEffect(() => {
+    const selector = `meta[${props.name ? `name="${props.name}"` : `property="${props.property}"`}]`;
+    let allMetas = document.querySelectorAll(selector);
+    for (const meta of allMetas) {
+      if (!isElementRenderedWithReact(meta)) {
+        meta.remove();
+      }
+    }
+    allMetas = document.querySelectorAll(selector);
+    if (allMetas.length === 0) {
+      setLocalProps(props);
+    }
+  }, [props]);
+  if (isServer) {
+    return /* @__PURE__ */ jsx("meta", { ...props });
+  }
+  if (localProps === void 0) {
+    return;
+  }
+  return /* @__PURE__ */ jsx("meta", { ...localProps });
+};
+var PageSettingsMeta = ({
+  url,
+  host,
+  siteName,
+  pageMeta,
+  imageLoader
+}) => {
+  const metas = [];
+  if (url !== void 0) {
+    metas.push({
+      property: "og:url",
+      content: url
+    });
+  }
+  if (pageMeta.title) {
+    metas.push({
+      property: "og:title",
+      content: pageMeta.title
+    });
+  }
+  metas.push({ property: "og:type", content: "website" });
+  if (siteName) {
+    metas.push({
+      property: "og:site_name",
+      content: siteName
+    });
+  }
+  if (pageMeta.excludePageFromSearch) {
+    metas.push({
+      name: "robots",
+      content: "noindex, nofollow"
+    });
+  }
+  if (pageMeta.description) {
+    metas.push({
+      name: "description",
+      content: pageMeta.description
+    });
+    metas.push({
+      property: "og:description",
+      content: pageMeta.description
+    });
+  }
+  if (pageMeta.socialImageAssetName) {
+    metas.push({
+      property: "og:image",
+      content: `https://${host}${imageLoader({
+        src: pageMeta.socialImageAssetName,
+        // Do not transform social image (not enough information do we need to do this)
+        format: "raw"
+      })}`
+    });
+  } else if (pageMeta.socialImageUrl) {
+    metas.push({
+      property: "og:image",
+      content: pageMeta.socialImageUrl
+    });
+  }
+  metas.push(...pageMeta.custom);
+  return metas.map((meta, index) => /* @__PURE__ */ jsx(Meta, { ...meta }, index));
+};
+
+// src/page-settings-title.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var isServer2 = typeof window === "undefined";
+var PageSettingsTitle = (props) => {
+  const [localProps, setLocalProps] = useState3();
+  useEffect2(() => {
+    const selector = `head > title`;
+    let allTitles = document.querySelectorAll(selector);
+    for (const meta of allTitles) {
+      if (!isElementRenderedWithReact(meta)) {
+        meta.remove();
+      }
+    }
+    allTitles = document.querySelectorAll(selector);
+    if (allTitles.length === 0) {
+      setLocalProps(props);
+    }
+  }, [props]);
+  if (isServer2) {
+    return /* @__PURE__ */ jsx2("title", { ...props });
+  }
+  if (localProps === void 0) {
+    return;
+  }
+  return /* @__PURE__ */ jsx2("title", { ...localProps });
+};
+
 // src/runtime.ts
 var xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
 var getIndexWithinAncestorFromComponentProps = (props) => {
   return props["data-ws-index"];
 };
 export {
+  PageSettingsMeta,
+  PageSettingsTitle,
   ReactSdkContext,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,

package/lib/types/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./remix";
 export * from "./css/index";
-export * from "./core-components";
 export * from "./components/components-utils";
 export * from "./embed-template";
 export * from "./props";

package/lib/types/page-settings-meta.d.ts

@@ -0,0 +1,10 @@
+import type { ImageLoader } from "@webstudio-is/image";
+import type { PageMeta } from "@webstudio-is/sdk";
+export declare const isElementRenderedWithReact: (element: Element) => boolean;
+export declare const PageSettingsMeta: ({ url, host, siteName, pageMeta, imageLoader, }: {
+    url?: string;
+    host: string;
+    siteName: string;
+    pageMeta: PageMeta;
+    imageLoader: ImageLoader;
+}) => import("react/jsx-runtime").JSX.Element[];

package/lib/types/page-settings-title.d.ts

@@ -0,0 +1,17 @@
+type PageSettingsTitleProps = {
+    children: string;
+};
+/**
+ * Title tags are deduplicated on the server using the HTMLRewriter interface.
+ * This is not full deduplication. We simply skip rendering Page Setting title
+ * if it has already been rendered using HeadSlot/HeadTitle.
+ * To prevent React on the client from re-adding the removed title tag, we skip rendering them client-side.
+ * This approach works because React retains server-rendered title tag as long as they are not re-rendered by the client.
+ *
+ * The following component behavior ensures this:
+ * 1. On the server: Render title tag as usual.
+ * 2. On the client: Before rendering, remove any title tag with the same `name` or `property` that were not rendered by Client React,
+ *    and then proceed with rendering as usual.
+ */
+export declare const PageSettingsTitle: (props: PageSettingsTitleProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/lib/types/runtime.d.ts

@@ -1,6 +1,8 @@
 export * from "./context";
 export * from "./hook";
 export * from "./variable-state";
+export { PageSettingsMeta } from "./page-settings-meta";
+export { PageSettingsTitle } from "./page-settings-title";
 /**
  * React has issues rendering certain elements, such as errors when a <link> element has children.
  * To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.