test: try to reproduce

.eslintignore

@@ -1,11 +1,8 @@
 /.git
-CHANGELOG.md
-package.json
-packages/*/lib
+**/node_modules
 packages/*/dist
-packages/*/esm
-packages/*/node_modules
-packages/*/CHANGELOG.md
-docs/*/node_modules
-docs/*/build
-docs/*/.docusaurus
+benchmark
+docs
+test-dts
+commitlint.config.js
+**/__tests__

.eslintrc.js

@@ -1,16 +1,32 @@
 module.exports = {
-	env: {
-		browser: true,
-		es6: true,
-	},
-	extends: [
-		'plugin:import/warnings',
-		'plugin:import/typescript',
-	],
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		ecmaVersion: 2018,
-		sourceType: 'module',
-	},
-	plugins: ['@typescript-eslint', 'prettier'],
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+  },
+  extends: [
+    'prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['prettier'],
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'prefer-spread': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-extra-semi': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
 }

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: [liximomo]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -19,3 +19,4 @@ dist/
 temp/
 packages/*/dist/
 examples/*/build
+benchmark.csv

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm commitlint --edit $1

.npmrc

@@ -1,2 +1,7 @@
 auto-install-peers=true
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+
+# Using pnpm to rely on the theme-comon package will have some issues, 
+# it can be referd to the discussion and solution of this issue
+# https://github.com/facebook/docusaurus/issues/7880.
+public-hoist-pattern[]=@docusaurus/theme-common*

README.md

@@ -30,15 +30,42 @@ yarn add doura
 
 ```tsx
 import { defineModel } from 'doura'
+import { useModel } from 'react-doura'
 
-const countModel = defineModel({
+const todoModel = defineModel({
   state: {
-    count: 0,
+    todos: [
+      {
+        id: 0,
+        text: 'read books',
+        isFinished: true,
+      },
+    ],
+    /** @type {'all' | 'unfinished'} */
+    filter: 'all',
+  },
+  views: {
+    unfinishedTodos() {
+      // autocompletion! ✨
+      return this.todos.filter((todo) => !todo.isFinished)
+    },
+    filteredTodos() {
+      if (this.filter === 'unfinished') {
+        return this.unfinishedTodos
+      }
+      return this.todos
+    },
   },
   actions: {
-    inc() {
-      this.count += 1
+    // any amount of arguments, return a promise or not
+    setFilter(filter) {
+      // you can directly mutate the state
+      this.filter = filter
     },
+    // action can be asynchronous
+    async getTodos() {
+      this.todos = await fetchTodos('httpds://api.example.com/todos')
+    }
   },
 })
 ```
@@ -48,13 +75,30 @@ const countModel = defineModel({
 ```tsx
 import { useModel } from 'react-doura'
 
-function Counter() {
-  const counter = useModel(countModel)
+export function TodoApp() {
+  // type of `filteredTodos` and `setFilter` are inferred automatically
+  const { filteredTodos, setFilter } = useModel(todoModel)
 
   return (
     <div>
-      <h1>Count: {counter.count}</h1>
-      <button onClick={counter.inc}>inc</button>
+      <div>
+        <input
+          type="checkbox"
+          id="filter"
+          onClick={(event) =>
+            setFilter(event.target.checked ? 'unfinished' : 'all')
+          }
+        />
+        <label htmlFor="filter">Only show unfinished</label>
+      </div>
+      <ul>
+        {filteredTodos.map((todo) => (
+          <li key={todo.id}>
+            <input type="checkbox" checked={todo.isFinished} />
+            {todo.text}
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }
@@ -65,5 +109,5 @@ function Counter() {
 Doura is greatly inspired by following excellent projects:
 
 - [Immer](https://github.com/immerjs/immer)
-- [Vuejs](https://github.com/vuejs)
+- [Vue.js](https://github.com/vuejs)
 - [Pinia](https://github.com/vuejs/pinia)

benchmark/reactivity.ts

@@ -0,0 +1,154 @@
+import fs from 'fs'
+// @ts-ignore
+import { Suite } from 'benchmark'
+// @ts-ignore
+import { parse } from 'json2csv'
+import { draft, snapshot } from '../packages/doura'
+import { create } from 'mutative'
+import produce from 'immer'
+
+const result = [
+  {
+    Name: 'Naive handcrafted reducer',
+  },
+  {
+    Name: 'Mutative',
+  },
+  {
+    Name: 'Immer',
+  },
+  {
+    Name: 'Doura',
+  },
+]
+
+const douraProduce = (value: any, cb: (v: any) => void) => {
+  const obj = draft(value as any)
+  cb(obj)
+
+  return snapshot(obj, obj)
+}
+
+const getData = () => {
+  const baseState: { arr: any[]; map: Record<string, any> } = {
+    arr: [],
+    map: {},
+  }
+
+  const createTestObject = () =>
+    Array(10 * 5)
+      .fill(1)
+      .reduce((i, _, k) => Object.assign(i, { [k]: k }), {})
+
+  baseState.arr = Array(10 ** 4 * 5)
+    .fill('')
+    .map(() => createTestObject())
+
+  Array(10 ** 3)
+    .fill(1)
+    .forEach((_, i) => {
+      baseState.map[i] = { i }
+    })
+  return baseState
+}
+
+let baseState: any
+let i: any
+
+const suite = new Suite()
+
+suite
+  .add(
+    'Naive handcrafted reducer',
+    function () {
+      void {
+        ...baseState,
+        arr: [...baseState.arr, i],
+        map: { ...baseState.map, [i]: { i } },
+      }
+    },
+    {
+      onStart: () => {
+        i = Math.random()
+        baseState = getData()
+      },
+    }
+  )
+  .add(
+    'Mutative',
+    function () {
+      void create(baseState, (draft) => {
+        draft.arr.push(i)
+        draft.map[i] = i
+      })
+    },
+    {
+      onStart: () => {
+        i = Math.random()
+        baseState = getData()
+      },
+    }
+  )
+  .add(
+    'Immer',
+    function () {
+      void produce(baseState, (draft: any) => {
+        draft.arr.push(i)
+        draft.map[i] = i
+      })
+    },
+    {
+      onStart: () => {
+        i = Math.random()
+        baseState = getData()
+      },
+    }
+  )
+  .add(
+    'Doura',
+    function () {
+      void douraProduce(baseState, (draft: any) => {
+        draft.arr.push(i)
+        draft.map[i] = i
+      })
+    },
+    {
+      onStart: () => {
+        i = Math.random()
+        baseState = getData()
+      },
+    }
+  )
+  .on('cycle', function (event: any) {
+    console.log(String(event.target))
+    const [name] = event.target.name.split(' - ')
+    const index = result.findIndex((i) => i.Name === name)
+    // @ts-ignore
+    result[index][event.target.name] = Math.round(event.target.hz)
+  })
+  .on('complete', function (this: any) {
+    console.log('The fastest method is ' + this.filter('fastest').map('name'))
+  })
+  .run({ async: false })
+
+try {
+  // Mutative vs Immer Performance
+  // Measure(ops/sec) to update 50K arrays and 1K objects, bigger the better.
+  const fields: string[] = []
+  result.forEach((item) => {
+    fields.push(...Object.keys(item).slice(1))
+  })
+  result.forEach((item) => {
+    fields.forEach((field) => {
+      if (!(field in item)) {
+        ;(item as any)[field] = '-'
+      }
+    })
+  })
+  const csv = parse(result, {
+    fields: ['Name', ...fields.reverse()],
+  })
+  fs.writeFileSync('benchmark.csv', csv)
+} catch (err) {
+  console.error(err)
+}

commitlint.config.js

@@ -0,0 +1,34 @@
+const { RuleConfigSeverity } = require('@commitlint/types')
+
+/** @type {import("@commitlint/types").UserConfig} */
+const Configuration = {
+  /*
+   * Resolve and load @commitlint/config-conventional from node_modules.
+   * Referenced packages must be installed
+   */
+  extends: ['@commitlint/config-conventional'],
+  /*
+   * Any rules defined here will override rules from @commitlint/config-conventional
+   */
+  rules: {
+    'type-enum': [
+      RuleConfigSeverity.Error,
+      'always',
+      [
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+        'release',
+      ],
+    ],
+  },
+}
+
+module.exports = Configuration