Merge pull request #70 from 92green/feature/branchable

Add .branchable, fix submit non-branchable

Author: dxinteractive

README.md

@@ -273,6 +273,15 @@ function MyComponent(props) {
 
 [Demo](http://dendriform.xyz#branch)
 
+A form containing a non-branchable value such as a string, number, undefined or null will throw an error if `.branch()` is called on it. You can check if a form is branchable using `.branchable`:
+
+```js
+new Dendriform(123).branchable; // returns false
+new Dendriform({name: 'Bill'}).branchable; // returns true
+```
+
+The `.branchAll()` methods can be used to branch all children at once, returning an array of branched forms.
+
 ### Rendering
 
 The `.render()` function allows you to branch off and render a deep value in a React component.
@@ -1263,11 +1272,12 @@ const form = new Dendriform(value, {plugins});
 // form can be submitted by calling:
 form.plugins.submit.submit();
 
-// get whether the form has changed value
-form.plugins.submit.changed;
+// get whether the form has changed value i.e. is dirty
+form.plugins.submit.dirty.value;
+form.plugins.submit.dirty.useValue();
 
 // get whether the form has changed value at a path
-form.branch('foo').plugins.submit.changed;
+form.branch('foo').plugins.submit.dirty;
 ```
 
 PluginSubmit has the following properties and methods.

packages/dendriform/README.md

@@ -273,6 +273,15 @@ function MyComponent(props) {
 
 [Demo](http://dendriform.xyz#branch)
 
+A form containing a non-branchable value such as a string, number, undefined or null will throw an error if `.branch()` is called on it. You can check if a form is branchable using `.branchable`:
+
+```js
+new Dendriform(123).branchable; // returns false
+new Dendriform({name: 'Bill'}).branchable; // returns true
+```
+
+The `.branchAll()` methods can be used to branch all children at once, returning an array of branched forms.
+
 ### Rendering
 
 The `.render()` function allows you to branch off and render a deep value in a React component.
@@ -1263,11 +1272,12 @@ const form = new Dendriform(value, {plugins});
 // form can be submitted by calling:
 form.plugins.submit.submit();
 
-// get whether the form has changed value
-form.plugins.submit.changed;
+// get whether the form has changed value i.e. is dirty
+form.plugins.submit.dirty.value;
+form.plugins.submit.dirty.useValue();
 
 // get whether the form has changed value at a path
-form.branch('foo').plugins.submit.changed;
+form.branch('foo').plugins.submit.dirty;
 ```
 
 PluginSubmit has the following properties and methods.

packages/dendriform/src/Dendriform.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import {useState, useEffect, useRef} from 'react';
 import {shallowEqualArrays} from 'shallow-equal';
-import {getIn, entries, applyPatches, zoomOutPatches, SET} from 'dendriform-immer-patch-optimiser';
+import {getIn, getType, entries, applyPatches, zoomOutPatches, SET, BASIC} from 'dendriform-immer-patch-optimiser';
 import type {Path} from 'dendriform-immer-patch-optimiser';
 import produce, {isDraft, original} from 'immer';
 import {producePatches, Patch} from './producePatches';
@@ -697,6 +697,9 @@ const Branch = React.memo(
     (prevProps, nextProps) => shallowEqualArrays(prevProps.deps, nextProps.deps)
 );
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const branchable = (thing: any) => getType(thing) !== BASIC;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const entriesOrDie = (thing: any, error: ErrorKey) => {
     try {
@@ -813,6 +816,10 @@ export class Dendriform<V,P extends Plugins = undefined> {
         return this.core.applyIdToPlugins(this.id, this.path) as P;
     }
 
+    get branchable(): boolean {
+        return branchable(this.value);
+    }
+
     set = (toProduce: ToProduce<V>, options: SetOptions = {}): void => {
         this.core.setWithDebounce(this.id, toProduce, options);
     };

packages/dendriform/src/plugins/PluginSubmit.ts

@@ -87,8 +87,10 @@ export class PluginSubmit<V,E=undefined> extends Plugin {
 
     submit(): void {
         const state = this.getState();
-        // call this to create nodes so arrays can diff in onSubmit
-        state.previous.branchAll();
+        if(state.previous.branchable) {
+            // call this to create nodes so arrays can diff in onSubmit
+            state.previous.branchAll();
+        }
         state.previous.set(state.form.value);
     }
 

packages/dendriform/test/Dendriform.test.tsx

@@ -562,6 +562,21 @@ describe(`Dendriform`, () => {
         });
     });
 
+    describe(`branchable`, () => {
+        test(`should determine if branchable`, () => {
+            expect(new Dendriform(123).branchable).toBe(false);
+            expect(new Dendriform('abc').branchable).toBe(false);
+            expect(new Dendriform(true).branchable).toBe(false);
+            expect(new Dendriform(undefined).branchable).toBe(false);
+            expect(new Dendriform(null).branchable).toBe(false);
+            expect(new Dendriform({foo: true}).branchable).toBe(true);
+            expect(new Dendriform([1,2,3]).branchable).toBe(true);
+            expect(new Dendriform(new Map()).branchable).toBe(true);
+            expect(new Dendriform(new Set()).branchable).toBe(true);
+            expect(new Dendriform(new Date()).branchable).toBe(true);
+        });
+    });
+
     describe(`.branch()`, () => {
 
         test(`should get child value`, () => {

packages/dendriform/test/plugins/PluginSubmit.test.ts

@@ -43,6 +43,24 @@ describe(`plugin submit`, () => {
             foo: 456
         });
     });
+
+    test(`should submit basic value if changed`, () => {
+
+        const value: number = 2;
+
+        const onSubmit = jest.fn();
+        
+        const plugins = {
+            submit: new PluginSubmit({onSubmit})
+        };
+
+        const form = new Dendriform(value, {plugins});
+        form.set(3);
+        form.plugins.submit.submit();
+
+        expect(onSubmit).toHaveBeenCalledTimes(1);
+        expect(onSubmit.mock.calls[0][0]).toEqual(3);
+    });
 
     test(`should change value and show previous and dirty at paths`, () => {