mayoiga 0.0.21 → 0.1.2

package/dist/index.js

@@ -0,0 +1,146 @@
+import { createStore } from 'nozuchi';
+import { createElement, Fragment, useEffect, useMemo } from 'react';
+import { isChangeEvent } from './utils';
+const initialFormState = Object.freeze({ isDirty: false, isValid: false });
+function createFormStore(initialState, schema) {
+    const initialErrors = Object.freeze(Object.keys(initialState).reduce((buf, k) => {
+        buf[k] = null;
+        return buf;
+    }, {}));
+    const fullInitialState = Object.freeze({
+        ...initialFormState,
+        value: { ...initialState },
+        errors: { ...initialErrors },
+    });
+    const withValidation = (prev, newValue) => {
+        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] = iss.message;
+            return buf;
+        }, {});
+        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] = iss.message;
+                return buf;
+            }, {});
+            return { ...prev, isDirty: true, isValid: false, errors: newErrors };
+        },
+        handleError: (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);
+        },
+    });
+}
+/**
+ * @typeParam InitialState should be shallow
+ */
+export function createFormHook(initialState, schema) {
+    const store = createFormStore(initialState, schema);
+    const formHook = {
+        useInitialize: (initialValue) => {
+            useEffect(() => {
+                store.actions.initializeForm(initialValue);
+            }, []);
+        },
+        useSelector: store.useSelector,
+        handleSubmit: (handler) => {
+            return (e) => {
+                const eventHandled = handler(e);
+                const value = store.getState().value;
+                return schema.safeParseAsync(value).then((result) => {
+                    // 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(props) {
+                const { selector, children } = props;
+                const value = formHook.useSelector(selector);
+                return useMemo(() => {
+                    const renderContent = children({ handleChange: formHook.actions.handleChange }, ...value);
+                    return createElement(Fragment, {}, renderContent);
+                }, value);
+            },
+            Field(props) {
+                const { name, children } = props;
+                const [value, errMsg] = store.useSelector((s) => [s.value[name], s.errors[name]]);
+                return useMemo(() => {
+                    const renderContent = children({
+                        name,
+                        value,
+                        onChange: (name_or_event, value_or_none) => {
+                            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, value_or_none);
+                            }
+                            if (isChangeEvent(name_or_event)) {
+                                const target = 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);
+                }, [value, errMsg]);
+            },
+        },
+        actions: store.actions,
+    };
+    return {
+        controller: formHook,
+        api: store,
+        ...formHook,
+    };
+}
+export function useFormSlice(formController, selector) {
+    const sliced = formController.useSelector((s) => selector(s));
+    return [sliced, formController.actions];
+}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,74 @@
+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';
+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(),
+});
+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]);
+    return (React.createElement("div", null,
+        React.createElement("input", { "data-testid": "age-input", value: age, name: "age", onChange: (e) => {
+                handleChange('age', e.currentTarget.value);
+            } }),
+        React.createElement("span", { "data-testid": "age-error" }, errorMessage)));
+};
+// afterEach(cleanup);
+test('useSelector can select the fields', async () => {
+    const TestFormHook = createTestHook();
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook.controller })));
+    };
+    render(React.createElement(Top, null));
+    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 = 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 (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook }),
+            React.createElement("button", { "data-testid": "submit-button", onClick: handleSubmitTester })));
+    };
+    render(React.createElement(Top, null));
+    const ageInput = screen.getByTestId('age-input');
+    await userEvent.type(ageInput, INPUT_AGE);
+    await waitFor(() => {
+        const ageInput = 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/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ChangeEvent } from 'react';
+export declare function isChangeEvent<T>(x: any): x is ChangeEvent<T>;

package/dist/utils.js

@@ -0,0 +1,6 @@
+export function isChangeEvent(x) {
+    if (typeof x !== 'object') {
+        return false;
+    }
+    return 'target' in x;
+}