mayoiga 0.1.3 → 0.1.4

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.test.js

@@ -81,3 +81,32 @@ test('A user able to create a reusable component', async () => {
         });
     });
 });
+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,12 +22,26 @@ 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> = {
     /** For testing */

package/dist/index.js

@@ -104,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({
@@ -133,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/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); }