补充setter，getter功能

webpack.config.js → build/webpack.dev.js

@@ -4,12 +4,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     mode: 'development',
     entry: {
-        index: './src/index.ts',
-        test: './src/__test__/index.ts'
+        index: './src/index',
+        test: './src/__test__/index'
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, '../dist'),
         clean: true
     },
     module: {

build/webpack.prod.js

@@ -0,0 +1,26 @@
+const path = require('path')
+
+module.exports = {
+    mode: 'development',
+    entry: path.resolve(__dirname, '../src/index.ts'),
+    output: {
+        filename: 'index.js',
+        path: path.resolve(__dirname, '../dist'),
+        library: {
+            name: 'handleableImmutable',
+            type: 'umd'
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /.ts?$/,
+                use: 'babel-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+}

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "webpack serve --open",
-    "build": "webpack"
+    "test": "webpack serve --config build/webpack.dev.js --open",
+    "build": "webpack --config build/webpack.prod.js"
   },
   "repository": {
     "type": "git",

src/__test__/index.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { createImmutable, finishImmutable} from '../index'
+import { createImmutable, getClone} from '../index'
 
 let obj = {
     d: {
@@ -24,24 +24,32 @@ const state = {
 // immer.a.b = 123
 // immer.a.c = immer.a.b
 
-// console.log(immer, finishImmutable(immer), state)
+// console.log(immer, getClone(immer), state)
 // let t = immer.a
 // console.log(immer, immer.proxy, immer.a.b, t.base, immer.isImmutable)
 // immer.a.b[0].d = {h:123}
 // immer.a.b = 123
 // console.log(immer, immer.a.proxy, immer.a.b)
 
 
-
-console.time('create')
-const dataSource = Object.fromEntries(
-  [...Array(4000).keys()].map(key => [key, {key, data: {value: key}}])
-)
-console.log(dataSource)
-console.timeEnd('create')
-
-console.time('update');
-const proxy = createImmutable(dataSource)
-proxy[1000].data.value = 100;
-finishImmutable(proxy)
-console.timeEnd('update');
+const immer = createImmutable(state, {
+  set(){
+    console.log('触发setter')
+  }
+})
+let t = immer.a.b
+t.d = 123
+console.log(immer, getClone(immer), state)
+
+// console.time('create')
+// const dataSource = Object.fromEntries(
+//   [...Array(4000).keys()].map(key => [key, {key, data: {value: key}}])
+// )
+// console.log(dataSource)
+// console.timeEnd('create')
+
+// console.time('update');
+// const proxy = createImmutable(dataSource)
+// proxy[1000].data.value = 100;
+// getClone(proxy)
+// console.timeEnd('update');

src/index.ts

@@ -32,18 +32,19 @@ function shallowCopy(value: any){
  * @param {*} handler 
  * @returns 
  */
-type ImmutableHandler = {
+export type ImmutableHandler = {
+    get?: (target: any, p: string | symbol, receiver: any) => void
     set?: (target: any, p: string | symbol, newValue: any, receiver: any) => void
 }
-type CreateImmutable = (base: any, handler?: ImmutableHandler, parent?: any) => any
-type CreateProxy = (base: any, handler?: ImmutableHandler) => any
+export type CreateImmutable = (base: any, handler?: ImmutableHandler, parent?: any) => any
+export type CreateProxy = (base: any, handler?: ImmutableHandler) => any
 const getIsImmutable = Symbol('isImmutable')
 const getBase = Symbol('base')
 const getCopy = Symbol('copy')
 const getParent = Symbol('parent')
 const getProp = Symbol('prop')
 const getRevoke = Symbol('revoke')
-export let createImmutable: CreateImmutable = function(base, handler = { set: () => {} }, parent = { receiver: null, prop: null }){
+export let createImmutable: CreateImmutable = function(base, handler = { set: () => {}, get: () => {} }, parent = { receiver: null, prop: null }){
     if(!isNeedToCopy(base)){
         return base
     }
@@ -55,9 +56,11 @@ export let createImmutable: CreateImmutable = function(base, handler = { set: ()
                     const p = { receiver: receiver, prop: prop }
                     target[prop] = createImmutable(target[prop], handler, p)
                 }
+                handler && handler.get && handler.get(target, prop, receiver)
                 return Reflect.get(target, prop, receiver)
             },
             set: function(target, prop, newValue, receiver){
+                handler && handler.set && handler.set(target, prop, newValue, receiver)
                 return Reflect.set(target, prop, newValue)
             }
         })

tsconfig.json

@@ -6,6 +6,10 @@
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
-        "moduleResolution": "node"
-    }
-  }
+        "moduleResolution": "node",
+        "declaration": true
+    },
+    "include": [
+        "src/index.ts"
+    ],
+}