mayoiga 0.1.1 → 0.1.4

package/.eslintrc.js

@@ -0,0 +1,111 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint/eslint-plugin', "testing-library"],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    // Lintの時間があまりに長いようなら無効化も考える
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+
+    'plugin:import/errors',
+    'plugin:import/typescript',
+    'plugin:testing-library/react',
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 'next',
+    sourceType: 'module',
+    ecaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    curly: 'error',
+    eqeqeq: ['error', 'smart'],
+
+    'no-return-await': 'error',
+    'require-await': 'error',
+    'no-await-in-loop': 'error',
+
+    '@typescript-eslint/prefer-readonly': 'error',
+    // '@typescript-eslint/prefer-readonly-parameter-types': ["error", {ignoreInferredTypes: true}],
+    '@typescript-eslint/array-type': ['error', {default: 'generic', readonly: 'generic'}],
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        prefer: 'type-imports',
+      },
+    ],
+
+    'padding-line-between-statements': [
+      'error',
+      {blankLine: 'always', prev: 'multiline-const', next: 'multiline-const'},
+      {blankLine: 'always', prev: '*', next: 'function'},
+      {blankLine: 'always', prev: '*', next: 'class'},
+      {blankLine: 'always', prev: '*', next: 'export'},
+    ],
+
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'none',
+        ignoreRestSiblings: true,
+
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // 要検討
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    // voidとのunionで微妙な挙動をするので一旦停止
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
+
+    'import/newline-after-import': 'error',
+    'import/named': 'off',
+    'import/no-named-default': 'error',
+    'import/no-default-export': 'off',
+    'import/default': 'off',
+    'import/no-useless-path-segments': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', ['index', 'sibling'], 'type'],
+        'newlines-between': 'always-and-inside-groups',
+        alphabetize: {
+          order: 'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
+          caseInsensitive: true /* ignore case. Options: [true, false] */,
+        },
+      },
+    ],
+
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.js', '.jsx', '.ts', '.tsx'],
+    },
+
+    'import/ignore': ['node_modules'],
+  },
+  "overrides": [
+    {
+      // 3) Now we enable eslint-plugin-testing-library rules or preset only for matching files!
+      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+      "extends": ["plugin:testing-library/react"]
+    },
+  ]
+};

package/.github/workflows/checker.yml

@@ -0,0 +1,42 @@
+name: Lint Check
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - uses: actions/checkout@v1
+    - name: Cache node_modules
+      uses: actions/cache@preview
+      with:
+        path: ~/.cache/yarn
+        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+        restore-keys:
+          ${{ runner.os }}-projectname-
+
+    - name: Install node_modules
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: |
+        npm install -g yarn
+        yarn install
+
+    - name: Lint
+      run: |
+        yarn check-all
+
+    - name: Test
+      run: |
+        yarn test

package/.gitignore

@@ -0,0 +1,217 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos,node,visualstudiocode,vim
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,node,visualstudiocode,vim
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Vim ###
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg  # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+*~
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,node,visualstudiocode,vim
+

package/.prettierrc

@@ -0,0 +1,5 @@
+printWidth: 140
+parser: typescript
+bracketSpacing: false
+trailingComma: all
+singleQuote: true

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/component.d.ts

@@ -0,0 +1 @@
+export {Slicer, Field} from "./dist/component";

package/component.js

@@ -0,0 +1 @@
+module.exports = require('./dist/component.js');

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,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 */
@@ -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>>;
@@ -52,6 +67,9 @@ declare type FormControllerBehavior<StateBeforeValidation> = {
     handleBulkChange: (setter: (prev: StateBeforeValidation) => Partial<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<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;
 };

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,