mayoiga 0.1.1 → 0.1.4

package/src/component.test.tsx

@@ -0,0 +1,204 @@
+import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import {test, expect} from 'vitest';
+
+import * as zod from 'zod';
+
+import {Field, Slicer} from './component';
+
+import {createFormHook} from './index';
+
+import type {Controller} from './index';
+
+const testSchema = zod.object({
+  name: zod.string(),
+  description: zod.string(),
+  age: zod
+    .string()
+    .transform((val) => Number(val))
+    .refine((val) => (Number.isNaN(val) ? 0 : val)),
+  marked: zod.boolean(),
+});
+
+// every fields are optional for test
+type FormStateBeforeValidation = {
+  name: string;
+  description: string;
+  age: string;
+  marked: boolean;
+};
+
+const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+
+// afterEach(cleanup);
+
+test('Field component works fine in basic usage.', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <Field controller={TestFormHook.controller} name="age">
+          {(tool) => <input data-testid="age-input" {...tool} />}
+        </Field>
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const INPUT_AGE = '42';
+
+  // calling `userEvent` in here will cause race condition...
+  await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBeNull();
+    });
+  });
+});
+
+test('Slice component works fine in basic usage.', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <Slicer controller={TestFormHook.controller} selector={(s) => [s.value.age] as const}>
+          {(tool, age: string) => (
+            <input data-testid="age-input" name="age" value={age} onChange={(e) => tool.handleChange('age' as const, e.target.value)} />
+          )}
+        </Slicer>
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const INPUT_AGE = '42';
+
+  // calling `userEvent` in here will cause race condition...
+  await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBeNull();
+    });
+  });
+});
+
+test('A user able to create a reusable component', async () => {
+  const TestFormHook = createTestHook();
+
+  function NarrowTypedExpected(props: {controller: Controller<{age: string}>}) {
+    return (
+      <Field controller={props.controller} name="age">
+        {(tool) => <input data-testid="age-input" {...tool} />}
+      </Field>
+    );
+  }
+
+  function ErrorDisplayer(props: {controller: Controller<{age: string}>}) {
+    const {controller} = props;
+    return (
+      <Slicer controller={controller} selector={(s) => [s.value.age] as const}>
+        {(tool, age: string) => (
+          <button
+            onClick={(e) => {
+              controller.actions.pushFormErrors((_state) => ({age: age === '42' ? 'yes!!!' : 'noooo'}));
+            }}
+          />
+        )}
+      </Slicer>
+    );
+  }
+
+  render(
+    <div>
+      <NarrowTypedExpected controller={TestFormHook.controller} />
+      <ErrorDisplayer controller={TestFormHook.controller} />
+    </div>,
+  );
+
+  const INPUT_AGE = '42';
+
+  // calling `userEvent` in here will cause race condition...
+  await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+  await userEvent.click(screen.getByRole('button'));
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBe('yes!!!');
+    });
+  });
+});
+
+test('`deps` field could destruct memoization', async () => {
+  const TestFormHook = createTestHook();
+  // intentional sample to replicate the situation
+  const OtherFormHook = createFormHook({minAge: '30'}, zod.object({minAge: zod.string()}));
+
+  const DATA_ID_RE_RENDER_BY_DEPS = 'refresh-by-deps';
+  const DATA_ID_NOT_RERENDER_NO_DEPS = 'no-refersh-no-deps';
+
+  function App() {
+    const minAge = OtherFormHook.useSelector((s) => Number(s.value.minAge));
+
+    return (
+      <div>
+        <Field controller={OtherFormHook.controller} name="minAge">
+          {(tool) => <input data-testid="minAgeInput" type="number" {...tool} />}
+        </Field>
+        <Field controller={TestFormHook.controller} name="age">
+          {(tool) => <input data-testid="ageInput" type="number" {...tool} />}
+        </Field>
+        <Slicer controller={TestFormHook.controller} selector={(s) => [Number(s.value.age)]} deps={[minAge]}>
+          {(_tool, age: number) => (
+            <div data-testid={DATA_ID_RE_RENDER_BY_DEPS}>{age >= minAge ? 'You can buy this content' : 'go home'}</div>
+          )}
+        </Slicer>
+        <Slicer controller={TestFormHook.controller} selector={(s) => [Number(s.value.age)]}>
+          {(_tool, age: number) => (
+            <div data-testid={DATA_ID_NOT_RERENDER_NO_DEPS}>{age >= minAge ? 'You can buy this content' : 'go home'}</div>
+          )}
+        </Slicer>
+      </div>
+    );
+  }
+
+  render(<App />);
+
+  await userEvent.type(screen.getByTestId('ageInput'), '16');
+
+  await waitFor(() => {
+    expect(screen.getByTestId(DATA_ID_RE_RENDER_BY_DEPS).textContent).toBe('go home');
+    // expect(await screen.findByText('You can buy this content')).toBeDefined();
+  });
+
+  await userEvent.clear(screen.getByTestId('minAgeInput'));
+  await userEvent.type(screen.getByTestId('minAgeInput'), '10');
+
+  await waitFor(() => {
+    expect(screen.getByTestId(DATA_ID_RE_RENDER_BY_DEPS).textContent, 'Slicer should re-execute renderProps if `deps` are changed').toBe(
+      'You can buy this content',
+    );
+  });
+  await waitFor(() => {
+    expect(
+      screen.getByTestId(DATA_ID_NOT_RERENDER_NO_DEPS).textContent,
+      'Same logic but would not refresh because external dependencies are not applied',
+    ).toBe('go home');
+  });
+});

package/src/component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type {SliceProps, FieldProps, StateRestriction, Controller} from './index';
+
+type ControlledComponentProps<State, Props> = Props & {
+  controller: Controller<State>;
+};
+
+export function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(
+  props: ControlledComponentProps<State, SliceProps<State, R>>,
+) {
+  const {controller, ...restProps} = props;
+  const {Slicer: Delegate} = controller.components;
+  return <Delegate {...restProps} />;
+}
+
+export function Field<State extends StateRestriction, Name extends keyof State>(
+  props: ControlledComponentProps<State, FieldProps<State, Name>>,
+) {
+  const {controller, ...restProps} = props;
+  const {Field: Delegate} = controller.components;
+  return <Delegate {...restProps} />;
+}

package/src/index.test.tsx

@@ -0,0 +1,122 @@
+import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import {test, expect} from 'vitest';
+
+import * as zod from 'zod';
+
+import {createFormHook, useFormSlice} from './index';
+
+import type {Controller} from './index';
+
+const testSchema = zod.object({
+  name: zod.string(),
+  description: zod.string(),
+  age: zod
+    .string()
+    .transform((val) => Number(val))
+    .refine((val) => (Number.isNaN(val) ? 0 : val)),
+  marked: zod.boolean(),
+});
+
+// every fields are optional for test
+type FormStateBeforeValidation = {
+  name: string;
+  description: string;
+  age: string;
+  marked: boolean;
+};
+
+const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+
+const AgeInputComponent = (props: {controller: Controller<FormStateBeforeValidation>}) => {
+  const {controller} = props;
+  const [[age, errorMessage], {handleChange}] = useFormSlice(controller, (s) => [s.value.age, s.errors.age] as const);
+  return (
+    <div>
+      <input
+        data-testid="age-input"
+        value={age}
+        name="age"
+        onChange={(e) => {
+          handleChange('age' as const, e.currentTarget.value);
+        }}
+      />
+      <span data-testid="age-error">{errorMessage}</span>
+    </div>
+  );
+};
+
+// afterEach(cleanup);
+
+test('useSelector can select the fields', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook.controller} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const INPUT_AGE = '4';
+
+  // fireEvent.change(screen.getByTestId('age-input') , {target: {value: INPUT_AGE}})
+  // calling `userEvent` in here will cause race condition...
+  await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+  // TestFormHook.actions.handleBulkChange(prev => ({...prev, name: 'test', description: 'desc'}));
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+  });
+});
+
+test('zod parse value before submit', async () => {
+  const TestFormHook = createTestHook();
+
+  const INPUT_AGE = '9';
+  const PARSED_RESULT = Number(INPUT_AGE);
+
+  const handleSubmitTester = TestFormHook.handleSubmit((e) => (result) => {
+    if (result.success) {
+      expect(result.data.age).toBe(PARSED_RESULT);
+    } else {
+      expect('should not called').toBe(result.error);
+    }
+  });
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook} />
+        <button data-testid="submit-button" onClick={handleSubmitTester} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+  await userEvent.type(ageInput, INPUT_AGE);
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+  });
+
+  const submitButton = screen.getByTestId('submit-button');
+  await userEvent.click(submitButton);
+
+  await waitFor(() => {
+    console.log('waiting');
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBeNull();
+    });
+  });
+});

package/src/index.ts

@@ -0,0 +1,332 @@
+import {createStore} from 'nozuchi';
+import {createElement, Fragment, useEffect, useMemo} from 'react';
+
+import {isChangeEvent} from './utils';
+
+import type {Subscriber} from 'nozuchi';
+import type {BaseSyntheticEvent, ChangeEvent, ReactNode, ReactElement} from 'react';
+
+import type {infer as zodInfer, SafeParseReturnType, ZodIssue, ZodType} from 'zod';
+
+export type StateRestriction = Record<string, any>;
+
+type FormStatus = {
+  isDirty: boolean;
+  isValid: boolean;
+};
+
+type FormErrors<State extends StateRestriction> = {
+  [k in keyof State]: string | null;
+};
+
+export type FullFormState<State extends StateRestriction> = FormStatus & {value: State; errors: FormErrors<State>};
+
+export type HandleChangeAction<State extends StateRestriction, R = void> = <Name extends keyof State>(name: Name, value: State[Name]) => R;
+
+export type FieldProps<State extends StateRestriction, Name extends keyof State> = {
+  name: Name;
+  children: (
+    tool: {
+      name: Name;
+      value: State[Name];
+      onChange(this: void, name: Name, value: State[Name]): void;
+      onChange(this: void, e: ChangeEvent<HTMLElement>): void;
+    },
+    value: State[Name],
+    errorMessage: string | null,
+  ) => ReactNode;
+
+  /**
+   * Mayoiga Field will memoize the result of renderProps for performance.
+   * If your renderProps depends on external variables, you should apply those on deps
+   */
+  deps?: ReadonlyArray<unknown>;
+};
+
+export type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
+  selector: (s: FullFormState<State>) => Selected;
+  children: (tool: {handleChange: HandleChangeAction<State>}, ...value: Readonly<Selected>) => ReactNode;
+  /**
+   * Mayoiga Slicer will memoize the result of renderProps for performance.
+   * If your renderProps depends on external variables, you should apply those on deps
+   *
+   * ```typescript
+   * <Slicer selector={s => [s.value.selected]} deps={[selection]}>{(tools, selected: string) => <AwesomeSelection value={selected} options={selection} />}</Slicer>
+   * ```
+   */
+  deps?: ReadonlyArray<unknown>;
+};
+
+type FormControllerBehavior<StateBeforeValidation> = {
+  /** For testing */
+  peek: (
+    eyeball: (prev: FullFormState<StateBeforeValidation>) => void,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  reset: () => () => FullFormState<StateBeforeValidation>;
+
+  /**
+   * Initialize form state without validation.
+   */
+  initializeForm: (
+    initialVal: Partial<StateBeforeValidation>,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  /**
+   * Handle issue that zod reported
+   */
+  handleIssues: (issues: ReadonlyArray<ZodIssue>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  /**
+   * You can handle server side or other external error via this action.
+   */
+  pushFormErrors: (
+    validator: (state: StateBeforeValidation) => Partial<FormErrors<StateBeforeValidation>>,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  reduceFormErrors: (
+    reducer: (prev: FormErrors<StateBeforeValidation>) => FormErrors<StateBeforeValidation>,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  /**
+   */
+  handleChange: HandleChangeAction<
+    StateBeforeValidation,
+    (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>
+  >;
+
+  reduceFormState: (
+    reducer: (prevValue: StateBeforeValidation) => StateBeforeValidation,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+  handleBulkChange: (
+    setter: (prev: StateBeforeValidation) => Partial<StateBeforeValidation>,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+};
+
+const initialFormState = Object.freeze({isDirty: false, isValid: false});
+
+function createFormStore<StateBeforeValidation extends StateRestriction, Schema extends ZodType<any, any, any>>(
+  initialState: StateBeforeValidation,
+  schema: Schema,
+): Subscriber<FullFormState<StateBeforeValidation>, FormControllerBehavior<StateBeforeValidation>> {
+  type FullState = FullFormState<StateBeforeValidation>;
+  type Err = FormErrors<StateBeforeValidation>;
+  type StateKeys = keyof StateBeforeValidation;
+
+  const initialErrors = Object.freeze(
+    Object.keys(initialState).reduce((buf, k) => {
+      buf[k as StateKeys] = null;
+      return buf;
+    }, {} as any as Err),
+  );
+
+  const fullInitialState: FullState = Object.freeze({
+    ...initialFormState,
+    value: {...initialState},
+    errors: {...initialErrors},
+  });
+
+  const withValidation = (prev: FullState, newValue: StateBeforeValidation) => {
+    const result = schema.safeParse(newValue);
+    if (result.success) {
+      return {...prev, isDirty: true, isValid: true, value: newValue, errors: initialErrors};
+    }
+    const newErrors = result.error.issues.reduce((buf, iss) => {
+      // TODO: should support nested value?
+      const shallowPath = iss.path[0];
+      if (shallowPath === undefined) {
+        return buf;
+      }
+      buf[shallowPath as any as StateKeys] = iss.message;
+      return buf;
+    }, {} as any as Err);
+
+    return {...prev, isDirty: true, isValid: false, errors: newErrors, value: newValue};
+  };
+
+  return createStore(fullInitialState, {
+    peek: (eyeball) => (prev) => {
+      eyeball(prev);
+      return prev;
+    },
+
+    reset: () => () => fullInitialState,
+    initializeForm: (initialVal) => (prev) => ({
+      ...prev,
+      value: {...prev.value, ...initialVal},
+      errors: {...initialErrors},
+    }),
+    handleIssues: (issues) => (prev) => {
+      // FIXME: handle duplication
+      const newErrors = issues.reduce((buf, iss) => {
+        const shallowPath = iss.path[0];
+        if (shallowPath === undefined) {
+          return buf;
+        }
+        buf[shallowPath as any as StateKeys] = iss.message;
+        return buf;
+      }, {} as any as Err);
+
+      return {...prev, isDirty: true, isValid: false, errors: newErrors};
+    },
+    pushFormErrors: (validator) => (prev) => {
+      const pushedErrors = validator(prev.value);
+      return {...prev, errors: {...prev.errors, ...pushedErrors}};
+    },
+    reduceFormErrors: (reducer) => (prev) => {
+      return {...prev, errors: reducer(prev.errors)};
+    },
+    handleChange: (name, value) => (prev) => {
+      if (name in prev.value === false) {
+        return prev;
+      }
+      const newValue = {...prev.value, [name]: value};
+      return withValidation(prev, newValue);
+    },
+    reduceFormState: (reducer) => (prev) => {
+      const reducedState = reducer(prev.value);
+      return withValidation(prev, reducedState);
+    },
+    handleBulkChange: (setter) => (prev) => {
+      const mergedNewState = {...prev.value, ...setter(prev.value)};
+      return withValidation(prev, mergedNewState);
+    },
+  });
+}
+
+type ActionsCanBePublic<State extends StateRestriction> = {
+  reset: VoidFunction;
+  initializeForm: (initial: Partial<State>) => void;
+  pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
+  handleChange: HandleChangeAction<State>;
+  handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
+};
+
+/**
+ * Restricted type interface of the form store
+ * TODO: more restriction
+ */
+export type Controller<State extends StateRestriction> = {
+  useInitialize: (initialValue: Partial<State>) => void;
+  useSelector: <R>(selector: (state: FullFormState<State>) => R, isEqual?: (prev: R, current: R) => boolean) => R;
+
+  actions: ActionsCanBePublic<State>;
+  components: {
+    Field: <Name extends keyof State>(props: FieldProps<State, Name>) => ReactElement<any, any> | null;
+    Slicer: <Selected extends ReadonlyArray<unknown>>(props: SliceProps<State, Selected>) => ReactElement<any, any> | null;
+  };
+};
+
+type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
+  controller: Controller<State>;
+
+  handleSubmit: (
+    handler: (
+      e: BaseSyntheticEvent,
+    ) => (
+      val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>},
+    ) => void | Promise<void>,
+  ) => (e: BaseSyntheticEvent) => void;
+
+  api: Subscriber<FullFormState<State>, FormControllerBehavior<State>>;
+} & Controller<State>;
+
+/**
+ * @typeParam InitialState should be shallow
+ */
+export function createFormHook<StateBeforeValidation, Schema extends ZodType<any, any, any>>(
+  initialState: StateBeforeValidation,
+  schema: Schema,
+): FormHook<StateBeforeValidation, Schema> {
+  const store = createFormStore(initialState, schema);
+
+  const formHook = {
+    useInitialize: (initialValue: Partial<StateBeforeValidation>) => {
+      useEffect(() => {
+        store.actions.initializeForm(initialValue);
+      }, []);
+    },
+    useSelector: store.useSelector,
+    handleSubmit: (
+      handler: (
+        e: BaseSyntheticEvent,
+      ) => (
+        val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>},
+      ) => void | Promise<void>,
+    ) => {
+      return (e: BaseSyntheticEvent) => {
+        const eventHandled = handler(e);
+        const value = store.getState().value;
+        return schema.safeParseAsync(value).then((result: SafeParseReturnType<StateBeforeValidation, zodInfer<typeof schema>>) => {
+          // FIXME: hook formを捨ててzodのバージョンをあげればこの辺に型をつけられる
+          if (result.success) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            return eventHandled({success: true, data: result.data, error: undefined});
+          }
+          void eventHandled({success: false, error: result.error.issues});
+          store.actions.handleIssues(result.error.issues);
+        });
+      };
+    },
+
+    components: {
+      Slicer<R extends ReadonlyArray<unknown>>(props: SliceProps<StateBeforeValidation, R>) {
+        const {selector, children, deps} = props;
+        const slicedValues = formHook.useSelector(selector);
+        return useMemo(
+          () => {
+            const renderContent = children({handleChange: formHook.actions.handleChange}, ...slicedValues);
+            return createElement(Fragment, {}, renderContent);
+          },
+          deps ? [...slicedValues, ...deps] : slicedValues,
+        );
+      },
+      Field<Name extends keyof StateBeforeValidation>(props: FieldProps<StateBeforeValidation, Name>) {
+        const {name, children, deps} = props;
+        const [value, errMsg] = store.useSelector((s) => [s.value[name], s.errors[name]] as const);
+        return useMemo(
+          () => {
+            const renderContent = children(
+              {
+                name,
+                value,
+                onChange: (name_or_event: unknown, value_or_none?: unknown) => {
+                  if (typeof name_or_event === 'string') {
+                    // assumes name is valid if it's string
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    return store.actions.handleChange(name_or_event as Name, value_or_none as any);
+                  }
+                  if (isChangeEvent(name_or_event)) {
+                    const target: any = name_or_event.currentTarget || name_or_event.target;
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                    return store.actions.handleChange(target.name, target.value);
+                  }
+                  throw new Error('`handleChange` handles unexpected formed object.');
+                },
+              },
+              value,
+              errMsg,
+            );
+            return createElement(Fragment, {}, renderContent);
+          },
+          deps ? [value, errMsg, ...deps] : [value, errMsg],
+        );
+      },
+    },
+    actions: store.actions,
+  };
+
+  return {
+    controller: formHook,
+    api: store,
+    ...formHook,
+  };
+}
+
+export function useFormSlice<State extends StateRestriction, Sliced>(
+  formController: Controller<State>,
+  selector: (s: FullFormState<State>) => Sliced,
+) {
+  const sliced = formController.useSelector((s) => selector(s));
+  return [sliced, formController.actions] as const;
+}

package/src/utils.ts

@@ -0,0 +1,8 @@
+import type {ChangeEvent} from 'react';
+
+export function isChangeEvent<T>(x: any): x is ChangeEvent<T> {
+  if (typeof x !== 'object') {
+    return false;
+  }
+  return 'target' in x;
+}