Refactoring form components

src/components/ui/forms/CheckboxField.svelte

@@ -1,15 +1,17 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface CheckboxFieldProps {
+    name?: string;
+    checked: boolean;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {boolean} checked
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, checked = $bindable(), children } = $props();
+  let {
+    name = undefined,
+    checked = $bindable(),
+    children
+  }: CheckboxFieldProps = $props();
 </script>
 
 <input bind:checked={checked} {name} type="checkbox">

src/components/ui/forms/FormContainer.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  interface Props {
-    children?: import('svelte').Snippet;
+  import type { Snippet } from "svelte";
+
+  interface FormContainerProps {
+    children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: FormContainerProps = $props();
 </script>
 
 <form>

src/components/ui/forms/FormControl.svelte

@@ -1,14 +1,15 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface FormControlProps {
+    label?: string;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [label]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { label = undefined, children } = $props();
+  let {
+    label = undefined,
+    children
+  }: FormControlProps = $props();
 </script>
 
 <label class="control">

src/components/ui/forms/SelectField.svelte

@@ -1,34 +1,35 @@
-<script>
+<script lang="ts">
+  type SelectFieldOptionsObject = Record<string, string>;
 
+  interface SelectFieldProps {
+    options?: string[] | SelectFieldOptionsObject;
+    name?: string;
+    id?: string;
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string[]|Record<string, string>} [options]
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [id]
-   * @property {string|undefined} [value]
-   */
-
-  /** @type {Props} */
   let {
     options = [],
     name = undefined,
     id = undefined,
     value = $bindable(undefined)
-  } = $props();
+  }: SelectFieldProps = $props();
 
-  /** @type {Record<string, string>} */
-  const optionPairs = $state({});
+  const optionPairs = $derived.by<SelectFieldOptionsObject>(() => {
+    const resultPairs: SelectFieldOptionsObject = {};
 
-  if (Array.isArray(options)) {
-    for (let option of options) {
-      optionPairs[option] = option;
+    if (Array.isArray(options)) {
+      for (let optionName of options) {
+        resultPairs[optionName] = optionName;
+      }
+    } else if (options && typeof options === 'object') {
+      Object.keys(options).forEach(optionKey => {
+        resultPairs[optionKey] = options[optionKey];
+      })
     }
-  } else if (options && typeof options === 'object') {
-    Object.keys(options).forEach((key) => {
-      optionPairs[key] = options[key];
-    })
-  }
+
+    return resultPairs;
+  });
 </script>
 
 <select bind:value={value} {id} {name}>

src/components/ui/forms/TagCategorySelectField.svelte

@@ -1,28 +1,26 @@
-<script>
+<script lang="ts">
   import SelectField from "$components/ui/forms/SelectField.svelte";
   import { categories } from "$lib/booru/tag-categories";
 
+  interface TagCategorySelectFieldProps {
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} [value]
-   */
+  let {
+    value = $bindable('')
+  }: TagCategorySelectFieldProps = $props();
 
-  /** @type {Props} */
-  let { value = $bindable('') } = $props();
+  let tagCategoriesOptions = $derived.by<Record<string, string>>(() => {
+    return categories.reduce<Record<string, string>>((options, category) => {
+      options[category] = category
+        .replace('-', ' ')
+        .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
 
-  /** @type {Record<string, string>} */
-  let tagCategoriesOptions = $state({
-    '': 'Default'
+      return options;
+    }, {
+      '': 'Default'
+    })
   });
-
-  tagCategoriesOptions = categories.reduce((options, category) => {
-    options[category] = category
-      .replace('-', ' ')
-      .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
-
-    return options;
-  }, tagCategoriesOptions);
 </script>
 
 <SelectField bind:value={value} name="tag_color" options={tagCategoriesOptions}/>

src/components/ui/forms/TextField.svelte

@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
+  interface TextFieldProps {
+    name?: string;
+    placeholder?: string;
+    value?: string;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [placeholder]
-   * @property {string} [value]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
+  let {
+    name = undefined,
+    placeholder = undefined,
+    value = $bindable('')
+  }: TextFieldProps = $props();
 </script>
 
 <input bind:value={value} {name} {placeholder} type="text">