@webstudio-is/react-sdk 0.185.0 → 0.191.0

package/lib/index.js

@@ -82,9 +82,11 @@ import {
 
 // src/core-components.ts
 import {
+  EditIcon,
   ListViewIcon,
   PaintBrushIcon,
-  EmbedIcon
+  SettingsIcon,
+  AddTemplateInstanceIcon
 } from "@webstudio-is/icons/svg";
 import { html } from "@webstudio-is/sdk/normalize.css";
 var rootComponent = "ws:root";
@@ -92,7 +94,7 @@ var rootMeta = {
   category: "hidden",
   type: "container",
   label: "Global Root",
-  icon: EmbedIcon,
+  icon: SettingsIcon,
   presetStyle: {
     html
   }
@@ -192,17 +194,183 @@ var descendantPropsMeta = {
   },
   initialProps: ["selector"]
 };
+var blockTemplateComponent = "ws:block-template";
+var blockTemplateMeta = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false
+};
+var blockTemplatePropsMeta = {
+  props: {},
+  initialProps: []
+};
+var blockComponent = "ws:block";
+var blockMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Content Block",
+  icon: EditIcon,
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: collectionComponent }
+  },
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: blockComponent,
+      props: [],
+      children: [
+        {
+          type: "instance",
+          label: "Templates",
+          component: blockTemplateComponent,
+          children: [
+            {
+              type: "instance",
+              component: "Paragraph",
+              children: [
+                {
+                  type: "text",
+                  value: "Paragraph text you can edit",
+                  placeholder: true
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "List",
+              children: [
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          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
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
   [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta
+  [descendantComponent]: descendantPropsMeta,
+  [blockComponent]: blockPropsMeta,
+  [blockTemplateComponent]: blockTemplatePropsMeta
 };
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent;
+var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 
 // src/css/css.ts
 import { kebabCase } from "change-case";
@@ -346,120 +514,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,
@@ -746,6 +800,7 @@ var PropMeta = z.union([
 
 // src/components/component-meta.ts
 import { z as z3 } from "zod";
+import { Matchers } from "@webstudio-is/sdk";
 
 // src/embed-template.ts
 import { z as z2 } from "zod";
@@ -1099,6 +1154,26 @@ var namespaceEmbedTemplateComponents = (template, namespace, components) => {
     throw Error("Impossible case");
   });
 };
+var namespaceMatcher = (namespace, matcher) => {
+  const newMatcher = structuredClone(matcher);
+  if (newMatcher.component?.$eq) {
+    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
+  }
+  if (newMatcher.component?.$neq) {
+    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
+  }
+  if (newMatcher.component?.$in) {
+    newMatcher.component.$in = newMatcher.component.$in.map(
+      (component) => `${namespace}:${component}`
+    );
+  }
+  if (newMatcher.component?.$nin) {
+    newMatcher.component.$nin = newMatcher.component.$nin.map(
+      (component) => `${namespace}:${component}`
+    );
+  }
+  return newMatcher;
+};
 var namespaceMeta = (meta, namespace, components) => {
   const newMeta = { ...meta };
   if (newMeta.requiredAncestors) {
@@ -1111,6 +1186,15 @@ var namespaceMeta = (meta, namespace, components) => {
       (component) => components.has(component) ? `${namespace}:${component}` : component
     );
   }
+  if (newMeta.constraints) {
+    if (Array.isArray(newMeta.constraints)) {
+      newMeta.constraints = newMeta.constraints.map(
+        (matcher) => namespaceMatcher(namespace, matcher)
+      );
+    } else {
+      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
+    }
+  }
   if (newMeta.indexWithinAncestor) {
     newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
   }
@@ -1167,6 +1251,7 @@ var WsComponentMeta = z3.object({
   type: z3.enum(["container", "control", "embed", "rich-text-child"]),
   requiredAncestors: z3.optional(z3.array(z3.string())),
   invalidAncestors: z3.optional(z3.array(z3.string())),
+  constraints: Matchers.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -1400,6 +1485,9 @@ ${prop.name}={${propValue}}`;
 className={${classes.join(` + " " + `)}}`;
   }
   let generatedElement = "";
+  if (instance.component === blockTemplateComponent) {
+    return "";
+  }
   if (instance.component === collectionComponent) {
     if (collectionDataValue === void 0 || collectionItemValue === void 0) {
       return "";
@@ -1414,6 +1502,8 @@ className={${classes.join(` + " " + `)}}`;
 `;
     generatedElement += `)}
 `;
+  } else if (instance.component === blockComponent) {
+    generatedElement += children;
   } else {
     const [_namespace, shortName] = parseComponentName2(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
@@ -1610,15 +1700,16 @@ export {
   WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
+  blockComponent,
+  blockTemplateComponent,
+  blockTemplateMeta,
   collapsedAttribute,
   collectionComponent,
   componentAttribute,
   componentCategories,
   coreMetas,
   corePropsMetas,
-  createElementsTree,
   createImageValueTransformer,
-  createInstanceChildrenElements,
   defaultStates,
   descendantComponent,
   generateCss,

package/lib/runtime.js

@@ -1,6 +1,9 @@
 // src/context.tsx
 import { createContext, useContext, useMemo } from "react";
-import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
+import {
+  createJsonStringifyProxy,
+  isPlainObject
+} from "@webstudio-is/sdk/runtime";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
@@ -29,19 +32,13 @@ 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/variable-state.tsx
-import { createJsonStringifyProxy as createJsonStringifyProxy2, isPlainObject as isPlainObject2 } from "@webstudio-is/sdk";
 import { useState, useMemo as useMemo2 } from "react";
+import {
+  createJsonStringifyProxy as createJsonStringifyProxy2,
+  isPlainObject as isPlainObject2
+} from "@webstudio-is/sdk/runtime";
 var useVariableState = (initialState) => {
   const [state, setState] = useState(initialState);
   const value = useMemo2(
@@ -59,7 +56,6 @@ export {
   ReactSdkContext,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
-  getInstanceSelectorById,
   useResource,
   useVariableState
 };