TypeScript conversion Phase 4: Complex modules and root files

Converted remaining core source files from .mjs to .mts:
- src/lib/form/form.mts - Main form logic with proper typing
- src/lib/group/group.mts - Beaker group management with type safety
- src/lib/webcomponent/index.mts - Web component with TypeScript
- src/lib/webcomponent/lib.mts - Event name mapping utility
- index.mts - Root entry point with proper exports

All complex modules now properly typed with:
- No 'any' types used
- Generic constraints for flexibility
- Strong typing for DOM interactions
- Proper interface definitions exported

Progress: 17/29 files converted (59%)

Remaining: 12 test .spec.mts files + config updates

Co-authored-by: tanepiper <376930+tanepiper@users.noreply.github.com>

Author: Copilot

packages/formula/index.mts

@@ -0,0 +1,36 @@
+import { createForm } from './src/lib/form/form.mjs';
+import { createGroup } from './src/lib/group/group.mjs';
+
+import type { FormulaStores, BeakerStores, FormulaOptions, BeakerOptions } from './src/lib/shared/types.mjs';
+import type { Formula } from './src/lib/form/form.mjs';
+import type { Beaker } from './src/lib/group/group.mjs';
+
+export { FormulaWebComponent } from './src/lib/webcomponent/index.mjs';
+
+/**
+ * A global map of stores for elements with an `id` property and the `use` directive,
+ * if no ID is used the store is not added
+ */
+export const formulaStores = new Map<string, FormulaStores>();
+
+/**
+ * A global map of stores for beaker groups with an `id` property and the `use` directive,
+ * if no ID is used the store is not added
+ */
+export const beakerStores = new Map<string, BeakerStores>();
+
+/**
+ * The `formula` function returns a form object that can be bound to any HTML
+ * element that contains form inputs. Once bound you can get the current values
+ */
+export function formula(options?: FormulaOptions): Formula & FormulaStores {
+  return createForm(options || {}, formulaStores, undefined, {}) as Formula & FormulaStores;
+}
+
+/**
+ * The beaker function returns an instance of a group of elements and their stores, it also provides methods
+ * to set the group value store
+ */
+export function beaker(options?: BeakerOptions): Beaker & BeakerStores {
+  return createGroup(options || {}, beakerStores) as Beaker & BeakerStores;
+}

packages/formula/src/lib/form/form.mts

@@ -0,0 +1,177 @@
+import { getFormFields, getGroupFields } from '../shared/fields.mjs';
+import { createHandler, createSubmitHandler } from './event.mjs';
+import { createReset } from './init.mjs';
+import { createTouchHandlers } from './touch.mjs';
+import { createDirtyHandler } from './dirty.mjs';
+
+import { createFormStores } from '../shared/stores.mjs';
+import { setAriaButtons, setAriaContainer, setAriaRole, setAriaStates } from './aria.mjs';
+
+import type { FormulaStores, FormulaOptions } from '../shared/types.mjs';
+
+export interface Formula {
+  init: (node: HTMLElement) => FormulaForm;
+  updateForm: (updatedOpts?: FormulaOptions) => void;
+  destroyForm: () => void;
+  resetForm: () => void;
+  stores: FormulaStores;
+}
+
+export interface FormulaForm {
+  root: HTMLElement;
+  elements: Array<[string, HTMLElement[]]>;
+  destroy: () => void;
+}
+
+export function createForm(
+  options: FormulaOptions,
+  globalStore: Map<string, FormulaStores> | undefined,
+  groupName: string | undefined,
+  initialData: Record<string, unknown>
+): Formula {
+  const eventHandlers = new Map<HTMLElement, Array<() => void>>();
+  const hiddenGroups = new Map<string, HTMLElement[]>();
+  const touchHandlers = new Set<() => void>();
+  const dirtyHandlers = new Set<() => void>();
+
+  const stores = createFormStores(options, initialData);
+  const isGroup = typeof groupName !== 'undefined';
+  const initialOptions = options;
+  let submitHandler: ((e: Event) => void) | undefined = undefined;
+  let unsub = () => {};
+  let innerReset = () => {};
+
+  let groupedMap: Array<[string, HTMLElement[]]> = [];
+
+  function bindElements(node: HTMLElement, innerOpt: FormulaOptions = {}) {
+    if (!innerOpt?.preChanges) {
+      innerOpt.preChanges = () => {
+        node?.parentElement?.dispatchEvent(new CustomEvent('form:preChanges', { detail: undefined }));
+      };
+    }
+    if (!innerOpt?.postChanges) {
+      innerOpt.postChanges = (values: Record<string, unknown>) => {
+        node?.parentElement?.dispatchEvent(new CustomEvent('form:postChanges', { detail: values }));
+      };
+    }
+
+    const formElements = isGroup ? getGroupFields(node) : getFormFields(node);
+
+    node.setAttribute(`data-formula-${isGroup ? 'row' : 'form'}`, 'true');
+    setAriaContainer(node, isGroup);
+    setAriaButtons(node);
+
+    groupedMap = [
+      ...formElements.reduce((entryMap, e) => {
+        const formulaName = e.dataset.formulaName;
+        const name = formulaName || e.getAttribute('name') || '';
+        return entryMap.set(name, [...(entryMap.get(name) || []), e]);
+      }, new Map<string, HTMLElement[]>()),
+    ];
+
+    innerReset = createReset(node, groupedMap, stores, innerOpt);
+
+    groupedMap.forEach(([name, elements]) => {
+      if ((elements[0] as HTMLInputElement).type === 'hidden') {
+        hiddenGroups.set(name, elements);
+        return;
+      }
+
+      touchHandlers.add(createTouchHandlers(name, elements, stores));
+      dirtyHandlers.add(createDirtyHandler(name, elements, stores));
+
+      elements.forEach((el) => {
+        if (isGroup && groupName) {
+          el.setAttribute('data-in-group', groupName);
+        }
+        setAriaRole(el, elements);
+        setAriaStates(el);
+
+        const customBindings = el.dataset.formulaBind;
+        if (customBindings) {
+          const cleanups: Array<() => void> = [];
+          customBindings.split('|').forEach((event) => {
+            cleanups.push(createHandler(name, event, el, elements, stores, innerOpt, hiddenGroups));
+          });
+          eventHandlers.set(el, cleanups);
+        } else if (el instanceof HTMLSelectElement) {
+          eventHandlers.set(el, [createHandler(name, 'change', el, elements, stores, innerOpt, hiddenGroups)]);
+        } else {
+          const changeEventTypes = ['radio', 'checkbox', 'file', 'range', 'color', 'date', 'time', 'week', 'number'];
+          const cleanups: Array<() => void> = [];
+
+          if (changeEventTypes.includes((el as HTMLInputElement).type)) {
+            cleanups.push(createHandler(name, 'change', el, elements, stores, innerOpt, hiddenGroups));
+          }
+
+          if ((el as HTMLInputElement).type !== 'hidden') {
+            cleanups.push(createHandler(name, 'keyup', el, elements, stores, innerOpt, hiddenGroups));
+          }
+          
+          if (cleanups.length > 0) {
+            eventHandlers.set(el, cleanups);
+          }
+        }
+      });
+    });
+
+    if (node.id && globalStore) globalStore.set(node.id, stores);
+
+    if (node instanceof HTMLFormElement) {
+      submitHandler = createSubmitHandler(stores, node);
+      node.addEventListener('submit', submitHandler);
+    }
+    stores.formReady.set(true);
+  }
+
+  let currentNode: HTMLElement;
+
+  function cleanupSubscriptions() {
+    unsub && unsub();
+    [...eventHandlers].forEach(([el, fns]) => {
+      (el as HTMLInputElement).setCustomValidity?.('');
+      fns.forEach(fn => fn());
+    });
+    [...touchHandlers, ...dirtyHandlers].forEach((fn) => fn());
+    [eventHandlers, touchHandlers, dirtyHandlers].forEach((h) => h.clear());
+    if (submitHandler && currentNode instanceof HTMLFormElement) {
+      currentNode.removeEventListener('submit', submitHandler);
+    }
+  }
+
+  return {
+    init: (node: HTMLElement): FormulaForm => {
+      currentNode = node;
+      bindElements(node, options);
+      return {
+        root: node,
+        elements: groupedMap,
+        destroy: () => {
+          stores.formReady.set(false);
+          cleanupSubscriptions();
+          currentNode.id && globalStore && globalStore.delete(currentNode.id);
+        },
+      };
+    },
+    updateForm: (updatedOpts?: FormulaOptions) => {
+      stores.formReady.set(false);
+      cleanupSubscriptions();
+      bindElements(currentNode, updatedOpts || initialOptions);
+    },
+    destroyForm: () => {
+      stores.formReady.set(false);
+      cleanupSubscriptions();
+      currentNode.id && globalStore && globalStore.delete(currentNode.id);
+    },
+    resetForm: () => {
+      innerReset();
+      [...touchHandlers, ...dirtyHandlers].forEach((fn) => fn());
+      groupedMap.forEach(([name, elements]) => {
+        touchHandlers.add(createTouchHandlers(name, elements, stores));
+        dirtyHandlers.add(createDirtyHandler(name, elements, stores));
+      });
+    },
+    stores,
+    ...stores,
+  };
+}

packages/formula/src/lib/group/group.mts

@@ -0,0 +1,170 @@
+import { createGroupStores } from '../shared/stores.mjs';
+import { createForm } from '../form/form.mjs';
+
+import type { BeakerStores, BeakerOptions, FormulaStores, FormulaOptions } from '../shared/types.mjs';
+import type { Formula } from '../form/form.mjs';
+
+export interface Beaker {
+  group: (node: HTMLElement) => { destroy: () => void };
+  update: (options: FormulaOptions) => void;
+  destroy: () => void;
+  forms: Map<HTMLElement, Formula>;
+  stores: BeakerStores;
+  init: (items: Array<Record<string, unknown>>) => void;
+  add: (item: Record<string, unknown>) => void;
+  set: (index: number, item: Record<string, unknown>) => void;
+  delete: (index: number) => void;
+  clear: () => void;
+}
+
+let groupCounter = 0;
+
+export function createGroup(
+  options: BeakerOptions,
+  beakerStores: Map<string, BeakerStores>
+): Beaker {
+  const groupStores = createGroupStores(options);
+  let groupName: string;
+  let globalObserver: MutationObserver;
+
+  const { defaultValues = [], ...formulaOptions } = options || {};
+
+  const formulaInstances = new Map<HTMLElement, Formula>();
+  const formInstances = new Map<HTMLElement, { root: HTMLElement; elements: Array<[string, HTMLElement[]]>; destroy: () => void }>();
+  const subscriptions = new Set<() => void>();
+
+  function destroyGroup() {
+    formInstances.forEach((instance) => instance.destroy());
+    subscriptions.forEach((sub) => sub());
+    formInstances.clear();
+    formulaInstances.clear();
+    subscriptions.clear();
+  }
+
+  function cleanupStores(rows: Element[]) {
+    for (const key of Object.keys(groupStores)) {
+      if (['formValues', 'initialValues', 'submitValues'].includes(key)) continue;
+      const state = (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].get();
+      (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].set(
+        Array.isArray(state) ? state.slice(0, rows.length) : state
+      );
+    }
+  }
+
+  function setupSubscriptions(form: Formula, index: number) {
+    const formStores = Object.entries(form.stores) as Array<[string, { subscribe: (fn: (value: unknown) => void) => () => void }]>;
+    for (const [key, store] of formStores) {
+      let initial = true;
+      const unsub = store.subscribe((value) => {
+        if (initial && key === 'formValues') {
+          initial = false;
+          return;
+        }
+        initial = false;
+        const state = (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].get();
+        if (Array.isArray(state)) {
+          const newState = [...state];
+          newState.splice(index, 1, value);
+          (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].set(newState);
+        } else {
+          (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].set(state);
+        }
+      });
+      subscriptions.add(unsub);
+    }
+  }
+
+  function groupHasChanged(rows: Element[]) {
+    groupStores.formReady.set(false);
+    const currentVals = groupStores.formValues.get();
+    destroyGroup();
+    cleanupStores(rows);
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i] as HTMLElement;
+      row.setAttribute('data-beaker-index', `${i}`);
+      const form = createForm(
+        {
+          ...formulaOptions,
+          defaultValues: defaultValues?.[i] || {},
+        },
+        undefined,
+        groupName,
+        currentVals[i] || {}
+      );
+      const instance = form.init(row);
+      formulaInstances.set(row, form);
+      formInstances.set(row, instance);
+      setupSubscriptions(form, i);
+    }
+    groupStores.formReady.set(true);
+  }
+
+  function setupGroupContainer(node: HTMLElement) {
+    globalObserver = new MutationObserver(() => {
+      const rows = node.querySelectorAll(':scope > *');
+      groupHasChanged(Array.from(rows));
+    });
+
+    globalObserver.observe(node, { childList: true });
+    const rows = node.querySelectorAll(':scope > *');
+    groupHasChanged(Array.from(rows));
+  }
+
+  return {
+    group: (node: HTMLElement) => {
+      if (node.id) {
+        groupName = node.id;
+        beakerStores.set(groupName, groupStores);
+      } else {
+        groupName = `beaker-group-${groupCounter++}`;
+        node.id = groupName;
+      }
+
+      node.setAttribute('data-beaker-group', 'true');
+      if (!node.hasAttribute('aria-role')) {
+        node.setAttribute('aria-role', 'group');
+      }
+      setupGroupContainer(node);
+
+      return {
+        destroy: () => {
+          if (groupName) {
+            beakerStores.delete(groupName);
+          }
+          destroyGroup();
+          globalObserver.disconnect();
+        },
+      };
+    },
+    update: (options: FormulaOptions) => {
+      formulaInstances.forEach((form) => form.updateForm(options));
+    },
+    destroy: () => {
+      if (groupName) {
+        beakerStores.delete(groupName);
+      }
+      destroyGroup();
+      globalObserver.disconnect();
+    },
+    forms: formulaInstances,
+    stores: groupStores,
+    init: (items: Array<Record<string, unknown>>) => groupStores.formValues.set(items),
+    add: (item: Record<string, unknown>) => groupStores.formValues.set([...groupStores.formValues.get(), item]),
+    set: (index: number, item: Record<string, unknown>) => {
+      const newState = [...groupStores.formValues.get()];
+      newState.splice(index, 1, item);
+      groupStores.formValues.set(newState);
+    },
+    delete: (index: number) =>
+      Object.keys(groupStores).forEach((key) => {
+        const state = (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].get();
+        if (Array.isArray(state)) {
+          const newState = [...state];
+          newState.splice(index, 1);
+          (groupStores as Record<string, { get: () => unknown; set: (value: unknown) => void }>)[key].set(newState);
+        }
+      }),
+    clear: () => groupStores.formValues.set([]),
+    ...groupStores,
+  };
+}