Coder Social home page Coder Social logo

tnfe / limu Goto Github PK

View Code? Open in Web Editor NEW
212.0 9.0 13.0 2.95 MB

High performance immutable lib alternative to immer with the same api, based on shallow copy on read and mark modified on write mechanism.

Home Page: https://tnfe.github.io/limu

License: MIT License

JavaScript 84.40% TypeScript 15.60%
immutable immutablejs fast high-perfomance

limu's Introduction

limu 🍋

limu is short for love immutable, born for efficient creation and operation of immutable object, based on shallow copy on read and mark modified on write mechanism.

It is fast, It is nearly more than 2 or 20 times faster than immer in different situations. Click this online perf demo to review the amazing result.

No freeze by default, limu is 10 times or more faster than Immer in most scenarios

  • Debugging friendly, view draft directly anytime without current.
  • Smaller package, only 4.3kb gzip.
  • No freeze by default, faster than immer in different situations.
  • Natural Support for map and Set.

Pay attention, limu can only run on JavaScript runtime that supports proxy

Performance ⚡️

No freeze by default, limu is 10 times or more faster than Immer in most scenarios after 3.7 version, limu is now the fastest immutable js lib of all ( faster than immer and mutative ).

test 1 (inspired by this immer case )

test 2 test 2

The performance testing process is as follows

git clone https://github.com/tnfe/limu
cd limu
npm i
cd benchmark
npm i
node opBigData.js // trigger test execution, the console echoes the result
# or
node caseOnlyRead.js
npm run s1
npm run s2
npm run s3
npm run s4

You are very welcome to submit your test to the benchmark directory or test directory

Quick Start

install

npm i limu

apis

import { produce, createDraft, finishDraft } from 'limu';

produce

const baseState = {
  a: 1,
  b: [1, 2, 3],
  c: {
    c1: { n: 1 },
    c2: { m: 2 },
  },
};
const nextState = produce(baseState, (draft) => {
  draft.a = 2;
  draft.b['2'] = 100;
});

console.log(nextState === baseState); // false
console.log(nextState.a === baseState.a); // false
console.log(nextState.b === baseState.b); // false
console.log(nextState.c === baseState.c); // true

Currying call

const producer = produce((draft) => {
  draft.a = 2;
  draft.b['2'] = 100;
});
const nextState = producer(baseState);

createDraft, finishDraft

const draft = createDraft(baseState);
draft.a = 2;
draft.b = [];
const nextState = finishDraft(draft);

console.log(nextState === baseState); // false
console.log(nextState.a === baseState.a); // false
console.log(nextState.b === baseState.b); // false
console.log(nextState.c === baseState.c); // true

Experience limu on the console

logo

As limu is an immutable js library based on shallow copy on read and mark modified on write. Based on this mechanism, so it is more friendly to debugging. You can copy the following code to the console experience

there are 2 ways to quickly experience limu and compare limu with immer.

  • 1, open limu doc site and right-click to open the console.

  • 2, visit unpkg, right-click to open the console, and then paste the following code to load js

function loadJs(url) {
  const dom = document.createElement('script');
  dom.src = url;
  document.body.appendChild(dom);
}

loadJs('https://unpkg.com/[email protected]/dist/limu.min.js'); // load limu umd bundle
loadJs('https://unpkg.com/[email protected]/dist/immer.umd.production.min.js'); // load immer umd bundle

Then you can paste below codes to run

  • case 1
function oneCase(produce) {
  const demo = { info: Array.from(Array(10000).keys()) };
  produce(demo, (draft) => {
    draft.info[2000] = 0;
  });
}

function runBenchmark(produce, label) {
  const start = Date.now();
  const limit = 100;
  for (let i = 0; i < limit; i++) {
    oneCase(produce);
  }
  console.log(`${label} avg spend ${(Date.now() - start) / limit} ms`);
}

function run() {
  immer.setAutoFreeze(false);
  runBenchmark(immer.produce, 'immer,');
  runBenchmark(limu.produce, 'limu,');
}
  • case 2
lib = window.limu; // or lib = window.immer
const base = {
  a: 1,
  b: { b1: 1, b2: 2, b3: { b31: 1 } },
  c: [1, 2, 3],
  d: { d1: 1000 },
};
const draft = lib.createDraft(base);
draft.a = 200;
draft.b.b1 = 100;
console.log(draft);
draft.c.push(4);
const final = lib.finishDraft(draft);
console.log(base === final); // false
console.log(base.a === final.a); // false
console.log(base.b === final.b); // false
console.log(base.b.b3 === final.b.b3); // true
console.log(base.c === final.c); // false
console.log(base.d === final.d); //true

Higher observability will greatly improve the development and debugging experience, as shown in the figure below, after unfolding the limu draft, you can observe all data nodes of the draft in real time

image

And the immer or mutative expansion is like this image

License

Copyright (c) Tencent Corporation. All rights reserved.

Limu is released under the MIT License(https://opensource.org/licenses/MIT)

limu's People

Contributors

dravenww avatar fantasticsoul avatar lilong7676 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

limu's Issues

存图

cn perf
image

en perf
image

cn perf2
image

en perf 2
image

支持ESM

  1. package.json缺少module字段和sideEffects字段,无法进行摇树
  2. package.json缺少exports字段,next.js以及其它node12+环境恐怕无法使用。

推荐使用 tsup 打包

【bug】内部重赋值引用,finish后数据有丢失

代码如下( 可访问 https://tnfe.github.io/limu/ 打开console复制并回车运行 )

// const { createDraft, finishDraft } = immer; // immer 结果ok
const { createDraft, finishDraft } = limu; // limu 结果不正常

const base = {
    list: [ {name:1}, {name:2} ],
    map: {},
};
const draft = createDraft(base, { onOperate: console.log });
const map = {};
draft.list.forEach(item=>{
    map[item.name] = item;
});
draft.map = map;
const final = finishDraft(draft);

console.log('base', base);
console.log('final', final);

limu 结果:
image

immer 结果:
image

`short of` 和 `short for`

limu is short of love immutable, born for efficient creation and operation of immutable object, based on shallow copy on read and mark modified on write mechanism.

  • short for: as a less long form of a word or name 参考
  • short of: not having enough of something 参考

是否应该改为 limu is short for love immutable ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.