2018-04-09 10:57:39 -07:00
|
|
|
"use strict"
|
2018-07-25 12:03:58 +02:00
|
|
|
import {measure} from "./measure"
|
2018-04-09 10:57:39 -07:00
|
|
|
import produce, {setAutoFreeze, setUseProxies} from "../dist/immer.umd.js"
|
|
|
|
|
import cloneDeep from "lodash.clonedeep"
|
|
|
|
|
import * as Immutable from "immutable"
|
|
|
|
|
|
2018-07-25 13:26:22 +02:00
|
|
|
console.log("\n# incremental - lot of small incremental changes\n")
|
|
|
|
|
|
2018-04-09 10:57:39 -07:00
|
|
|
function createTestObject() {
|
|
|
|
|
return {
|
|
|
|
|
a: 1,
|
|
|
|
|
b: "Some data here"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-25 12:13:31 +02:00
|
|
|
const MAX = 1000
|
2018-07-25 12:03:58 +02:00
|
|
|
const baseState = {
|
|
|
|
|
ids: [],
|
|
|
|
|
map: Object.create(null)
|
|
|
|
|
}
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
let immutableJsBaseState
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
immutableJsBaseState = {
|
|
|
|
|
ids: Immutable.List(),
|
|
|
|
|
map: Immutable.Map()
|
|
|
|
|
}
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
measure(
|
|
|
|
|
"just mutate",
|
|
|
|
|
() => cloneDeep(baseState),
|
|
|
|
|
draft => {
|
|
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
draft.ids.push(i)
|
|
|
|
|
draft.map[i] = createTestObject()
|
|
|
|
|
}
|
2018-04-09 10:57:39 -07:00
|
|
|
}
|
2018-07-25 12:03:58 +02:00
|
|
|
)
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
measure(
|
2018-07-25 12:13:31 +02:00
|
|
|
"handcrafted reducer",
|
2018-07-25 12:03:58 +02:00
|
|
|
() => cloneDeep(baseState),
|
|
|
|
|
state => {
|
2018-04-09 10:57:39 -07:00
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
state = {
|
|
|
|
|
ids: [...state.ids, i],
|
|
|
|
|
map: {
|
|
|
|
|
...state.map,
|
|
|
|
|
[i]: createTestObject()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-07-25 12:03:58 +02:00
|
|
|
}
|
|
|
|
|
)
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
measure(
|
|
|
|
|
"immutableJS",
|
|
|
|
|
() => immutableJsBaseState,
|
|
|
|
|
state => {
|
2018-04-09 10:57:39 -07:00
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
state = {
|
|
|
|
|
ids: state.ids.push(i),
|
|
|
|
|
map: state.map.set(i, createTestObject())
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-07-25 12:03:58 +02:00
|
|
|
}
|
|
|
|
|
)
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
measure(
|
2018-07-25 12:13:31 +02:00
|
|
|
"immer (proxy)",
|
2018-07-25 12:03:58 +02:00
|
|
|
() => {
|
2018-04-09 10:57:39 -07:00
|
|
|
setUseProxies(true)
|
|
|
|
|
setAutoFreeze(false)
|
2018-07-25 12:03:58 +02:00
|
|
|
return baseState
|
|
|
|
|
},
|
|
|
|
|
state => {
|
|
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
state = produce(state, draft => {
|
|
|
|
|
draft.ids.push(i)
|
|
|
|
|
draft.map[i] = createTestObject()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
2018-04-09 10:57:39 -07:00
|
|
|
|
2018-07-25 12:03:58 +02:00
|
|
|
measure(
|
2018-07-25 12:13:31 +02:00
|
|
|
"immer (es5)",
|
2018-07-25 12:03:58 +02:00
|
|
|
() => {
|
|
|
|
|
setUseProxies(false)
|
|
|
|
|
setAutoFreeze(false)
|
|
|
|
|
return baseState
|
|
|
|
|
},
|
|
|
|
|
state => {
|
2018-04-09 10:57:39 -07:00
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
state = produce(state, draft => {
|
|
|
|
|
draft.ids.push(i)
|
|
|
|
|
draft.map[i] = createTestObject()
|
|
|
|
|
})
|
|
|
|
|
}
|
2018-07-25 12:03:58 +02:00
|
|
|
}
|
|
|
|
|
)
|
2018-07-25 12:13:31 +02:00
|
|
|
|
|
|
|
|
measure(
|
|
|
|
|
"immer (proxy) - single produce",
|
|
|
|
|
() => {
|
|
|
|
|
setUseProxies(true)
|
|
|
|
|
setAutoFreeze(false)
|
|
|
|
|
return baseState
|
|
|
|
|
},
|
|
|
|
|
state => {
|
|
|
|
|
produce(state, draft => {
|
|
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
draft.ids.push(i)
|
|
|
|
|
draft.map[i] = createTestObject()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
measure(
|
|
|
|
|
"immer (es5) - single produce",
|
|
|
|
|
() => {
|
|
|
|
|
setUseProxies(false)
|
|
|
|
|
setAutoFreeze(false)
|
|
|
|
|
return baseState
|
|
|
|
|
},
|
|
|
|
|
state => {
|
|
|
|
|
produce(state, draft => {
|
|
|
|
|
for (let i = 0; i < MAX; i++) {
|
|
|
|
|
draft.ids.push(i)
|
|
|
|
|
draft.map[i] = createTestObject()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
)
|