add special case for input element types

Resolves #6.
FartLabs · Apr 7, 2024 · f6fdedd · f6fdedd
1 parent 785956b
commit f6fdedd
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 33 deletions.
diff --git a/cli/codegen.ts b/cli/codegen.ts
@@ -65,31 +65,21 @@ if (import.meta.main) {
     isExported: true,
     name: "GlobalAttributes",
     extends: ["DataAttributes"],
-    docs: [{
+    docs: toDocs({
       description:
         "GlobalAttributes are the global attributes for HTML elements.",
-      tags: [
-        {
-          tagName: "see",
-          text: "https://developer.mozilla.org/docs/Web/HTML/Global_attributes",
-        },
-      ],
-    }],
+      see: "https://developer.mozilla.org/docs/Web/HTML/Global_attributes",
+    }),
   });
   globalAttrsFile.addInterface({
     isExported: true,
     name: "DataAttributes",
-    docs: [{
+    docs: toDocs({
       description:
         "DataAttributes are the attributes that start with `data-` for HTML elements.",
-      tags: [
-        {
-          tagName: "see",
-          text:
-            "<https://developer.mozilla.org/docs/Web/HTML/Global_attributes#data-*>",
-        },
-      ],
-    }],
+      see:
+        "https://developer.mozilla.org/docs/Web/HTML/Global_attributes#data-*",
+    }),
     properties: [
       { name: "[attr: `data-${string}`]", type: "string | undefined" },
     ],
@@ -136,32 +126,42 @@ if (import.meta.main) {
     });
 
     // Add an interface for the props.
+    type InterfaceProperties = Parameters<
+      typeof sourceFile.addInterface
+    >[0]["properties"];
+    const properties: InterfaceProperties = descriptor.attrs.map((attr) => ({
+      name: attr.includes("-") ? `'${attr}'` : attr,
+      hasQuestionToken: true,
+      type: "string | undefined",
+      docs: toDocs({
+        description:
+          `\`${attr}\` is an attribute of the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
+        isExperimental: bcd.html.elements[descriptor.tag][attr].__compat
+          ?.status?.experimental,
+        isDeprecated: bcd.html.elements[descriptor.tag][attr].__compat
+          ?.status?.deprecated,
+      }),
+    }));
+    if (descriptor.tag === "input") {
+      properties.unshift({
+        name: "type",
+        hasQuestionToken: true,
+        type: getInputTypes().map((type) => `'${type}'`).join(" | "),
+      });
+    }
+
     sourceFile.addInterface({
       name: descriptor.propsInterfaceName,
       isExported: true,
       extends: ["GlobalAttributes"],
+      properties,
       docs: toDocs({
         description:
           `${descriptor.propsInterfaceName} are the props for the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
         see: descriptor.see,
         isDeprecated: descriptor.isDeprecated,
         isExperimental: descriptor.isExperimental,
       }),
-      properties: descriptor.attrs.map((attr) => {
-        return {
-          name: attr.includes("-") ? `'${attr}'` : attr,
-          hasQuestionToken: true,
-          type: "string | undefined",
-          docs: toDocs({
-            description:
-              `\`${attr}\` is an attribute of the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
-            isExperimental: bcd.html.elements[descriptor.tag][attr].__compat
-              ?.status?.experimental,
-            isDeprecated: bcd.html.elements[descriptor.tag][attr].__compat
-              ?.status?.deprecated,
-          }),
-        };
-      }),
     });
 
     // Add the element render function.
@@ -280,6 +280,17 @@ export function getAttrs(tag: string): string[] {
     .filter((attr) => !attr.includes("_"));
 }
 
+/**
+ * getInputTypes returns the types of input elements.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+export function getInputTypes(): string[] {
+  const re = /^type_/;
+  return Object.keys(bcd.html.elements.input)
+    .filter((attr) => re.test(attr))
+    .map((attr) => attr.replace(re, ""));
+}
+
 /**
  * capitalize capitalizes the first letter of the given string.
  */

diff --git a/input.ts b/input.ts
@@ -6,6 +6,29 @@ import { renderElement } from "./lib/mod.ts";
  * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
  */
 export interface InputElementProps extends GlobalAttributes {
+  type?:
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "hidden"
+    | "image"
+    | "month"
+    | "number"
+    | "password"
+    | "radio"
+    | "range"
+    | "reset"
+    | "search"
+    | "submit"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week";
   /** `accept` is an attribute of the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element. */
   accept?: string | undefined;
   /**

diff --git a/lib/global_attributes.ts b/lib/global_attributes.ts
@@ -1,6 +1,6 @@
 /**
  * GlobalAttributes are the global attributes for HTML elements.
- * @see https://developer.mozilla.org/docs/Web/HTML/Global_attributes
+ * @see <https://developer.mozilla.org/docs/Web/HTML/Global_attributes>
  */
 export interface GlobalAttributes extends DataAttributes {
   /** @see <https://developer.mozilla.org/docs/Web/HTML/Global_attributes/accesskey> */