feat(store): auto batch store methods

Author: solkimicreb

__tests__/batching.test.jsx

@@ -1,5 +1,10 @@
 import React, { Component } from 'react';
-import { render, cleanup, act } from '@testing-library/react/pure';
+import {
+ render,
+ cleanup,
+ fireEvent,
+ act,
+} from '@testing-library/react/pure';
 import {
  view,
  store,
@@ -187,7 +192,35 @@ describe('batching', () => {
  expect(renderCount).toBe(2);
  });
 
- test('should batch state changes inside native event listeners', () => {
+ test('should batch state changes in react event listeners', () => {
+ let renderCount = 0;
+ const counter = store({ num: 0 });
+ const MyComp = view(() => {
+ renderCount += 1;
+ return (
+ <button
+ type="button"
+ onClick={() => {
+ counter.num += 1;
+ counter.num += 1;
+ }}
+ >
+ {counter.num}
+ </button>
+ );
+ });
+
+ const { container } = render(<MyComp />);
+ const button = container.querySelector('button');
+ expect(renderCount).toBe(1);
+ expect(container).toHaveTextContent('0');
+ fireEvent.click(button);
+ expect(container).toHaveTextContent('2');
+ expect(renderCount).toBe(2);
+ });
+
+ // TODO: batching native event handlers causes in input caret jumping bug
+ test.skip('should batch state changes inside native event listeners', () => {
  let renderCount = 0;
  const person = store({ name: 'Bob' });
  const MyComp = view(() => {
@@ -198,15 +231,15 @@ describe('batching', () => {
  const { container } = render(<MyComp />);
  expect(renderCount).toBe(1);
  expect(container).toHaveTextContent('Bob');
- const batched = act(() => {
+ const handler = act(() => {
  person.name = 'Ann';
  person.name = 'Rick';
  });
- document.body.addEventListener('click', batched);
+ document.body.addEventListener('click', handler);
  document.body.dispatchEvent(new Event('click'));
  expect(container).toHaveTextContent('Rick');
  expect(renderCount).toBe(2);
- document.body.removeEventListener('click', batched);
+ document.body.removeEventListener('click', handler);
  });
 
  // async/await is only batched when it is transpiled to promises and/or generators
@@ -314,6 +347,69 @@ describe('batching', () => {
  expect(renderCount).toBe(2);
  });
 
+ test('should batch changes in store methods', () => {
+ let numOfRuns = 0;
+ let name = '';
+
+ const myStore = store({
+ firstName: 'My',
+ lastName: 'Store',
+ setName(firstName, lastName) {
+ this.firstName = firstName;
+ this.lastName = lastName;
+ },
+ });
+
+ const effect = autoEffect(() => {
+ name = `${myStore.firstName} ${myStore.lastName}`;
+ numOfRuns += 1;
+ });
+ expect(name).toBe('My Store');
+ expect(numOfRuns).toBe(1);
+
+ myStore.setName('Awesome', 'Stuff');
+ expect(name).toBe('Awesome Stuff');
+ expect(numOfRuns).toBe(2);
+
+ clearEffect(effect);
+ });
+
+ test('should batch changes in store setters', () => {
+ let numOfRuns = 0;
+ let name = '';
+
+ const myStore = store({
+ firstName: 'My',
+ middleName: 'Little',
+ lastName: 'Store',
+ get name() {
+ return `${this.firstName} ${this.middleName} ${this.lastName}`;
+ },
+ set name(newName) {
+ const [firstName, middleName, lastName] = newName.split(' ');
+ this.firstName = firstName;
+ this.middleName = middleName;
+ this.lastName = lastName;
+ },
+ });
+
+ const effect = autoEffect(() => {
+ name = myStore.name;
+ numOfRuns += 1;
+ });
+ expect(name).toBe('My Little Store');
+ expect(numOfRuns).toBe(1);
+
+ myStore.name = 'Awesome JS Stuff';
+ expect(name).toBe('Awesome JS Stuff');
+ expect(myStore.name).toBe('Awesome JS Stuff');
+ // the reactions runs two times once for the setter call
+ // and once for all the mutations inside the setter (alltogether)
+ expect(numOfRuns).toBe(3);
+
+ clearEffect(effect);
+ });
+
  test('should not break Promises', async () => {
  await Promise.resolve(12)
  .then(value => {

src/store.js

@@ -1,12 +1,43 @@
 import { useMemo } from 'react';
 import { observable } from '@nx-js/observer-util';
 
+import { batch } from './scheduler';
 import {
  isInsideFunctionComponent,
  isInsideClassComponentRender,
  isInsideFunctionComponentWithoutHooks,
 } from './view';
 
+function batchMethods(obj) {
+ Object.getOwnPropertyNames(obj).forEach(key => {
+ const { value, set } = Object.getOwnPropertyDescriptor(obj, key);
+
+ // batch store methods
+ if (typeof value === 'function') {
+ // use a Proxy instead of function wrapper to keep the method name
+ obj[key] = new Proxy(value, {
+ apply(target, thisArg, args) {
+ return batch(target, thisArg, args);
+ },
+ });
+ } else if (set) {
+ // batch property setters
+ Object.defineProperty(obj, key, {
+ set(newValue) {
+ return batch(set, obj, [newValue]);
+ },
+ });
+ }
+ });
+ return obj;
+}
+
+function createStore(obj) {
+ return batchMethods(
+ observable(typeof obj === 'function' ? obj() : obj),
+ );
+}
+
 export function store(obj) {
  // do not create new versions of the store on every render
  // if it is a local store in a function component
@@ -15,10 +46,7 @@ export function store(obj) {
  // useMemo is not a semantic guarantee
  // In the future, React may choose to “forget” some previously memoized values and recalculate them on next render
  // see this docs for more explanation: https://reactjs.org/docs/hooks-reference.html#usememo
- return useMemo(
- () => observable(typeof obj === 'function' ? obj() : obj),
- [],
- );
+ return useMemo(() => createStore(obj), []);
  }
  if (isInsideFunctionComponentWithoutHooks) {
  throw new Error(
@@ -30,5 +58,5 @@ export function store(obj) {
  'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
  );
  }
- return observable(typeof obj === 'function' ? obj() : obj);
+ return createStore(obj);
 }