refactor: render html attributes for all components (#5163)

Ref #3632

Here enabled converting class -> className for all components with tags.
Now it does not affect anything though later will unlock using html
attributes instead of component props.

Also got rid from huge map with react properties and replaced it with a
set of proper aliases.

Author: TrySound

apps/builder/app/builder/features/ai/ai-fetch-result.ts

@@ -285,13 +285,15 @@ const $jsx = computed(
 
     const jsx = generateJsxElement({
       scope,
+      metas,
       instance,
       props,
       dataSources,
       usedDataSources: new Map(),
       indexesWithinAncestors,
       children: generateJsxChildren({
         scope,
+        metas,
         children: instance.children,
         instances,
         props,

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -36,6 +36,7 @@ import {
   selectorIdAttribute,
   type AnyComponent,
   textContentAttribute,
+  standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
 import {
@@ -285,21 +286,36 @@ const useInstanceProps = (instanceSelector: InstanceSelector) => {
         $propValuesByInstanceSelectorWithMemoryProps,
         $instances,
         $indexesWithinAncestors,
+        $registeredComponentMetas,
       ],
-      (propValuesByInstanceSelector, instances, indexesWithinAncestors) => {
+      (
+        propValuesByInstanceSelector,
+        instances,
+        indexesWithinAncestors,
+        metas
+      ) => {
         const instancePropsObject: Record<Prop["name"], unknown> = {};
-        const tag = instances.get(instanceId)?.tag;
+        const instance = instances.get(instanceId);
+        const tag = instance?.tag;
         if (tag !== undefined) {
           instancePropsObject[tagProperty] = tag;
         }
+        const hasTags =
+          Object.keys(metas.get(instance?.component ?? "")?.presetStyle ?? {})
+            .length > 0;
         const index = indexesWithinAncestors.get(instanceId);
         if (index !== undefined) {
           instancePropsObject[indexProperty] = index.toString();
         }
         const instanceProps = propValuesByInstanceSelector.get(instanceKey);
         if (instanceProps) {
           for (const [name, value] of instanceProps) {
-            instancePropsObject[name] = value;
+            if (hasTags) {
+              const reactName = standardAttributesToReactProps[name] ?? name;
+              instancePropsObject[reactName] = value;
+            } else {
+              instancePropsObject[name] = value;
+            }
           }
         }
         return instancePropsObject;

packages/html-data/bin/aria.ts

@@ -1,11 +1,4 @@
 import { aria } from "aria-query";
-import {
-  findTags,
-  getAttr,
-  getTextContent,
-  loadPage,
-  parseHtml,
-} from "./crawler";
 import { mkdir, writeFile } from "node:fs/promises";
 import {
   createScope,
@@ -16,6 +9,13 @@ import {
   type Props,
 } from "@webstudio-is/sdk";
 import { generateWebstudioComponent } from "@webstudio-is/react-sdk";
+import {
+  findTags,
+  getAttr,
+  getTextContent,
+  loadPage,
+  parseHtml,
+} from "./crawler";
 
 type Attribute = {
   name: string;
@@ -45,7 +45,14 @@ for (let index = 0; index < terms.length; index += 1) {
   descriptions.set(term, detail);
 }
 
-const attributes: Attribute[] = [];
+const attributes: Attribute[] = [
+  {
+    name: "role",
+    description:
+      "Defines an explicit role for an element for use by assistive technologies.",
+    type: "string",
+  },
+];
 for (const [name, meta] of aria.entries()) {
   const attribute: Attribute = {
     name,

packages/html-data/bin/attributes.ts

@@ -15,6 +15,9 @@ import {
   loadHtmlIndices,
   parseHtml,
 } from "./crawler";
+import { possibleStandardNames } from "./possible-standard-names";
+
+const validHtmlAttributes = new Set<string>();
 
 type Attribute = {
   name: string;
@@ -110,6 +113,7 @@ for (const row of rows) {
   ) {
     type = "number";
   }
+  validHtmlAttributes.add(attribute);
   for (let tag of tags) {
     tag = tag.toLowerCase().trim();
     if (/custom elements/i.test(tag)) {
@@ -251,3 +255,29 @@ await writeFile(
     metas: new Map(),
   }) + "export { Page }"
 );
+
+// react does not have this one
+possibleStandardNames["dirname"] = "dirName";
+const standardAttributesToReactProps: Record<string, string> = {};
+const reactPropsToStandardAttributes: Record<string, string> = {};
+for (const [htmlAttribute, reactProperty] of Object.entries(
+  possibleStandardNames
+)) {
+  if (
+    validHtmlAttributes.has(htmlAttribute) &&
+    htmlAttribute !== reactProperty
+  ) {
+    standardAttributesToReactProps[htmlAttribute] = reactProperty;
+    reactPropsToStandardAttributes[reactProperty] = htmlAttribute;
+  }
+}
+
+let standardAttributesContent = "";
+standardAttributesContent += `export const standardAttributesToReactProps: Record<string, string> = ${JSON.stringify(standardAttributesToReactProps, null, 2)};\n\n`;
+standardAttributesContent += `export const reactPropsToStandardAttributes: Record<string, string> = ${JSON.stringify(reactPropsToStandardAttributes, null, 2)};\n`;
+
+await mkdir("../react-sdk/src/__generated__", { recursive: true });
+await writeFile(
+  "../react-sdk/src/__generated__/standard-attributes.ts",
+  standardAttributesContent
+);

…ges/react-sdk/src/standard-attributes.ts …html-data/bin/possible-standard-names.tspackages/react-sdk/src/standard-attributes.ts renamed to packages/html-data/bin/possible-standard-names.ts packages/react-sdk/src/standard-attributes.ts renamed to packages/html-data/bin/possible-standard-names.ts

@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// https://github.com/facebook/react/blob/6377903074d4b3a2de48c4da91783a5af9fc5237/packages/react-dom-bindings/src/shared/possibleStandardNames.js
-
 // When adding attributes to the HTML or SVG allowed attribute list, be sure to
 // also add them to this module to ensure casing and incorrect name
 // warnings.
-export const standardAttributesToReactProps: Record<string, string> = {
+export const possibleStandardNames: Record<string, string> = {
   // HTML
   accept: "accept",
   acceptcharset: "acceptCharset",
@@ -506,6 +504,4 @@ export const standardAttributesToReactProps: Record<string, string> = {
   ychannelselector: "yChannelSelector",
   z: "z",
   zoomandpan: "zoomAndPan",
-  // added by us
-  dirname: "dirName",
 };

packages/html-data/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "typecheck": "tsc",
     "build:elements": "tsx --conditions=webstudio ./bin/elements.ts && prettier --write ./src/__generated__",
-    "build:attributes": "tsx --conditions=webstudio ./bin/attributes.ts && prettier --write ./src/__generated__",
+    "build:attributes": "tsx --conditions=webstudio ./bin/attributes.ts && prettier --write ./src/__generated__ ../react-sdk/src/__generated__",
     "build:aria": "tsx --conditions=webstudio ./bin/aria.ts && prettier --write ./src/__generated__"
   },
   "devDependencies": {