@webstudio-is/react-sdk 0.0.0-017f1bd

package/lib/index.js

@@ -0,0 +1,845 @@
+// 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/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 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/component-generator.ts
+import {
+  parseComponentName,
+  generateExpression,
+  decodeDataSourceVariable,
+  transpileExpression,
+  blockComponent,
+  blockTemplateComponent,
+  collectionComponent,
+  descendantComponent,
+  getIndexesWithinAncestors,
+  elementComponent
+} from "@webstudio-is/sdk";
+import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
+
+// src/__generated__/standard-attributes.ts
+var standardAttributesToReactProps = {
+  "accept-charset": "acceptCharset",
+  accesskey: "accessKey",
+  allowfullscreen: "allowFullScreen",
+  autocapitalize: "autoCapitalize",
+  autocomplete: "autoComplete",
+  autocorrect: "autoCorrect",
+  autofocus: "autoFocus",
+  autoplay: "autoPlay",
+  charset: "charSet",
+  class: "className",
+  colspan: "colSpan",
+  contenteditable: "contentEditable",
+  crossorigin: "crossOrigin",
+  datetime: "dateTime",
+  enctype: "encType",
+  enterkeyhint: "enterKeyHint",
+  fetchpriority: "fetchPriority",
+  for: "htmlFor",
+  formmethod: "formMethod",
+  formaction: "formAction",
+  formenctype: "formEncType",
+  formnovalidate: "formNoValidate",
+  formtarget: "formTarget",
+  hreflang: "hrefLang",
+  "http-equiv": "httpEquiv",
+  imagesizes: "imageSizes",
+  imagesrcset: "imageSrcSet",
+  inputmode: "inputMode",
+  itemid: "itemID",
+  itemprop: "itemProp",
+  itemref: "itemRef",
+  itemscope: "itemScope",
+  itemtype: "itemType",
+  maxlength: "maxLength",
+  minlength: "minLength",
+  nomodule: "noModule",
+  novalidate: "noValidate",
+  playsinline: "playsInline",
+  readonly: "readOnly",
+  referrerpolicy: "referrerPolicy",
+  rowspan: "rowSpan",
+  spellcheck: "spellCheck",
+  srcdoc: "srcDoc",
+  srclang: "srcLang",
+  srcset: "srcSet",
+  tabindex: "tabIndex",
+  usemap: "useMap",
+  "alignment-baseline": "alignmentBaseline",
+  "baseline-shift": "baselineShift",
+  "clip-path": "clipPath",
+  "clip-rule": "clipRule",
+  "color-interpolation": "colorInterpolation",
+  "color-interpolation-filters": "colorInterpolationFilters",
+  "color-profile": "colorProfile",
+  "color-rendering": "colorRendering",
+  "dominant-baseline": "dominantBaseline",
+  "enable-background": "enableBackground",
+  "fill-opacity": "fillOpacity",
+  "fill-rule": "fillRule",
+  "flood-opacity": "floodOpacity",
+  "flood-color": "floodColor",
+  "font-family": "fontFamily",
+  "font-size": "fontSize",
+  "font-size-adjust": "fontSizeAdjust",
+  "font-stretch": "fontStretch",
+  "font-style": "fontStyle",
+  "font-variant": "fontVariant",
+  "font-weight": "fontWeight",
+  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
+  "glyph-orientation-vertical": "glyphOrientationVertical",
+  "image-rendering": "imageRendering",
+  "letter-spacing": "letterSpacing",
+  "lighting-color": "lightingColor",
+  "marker-end": "markerEnd",
+  "marker-mid": "markerMid",
+  "marker-start": "markerStart",
+  "pointer-events": "pointerEvents",
+  popovertarget: "popoverTarget",
+  popovertargetaction: "popoverTargetAction",
+  "shape-rendering": "shapeRendering",
+  "stop-color": "stopColor",
+  "stop-opacity": "stopOpacity",
+  "stroke-dasharray": "strokeDasharray",
+  "stroke-dashoffset": "strokeDashoffset",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "stroke-miterlimit": "strokeMiterlimit",
+  "stroke-width": "strokeWidth",
+  "stroke-opacity": "strokeOpacity",
+  "text-anchor": "textAnchor",
+  "text-decoration": "textDecoration",
+  "text-rendering": "textRendering",
+  "unicode-bidi": "unicodeBidi",
+  "word-spacing": "wordSpacing",
+  "writing-mode": "writingMode",
+  "xlink:actuate": "xlinkActuate",
+  "xlink:arcrole": "xlinkArcrole",
+  "xlink:href": "xlinkHref",
+  "xlink:role": "xlinkRole",
+  "xlink:show": "xlinkShow",
+  "xlink:title": "xlinkTitle",
+  "xlink:type": "xlinkType",
+  "xml:base": "xmlBase",
+  "xml:lang": "xmlLang",
+  "xml:space": "xmlSpace",
+  dirname: "dirName"
+};
+var reactPropsToStandardAttributes = {
+  acceptCharset: "accept-charset",
+  accessKey: "accesskey",
+  allowFullScreen: "allowfullscreen",
+  autoCapitalize: "autocapitalize",
+  autoComplete: "autocomplete",
+  autoCorrect: "autocorrect",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  charSet: "charset",
+  className: "class",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  encType: "enctype",
+  enterKeyHint: "enterkeyhint",
+  fetchPriority: "fetchpriority",
+  htmlFor: "for",
+  formMethod: "formmethod",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  hrefLang: "hreflang",
+  httpEquiv: "http-equiv",
+  imageSizes: "imagesizes",
+  imageSrcSet: "imagesrcset",
+  inputMode: "inputmode",
+  itemID: "itemid",
+  itemProp: "itemprop",
+  itemRef: "itemref",
+  itemScope: "itemscope",
+  itemType: "itemtype",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  playsInline: "playsinline",
+  readOnly: "readonly",
+  referrerPolicy: "referrerpolicy",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap",
+  alignmentBaseline: "alignment-baseline",
+  baselineShift: "baseline-shift",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  colorProfile: "color-profile",
+  colorRendering: "color-rendering",
+  dominantBaseline: "dominant-baseline",
+  enableBackground: "enable-background",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  floodOpacity: "flood-opacity",
+  floodColor: "flood-color",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontSizeAdjust: "font-size-adjust",
+  fontStretch: "font-stretch",
+  fontStyle: "font-style",
+  fontVariant: "font-variant",
+  fontWeight: "font-weight",
+  glyphOrientationHorizontal: "glyph-orientation-horizontal",
+  glyphOrientationVertical: "glyph-orientation-vertical",
+  imageRendering: "image-rendering",
+  letterSpacing: "letter-spacing",
+  lightingColor: "lighting-color",
+  markerEnd: "marker-end",
+  markerMid: "marker-mid",
+  markerStart: "marker-start",
+  pointerEvents: "pointer-events",
+  popoverTarget: "popovertarget",
+  popoverTargetAction: "popovertargetaction",
+  shapeRendering: "shape-rendering",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeWidth: "stroke-width",
+  strokeOpacity: "stroke-opacity",
+  textAnchor: "text-anchor",
+  textDecoration: "text-decoration",
+  textRendering: "text-rendering",
+  unicodeBidi: "unicode-bidi",
+  wordSpacing: "word-spacing",
+  writingMode: "writing-mode",
+  xlinkActuate: "xlink:actuate",
+  xlinkArcrole: "xlink:arcrole",
+  xlinkHref: "xlink:href",
+  xlinkRole: "xlink:role",
+  xlinkShow: "xlink:show",
+  xlinkTitle: "xlink:title",
+  xlinkType: "xlink:type",
+  xmlBase: "xml:base",
+  xmlLang: "xml:lang",
+  xmlSpace: "xml:space",
+  dirName: "dirname"
+};
+
+// src/component-generator.ts
+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 += transpileExpression({
+      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" || prop.type === "animationAction") {
+    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,
+  metas,
+  tagsOverrides,
+  instance,
+  props,
+  dataSources,
+  usedDataSources,
+  indexesWithinAncestors,
+  children,
+  classesMap
+}) => {
+  if (instance.component === descendantComponent) {
+    return "";
+  }
+  const meta = metas.get(instance.component);
+  const hasTags = Object.keys(meta?.presetStyle ?? {}).length > 0;
+  let generatedProps = "";
+  const index = indexesWithinAncestors.get(instance.id);
+  if (index !== void 0) {
+    generatedProps += `
+${indexProperty}="${index}"`;
+  }
+  if (instance.tag !== void 0 && instance.component !== elementComponent) {
+    generatedProps += `
+${tagProperty}=${JSON.stringify(instance.tag)}`;
+  }
+  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;
+    }
+    let name = prop.name;
+    if (hasTags && !meta?.props?.[prop.name]) {
+      name = standardAttributesToReactProps[prop.name] ?? prop.name;
+    }
+    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 (name === "className" && propValue !== void 0) {
+      classNameValue = propValue;
+      continue;
+    }
+    if (propValue !== void 0) {
+      generatedProps += `
+${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 {
+    let componentVariable;
+    if (instance.component === elementComponent) {
+      componentVariable = instance.tag ?? "div";
+      const componentDescriptor = tagsOverrides?.[componentVariable];
+      if (componentDescriptor !== void 0) {
+        const [_importSource, importSpecifier] = componentDescriptor.split(":");
+        componentVariable = scope.getName(componentDescriptor, importSpecifier);
+      }
+    } else {
+      const [_namespace, shortName] = parseComponentName(instance.component);
+      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,
+  metas,
+  tagsOverrides,
+  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,
+        metas,
+        tagsOverrides,
+        instance,
+        props,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap,
+        children: generateJsxChildren({
+          classesMap,
+          scope,
+          metas,
+          tagsOverrides,
+          children: instance.children,
+          instances,
+          props,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders
+        })
+      });
+      continue;
+    }
+    child;
+  }
+  return generatedChildren;
+};
+var generateWebstudioComponent = ({
+  scope,
+  name,
+  rootInstanceId,
+  parameters,
+  instances,
+  props,
+  dataSources,
+  metas,
+  tagsOverrides,
+  classesMap
+}) => {
+  const instance = instances.get(rootInstanceId);
+  const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
+    rootInstanceId
+  ]);
+  const usedDataSources = /* @__PURE__ */ new Map();
+  let generatedJsx = "<></>\n";
+  if (instance) {
+    generatedJsx = generateJsxElement({
+      context: "expression",
+      scope,
+      metas,
+      tagsOverrides,
+      instance,
+      props,
+      dataSources,
+      usedDataSources,
+      indexesWithinAncestors,
+      classesMap,
+      children: generateJsxChildren({
+        scope,
+        metas,
+        tagsOverrides,
+        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 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);
+        generatedParameters += `const ${valueName} = _props.${parameter.name};
+`;
+      }
+    }
+  }
+  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 += `${generatedParameters}`;
+  generatedComponent += `${generatedDataSources}`;
+  generatedComponent += `return ${generatedJsx}`;
+  generatedComponent += `}
+`;
+  return generatedComponent;
+};
+export {
+  collapsedAttribute,
+  componentAttribute,
+  generateJsxChildren,
+  generateJsxElement,
+  generateRemixParams,
+  generateRemixRoute,
+  generateWebstudioComponent,
+  idAttribute,
+  isAttributeNameSafe,
+  normalizeProps,
+  reactPropsToStandardAttributes,
+  selectorIdAttribute,
+  showAttribute,
+  standardAttributesToReactProps,
+  textContentAttribute
+};