feat: mobx5 support + fix: #432 #415 #355 #347 #425

.gitignore

@@ -1,4 +1,5 @@
 /coverage
+/demo
 /demo/build
 /demo/node_modules
 /es6
@@ -12,4 +13,4 @@
 npm-debug.log
 coverage.lcov
 codecov.yml
-yarn-error.log
+yarn-error.log

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.35
+* mobx5 support
+* Introduced observable `type` field prop
+* Removed `label` fallback to field `name`
+* fix: #432 #415 #355 #347 #425
+
 # 1.34
 * Added `struct` constructor prop
 * Reimplemented add() method

package.json

@@ -20,11 +20,14 @@
     "commit": "git-cz && git push origin",
     "watch:build": "babel --watch -d lib/ src/",
     "watch:test": "npm run test -- -w",
-    "switch:latest": "replace \"from 'mobx3'\" \"from 'mobx'\" src -r",
+    "switch:mobx": "replace \"from 'mobx5'\" \"from 'mobx'\" src -r",
+    "switch:mobx5": "replace \"from 'mobx4'\" \"from 'mobx5'\" src -r",
+    "switch:mobx4": "replace \"from 'mobx3'\" \"from 'mobx4'\" src -r",
     "switch:mobx3": "replace \"from 'mobx'\" \"from 'mobx3'\" src -r",
-    "test": "npm run test:latest && npm run test:mobx3",
-    "test:latest": "cross-env TEST=true mocha tests --compilers js:babel-register",
-    "test:mobx3": "npm run switch:mobx3 && cross-env TEST=true mocha tests --compilers js:babel-register && npm run switch:latest",
+    "test:mobx5": "npm run switch:mobx5 && cross-env TEST=true mocha tests --compilers js:babel-register",
+    "test:mobx4": "npm run switch:mobx4 && cross-env TEST=true mocha tests --compilers js:babel-register",
+    "test:mobx3": "npm run switch:mobx3 && cross-env TEST=true mocha tests --compilers js:babel-register",
+    "test": "npm run test:mobx3 && npm run test:mobx4 && npm run test:mobx5 && npm run switch:mobx",
     "cover": "nyc npm test",
     "coverage:check": "nyc check-coverage --satements 95 --branches 80 --functions 95 --lines 95",
     "coverage:report": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
@@ -62,7 +65,7 @@
     "lodash": "^4.16.2"
   },
   "peerDependencies": {
-    "mobx": "^2.5.0 || ^3.0.0 || ^4.0.0"
+    "mobx": "^2.5.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
     "ajv": "^5.2.2",
@@ -87,8 +90,10 @@
     "eslint-plugin-import": "2.8.0",
     "husky": "0.13.1",
     "json-loader": "0.5.4",
-    "mobx": "^4.0.0",
-    "mobx3": "npm:[email protected]",
+    "mobx": "^5.0.0",
+    "mobx5": "npm:mobx@^5.0.0",
+    "mobx4": "npm:mobx@^4.0.0",
+    "mobx3": "npm:mobx@^3.0.0",
     "mocha": "3.2.0",
     "npm-run-all": "4.0.1",
     "nyc": "^10.2.0",

src/Field.js

@@ -10,13 +10,12 @@ import {
 
 import {
   parseInput,
-  parseGetLabel,
   defaultClearValue } from './parser';
 
 const setupFieldProps = (instance, props, data) =>
   Object.assign(instance, {
     $value: instance.$initial,
-    $label: props.$label || data.label || instance.name,
+    $label: props.$label || data.label || '',
     $placeholder: props.$placeholder || data.placeholder || '',
     $disabled: props.$disabled || data.disabled || false,
     $bindings: props.$bindings || data.bindings || 'default',
@@ -52,7 +51,6 @@ export default class Field extends Base {
   key;
   name;
   path;
-  type;
   state;
 
   $observers;
@@ -66,6 +64,7 @@ export default class Field extends Base {
 
   @observable $options;
   @observable $value;
+  @observable $type;
   @observable $label;
   @observable $placeholder;
   @observable $default;
@@ -190,8 +189,12 @@ export default class Field extends Base {
     return toJS(this.$validating);
   }
 
+  @computed get type() {
+    return toJS(this.$type);
+  }
+
   @computed get label() {
-    return parseGetLabel(this.$label);
+    return toJS(this.$label);
   }
 
   @computed get placeholder() {
@@ -394,9 +397,8 @@ export const prototypes = {
         output,
       } = $data;
 
-      this.type = $type || type || 'text';
       this.name = _.toString($data.name || $key);
-
+      this.$type = $type || type || 'text';
       this.$input = $try($input, input, this.$input);
       this.$output = $try($output, output, this.$output);
 
@@ -418,8 +420,7 @@ export const prototypes = {
 
     /* The field IS the value here */
     this.name = _.toString($key);
-    this.type = $type || 'text';
-
+    this.$type = $type || 'text';
     this.$input = $try($input, this.$input);
     this.$output = $try($output, this.$output);
 

src/parser.js

@@ -29,10 +29,6 @@ const parseInput = (input, {
 }) =>
   input(utils.$try(separated, unified, initial, defaultValue({ type, isEmptyArray })));
 
-// make integers labels empty
-const parseGetLabel = label =>
-  _.isFinite(_.toNumber(label)) ? '' : label;
-
 const parseArrayProp = ($val, $prop) => {
   const $values = _.values($val);
   if ($prop === 'value' || $prop === 'initial' || $prop === 'default') {
@@ -223,7 +219,6 @@ export default {
   defaultClearValue,
   parseInput,
   parsePath,
-  parseGetLabel,
   parseArrayProp,
   parseCheckArray,
   parseCheckOutput,

tests/data/_.fixes.js

@@ -19,10 +19,11 @@ import $Q from './forms/fixes/form.q';
 import $Q1 from './forms/fixes/form.q1';
 import $Q2 from './forms/fixes/form.q2';
 import $R from './forms/fixes/form.r';
+import $425 from './forms/fixes/form.425';
 
 export default {
 
-  $A, $B, $C, $D, $E, $F, $G, $H, $I, $L, $M, $N, $O, $P, $Q, $Q1, $Q2, $R,
+  $A, $B, $C, $D, $E, $F, $G, $H, $I, $L, $M, $N, $O, $P, $Q, $Q1, $Q2, $R, $425,
 
 };
 

tests/data/forms/fixes/form.425.js

@@ -0,0 +1,20 @@
+import { Form } from '../../../../src';
+
+const fields = [{
+  name: '1a',
+  value: ' ',
+  label: '1aa',
+}, {
+  name: '2a',
+  value: ' ',
+  label: '2aa',
+}, {
+  name: '3a',
+  value: ' ',
+  label: '3aa',
+}];
+
+class NewForm extends Form {}
+
+export default new NewForm({ fields }, { name: 'Fixes-425' });
+

tests/data/forms/fixes/form.l.js

@@ -31,6 +31,7 @@ class NewForm extends Form {
   hooks() {
     return {
       onInit() {
+        this.$('email').set('type', 'email'); // #415
         this.$('email').set('value', 'notAnEmail');
 
         describe('Form $L onInit() checks', () => {

tests/data/forms/nested/form.n.js

@@ -36,6 +36,10 @@ const output = {
   'nested.field': value => Number(value),
 };
 
+const labels = {
+  'members[].firstname': 'First Name Label',
+};
+
 const placeholders = {
   'club': 'Insert Club',
   'club.name': 'Insert Club Name',
@@ -62,5 +66,5 @@ class NewForm extends Form {
 }
 
 export default new NewForm({
-  fields, values, input, output, placeholders, bindings,
+  fields, values, input, output, placeholders, bindings, labels,
 }, { name: 'Nested-N' });

tests/fixes.labels.js

@@ -0,0 +1,13 @@
+import { expect } from 'chai';
+
+import $ from './data/_.fixes'; // FORMS
+
+describe('Check Fixes $425 labels', () => {
+  it('$425 labels() check', () =>
+    expect($.$425.labels())
+      .to.be.deep.equal({
+        '1a': '1aa',
+        '2a': '2aa',
+        '3a': '3aa',
+      }));
+});

tests/fixes.types.js

@@ -0,0 +1,9 @@
+import { expect } from 'chai';
+
+import $ from './data/_.fixes'; // FORMS
+
+
+describe('$L Field types checks', () => {
+  it('$L email type should be equal to "email"', () =>
+    expect($.$L.$('email').type).to.be.equal('email')); // #415
+});

tests/fixes.values.js

@@ -225,6 +225,20 @@ describe('Check Fixes $Q values', () => {
     expect($.$Q.$('arrayFieldB').value).to.be.deep.equal(b));
 });
 
+describe('Check Fixes $Q1 values', () => {
+  it('$Q1 values check', () =>
+    expect($.$Q1.values())
+      .to.be.deep.equal({
+        other: {
+          nested: 'nested-value',
+        },
+        tags: [{
+          id: 'x',
+          name: 'y',
+        }],
+      }));
+});
+
 describe('Check Fixes $R values', () => {
   const a = $.$R.values().organization;
   const b = $.$R.$('organization').value;
@@ -235,3 +249,13 @@ describe('Check Fixes $R values', () => {
   it('$R organization value check', () =>
     expect(b).to.be.deep.equal(b));
 });
+
+describe('Check Fixes $425 values', () => {
+  it('$425 values() check', () =>
+    expect($.$425.values())
+      .to.be.deep.equal({
+        '1a': ' ',
+        '2a': ' ',
+        '3a': ' ',
+      }));
+});

tests/nested.props.js

@@ -172,7 +172,7 @@ describe('Check Nested $N bindings props', () => {
     .bind();
 
   it('$N membersFirstNameBindings floatingLabelText should be equal to empty string', () =>
-    expect(membersFirstNameBindings).to.have.property('floatingLabelText', 'firstname'));
+    expect(membersFirstNameBindings).to.have.property('floatingLabelText', 'First Name Label'));
 
   it('$N membersFirstNameBindings value should be equal to "Clint"', () =>
     expect(membersFirstNameBindings).to.have.property('value', 'Clint'));

yarn.lock

@@ -4268,13 +4268,17 @@ [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-"mobx3@npm:[email protected]":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.0.0.tgz#6d9fb326d51bac9994dd8fe6762ace6ba2bef2ac"
+"mobx3@npm:mobx@^3.0.0":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.6.2.tgz#fb9f5ff5090539a1ad54e75dc4c098b602693320"
 
-mobx@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.1.1.tgz#7ce7ef92b22e85271d1fc274a124d7fa32fcceeb"
+"mobx4@npm:mobx@^4.0.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.3.1.tgz#334e5aab4916b1d43f0faf3605a64b1b4b3ccb8d"
+
+"mobx5@npm:mobx@^5.0.0", mobx@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.0.3.tgz#53b97f2a0f9b0dd7774c96249f81bf2d513d8e1c"
 
 [email protected]:
   version "3.2.0"