mayoiga 0.1.2 → 0.1.5

package/README.md

@@ -2,59 +2,79 @@
 
 # Mayoiga
 
-The React Hook based form library. Of course it is TypeScript friendly.
+Fully typed form state management system for React.
 
+No magic, ref free. It's built for complicated form state management.
 
-## Supported functionality
+## Feature
 
-- TypeScript oriented
-- Form level validation
-- Submit level validation
-- Less learning cost
-- Cooperate with any component library (Bootstarap, MaterialDesign, ant-design or whatever )
+Support strong typed form state.
+Every form should have two kind of types:
 
-With less boilerplate code!!
+1. form state before validation
+2. state after validation succeed
 
+i.e. before validation, a field named "bio" might be nullable (`{bio: null | string}`) but it must not empty to submit (`{bio: zod.string().nonempty()}`).
 
-## How to use
+Also considers:
 
-### API you should see
+- No ref, DOM free
+- High performance, high tuning possibility
+  - Mayoiga uses "external state and selector" pattern. You can built your own form if you known what you would like to
 
-There are only two functions which you should know to use Mayoiga.
+## Features does not support
 
-- [useForm](https://hachibeedi.github.io/mayoiga/modules/_mayoiga_.html#useform)
+- Short coding
 
-- [createFormScope](https://hachibeedi.github.io/mayoiga/modules/_mayoiga_.html#createformscope)
+It's not a library for short coding or copy and paste template.
 
 
-### Minimum example:
+### Quickstart
 
 ```typeScript
 
-const TestFormHook = createFormHook({name:'', description: '', age: ''} as FormStateBeforeValidation, testSchema);
-
-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.err);
-  }
+const schema = zod.object({
+  name: zod.string(),
+  age: zod
+    .string()
+    .transform((val) => Number(val))
+    .refine((val) => (Number.isNaN(val) ? 0 : val)),
+  marked: zod.literal(true),
 });
 
-const Top = () => {
-  return (
-    <div>
-      <AgeInputComponent formHook={TestFormHook} />
-      <button data-testid="submit-button" onClick={handleSubmitTester} />
-    </div>
-  )
+type BeforeValidation = {
+  name: string;
+  age: string;
+  marked: boolean;
 };
 
-act(() => {
-  render(<Top />);
-});
+const {
+  components: {Field, Slicer},
+  handleSubmit,
+} = createFormHook({name:'test', age: '42', marked: false} as BeforeValidation, schema);
+
+function App() {
+  const submitHandler = handleSubmit((e) => (result) => {
+    if (result.error) {
+      return alert('Err!');
+    }
+    console.log(result.data); /*
+      {
+        name: 'test',
+        age: 42, <- age is typed "number" before validation because of definition
+        marked: true, <- have to be "true", not as boolean. it's power of zod
+      }
+    */
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Field name="name">{(tool) => <input {...tool} />}</Field>
+      <Field name="age">{(tool) => <input {...tool} />}</Field>
+      <Field name="marked">{(tool) => <input {...tool} />}</Field>
+      <input type="submit" />
+    </form>
+  );
+}
 
 ```

package/dist/component.d.ts

@@ -1,5 +1,5 @@
 import type { SliceProps, FieldProps, StateRestriction, Controller } from './index';
-declare type ControlledComponentProps<State, Props> = Props & {
+declare type ControlledComponentProps<State extends StateRestriction, Props> = Props & {
     controller: Controller<State>;
 };
 export declare function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>): JSX.Element;

package/dist/component.test.js

@@ -4,11 +4,14 @@ import React from 'react';
 import { test, expect } from 'vitest';
 import * as zod from 'zod';
 import { Field, Slicer } from './component';
-import { createFormHook, } from './index';
+import { createFormHook } 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),
+    age: zod
+        .string()
+        .transform((val) => Number(val))
+        .refine((val) => (Number.isNaN(val) ? 0 : val)),
     marked: zod.boolean(),
 });
 const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
@@ -36,7 +39,7 @@ test('Slice component works fine in basic usage.', async () => {
     const TestFormHook = createTestHook();
     const Top = () => {
         return (React.createElement("div", null,
-            React.createElement(Slicer, { controller: TestFormHook.controller, selector: s => [s.value.age] }, (tool, age) => React.createElement("input", { "data-testid": "age-input", name: "age", value: age, onChange: e => tool.handleChange('age', e.target.value) }))));
+            React.createElement(Slicer, { controller: TestFormHook.controller, selector: (s) => [s.value.age] }, (tool, age) => (React.createElement("input", { "data-testid": "age-input", name: "age", value: age, onChange: (e) => tool.handleChange('age', e.target.value) })))));
     };
     render(React.createElement(Top, null));
     const INPUT_AGE = '42';
@@ -51,3 +54,59 @@ test('Slice component works fine in basic usage.', async () => {
         });
     });
 });
+test('A user able to create a reusable component', async () => {
+    const TestFormHook = createTestHook();
+    function NarrowTypedExpected(props) {
+        return (React.createElement(Field, { controller: props.controller, name: "age" }, (tool) => React.createElement("input", { "data-testid": "age-input", ...tool })));
+    }
+    function ErrorDisplayer(props) {
+        const { controller } = props;
+        return (React.createElement(Slicer, { controller: controller, selector: (s) => [s.value.age] }, (tool, age) => (React.createElement("button", { onClick: (e) => {
+                controller.actions.pushFormErrors((_state) => ({ age: age === '42' ? 'yes!!!' : 'noooo' }));
+            } }))));
+    }
+    render(React.createElement("div", null,
+        React.createElement(NarrowTypedExpected, { controller: TestFormHook.controller }),
+        React.createElement(ErrorDisplayer, { controller: TestFormHook.controller })));
+    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 = 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 (React.createElement("div", null,
+            React.createElement(Field, { controller: OtherFormHook.controller, name: "minAge" }, (tool) => React.createElement("input", { "data-testid": "minAgeInput", type: "number", ...tool })),
+            React.createElement(Field, { controller: TestFormHook.controller, name: "age" }, (tool) => React.createElement("input", { "data-testid": "ageInput", type: "number", ...tool })),
+            React.createElement(Slicer, { controller: TestFormHook.controller, selector: (s) => [Number(s.value.age)], deps: [minAge] }, (_tool, age) => (React.createElement("div", { "data-testid": DATA_ID_RE_RENDER_BY_DEPS }, age >= minAge ? 'You can buy this content' : 'go home'))),
+            React.createElement(Slicer, { controller: TestFormHook.controller, selector: (s) => [Number(s.value.age)] }, (_tool, age) => (React.createElement("div", { "data-testid": DATA_ID_NOT_RERENDER_NO_DEPS }, age >= minAge ? 'You can buy this content' : 'go home')))));
+    }
+    render(React.createElement(App, null));
+    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/dist/index.d.ts

@@ -22,14 +22,28 @@ export declare type FieldProps<State extends StateRestriction, Name extends keyo
         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 declare 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>;
 };
-declare type FormControllerBehavior<StateBeforeValidation> = {
+declare type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
     /** For testing */
     peek: (eyeball: (prev: FullFormState<StateBeforeValidation>) => void) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     reset: () => () => FullFormState<StateBeforeValidation>;
@@ -44,7 +58,8 @@ declare type FormControllerBehavior<StateBeforeValidation> = {
     /**
      * You can handle server side or other external error via this action.
      */
-    handleError: (reducer: (prev: FormErrors<StateBeforeValidation>) => FormErrors<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    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>>;
@@ -54,9 +69,9 @@ declare type FormControllerBehavior<StateBeforeValidation> = {
 declare 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;
-    handleError: (reducer: (prev: FormErrors<State>) => FormErrors<State>) => void;
 };
 /**
  * Restricted type interface of the form store
@@ -86,6 +101,6 @@ declare type FormHook<State extends StateRestriction, Schema extends ZodType<any
 /**
  * @typeParam InitialState should be shallow
  */
-export declare function createFormHook<StateBeforeValidation, Schema extends ZodType<any, any, any>>(initialState: StateBeforeValidation, schema: Schema): FormHook<StateBeforeValidation, Schema>;
+export declare function createFormHook<StateBeforeValidation extends StateRestriction, Schema extends ZodType<any, any, any>>(initialState: StateBeforeValidation, schema: Schema): FormHook<StateBeforeValidation, Schema>;
 export declare function useFormSlice<State extends StateRestriction, Sliced>(formController: Controller<State>, selector: (s: FullFormState<State>) => Sliced): readonly [Sliced, ActionsCanBePublic<State>];
 export {};

package/dist/index.js

@@ -51,7 +51,11 @@ function createFormStore(initialState, schema) {
             }, {});
             return { ...prev, isDirty: true, isValid: false, errors: newErrors };
         },
-        handleError: (reducer) => (prev) => {
+        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) => {
@@ -100,15 +104,15 @@ export function createFormHook(initialState, schema) {
         },
         components: {
             Slicer(props) {
-                const { selector, children } = props;
-                const value = formHook.useSelector(selector);
+                const { selector, children, deps } = props;
+                const slicedValues = formHook.useSelector(selector);
                 return useMemo(() => {
-                    const renderContent = children({ handleChange: formHook.actions.handleChange }, ...value);
+                    const renderContent = children({ handleChange: formHook.actions.handleChange }, ...slicedValues);
                     return createElement(Fragment, {}, renderContent);
-                }, value);
+                }, deps ? [...slicedValues, ...deps] : slicedValues);
             },
             Field(props) {
-                const { name, children } = props;
+                const { name, children, deps } = props;
                 const [value, errMsg] = store.useSelector((s) => [s.value[name], s.errors[name]]);
                 return useMemo(() => {
                     const renderContent = children({
@@ -129,7 +133,7 @@ export function createFormHook(initialState, schema) {
                         },
                     }, value, errMsg);
                     return createElement(Fragment, {}, renderContent);
-                }, [value, errMsg]);
+                }, deps ? [value, errMsg, ...deps] : [value, errMsg]);
             },
         },
         actions: store.actions,

package/dist/index.test.js

@@ -7,13 +7,16 @@ import { createFormHook, useFormSlice } 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),
+    age: zod
+        .string()
+        .transform((val) => Number(val))
+        .refine((val) => (Number.isNaN(val) ? 0 : val)),
     marked: zod.boolean(),
 });
 const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
 const AgeInputComponent = (props) => {
     const { controller } = props;
-    const [[age, errorMessage], { handleChange }] = useFormSlice(controller, s => [s.value.age, s.errors.age]);
+    const [[age, errorMessage], { handleChange }] = useFormSlice(controller, (s) => [s.value.age, s.errors.age]);
     return (React.createElement("div", null,
         React.createElement("input", { "data-testid": "age-input", value: age, name: "age", onChange: (e) => {
                 handleChange('age', e.currentTarget.value);

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/highlight.css

@@ -0,0 +1,92 @@
+:root {
+    --light-hl-0: #0000FF;
+    --dark-hl-0: #569CD6;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #0070C1;
+    --dark-hl-2: #4FC1FF;
+    --light-hl-3: #001080;
+    --dark-hl-3: #9CDCFE;
+    --light-hl-4: #795E26;
+    --dark-hl-4: #DCDCAA;
+    --light-hl-5: #267F99;
+    --dark-hl-5: #4EC9B0;
+    --light-hl-6: #098658;
+    --dark-hl-6: #B5CEA8;
+    --light-hl-7: #A31515;
+    --dark-hl-7: #CE9178;
+    --light-hl-8: #AF00DB;
+    --dark-hl-8: #C586C0;
+    --light-hl-9: #008000;
+    --dark-hl-9: #6A9955;
+    --light-code-background: #F5F5F5;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+pre, code { background: var(--code-background); }