@webstudio-is/react-sdk 0.0.0-021f2d4

package/lib/index.js

@@ -0,0 +1,1095 @@
+// src/remix.ts
+var getRemixSegment = (segment) => {
+  if (segment === "*") {
+    return "$";
+  }
+  const match = segment.match(/^:(?<name>\w+)(?<modifier>\*|\?)?$/);
+  const name = match?.groups?.name;
+  const modifier = match?.groups?.modifier;
+  if (name) {
+    if (modifier === "*") {
+      return "$";
+    }
+    if (modifier === "?") {
+      return `($${name})`;
+    }
+    return `$${name}`;
+  }
+  return `[${segment}]`;
+};
+var generateRemixRoute = (pathname) => {
+  if (pathname.startsWith("/")) {
+    pathname = pathname.slice(1);
+  }
+  if (pathname === "") {
+    return `_index`;
+  }
+  const base = pathname.split("/").map(getRemixSegment).join(".");
+  const tail = pathname.endsWith("*") ? "" : "._index";
+  return `${base}${tail}`;
+};
+var generateRemixParams = (pathname) => {
+  const name = pathname.match(/:(?<name>\w+)\*$/)?.groups?.name;
+  let generated = "";
+  generated += `type Params = Record<string, string | undefined>;
+`;
+  generated += `export const getRemixParams = ({ ...params }: Params): Params => {
+`;
+  if (name) {
+    generated += `  params["${name}"] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  if (pathname.endsWith("/*")) {
+    generated += `  params[0] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  generated += `  return params
+`;
+  generated += `}
+`;
+  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,
+  findPageByIdOrPath
+} from "@webstudio-is/sdk";
+var normalizeProps = ({
+  props,
+  assetBaseUrl,
+  assets,
+  uploadingImageAssets,
+  pages,
+  source
+}) => {
+  const newProps = [];
+  for (const prop of props) {
+    if (prop.type === "asset") {
+      const assetId = prop.value;
+      const asset = assets.get(assetId) ?? uploadingImageAssets.find((asset2) => asset2.id === assetId);
+      if (asset === void 0) {
+        continue;
+      }
+      const propBase = {
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId
+      };
+      if (prop.name === "width" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.width
+        });
+        continue;
+      }
+      if (prop.name === "height" && asset.type === "image") {
+        newProps.push({
+          ...propBase,
+          type: "number",
+          value: asset.meta.height
+        });
+        continue;
+      }
+      newProps.push({
+        ...propBase,
+        type: "string",
+        value: `${assetBaseUrl}${asset.name}`
+      });
+      if (source === "canvas") {
+        newProps.push({
+          id: `${prop.instanceId}-${asset.id}-assetId`,
+          name: "$webstudio$canvasOnly$assetId",
+          required: false,
+          instanceId: prop.instanceId,
+          type: "string",
+          value: asset.id
+        });
+      }
+      continue;
+    }
+    if (prop.type === "page") {
+      let idProp;
+      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
+      const page = findPageByIdOrPath(pageId, pages);
+      if (page === void 0) {
+        continue;
+      }
+      if (typeof prop.value !== "string") {
+        const { instanceId } = prop.value;
+        idProp = props.find(
+          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
+        );
+      }
+      const path = getPagePath(page.id, pages);
+      const url = new URL(path, "https://any-valid.url");
+      let value = url.pathname;
+      if (idProp?.type === "string") {
+        const hash = idProp.value;
+        url.hash = encodeURIComponent(hash);
+        value = `${url.pathname}${url.hash}`;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value
+      });
+      continue;
+    }
+    newProps.push(prop);
+  }
+  return newProps;
+};
+var idAttribute = "data-ws-id";
+var selectorIdAttribute = "data-ws-selector";
+var componentAttribute = "data-ws-component";
+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 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/embed-template.ts
+import { nanoid } from "nanoid";
+import {
+  encodeDataSourceVariable,
+  transpileExpression
+} from "@webstudio-is/sdk";
+var getVariablValue = (value) => {
+  if (typeof value === "string") {
+    return { type: "string", value };
+  }
+  if (typeof value === "number") {
+    return { type: "number", value };
+  }
+  if (typeof value === "boolean") {
+    return { type: "boolean", value };
+  }
+  if (Array.isArray(value)) {
+    return { type: "string[]", value };
+  }
+  return { type: "json", value };
+};
+var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId, generateId) => {
+  const parentChildren = [];
+  for (const item of treeTemplate) {
+    if (item.type === "instance") {
+      const instanceId = generateId();
+      if (item.variables) {
+        for (const [name, variable] of Object.entries(item.variables)) {
+          if (dataSourceByRef.has(name)) {
+            throw Error(`${name} data source already defined`);
+          }
+          dataSourceByRef.set(name, {
+            type: "variable",
+            id: generateId(),
+            scopeInstanceId: instanceId,
+            name: variable.alias ?? name,
+            value: getVariablValue(variable.initialValue)
+          });
+        }
+      }
+      if (item.props) {
+        for (const prop of item.props) {
+          const propId = generateId();
+          if (prop.type === "expression") {
+            props.push({
+              id: propId,
+              instanceId,
+              name: prop.name,
+              type: "expression",
+              // replace all references with variable names
+              value: transpileExpression({
+                expression: prop.code,
+                replaceVariable: (ref) => {
+                  const id = dataSourceByRef.get(ref)?.id ?? ref;
+                  return encodeDataSourceVariable(id);
+                }
+              })
+            });
+            continue;
+          }
+          if (prop.type === "action") {
+            props.push({
+              id: propId,
+              instanceId,
+              type: "action",
+              name: prop.name,
+              value: prop.value.map((value) => {
+                const args = value.args ?? [];
+                return {
+                  type: "execute",
+                  args,
+                  // replace all references with variable names
+                  code: transpileExpression({
+                    expression: value.code,
+                    replaceVariable: (ref) => {
+                      if (args.includes(ref)) {
+                        return;
+                      }
+                      const id = dataSourceByRef.get(ref)?.id ?? ref;
+                      return encodeDataSourceVariable(id);
+                    }
+                  })
+                };
+              })
+            });
+            continue;
+          }
+          if (prop.type === "parameter") {
+            const dataSourceId = generateId();
+            dataSourceByRef.set(prop.variableName, {
+              type: "parameter",
+              id: dataSourceId,
+              scopeInstanceId: instanceId,
+              name: prop.variableAlias ?? prop.variableName
+            });
+            props.push({
+              id: propId,
+              instanceId,
+              name: prop.name,
+              type: "parameter",
+              // replace variable reference with variable id
+              value: dataSourceId
+            });
+            continue;
+          }
+          props.push({ id: propId, instanceId, ...prop });
+        }
+      }
+      const styleSourceIds = [];
+      if (item.styles) {
+        const styleSourceId = generateId();
+        styleSources.push({
+          type: "local",
+          id: styleSourceId
+        });
+        styleSourceIds.push(styleSourceId);
+        for (const styleDecl of item.styles) {
+          styles.push({
+            breakpointId: defaultBreakpointId,
+            styleSourceId,
+            state: styleDecl.state,
+            property: styleDecl.property,
+            value: styleDecl.value
+          });
+        }
+      }
+      if (styleSourceIds.length > 0) {
+        styleSourceSelections.push({
+          instanceId,
+          values: styleSourceIds
+        });
+      }
+      const instance = {
+        type: "instance",
+        id: instanceId,
+        label: item.label,
+        component: item.component,
+        children: []
+      };
+      instances.push(instance);
+      instance.children = createInstancesFromTemplate(
+        item.children,
+        instances,
+        props,
+        dataSourceByRef,
+        styleSourceSelections,
+        styleSources,
+        styles,
+        metas,
+        defaultBreakpointId,
+        generateId
+      );
+      parentChildren.push({
+        type: "id",
+        value: instanceId
+      });
+    }
+    if (item.type === "text") {
+      parentChildren.push({
+        type: "text",
+        value: item.value,
+        placeholder: item.placeholder
+      });
+    }
+    if (item.type === "expression") {
+      parentChildren.push({
+        type: "expression",
+        // replace all references with variable names
+        value: transpileExpression({
+          expression: item.value,
+          replaceVariable: (ref) => {
+            const id = dataSourceByRef.get(ref)?.id ?? ref;
+            return encodeDataSourceVariable(id);
+          }
+        })
+      });
+    }
+  }
+  return parentChildren;
+};
+var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) => {
+  const instances = [];
+  const props = [];
+  const dataSourceByRef = /* @__PURE__ */ new Map();
+  const styleSourceSelections = [];
+  const styleSources = [];
+  const styles = [];
+  const baseBreakpointId = generateId();
+  const children = createInstancesFromTemplate(
+    treeTemplate,
+    instances,
+    props,
+    dataSourceByRef,
+    styleSourceSelections,
+    styleSources,
+    styles,
+    metas,
+    baseBreakpointId,
+    generateId
+  );
+  const breakpoints = [];
+  if (styles.length > 0) {
+    breakpoints.push({
+      id: baseBreakpointId,
+      label: ""
+    });
+  }
+  return {
+    children,
+    instances,
+    props,
+    dataSources: Array.from(dataSourceByRef.values()),
+    styleSourceSelections,
+    styleSources,
+    styles,
+    breakpoints,
+    assets: [],
+    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) {
+    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.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;
+  }
+  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,
+  generateExpression,
+  decodeDataSourceVariable,
+  transpileExpression as transpileExpression2,
+  blockComponent,
+  blockTemplateComponent,
+  collectionComponent,
+  descendantComponent as descendantComponent2
+} from "@webstudio-is/sdk";
+var generateAction = ({
+  scope,
+  prop,
+  dataSources,
+  usedDataSources
+}) => {
+  const setters = /* @__PURE__ */ new Set();
+  let args = [];
+  let assignersCode = "";
+  for (const value of prop.value) {
+    args = value.args;
+    assignersCode += transpileExpression2({
+      expression: value.code,
+      executable: true,
+      replaceVariable: (identifier, assignee) => {
+        if (args?.includes(identifier)) {
+          return;
+        }
+        const depId = decodeDataSourceVariable(identifier);
+        const dep = depId ? dataSources.get(depId) : void 0;
+        if (dep) {
+          usedDataSources.set(dep.id, dep);
+          if (assignee) {
+            setters.add(dep);
+          }
+          const valueName = scope.getName(dep.id, dep.name);
+          return valueName;
+        }
+        console.error(`Unknown dependency "${identifier}"`);
+      }
+    });
+    assignersCode += `
+`;
+  }
+  let settersCode = "";
+  for (const dataSource of setters) {
+    const valueName = scope.getName(dataSource.id, dataSource.name);
+    const setterName = scope.getName(
+      `set$${dataSource.id}`,
+      `set$${dataSource.name}`
+    );
+    settersCode += `${setterName}(${valueName})
+`;
+  }
+  const argsList = args.map((arg) => `${arg}: any`).join(", ");
+  let generated = "";
+  generated += `(${argsList}) => {
+`;
+  generated += assignersCode;
+  generated += settersCode;
+  generated += `}`;
+  return generated;
+};
+var generatePropValue = ({
+  scope,
+  prop,
+  dataSources,
+  usedDataSources
+}) => {
+  if (prop.type === "asset" || prop.type === "page") {
+    return;
+  }
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+    return JSON.stringify(prop.value);
+  }
+  if (prop.type === "parameter") {
+    const dataSource = dataSources.get(prop.value);
+    if (dataSource === void 0) {
+      return;
+    }
+    usedDataSources.set(dataSource.id, dataSource);
+    return scope.getName(dataSource.id, dataSource.name);
+  }
+  if (prop.type === "expression") {
+    return generateExpression({
+      expression: prop.value,
+      dataSources,
+      usedDataSources,
+      scope
+    });
+  }
+  if (prop.type === "action") {
+    return generateAction({ scope, prop, dataSources, usedDataSources });
+  }
+  if (prop.type === "resource") {
+    return JSON.stringify(scope.getName(prop.value, prop.name));
+  }
+  prop;
+};
+var generateJsxElement = ({
+  context = "jsx",
+  scope,
+  instance,
+  props,
+  dataSources,
+  usedDataSources,
+  indexesWithinAncestors,
+  children,
+  classesMap
+}) => {
+  if (instance.component === descendantComponent2) {
+    return "";
+  }
+  let generatedProps = "";
+  const index = indexesWithinAncestors.get(instance.id);
+  if (index !== void 0) {
+    generatedProps += `
+${indexAttribute}="${index}"`;
+  }
+  let conditionValue;
+  let collectionDataValue;
+  let collectionItemValue;
+  let classNameValue;
+  for (const prop of props.values()) {
+    if (prop.instanceId !== instance.id) {
+      continue;
+    }
+    const propValue = generatePropValue({
+      scope,
+      prop,
+      dataSources,
+      usedDataSources
+    });
+    if (isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
+    if (prop.name === showAttribute) {
+      if (propValue === "true") {
+        continue;
+      }
+      if (propValue === "false") {
+        return "";
+      }
+      conditionValue = propValue;
+      continue;
+    }
+    if (instance.component === collectionComponent) {
+      if (prop.name === "data") {
+        collectionDataValue = propValue;
+      }
+      if (prop.name === "item") {
+        collectionItemValue = propValue;
+      }
+      continue;
+    }
+    if (prop.name === "className" && propValue !== void 0) {
+      classNameValue = propValue;
+      continue;
+    }
+    if (propValue !== void 0) {
+      generatedProps += `
+${prop.name}={${propValue}}`;
+    }
+  }
+  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) {
+    return "";
+  }
+  if (instance.component === collectionComponent) {
+    if (collectionDataValue === void 0 || collectionItemValue === void 0) {
+      return "";
+    }
+    const indexVariable = scope.getName(`${instance.id}-index`, "index");
+    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
+`;
+    generatedElement += `<Fragment key={${indexVariable}}>
+`;
+    generatedElement += children;
+    generatedElement += `</Fragment>
+`;
+    generatedElement += `)}
+`;
+  } else if (instance.component === blockComponent) {
+    generatedElement += children;
+  } else {
+    const [_namespace, shortName] = parseComponentName2(instance.component);
+    const componentVariable = scope.getName(instance.component, shortName);
+    if (instance.children.length === 0) {
+      generatedElement += `<${componentVariable}${generatedProps} />
+`;
+    } else {
+      generatedElement += `<${componentVariable}${generatedProps}>
+`;
+      generatedElement += children;
+      generatedElement += `</${componentVariable}>
+`;
+    }
+  }
+  if (conditionValue) {
+    let conditionalElement = "";
+    let before = "";
+    let after = "";
+    if (context === "jsx") {
+      before = "{";
+      after = "}";
+    }
+    conditionalElement += `${before}(${conditionValue}) &&
+`;
+    if (instance.component === collectionComponent) {
+      conditionalElement += "<>\n";
+      conditionalElement += generatedElement;
+      conditionalElement += "</>\n";
+    } else {
+      conditionalElement += generatedElement;
+    }
+    conditionalElement += `${after}
+`;
+    return conditionalElement;
+  }
+  return generatedElement;
+};
+var generateJsxChildren = ({
+  scope,
+  children,
+  instances,
+  props,
+  dataSources,
+  usedDataSources,
+  indexesWithinAncestors,
+  classesMap,
+  excludePlaceholders
+}) => {
+  let generatedChildren = "";
+  for (const child of children) {
+    if (child.type === "text") {
+      if (excludePlaceholders && child.placeholder === true) {
+        continue;
+      }
+      generatedChildren += child.value.split("\n").map((line) => `{${JSON.stringify(line)}}
+`).join(`<br />
+`);
+      continue;
+    }
+    if (child.type === "expression") {
+      const expression = generateExpression({
+        expression: child.value,
+        dataSources,
+        usedDataSources,
+        scope
+      });
+      generatedChildren = `{${expression}}
+`;
+      continue;
+    }
+    if (child.type === "id") {
+      const instanceId = child.value;
+      const instance = instances.get(instanceId);
+      if (instance === void 0) {
+        continue;
+      }
+      generatedChildren += generateJsxElement({
+        context: "jsx",
+        scope,
+        instance,
+        props,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap,
+        children: generateJsxChildren({
+          classesMap,
+          scope,
+          children: instance.children,
+          instances,
+          props,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders
+        })
+      });
+      continue;
+    }
+    child;
+  }
+  return generatedChildren;
+};
+var generateWebstudioComponent = ({
+  scope,
+  name,
+  rootInstanceId,
+  parameters,
+  instances,
+  props,
+  dataSources,
+  indexesWithinAncestors,
+  classesMap
+}) => {
+  const instance = instances.get(rootInstanceId);
+  if (instance === void 0) {
+    return "";
+  }
+  const usedDataSources = /* @__PURE__ */ new Map();
+  const generatedJsx = generateJsxElement({
+    context: "expression",
+    scope,
+    instance,
+    props,
+    dataSources,
+    usedDataSources,
+    indexesWithinAncestors,
+    classesMap,
+    children: generateJsxChildren({
+      scope,
+      children: instance.children,
+      instances,
+      props,
+      dataSources,
+      usedDataSources,
+      indexesWithinAncestors,
+      classesMap
+    })
+  });
+  let generatedProps = "";
+  if (parameters.length > 0) {
+    let generatedPropsValue = "{ ";
+    let 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}, `;
+      }
+      generatedPropsType += `${parameter.name}: any; `;
+    }
+    generatedPropsValue += `}`;
+    generatedPropsType += `}`;
+    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
+  }
+  let generatedDataSources = "";
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const setterName = scope.getName(
+        `set$${dataSource.id}`,
+        `set$${dataSource.name}`
+      );
+      const initialValue = dataSource.value.value;
+      const initialValueString = JSON.stringify(initialValue);
+      generatedDataSources += `let [${valueName}, ${setterName}] = useVariableState<any>(${initialValueString})
+`;
+    }
+    if (dataSource.type === "resource") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const resourceName = scope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      const resourceNameString = JSON.stringify(resourceName);
+      generatedDataSources += `let ${valueName} = useResource(${resourceNameString})
+`;
+    }
+  }
+  let generatedComponent = "";
+  generatedComponent += `const ${name} = (${generatedProps}) => {
+`;
+  generatedComponent += `${generatedDataSources}`;
+  generatedComponent += `return ${generatedJsx}`;
+  generatedComponent += `}
+`;
+  return generatedComponent;
+};
+export {
+  addGlobalRules,
+  collapsedAttribute,
+  componentAttribute,
+  createImageValueTransformer,
+  editablePlaceholderVariable,
+  editingPlaceholderVariable,
+  generateCss,
+  generateDataFromEmbedTemplate,
+  generateJsxChildren,
+  generateJsxElement,
+  generateRemixParams,
+  generateRemixRoute,
+  generateWebstudioComponent,
+  getIndexesWithinAncestors,
+  idAttribute,
+  indexAttribute,
+  isAttributeNameSafe,
+  namespaceMeta,
+  normalizeProps,
+  selectorIdAttribute,
+  showAttribute,
+  textContentAttribute
+};