@webstudio-is/react-sdk 0.0.0-4f7bf18 → 0.0.0-50b8685

package/lib/index.js

@@ -54,178 +54,6 @@ var generateRemixParams = (pathname) => {
   return generated;
 };
 
-// src/css/global-rules.ts
-import { getFontFaces } from "@webstudio-is/fonts";
-var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
-  const fontAssets = [];
-  for (const asset of assets.values()) {
-    if (asset.type === "font") {
-      fontAssets.push(asset);
-    }
-  }
-  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
-  for (const fontFace of fontFaces) {
-    sheet.addFontFaceRule(fontFace);
-  }
-};
-
-// src/css/css.ts
-import {
-  createRegularStyleSheet,
-  generateAtomic
-} from "@webstudio-is/css-engine";
-import {
-  ROOT_INSTANCE_ID,
-  createScope,
-  parseComponentName,
-  descendantComponent,
-  rootComponent
-} from "@webstudio-is/sdk";
-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);
-    if (asset === void 0) {
-      return { type: "keyword", value: "none" };
-    }
-    const url = `${assetBaseUrl}${asset.name}`;
-    return {
-      type: "image",
-      value: {
-        type: "url",
-        url
-      },
-      hidden: styleValue.hidden
-    };
-  }
-};
-var normalizeClassName = (name) => kebabCase(name);
-var generateCss = ({
-  assets,
-  instances,
-  props,
-  breakpoints,
-  styles,
-  styleSourceSelections,
-  componentMetas,
-  assetBaseUrl,
-  atomic
-}) => {
-  const globalSheet = createRegularStyleSheet({ name: "ssr" });
-  const sheet = createRegularStyleSheet({ name: "ssr" });
-  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);
-    }
-    for (const [tag, styles2] of presetStyle) {
-      const selector = component === rootComponent ? ":root" : `:where(${tag}.${className})`;
-      const rule = globalSheet.addNestingRule(selector);
-      for (const declaration of styles2) {
-        rule.setDeclaration({
-          breakpoint: "presets",
-          selector: declaration.state ?? "",
-          property: declaration.property,
-          value: declaration.value
-        });
-      }
-    }
-  }
-  for (const breakpoint of breakpoints.values()) {
-    sheet.addMediaRule(breakpoint.id, breakpoint);
-  }
-  const imageValueTransformer = createImageValueTransformer(assets, {
-    assetBaseUrl
-  });
-  sheet.setTransformer(imageValueTransformer);
-  for (const styleDecl of styles.values()) {
-    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
-    rule.setDeclaration({
-      breakpoint: styleDecl.breakpointId,
-      selector: styleDecl.state ?? "",
-      property: styleDecl.property,
-      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;
-    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 === void 0) {
-      continue;
-    }
-    if (instance.component === descendantComponent) {
-      const parentId = parentIdByInstanceId.get(instanceId);
-      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
-      if (parentId && descendantSelector) {
-        descendantSuffix = descendantSelector;
-        instanceId = parentId;
-      }
-    }
-    const meta = componentMetas.get(instance.component);
-    const [_namespace, shortName] = parseComponentName(instance.component);
-    const baseName = instance.label ?? meta?.label ?? shortName;
-    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) {
-    const { cssText } = generateAtomic(sheet, {
-      getKey: (rule) => instanceByRule.get(rule),
-      transformValue: imageValueTransformer,
-      classes
-    });
-    return { cssText: `${globalSheet.cssText}
-${cssText}`, classes };
-  }
-  return {
-    cssText: `${globalSheet.cssText}
-${sheet.cssText}`,
-    classes
-  };
-};
-
 // src/props.ts
 import {
   getPagePath,
@@ -328,8 +156,7 @@ var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
-var editablePlaceholderVariable = "--data-ws-editable-placeholder";
-var editingPlaceholderVariable = "--data-ws-editing-placeholder";
+var animationCanPlayOnCanvasAttribute = "data-ws-animation-can-play-on-canvas";
 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(
@@ -573,30 +400,6 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) =
     resources: []
   };
 };
-var namespaceEmbedTemplateComponents = (template, namespace, components) => {
-  return template.map((item) => {
-    if (item.type === "text") {
-      return item;
-    }
-    if (item.type === "expression") {
-      return item;
-    }
-    if (item.type === "instance") {
-      const prefix = components.has(item.component) ? `${namespace}:` : "";
-      return {
-        ...item,
-        component: `${prefix}${item.component}`,
-        children: namespaceEmbedTemplateComponents(
-          item.children,
-          namespace,
-          components
-        )
-      };
-    }
-    item;
-    throw Error("Impossible case");
-  });
-};
 var namespaceMatcher = (namespace, matcher) => {
   const newMatcher = structuredClone(matcher);
   if (newMatcher.component?.$eq) {
@@ -631,70 +434,20 @@ var namespaceMeta = (meta, namespace, components) => {
   if (newMeta.indexWithinAncestor) {
     newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
   }
-  if (newMeta.template) {
-    newMeta.template = namespaceEmbedTemplateComponents(
-      newMeta.template,
-      namespace,
-      components
-    );
-  }
   return newMeta;
 };
 
-// src/instance-utils.ts
-var getIndexesWithinAncestors = (metas, instances, rootIds) => {
-  const ancestors = /* @__PURE__ */ new Set();
-  for (const meta of metas.values()) {
-    if (meta.indexWithinAncestor !== void 0) {
-      ancestors.add(meta.indexWithinAncestor);
-    }
-  }
-  const indexes = /* @__PURE__ */ new Map();
-  const traverseInstances = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
-    const instance = instances2.get(instanceId);
-    if (instance === void 0) {
-      return;
-    }
-    const meta = metas.get(instance.component);
-    if (meta === void 0) {
-      return;
-    }
-    if (ancestors.has(instance.component)) {
-      latestIndexes2 = new Map(latestIndexes2);
-      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
-    }
-    if (meta.indexWithinAncestor !== void 0) {
-      const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
-      if (ancestorIndexes !== void 0) {
-        let index = ancestorIndexes.get(instance.component) ?? -1;
-        index += 1;
-        ancestorIndexes.set(instance.component, index);
-        indexes.set(instance.id, index);
-      }
-    }
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        traverseInstances(instances2, child.value, latestIndexes2);
-      }
-    }
-  };
-  const latestIndexes = /* @__PURE__ */ new Map();
-  for (const instanceId of rootIds) {
-    traverseInstances(instances, instanceId, latestIndexes);
-  }
-  return indexes;
-};
-
 // src/component-generator.ts
 import {
-  parseComponentName as parseComponentName2,
+  parseComponentName,
   generateExpression,
   decodeDataSourceVariable,
   transpileExpression as transpileExpression2,
   blockComponent,
   blockTemplateComponent,
   collectionComponent,
-  descendantComponent as descendantComponent2
+  descendantComponent,
+  getIndexesWithinAncestors
 } from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
@@ -758,7 +511,7 @@ var generatePropValue = ({
   if (prop.type === "asset" || prop.type === "page") {
     return;
   }
-  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json" || prop.type === "animationAction") {
     return JSON.stringify(prop.value);
   }
   if (prop.type === "parameter") {
@@ -796,7 +549,7 @@ var generateJsxElement = ({
   children,
   classesMap
 }) => {
-  if (instance.component === descendantComponent2) {
+  if (instance.component === descendantComponent) {
     return "";
   }
   let generatedProps = "";
@@ -870,7 +623,7 @@ ${prop.name}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
+    generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>
 `;
     generatedElement += `<Fragment key={${indexVariable}}>
 `;
@@ -882,7 +635,7 @@ ${prop.name}={${propValue}}`;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
   } else {
-    const [_namespace, shortName] = parseComponentName2(instance.component);
+    const [_namespace, shortName] = parseComponentName(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
     if (instance.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
@@ -992,49 +745,56 @@ var generateWebstudioComponent = ({
   instances,
   props,
   dataSources,
-  indexesWithinAncestors,
+  metas,
   classesMap
 }) => {
   const instance = instances.get(rootInstanceId);
-  if (instance === void 0) {
-    return "";
-  }
+  const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
+    rootInstanceId
+  ]);
   const usedDataSources = /* @__PURE__ */ new Map();
-  const generatedJsx = generateJsxElement({
-    context: "expression",
-    scope,
-    instance,
-    props,
-    dataSources,
-    usedDataSources,
-    indexesWithinAncestors,
-    classesMap,
-    children: generateJsxChildren({
+  let generatedJsx = "<></>\n";
+  if (instance) {
+    generatedJsx = generateJsxElement({
+      context: "expression",
       scope,
-      children: instance.children,
-      instances,
+      instance,
       props,
       dataSources,
       usedDataSources,
       indexesWithinAncestors,
-      classesMap
-    })
-  });
+      classesMap,
+      children: generateJsxChildren({
+        scope,
+        children: instance.children,
+        instances,
+        props,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap
+      })
+    });
+  }
   let generatedProps = "";
+  let generatedParameters = "";
+  const uniqueParameters = new Set(
+    parameters.map((parameter) => parameter.name)
+  );
   if (parameters.length > 0) {
-    let generatedPropsValue = "{ ";
-    let generatedPropsType = "{ ";
+    let generatedPropsType = "";
+    for (const parameterName of uniqueParameters) {
+      generatedPropsType += `${parameterName}: any; `;
+    }
+    generatedProps = `_props: { ${generatedPropsType}}`;
     for (const parameter of parameters) {
       const dataSource = usedDataSources.get(parameter.value);
       if (dataSource) {
         const valueName = scope.getName(dataSource.id, dataSource.name);
-        generatedPropsValue += `${parameter.name}: ${valueName}, `;
+        generatedParameters += `const ${valueName} = _props.${parameter.name};
+`;
       }
-      generatedPropsType += `${parameter.name}: any; `;
     }
-    generatedPropsValue += `}`;
-    generatedPropsType += `}`;
-    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
   }
   let generatedDataSources = "";
   for (const dataSource of usedDataSources.values()) {
@@ -1063,6 +823,7 @@ var generateWebstudioComponent = ({
   let generatedComponent = "";
   generatedComponent += `const ${name} = (${generatedProps}) => {
 `;
+  generatedComponent += `${generatedParameters}`;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
   generatedComponent += `}
@@ -1070,20 +831,15 @@ var generateWebstudioComponent = ({
   return generatedComponent;
 };
 export {
-  addGlobalRules,
+  animationCanPlayOnCanvasAttribute,
   collapsedAttribute,
   componentAttribute,
-  createImageValueTransformer,
-  editablePlaceholderVariable,
-  editingPlaceholderVariable,
-  generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,
   generateJsxElement,
   generateRemixParams,
   generateRemixRoute,
   generateWebstudioComponent,
-  getIndexesWithinAncestors,
   idAttribute,
   indexAttribute,
   isAttributeNameSafe,

package/lib/runtime.js

@@ -7,7 +7,8 @@ import {
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageLoader: ({ src }) => src,
-  resources: {}
+  resources: {},
+  breakpoints: []
 });
 var useResource = (name) => {
   const { resources } = useContext(ReactSdkContext);

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

@@ -1,5 +1,4 @@
-import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
-import type { IndexesWithinAncestors } from "./instance-utils";
+import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors } from "@webstudio-is/sdk";
 export declare const generateJsxElement: ({ context, scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
     context?: "expression" | "jsx";
     scope: Scope;
@@ -22,7 +21,7 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     classesMap?: Map<string, Array<string>>;
     excludePlaceholders?: boolean;
 }) => string;
-export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, metas, classesMap, }: {
     scope: Scope;
     name: string;
     rootInstanceId: Instance["id"];
@@ -32,6 +31,6 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
     instances: Instances;
     props: Props;
     dataSources: DataSources;
-    indexesWithinAncestors: IndexesWithinAncestors;
     classesMap: Map<string, Array<string>>;
+    metas: Map<Instance["component"], WsComponentMeta>;
 }) => string;

package/lib/types/context.d.ts

@@ -22,5 +22,10 @@ export type Params = {
 export declare const ReactSdkContext: import("react").Context<Params & {
     imageLoader: ImageLoader;
     resources: Record<string, any>;
+    breakpoints: {
+        id: string;
+        minWidth?: number;
+        maxWidth?: number;
+    }[];
 }>;
 export declare const useResource: (name: string) => any;

package/lib/types/embed-template.d.ts

@@ -3,17 +3,10 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTempla
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
     type: "control" | "embed" | "container" | "rich-text-child";
     description?: string | undefined;
-    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "localization" | "radix" | "internal" | undefined;
+    category?: "xml" | "hidden" | "data" | "media" | "general" | "typography" | "forms" | "localization" | "radix" | "internal" | undefined;
+    placeholder?: string | undefined;
     label?: string | undefined;
     order?: number | undefined;
-    template?: ({
-        value: string;
-        type: "text";
-        placeholder?: boolean | undefined;
-    } | {
-        value: string;
-        type: "expression";
-    } | EmbedTemplateInstance)[] | undefined;
     states?: {
         label: string;
         selector: string;
@@ -21,6 +14,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     }[] | undefined;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
+        text?: false | undefined;
         component?: {
             $eq?: string | undefined;
             $neq?: string | undefined;
@@ -35,6 +29,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         } | undefined;
     } | {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
+        text?: false | undefined;
         component?: {
             $eq?: string | undefined;
             $neq?: string | undefined;

package/lib/types/hook.d.ts

@@ -1,5 +1,4 @@
-import type { Instance, Prop } from "@webstudio-is/sdk";
-import type { IndexesWithinAncestors } from "./instance-utils";
+import type { IndexesWithinAncestors, Instance, Prop } from "@webstudio-is/sdk";
 export type InstanceData = {
     id: Instance["id"];
     instanceKey: string;

package/lib/types/index.d.ts

@@ -1,9 +1,7 @@
 export * from "./remix";
-export * from "./css/index";
 export * from "./components/components-utils";
 export * from "./embed-template";
 export * from "./props";
 export type * from "./context";
-export { getIndexesWithinAncestors } from "./instance-utils";
 export type * from "./hook";
 export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";