remove base input element type

FartLabs · Nov 4, 2024 · 87784b8 · 87784b8
1 parent bd30f7b
commit 87784b8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 250 deletions.
diff --git a/cli/codegen.ts b/cli/codegen.ts
@@ -243,17 +243,26 @@ export function addPropsInterfaces(
 
   switch (descriptor.tag) {
     case "input": {
-      // Use base input interface.
-      const baseInterfaceName = `${descriptor.propsInterfaceName}Base`;
+      sourceFile.addTypeAlias({
+        name: "InputElementType",
+        isExported: true,
+        type: getInputTypes().map((type) => `"${type}"`).join(" | "),
+      });
+
       sourceFile.addInterface({
-        name: baseInterfaceName,
+        name: descriptor.propsInterfaceName,
         isExported: true,
         extends: ["GlobalAttributes"],
         properties: [
           ...properties,
+          {
+            name: "type",
+            type: "InputElementType | undefined",
+          },
           {
             name: "value",
             type: "string | undefined",
+            hasQuestionToken: true,
             docs: toDocs({
               description: "`value` is the value of the input element.",
               see:
@@ -263,43 +272,7 @@ export function addPropsInterfaces(
         ],
         docs: toDocs({
           description:
-            `${baseInterfaceName} are the base props for the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
-          see: descriptor.see,
-          isDeprecated: descriptor.isDeprecated,
-          isExperimental: descriptor.isExperimental,
-        }),
-      });
-
-      // Add the input types.
-      const inputInterfaceNames: string[] = [];
-      for (const inputType of getInputTypes()) {
-        const inputInterfaceName = toPascalCase(inputType) +
-          descriptor.propsInterfaceName;
-        inputInterfaceNames.push(inputInterfaceName);
-        sourceFile.addInterface({
-          name: inputInterfaceName,
-          isExported: true,
-          extends: [baseInterfaceName],
-          properties: [
-            { name: "type", type: `'${inputType}'` },
-          ],
-          docs: toDocs({
-            description:
-              `${inputInterfaceName} are the props for the [\`${descriptor.tag}\`](${descriptor.see}) element with the \`type="${inputType}"\` attribute.`,
-            see: descriptor.see,
-            isDeprecated: descriptor.isDeprecated,
-            isExperimental: descriptor.isExperimental,
-          }),
-        });
-      }
-
-      sourceFile.addTypeAlias({
-        name: descriptor.propsInterfaceName,
-        isExported: true,
-        type: inputInterfaceNames.join(" | "),
-        docs: toDocs({
-          description:
-            `${descriptor.propsInterfaceName} are the props for the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
+            `${descriptor.propsInterfaceName} are the base props for the [\`${descriptor.tag}\`](${descriptor.see}) element.`,
           see: descriptor.see,
           isDeprecated: descriptor.isDeprecated,
           isExperimental: descriptor.isExperimental,

diff --git a/input.ts b/input.ts
@@ -6,11 +6,35 @@
 import type { AnyProps, GlobalAttributes } from "./lib/mod.ts";
 import { renderElement } from "./lib/mod.ts";
 
-/**
- * InputElementPropsBase are the base props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface InputElementPropsBase extends GlobalAttributes {
+export type InputElementType =
+  | "button"
+  | "checkbox"
+  | "color"
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "file"
+  | "hidden"
+  | "image"
+  | "month"
+  | "number"
+  | "password"
+  | "radio"
+  | "range"
+  | "reset"
+  | "search"
+  | "submit"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week";
+
+/**
+ * InputElementProps are the base props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element.
+ * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
+ */
+export interface InputElementProps extends GlobalAttributes {
   /**
    * `accept` is an attribute of the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element.
    * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input#accept>
@@ -165,217 +189,14 @@ export interface InputElementPropsBase extends GlobalAttributes {
    * @deprecated
    */
   "x-moz-errormessage"?: string | undefined;
+  type: InputElementType | undefined;
   /**
    * `value` is the value of the input element.
    * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input#value>
    */
-  value: string | undefined;
-}
-
-/**
- * ButtonInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="button"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface ButtonInputElementProps extends InputElementPropsBase {
-  type: "button";
-}
-
-/**
- * CheckboxInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="checkbox"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface CheckboxInputElementProps extends InputElementPropsBase {
-  type: "checkbox";
-}
-
-/**
- * ColorInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="color"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface ColorInputElementProps extends InputElementPropsBase {
-  type: "color";
-}
-
-/**
- * DateInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="date"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface DateInputElementProps extends InputElementPropsBase {
-  type: "date";
+  value?: string | undefined;
 }
 
-/**
- * DatetimeLocalInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="datetime-local"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface DatetimeLocalInputElementProps extends InputElementPropsBase {
-  type: "datetime-local";
-}
-
-/**
- * EmailInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="email"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface EmailInputElementProps extends InputElementPropsBase {
-  type: "email";
-}
-
-/**
- * FileInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="file"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface FileInputElementProps extends InputElementPropsBase {
-  type: "file";
-}
-
-/**
- * HiddenInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="hidden"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface HiddenInputElementProps extends InputElementPropsBase {
-  type: "hidden";
-}
-
-/**
- * ImageInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="image"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface ImageInputElementProps extends InputElementPropsBase {
-  type: "image";
-}
-
-/**
- * MonthInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="month"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface MonthInputElementProps extends InputElementPropsBase {
-  type: "month";
-}
-
-/**
- * NumberInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="number"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface NumberInputElementProps extends InputElementPropsBase {
-  type: "number";
-}
-
-/**
- * PasswordInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="password"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface PasswordInputElementProps extends InputElementPropsBase {
-  type: "password";
-}
-
-/**
- * RadioInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="radio"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface RadioInputElementProps extends InputElementPropsBase {
-  type: "radio";
-}
-
-/**
- * RangeInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="range"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface RangeInputElementProps extends InputElementPropsBase {
-  type: "range";
-}
-
-/**
- * ResetInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="reset"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface ResetInputElementProps extends InputElementPropsBase {
-  type: "reset";
-}
-
-/**
- * SearchInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="search"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface SearchInputElementProps extends InputElementPropsBase {
-  type: "search";
-}
-
-/**
- * SubmitInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="submit"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface SubmitInputElementProps extends InputElementPropsBase {
-  type: "submit";
-}
-
-/**
- * TelInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="tel"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface TelInputElementProps extends InputElementPropsBase {
-  type: "tel";
-}
-
-/**
- * TextInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="text"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface TextInputElementProps extends InputElementPropsBase {
-  type: "text";
-}
-
-/**
- * TimeInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="time"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface TimeInputElementProps extends InputElementPropsBase {
-  type: "time";
-}
-
-/**
- * UrlInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="url"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface UrlInputElementProps extends InputElementPropsBase {
-  type: "url";
-}
-
-/**
- * WeekInputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element with the `type="week"` attribute.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export interface WeekInputElementProps extends InputElementPropsBase {
-  type: "week";
-}
-
-/**
- * InputElementProps are the props for the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element.
- * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>
- */
-export type InputElementProps =
-  | ButtonInputElementProps
-  | CheckboxInputElementProps
-  | ColorInputElementProps
-  | DateInputElementProps
-  | DatetimeLocalInputElementProps
-  | EmailInputElementProps
-  | FileInputElementProps
-  | HiddenInputElementProps
-  | ImageInputElementProps
-  | MonthInputElementProps
-  | NumberInputElementProps
-  | PasswordInputElementProps
-  | RadioInputElementProps
-  | RangeInputElementProps
-  | ResetInputElementProps
-  | SearchInputElementProps
-  | SubmitInputElementProps
-  | TelInputElementProps
-  | TextInputElementProps
-  | TimeInputElementProps
-  | UrlInputElementProps
-  | WeekInputElementProps;
-
 /**
  * input renders the [`input`](https://developer.mozilla.org/docs/Web/HTML/Element/input) element.
  * @see <https://developer.mozilla.org/docs/Web/HTML/Element/input>