feat: migrate forms components to html elements (#5230)

Ref #3632

This is big one. So I switched to html elements whole forms section in
components. Though here I introduced some deviation from specification

**Textarea**

Initial value is represented as text content
```html
<textarea>content</textarea>
````

Though it is trickier to manage text content as state and all frameworks
rely on value property of textarea dom interface.

**Select**

Similar story. There is no value attribute and state is represented by
selected boolean attribute on options

```html
<select>
  <option value="value1" selected></option>
  <option value="value2"></option>
</select>
```

We replace selected attribute on option with value attribute on selected
when paste.

So basically all form elements are using "value" and "checked"
attributes which can be easily mapped to html and all frameworks.

Author: TrySound

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

@@ -40,6 +40,7 @@ import {
   standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
+import { Input, Select, Textarea } from "@webstudio-is/sdk-components-react";
 import {
   $propValuesByInstanceSelectorWithMemoryProps,
   getIndexedInstanceId,
@@ -475,6 +476,16 @@ export const WebstudioComponentCanvas = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === collectionComponent) {
@@ -670,6 +681,16 @@ export const WebstudioComponentPreview = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === blockComponent) {

apps/builder/app/shared/html.test.tsx

@@ -249,3 +249,55 @@ test("optionally paste svg as html embed", () => {
     )
   );
 });
+
+test("generate textarea element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <textarea>
+          my text
+        </textarea>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="textarea" value="my text" />
+      </ws.element>
+    )
+  );
+});
+
+test("generate select element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <select>
+          <option value="one">One</option>
+          <option value="two" selected>Two</option>
+        </select>
+        <select>
+          <option>One</option>
+          <option selected>Two</option>
+        </select>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="select" value="two">
+          <ws.element ws:tag="option" value="one">
+            One
+          </ws.element>
+          <ws.element ws:tag="option" value="two">
+            Two
+          </ws.element>
+        </ws.element>
+        <ws.element ws:tag="select" value="Two">
+          <ws.element ws:tag="option">One</ws.element>
+          <ws.element ws:tag="option">Two</ws.element>
+        </ws.element>
+      </ws.element>
+    )
+  );
+});

apps/builder/app/shared/html.ts

@@ -176,6 +176,10 @@ export const generateFragmentFromHtml = (
         createLocalStyles(instanceId, attr.value);
         continue;
       }
+      // selected option is represented as fake value attribute on select element
+      if (node.tagName === "option" && attr.name === "selected") {
+        continue;
+      }
       if (type === "string") {
         props.push({ id, instanceId, name, type, value: attr.value });
         continue;
@@ -195,6 +199,32 @@ export const generateFragmentFromHtml = (
       contentTags,
       richTextContentTags
     );
+    if (node.tagName === "select") {
+      for (const childNode of node.childNodes) {
+        if (defaultTreeAdapter.isElementNode(childNode)) {
+          if (
+            childNode.tagName === "option" &&
+            childNode.attrs.find((attr) => attr.name === "selected")
+          ) {
+            const valueAttr = childNode.attrs.find(
+              (attr) => attr.name === "value"
+            );
+            // if value attribute is omitted, the value is taken from the text content of the option element
+            const childText = childNode.childNodes.find((childNode) =>
+              defaultTreeAdapter.isTextNode(childNode)
+            );
+            // selected option is represented as fake value attribute on select element
+            props.push({
+              id: `${instance.id}:value`,
+              instanceId: instance.id,
+              name: "value",
+              type: "string",
+              value: valueAttr?.value ?? childText?.value.trim() ?? "",
+            });
+          }
+        }
+      }
+    }
     for (const childNode of node.childNodes) {
       if (defaultTreeAdapter.isElementNode(childNode)) {
         const child = convertElementToInstance(childNode);
@@ -211,6 +241,18 @@ export const generateFragmentFromHtml = (
           // collapse spacing characters inside of text to avoid preserved newlines
           value: childNode.value.replaceAll(/\s+/g, " "),
         };
+        // textarea content is initial value
+        // and represented with fake value attribute
+        if (node.tagName === "textarea") {
+          props.push({
+            id: `${instance.id}:value`,
+            instanceId: instance.id,
+            name: "value",
+            type: "string",
+            value: child.value.trim(),
+          });
+          continue;
+        }
         // when element has content elements other than supported by rich text
         // wrap its text children with span, for example
         // <div>

apps/builder/app/shared/nano-states/components.ts

@@ -129,6 +129,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });
@@ -147,6 +148,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });

packages/cli/src/framework-react-router.ts

@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${reactRouter}:Body`,
       a: `${reactRouter}:Link`,
       form: `${reactRouter}:RemixForm`,

packages/cli/src/framework-remix.ts

@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${remix}:Body`,
       a: `${remix}:Link`,
       form: `${remix}:RemixForm`,

packages/cli/src/framework-vike-ssg.ts

@@ -53,7 +53,11 @@ export const createFramework = async (): Promise<Framework> => {
   return {
     metas,
     components,
-    tags: {},
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
+    },
     html: ({ pagePath }: { pagePath: string }) => {
       // ignore dynamic pages in static export
       if (isPathnamePattern(pagePath)) {

packages/html-data/bin/attributes.ts

@@ -73,20 +73,51 @@ const overrides: Record<
     popovertarget: false,
     popovertargetaction: false,
   },
+  label: {
+    for: { required: true },
+  },
   dialog: {
     closedby: false,
   },
   img: {
     ismap: false,
   },
   input: {
+    name: { required: true },
+    value: { required: true },
+    checked: { required: true },
+    type: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
     alpha: false,
     colorspace: false,
     // react types have it only in textarea
     dirname: false,
     popovertarget: false,
     popovertargetaction: false,
   },
+  textarea: {
+    name: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+  },
+  select: {
+    name: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+    // mutltiple mode is not considered accessible
+    // and we cannot express it in builder so easier to remove
+    multiple: false,
+  },
+  option: {
+    label: { required: true },
+    value: { required: true },
+    disabled: { required: true },
+    // enforce fake value attribute on select element
+    selected: false,
+  },
 };
 
 // Crawl WHATWG HTML.
@@ -99,6 +130,26 @@ const [tbody] = findTags(table, "tbody");
 const rows = findTags(tbody, "tr");
 
 const attributesByTag: Record<string, Attribute[]> = {};
+// textarea does not have value attribute and text content is used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.textarea = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
+// select does not have value attribute and selected options are used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.select = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
 
 for (const row of rows) {
   const attribute = getTextContent(row.childNodes[0]).trim();
@@ -118,6 +169,32 @@ for (const row of rows) {
   if (value.includes("valid navigable target name or keyword")) {
     possibleOptions = ["_blank", "_self", "_parent", "_top"];
   }
+  if (value.includes("input type keyword")) {
+    possibleOptions = [
+      "hidden",
+      "text",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "password",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "number",
+      "range",
+      "color",
+      "checkbox",
+      "radio",
+      "file",
+      "submit",
+      "image",
+      "reset",
+      "button",
+    ];
+  }
   let type: "string" | "boolean" | "number" | "select" = "string";
   let options: undefined | string[];
   if (possibleOptions.length > 0) {

packages/html-data/bin/elements.ts

@@ -46,8 +46,13 @@ const elementsByTag: Record<string, Element> = {};
       });
     const description = getTextContent(row.childNodes[1]);
     const categories = parseList(getTextContent(row.childNodes[2]));
-    const children = parseList(getTextContent(row.childNodes[4]));
+    let children = parseList(getTextContent(row.childNodes[4]));
     for (const tag of elements) {
+      // textarea does not have value attribute and text content is used as initial value
+      // introduce fake value attribute to manage initial state similar to input
+      if (tag === "textarea") {
+        children = [];
+      }
       elementsByTag[tag] = {
         description,
         categories,