formatic - npm Package Compare versions

Comparing version 0.0.1 to 0.0.3

__tests__/compile.js

@@ -8,3 +8,3 @@ /*global describe, it, expect*/
 
-  var formatic = require('../')('react');
+  var formatic = require('../').create('react');
 
@@ -20,3 +20,7 @@ var compile = function (field, props) {
     _.each(props, function (value, key) {
-      expect(form.root.fields[0][key]).toEqual(value);
+      var child = form.root.fields[0];
+      if (child.type === 'field') {
+        child = child.fields[0];
+      }
+      expect(child[key]).toEqual(value);
     });
@@ -51,2 +55,4 @@ };
   });
+
+
 });

__tests__/form-data.js

@@ -6,3 +6,3 @@ /*global describe, it, expect*/
 
-  var formatic = require('../')('react');
+  var formatic = require('../').create('react');
 
@@ -9,0 +9,0 @@ it('form can hold data', function () {

__tests__/plugins.js

@@ -6,3 +6,3 @@ /*global describe, it, expect*/
 
-  var Formatic = require('../');
+  var Formatic = require('../').create;
 
@@ -184,2 +184,39 @@ var pigLatin = function (word) {
 
+  it('should take parameters for a plugin', function () {
+
+    var plugin = function (formatic, plugin) {
+
+      formatic.method('ask', function () {
+        return plugin.config.answer;
+      });
+    };
+
+    var formatic = Formatic();
+
+    formatic.plugin(plugin, {
+      answer: 42
+    });
+
+    expect(formatic.ask()).toEqual(42);
+  });
+
+  it('should listen for plugin', function () {
+
+    var formatic = Formatic();
+
+    var foundPlugin = false;
+
+    formatic.onPlugin(function (plugin) {
+      if (plugin.tag === 'gotcha') {
+        foundPlugin = true;
+      }
+    });
+
+    formatic.plugin(function (formatic, plugin) {
+      plugin.tag = 'gotcha';
+    });
+
+    expect(foundPlugin).toEqual(true);
+  });
+
 });

__tests__/types.js

@@ -18,3 +18,3 @@ /*global describe, it, expect*/
 
-      var typeMap = formatic.options.typeMap || {};
+      var typeMap = formatic.config('core-type.typeMap') || {};
       var types = Object.keys(typeMap).filter(function (key) {
@@ -27,3 +27,7 @@ return typeMap[key] === type;
       if (types.length === 0) {
-        types.push(type);
+        // If this type maps to itself, make sure that type doesn't map to
+        // something else.
+        if (!(type in typeMap)) {
+          types.push(type);
+        }
       }
@@ -34,3 +38,3 @@
 
-    var testValueType = function (field, tagName) {
+    var testType = function (field, fn) {
 
@@ -54,15 +58,56 @@ var types = unmapType(field.type);
           });
-          form.set('name', 'Joe');
 
-          var node = component.getDOMNode().getElementsByTagName(tagName)[0];
+          fn(form, component);
+        });
+      });
+    };
 
-          expect(node.value).toEqual('Joe');
+    var testValueType = function (field, selector, setter) {
+
+      testType(field, function (form, component) {
+        form.set('name', 'Joe');
+
+        var value;
+        var node;
+
+        if (typeof selector === 'function') {
+          value = selector(component.getDOMNode());
+        } else {
+          if (selector[0] === '.') {
+            node = component.getDOMNode().getElementsByClassName(selector)[0];
+          } else {
+            node = component.getDOMNode().getElementsByTagName(selector)[0];
+          }
+          value = node.value;
+        }
+
+        expect(value).toEqual('Joe');
+
+        if (typeof setter === 'function') {
+          setter(component.getDOMNode(), 'Mary');
+        } else {
           node.value = 'Mary';
+          TestUtils.Simulate.change(node);
+        }
 
-          TestUtils.Simulate.change(node);
-          expect(form.val()).toEqual({name: 'Mary'});
-        });
+        expect(form.val()).toEqual({name: 'Mary'});
       });
     };
 
+    var testValuesType = function (field, selector, setter) {
+
+      testType(field, function (form, component) {
+
+        form.set('colors', ['red', 'green']);
+
+        var value = selector(component.getDOMNode());
+
+        expect(value).toEqual(['red', 'green']);
+
+        setter(component.getDOMNode(), ['red']);
+
+        expect(form.val()).toEqual({colors: ['red']});
+      });
+    };
+
     testValueType({
@@ -85,10 +130,74 @@ type: 'text',
     testValueType({
+      type: 'dropdown',
+      key: 'name',
+      choices: ['Joe', 'Mary']
+    }, function (node) {
+      return node.getElementsByClassName('field-value')[0].innerHTML;
+    }, function (node, value) {
+      var arrowNode = node.getElementsByClassName('field-toggle')[0];
+      TestUtils.Simulate.click(arrowNode);
+      var choiceNodes = node.getElementsByClassName('field-choice');
+      choiceNodes = Array.prototype.slice.call(choiceNodes, 0);
+      var matchingNodes = choiceNodes.filter(function (node) {
+        return node.innerHTML === value;
+      });
+      TestUtils.Simulate.click(matchingNodes[0]);
+    });
+
+    testValueType({
       type: 'password',
       key: 'name'
     }, 'input');
+
+    testValuesType({
+      type: 'checkbox',
+      key: 'colors',
+      choices: ['red', 'blue', 'green']
+    }, function (node) {
+      var choiceNodes = node.getElementsByTagName('input');
+      choiceNodes = Array.prototype.slice.call(choiceNodes, 0);
+      return choiceNodes.filter(function (choiceNode) {
+        return choiceNode.checked;
+      }).map(function (choiceNode) {
+        return choiceNode.value;
+      });
+    }, function (node, value) {
+      var choiceNodes = node.getElementsByTagName('input');
+      choiceNodes = Array.prototype.slice.call(choiceNodes, 0);
+      choiceNodes.forEach(function (choiceNode) {
+
+        if (value.indexOf(choiceNode.value) >= 0) {
+          if (!choiceNode.checked) {
+            choiceNode.checked = true;
+            TestUtils.Simulate.change(choiceNode);
+          }
+        } else {
+          if (choiceNode.checked) {
+            choiceNode.checked = false;
+            TestUtils.Simulate.change(choiceNode);
+          }
+        }
+      });
+    });
+
+    testType({
+      type: 'checkbox',
+      key: 'optIn'
+    }, function (form, component) {
+      form.set('optIn', true);
+
+      var node = component.getDOMNode().getElementsByTagName('input')[0];
+
+      expect(node.checked).toEqual(true);
+
+      node.checked = false;
+      TestUtils.Simulate.change(node);
+
+      expect(form.val()).toEqual({optIn: false});
+    });
   };
 
-  testWithFormatic(require('../')('react'));
-  testWithFormatic(require('../')('zapier'));
+  testWithFormatic(require('../').create('react'));
+  testWithFormatic(require('../').create('zapier'));
 
 });

__tests__/utils.js

@@ -119,2 +119,118 @@ /*global describe, it, expect*/
 
+  it('should parse blank text', function () {
+
+    expect(utils.parseTextWithTags('')).toEqual([]);
+  });
+
+  it('should parse plain text', function () {
+
+    expect(utils.parseTextWithTags('foo')).toEqual([{type: 'text', value: 'foo'}]);
+  });
+
+  it('should parse text with tag in middle', function () {
+
+    expect(utils.parseTextWithTags('foo {{bar}} baz')).toEqual([
+      {type: 'text', value: 'foo '},
+      {type: 'tag', value: 'bar'},
+      {type: 'text', value: ' baz'}
+    ]);
+  });
+
+  it('should parse text with tag at front', function () {
+
+    expect(utils.parseTextWithTags('{{bar}} baz')).toEqual([
+      {type: 'tag', value: 'bar'},
+      {type: 'text', value: ' baz'}
+    ]);
+  });
+
+  it('should parse text with tag at back', function () {
+
+    expect(utils.parseTextWithTags('{{bar}} baz')).toEqual([
+      {type: 'tag', value: 'bar'},
+      {type: 'text', value: ' baz'}
+    ]);
+  });
+
+  it('should convert ascii text to hidden unicode and back', function () {
+
+    var hidden = utils.hideUnicodeMessage('foobar');
+    var original = utils.unhideUnicodeMessage(hidden);
+
+    expect(original).toEqual('foobar');
+  });
+
+  it('should convert unicode text to hidden unicode and back', function () {
+
+    var hidden = utils.hideUnicodeMessage('€');
+    var original = utils.unhideUnicodeMessage(hidden);
+
+    expect(original).toEqual('€');
+  });
+
+  // it('should diff same', function () {
+  //
+  //   expect(utils.diff('foo', 'foo')).toEqual(null);
+  // });
+  //
+  // it('should diff front insert', function () {
+  //
+  //   expect(utils.diff('bar', 'foobar')).toEqual({
+  //     insert: 'foo',
+  //     delete: '',
+  //     pos: 0
+  //   });
+  // });
+  //
+  // it('should diff back insert', function () {
+  //
+  //   expect(utils.diff('foo', 'foobar')).toEqual({
+  //     insert: 'bar',
+  //     delete: '',
+  //     pos: 3
+  //   });
+  // });
+  //
+  // it('should diff front delete', function () {
+  //
+  //   expect(utils.diff('foobar', 'bar')).toEqual({
+  //     insert: '',
+  //     delete: 'foo',
+  //     pos: 0
+  //   });
+  // });
+  //
+  // it('should diff back delete', function () {
+  //
+  //   expect(utils.diff('foobar', 'foo')).toEqual({
+  //     insert: '',
+  //     delete: 'bar',
+  //     pos: 3
+  //   });
+  // });
+  //
+  // it('should diff middle insert', function () {
+  //
+  //   expect(utils.diff('foobaz', 'foobarbaz')).toEqual({
+  //     insert: 'bar',
+  //     delete: '',
+  //     pos: 3
+  //   });
+  // });
+  //
+  // it('should diff middle delete', function () {
+  //
+  //   expect(utils.diff('foobarbaz', 'foobaz')).toEqual({
+  //     insert: '',
+  //     delete: 'bar',
+  //     pos: 3
+  //   });
+  // });
+  //
+  // it('should char diff', function () {
+  //
+  //   expect(utils.charDiff('foobar', 'foocar')).toEqual(3);
+  //
+  //   expect(utils.charDiff('foobar', 'feebar', -1)).toEqual(3);
+  // });
 });

gulpfile.js

@@ -16,4 +16,8 @@ 'use strict';
 
-gulp.task('watch', ['bundle-watch']);
+gulp.task('test-watch', function () {
+  gulp.watch(['./formatic-dev.js', './__tests__/**/*.js'], ['test']);
+});
 
+gulp.task('watch', ['bundle-watch', 'test-watch']);
+
 gulp.task('build', ['build-dev', 'build-prod']);
@@ -20,0 +24,0 @@

lib/formatic.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var pluginRegistry = {};
+
 var Formatic = function () {
@@ -16,15 +18,128 @@
 
-  formatic.options = {};
+  formatic.registerPlugin = function (name, pluginFactory, config) {
+    pluginRegistry[name] = {
+      create: pluginFactory,
+      config: config || {}
+    };
+  };
 
-  formatic.config = function (options) {
-    _.extend(formatic.options, options);
+  formatic.registerPlugins = function () {
+    var args = Array.prototype.slice.call(arguments, 0);
+    args.forEach(function (plugin) {
+      formatic.registerPlugin(plugin[0], plugin[1], plugin[2]);
+    });
   };
 
-  formatic.plugin = function (plugin) {
-    if (_.isString(plugin)) {
-      plugin = Formatic.plugins[plugin];
+  var pluginCallbacks = [];
+
+  var unknownPluginId = 0;
+
+  var plugins = {};
+
+  var getConfig = function (name, key) {
+    if (!plugins[name]) {
+      return null;
     }
-    plugin(formatic);
+    if (!key) {
+      return plugins[name].config;
+    }
+    return plugins[name].config[key] || null;
   };
 
+  var setConfig = function (name, key, config) {
+    if (!plugins[name]) {
+      throw new Error('No config for plugin: ' + name);
+    }
+    if (!key) {
+      if (!_.isObject(config)) {
+        throw new Error('Invalid config for plugin: ' + name);
+      }
+      _.extend(plugins[name].config, config);
+    }
+    plugins[name].config[key] = config;
+  };
+
+  formatic.config = function (key, config) {
+    var pluginName = key;
+    if (key.indexOf('.') >= 0) {
+      pluginName = key.substring(0, key.indexOf('.'));
+      key = key.substring(key.indexOf('.') + 1);
+    } else {
+      key = null;
+    }
+    if (!config) {
+      return getConfig(pluginName, key);
+    }
+    setConfig(pluginName, key, config);
+  };
+
+  formatic.loadPlugin = function (pluginFactory, config) {
+    config = config || {};
+    var name = config.name;
+    if (!name) {
+      name = 'unknown_' + unknownPluginId;
+      unknownPluginId++;
+    }
+    var plugin = utils.hookable();
+    plugin.create = pluginFactory;
+    plugin.config = config;
+    plugin.name = name;
+    pluginFactory(formatic, plugin);
+    pluginCallbacks.forEach(function (cb) {
+      cb(plugin);
+    });
+    plugins[name] = plugin;
+    return plugin;
+  };
+
+  formatic.configurePlugin = function (name, config) {
+    var plugin = plugins[name];
+    _.extend(plugin.config, config);
+    return plugin;
+  };
+
+  formatic.findPlugin = function (name, config) {
+    if (config && config.name) {
+      name = config.name;
+    }
+    if (plugins[name]) {
+      if (config) {
+        return formatic.configurePlugin(name, config);
+      } else {
+        return plugins[name];
+      }
+    }
+    return null;
+  };
+
+  formatic.plugin = function (pluginFactory, config) {
+    var plugin;
+    if (_.isString(pluginFactory)) {
+      plugin = formatic.findPlugin(pluginFactory, config);
+      if (plugin) {
+        return plugin;
+      }
+      plugin = pluginRegistry[pluginFactory];
+      if (plugin) {
+        config = _.extend({}, plugin.config, config);
+        config.name = config.name || pluginFactory;
+        return formatic.loadPlugin(plugin.create, config);
+      }
+      var name = pluginFactory;
+      if (config && config.name) {
+        name += '/' + config.name;
+      }
+      throw new Error('Plugin not found: ' + name);
+    }
+    return formatic.loadPlugin(pluginFactory, config);
+  };
+
+  formatic.onPlugin = function (cb) {
+    pluginCallbacks.push(cb);
+  };
+
+  formatic.create = function () {
+    return Formatic.apply(null, arguments);
+  };
+
   var Form = function () {
@@ -42,2 +157,3 @@ this.init();
   utils.hookable(Form.prototype);
+  formatic.wrappable = utils.hookable;
 
@@ -48,5 +164,16 @@ Form.prototype.method('init', function () {
 
-  _.each(arguments, function (plugin) {
-    formatic.plugin(plugin);
-  });
+  // Take args like ('pluginA', {x: 1}).
+  // Where {x: 1} is config for pluginA.
+  for (var i = 0; i < arguments.length; i++) {
+    var pluginFactory = arguments[i];
+    var config = config || {};
+    if (arguments[i + 1]) {
+      var nextArg = arguments[i + 1];
+      if (!_.isFunction(nextArg) && _.isObject(nextArg)) {
+        config = nextArg;
+        i++;
+      }
+    }
+    formatic.plugin(pluginFactory, config);
+  }
 
@@ -56,47 +183,57 @@ return formatic;
 
-module.exports = Formatic;
+var defaultFormatic = Formatic();
 
-Formatic.plugins = {
-  coreData: require('./plugins/core-data'),
-  coreType: require('./plugins/core-type'),
-  coreView: require('./plugins/core-view'),
-  core: require('./plugins/core'),
-  terse: require('./plugins/terse'),
-  react: require('./plugins/react'),
-  zapier: require('./plugins/zapier'),
-  reactViewer: require('./plugins/react-viewer'),
-  readOnly: require('./plugins/read-only')
-};
+defaultFormatic.registerPlugins(
+  ['core-data', require('./plugins/core-data')],
+  ['core-meta', require('./plugins/core-meta')],
+  ['core-type', require('./plugins/core-type')],
+  ['core-types', require('./plugins/core-types')],
+  ['core-view', require('./plugins/core-view')],
+  ['core-validation', require('./plugins/core-validation')],
+  ['core', require('./plugins/core')],
+  ['terse', require('./plugins/terse')],
+  ['react', require('./plugins/react')],
+  ['zapier', require('./plugins/zapier')],
+  ['react-viewer', require('./plugins/react-viewer')],
+  ['read-only', require('./plugins/read-only')],
+  ['required', require('./plugins/required')],
 
-Formatic.types = {
-  code: require('./types/code'),
-  form: require('./types/form'),
-  select: require('./types/select'),
-  text: require('./types/text'),
-  textarea: require('./types/text'),
-  password: require('./types/text'),
+  ['type-code', require('./types/code')],
+  ['type-form', require('./types/form')],
+  ['type-select', require('./types/select')],
+  ['type-text', require('./types/text')],
+  ['type-textarea', require('./types/text')],
+  ['type-pretty-textarea', require('./types/text')],
+  ['type-password', require('./types/text')],
+  ['type-checkbox', require('./types/checkbox')],
+  ['type-dropdown', require('./types/select')],
+  ['type-string', require('./types/text')],
+  ['type-float', require('./types/number')],
+  ['type-integer', require('./types/number')],
+  ['type-number', require('./types/number')],
+  ['type-json', require('./types/json')],
+  ['type-if', require('./types/if')],
+  ['type-get', require('./types/get')],
+  ['type-eq', require('./types/eq')],
 
-  string: require('./types/text'),
-  float: require('./types/number'),
-  integer: require('./types/number'),
-  number: require('./types/number'),
+  ['view-form', require('./views/react/form')],
+  ['view-field', require('./views/react/field')],
+  ['view-code', require('./views/react/code')],
+  ['view-select', require('./views/react/select')],
+  ['view-text', require('./views/react/text')],
+  ['view-string', require('./views/react/text')],
+  ['view-textarea', require('./views/react/textarea')],
+  ['view-password', require('./views/react/text')],
+  ['view-checkbox', require('./views/react/checkbox')],
+  ['view-boolean-checkbox', require('./views/react/boolean-checkbox')],
+  ['view-pretty-textarea', require('./views/react/pretty-textarea')],
+  ['view-dropdown', require('./views/react/dropdown')],
+  ['view-json', require('./views/react/json')],
+  ['view-float', require('./views/react/text')],
+  ['view-integer', require('./views/react/text')],
+  ['view-number', require('./views/react/text')]
+);
 
-  if: require('./types/if'),
-  get: require('./types/get'),
-  eq: require('./types/eq')
-};
+defaultFormatic.plugin('react');
 
-Formatic.views = {
-  react: {
-    code: require('./views/react/code'),
-    form: require('./views/react/form'),
-    select: require('./views/react/select'),
-    text: require('./views/react/text'),
-    textarea: require('./views/react/textarea'),
-    password: require('./views/react/text'),
-
-    float: require('./types/text'),
-    integer: require('./types/text'),
-    number: require('./types/text')
-  }
-};
+module.exports = defaultFormatic;

lib/plugins/core-data.js

@@ -8,2 +8,13 @@ 'use strict';
 
+  var Actions = function (form) {
+    this.form = form;
+  };
+
+  formatic.method('action', function (name) {
+    Actions.prototype[name] = function () {
+      var args = [name].concat(Array.prototype.slice.call(arguments));
+      this.form.emitter.emit.apply(this.form.emitter, args);
+    };
+  });
+
   formatic.form.wrap('init', function (next) {
@@ -13,5 +24,13 @@ this.data = {};
     this.emitter = new Emitter();
+    this.actions = new Actions(this);
+    this.emitter.on('change', function (field, value) {
+      this.onChange(field, value);
+    }.bind(this));
     next();
   });
 
+  formatic.action('change');
+  formatic.action('focus');
+  formatic.action('blur');
+
   formatic.form.method('defaultRoot', function () {
@@ -32,3 +51,3 @@ return {
     if (typeof value === 'undefined') {
-      this.data(key);
+      this.setData(key);
     } else {
@@ -52,4 +71,13 @@ this.setKey(key, value);
   formatic.form.method('onChange', function (field, value) {
-    if (field.key) {
-      this.set(field.key, value);
+    if (field && field.key) {
+      try {
+        var type = formatic.type(field.type);
+        if (type && type.hasMethod('parseField')) {
+          value = type.parseField(value);
+        }
+        this.set(field.key, value);
+      } catch (e) {
+        // failed to parse; don't respond to this change and leave state in
+        // view till it is parseable
+      }
     }
@@ -70,3 +98,3 @@ });
 
-  formatic.form.method('data', function (value) {
+  formatic.form.method('setData', function (value) {
     this.data = value;
@@ -102,3 +130,3 @@ });
   });
-  
+
   formatic.method('splitKey', function (key) {
@@ -105,0 +133,0 @@ return key.split('.');

lib/plugins/core-type.js

@@ -5,6 +5,6 @@ 'use strict';
 
-module.exports = function (formatic) {
+module.exports = function (formatic, plugin) {
 
   var fixType = function (field) {
-    var typeMap = formatic.options.typeMap;
+    var typeMap = plugin.config.typeMap;
     if (!typeMap) {
@@ -19,4 +19,2 @@ return;
   var toValue = function (field) {
-    fixType(field);
-
     if (field.fields && field.fields.length > 0) {
@@ -42,27 +40,33 @@ field.value = field.fields[0];
 
-  formatic.method('type', function (name, type) {
+  var types = {};
 
-    if (typeof type === 'function') {
-      type = type(formatic);
+  // Auto register types.
+  formatic.onPlugin(function (plugin) {
+    if (plugin.name.indexOf('type-') === 0) {
+      var type = plugin.name.substring('type-'.length);
+      if (plugin.hasFields) {
+        plugin.initField = toFields;
+      } else {
+        plugin.initField = toValue;
+      }
+      if (!types[type]) {
+        types[type] = plugin;
+      }
     }
+  });
 
-    var compile = type.compile;
-    var evalField = type.eval;
-    var hasFields = type.hasFields || false;
+  formatic.method('type', function (name, methods) {
 
-    if (compile) {
-      formatic.method('compileField_' + name, compile);
+    if (typeof methods === 'undefined') {
+      return types[name];
     }
 
-    if (evalField) {
-      formatic.method('evalField_' + name, evalField);
-    }
-
-    if (hasFields) {
-      formatic.method('initField_' + name, toFields);
-    } else {
-      formatic.method('initField_' + name, toValue);
-    }
+    // Create a type plugin to be picked up.
+    formatic.plugin(function (formatic, plugin) {
+      _.extend(plugin, methods);
+    }, {name: 'type-' + name});
   });
 
+  formatic.type('default', {});
+
   formatic.form.replaceMethod('compileField', function (field) {
@@ -78,14 +82,10 @@
 
-    var initHook = 'initField_' + field.type;
+    fixType(field);
 
-    if (formatic.hasMethod(initHook)) {
-      formatic[initHook](field);
-    } else {
-      toValue(field);
-    }
+    var type = formatic.type(field.type) || formatic.type('default');
 
-    var compileHook = 'compileField_' + field.type;
+    type.initField(field);
 
-    if (formatic.hasMethod(compileHook)) {
-      return formatic[compileHook](field, this.compileField.bind(this));
+    if (type.hasMethod('compileField')) {
+      return type.compileField(field, this.compileField.bind(this));
     } else {
@@ -121,7 +121,7 @@
 
-    var evalHook = 'evalField_' + field.type;
+    var type = formatic.type(field.type) || formatic.type('default');
 
-    if (formatic.hasMethod(evalHook)) {
+    if (type.hasMethod('evalField')) {
 
-      field = formatic[evalHook](field, data, runField.bind(this, data));
+      field = type.evalField(field, data, runField.bind(this, data));
       return field;
@@ -128,0 +128,0 @@ } else {

lib/plugins/core-types.js

@@ -5,9 +5,47 @@ 'use strict';
 
-var Formatic = require('../formatic');
-
 module.exports = function (formatic) {
 
-  _.each(Formatic.types, function (type, key) {
-    formatic.type(key, type);
+  formatic.form.wrap('compile', function (next, field) {
+
+    if (typeof field === 'undefined') {
+      field = {
+        type: 'form',
+        fields: []
+      };
+    } else if (_.isArray(field)) {
+      field = {
+        type: 'form',
+        fields: field
+      };
+    } else if (field.type !== 'form') {
+      field = {
+        type: 'form',
+        fields: [field]
+      };
+    }
+
+    return next(field);
   });
+
+  _.each([
+    'form',
+    'text',
+    'textarea',
+    'pretty-textarea',
+    'password',
+    'select',
+    'dropdown',
+    'checkbox',
+    'string',
+    'float',
+    'integer',
+    'number',
+    'json',
+    'if',
+    'get',
+    'eq',
+    'code'
+  ], function (name) {
+    formatic.plugin('type-' + name, {type: name});
+  });
 };

lib/plugins/core-view.js

@@ -9,2 +9,13 @@ 'use strict';
 
+  formatic.onPlugin(function (plugin) {
+    if (plugin.name.indexOf('view-') === 0) {
+      var type = plugin.name.substring('view-'.length);
+      if (plugin.view) {
+        views[type] = plugin.view;
+      } else {
+        throw new Error('View created without view property: ' + plugin.name);
+      }
+    }
+  });
+
   formatic.method('view', function (name, view) {
@@ -68,3 +79,3 @@
 
-    field = field || this.root;
+    field = field || this.run(this.root, this.data);
 
@@ -82,12 +93,5 @@ var view = views[field.type];
 
-    if (field.key) {
-      var onChange = function () {
-        throw new Error('No onChange hook defined.');
-      };
-
-      if (formatic.hasMethod('onChangeComponent')) {
-        onChange = formatic.onChangeComponent.bind(null, this.onChange.bind(this, field));
-      }
-
-      props.onChange = onChange;
+    var type = formatic.type(field.type);
+    if (type && type.hasMethod('formatField')) {
+      field.value = type.formatField(field.value);
     }
@@ -94,0 +98,0 @@

lib/plugins/core.js

@@ -5,6 +5,8 @@ 'use strict';
 
-  formatic.plugin(require('./core-data'));
-  formatic.plugin(require('./core-type'));
-  formatic.plugin(require('./core-types'));
-  formatic.plugin(require('./core-view'));
+  formatic.plugin('core-data');
+  formatic.plugin('core-meta');
+  formatic.plugin('core-validation');
+  formatic.plugin('core-type');
+  formatic.plugin('core-types');
+  formatic.plugin('core-view');
 };

lib/plugins/react-viewer.js

@@ -5,4 +5,6 @@ 'use strict';
 
-module.exports = function (formatic) {
+module.exports = function (formatic, plugin) {
 
+  plugin.React = React;
+
   formatic.method('attachComponent', function (component, node, done) {
@@ -19,11 +21,2 @@ return React.renderComponent(component, node, done);
   });
-
-  formatic.method('onChangeComponent', function (onChange, event) {
-    if (event && event.target) {
-      onChange(event.target.value);
-    } else {
-      onChange(event);  
-    }
-  });
-
 };

lib/plugins/react.js

@@ -5,14 +5,30 @@ 'use strict';
 
-var Formatic = require('../formatic');
-
 module.exports = function (formatic) {
 
-  formatic.plugin(Formatic.plugins.core);
-  formatic.plugin(Formatic.plugins.terse);
-  formatic.plugin(Formatic.plugins.readOnly);
-  formatic.plugin(Formatic.plugins.reactViewer);
+  formatic.plugin('core');
+  formatic.plugin('terse');
+  formatic.plugin('read-only');
+  formatic.plugin('required');
+  formatic.plugin('react-viewer');
 
-  _.each(Formatic.views.react, function (view, key) {
-    formatic.view(key, view);
+  _.each([
+    'form',
+    'field',
+    'text',
+    'textarea',
+    'pretty-textarea',
+    'password',
+    'select',
+    'dropdown',
+    'checkbox',
+    'boolean-checkbox',
+    'string',
+    'float',
+    'integer',
+    'number',
+    'json',
+    'code'
+  ], function (name) {
+    formatic.plugin('view-' + name, {type: name});
   });
 };

lib/plugins/terse.js

@@ -76,7 +76,7 @@ 'use strict';
         var parts = field.split(':');
-        return {
+        return next({
           type: parts[0],
           key: parts[1],
           value: parts[2]
-        };
+        });
       }
@@ -83,0 +83,0 @@ }

lib/plugins/zapier.js

 'use strict';
 
-var Formatic = require('../formatic');
-
 module.exports = function (formatic) {
 
-  formatic.config({
-    typeMap: {
-      'unicode': 'text',
-      'str': 'text',
-      'text': 'textarea',
-      'decimal': 'float',
-      'int': 'integer',
-      'num': 'integer',
-      'number': 'integer'
-    }
+  formatic.plugin('react');
+
+  formatic.config('core-type.typeMap', {
+    'unicode': 'text',
+    'str': 'text',
+    'text': 'textarea',
+    'decimal': 'float',
+    'int': 'integer',
+    'num': 'integer',
+    'number': 'integer',
+    'select': 'dropdown',
+    'file': 'text',
+    'checkbox': 'checkbox-boolean',
+    'datetime': 'text'
   });
 
-  formatic.plugin(Formatic.plugins.react);
-
   formatic.replaceMethod('splitKey', function (key) {
-    return key;
+    return [key];
     //return key.split('__');
   });
 };

lib/types/code.js

 'use strict';
 
-module.exports = {
+module.exports = function (formatic, plugin) {
 
-  compile: function (field) {
+  plugin.compileField = function (field) {
 
@@ -10,3 +10,3 @@ field.value = field.value || '';
     return field;
-  }
+  };
 };

lib/types/eq.js

 'use strict';
 
-module.exports = {
+module.exports = function (formatic, plugin) {
 
-  hasFields: true,
+  plugin.hasFields = true;
 
-  eval: function (field, data, run) {
+  plugin.evalField = function (field, data, run) {
 
@@ -15,3 +15,3 @@ var fields = run(field.fields);
     };
-  }
+  };
 };

lib/types/form.js

 'use strict';
 
-var _ = require('underscore');
+module.exports = function (formatic, plugin) {
 
-module.exports = function (formatic) {
+  plugin.hasFields = true;
 
-  formatic.form.wrap('compile', function (next, field) {
+  plugin.compileField = function (field, compile) {
 
-    if (typeof field === 'undefined') {
-      field = {
-        type: 'form',
-        fields: []
-      };
-    } else if (_.isArray(field)) {
-      field = {
-        type: 'form',
-        fields: field
-      };
-    } else if (field.type !== 'form') {
-      field = {
-        type: 'form',
-        fields: [field]
-      };
-    }
+    field.fields = compile(field.fields);
 
-    return next(field);
-  });
-
-  return {
-
-    hasFields: true,
-
-    compile: function (field, compile) {
-
-      field.fields = compile(field.fields);
-
-      return field;
-    }
+    return field;
   };
 };

lib/types/get.js

 'use strict';
 
-module.exports = function (formatic) {
+module.exports = function (formatic, plugin) {
 
-  return {
+  plugin.evalField = function (field, data) {
 
-    eval: function (field, data) {
-
-      return {
-        type: 'value',
-        value: formatic.getObject(data, field.value)
-      };
-    }
+    return {
+      type: 'value',
+      value: formatic.getObject(data, field.value)
+    };
   };
 };

lib/types/if.js

 'use strict';
 
-module.exports = {
+module.exports = function (formatic, plugin) {
 
-  hasFields: true,
+  plugin.hasFields = true;
 
-  eval: function (field, data, run) {
+  plugin.evalField = function (field, data, run) {
 
@@ -16,3 +16,3 @@ var test = run(field.fields[0]);
     }
-  }
+  };
 };

lib/types/number.js

 'use strict';
 
-module.exports = {
-  // Just a placeholder for now.
+module.exports = function () {
+  // just a placeholder
 };

lib/types/select.js

@@ -5,6 +5,10 @@ 'use strict';
 
-module.exports = {
+module.exports = function (formatic, plugin) {
 
-  compile: function (field) {
+  plugin.compileField = function (field) {
 
+    if (field.isWrapped) {
+      return field;
+    }
+
     field.value = field.value || '';
@@ -36,16 +40,8 @@
 
-    var valueIndex = -1;
-    _.find(field.choices, function (choice, i) {
-      if (choice.value === field.value) {
-        valueIndex = i;
-        return;
-      }
-    });
-
-    if (valueIndex === -1 && field.choices.length > 0) {
-      field.value = field.choices[0].value;
-    }
-
-    return field;
-  }
+    return {
+      type: 'field',
+      fields: [field],
+      isWrapped: true
+    };
+  };
 };

lib/types/text.js

 'use strict';
 
-module.exports = {
+module.exports = function (formatic, plugin) {
 
-  compile: function (field) {
+  plugin.compileField = function (field) {
 
+    if (field.isWrapped) {
+      return field;
+    }
+
     field.value = field.value || '';
 
-    return field;
-  }
+    return {
+      type: 'field',
+      fields: [field],
+      isWrapped: true
+    };
+  };
 };

lib/utils.js

@@ -0,3 +1,6 @@
+/*global escape,unescape*/
 'use strict';
 
+//var _ = require('underscore');
+
 var utils = {};
@@ -44,4 +47,6 @@
 
+  obj = obj || {};
+
   if (obj.hook) {
-    return;
+    return obj;
   }
@@ -84,3 +89,3 @@
   obj.hasMethod = function (name) {
-    return name in hooks;
+    return name in hooks || (name in obj && typeof obj[name] === 'function');
   };
@@ -101,4 +106,210 @@
 
+  return obj;
 };
 
+// utils.arrayContains = function (array, target, equals) {
+//   return _.any(array, function (value) {
+//     return equals ? equals(target, value) : (target === value);
+//   });
+// };
+//
+// utils.arrayDiff = function (a1, a2, equals) {
+//   return _.filter(a1, function (value) {
+//     return !utils.arrayContains(a2, value, equals);
+//   });
+// };
+
+var textPart = function (value, type) {
+  type = type || 'text';
+  return {
+    type: type,
+    value: value
+  };
+};
+
+utils.parseTextWithTags = function (value) {
+  value = value || '';
+  var parts = value.split('{{');
+  var frontPart = [];
+  if (parts[0] !== '') {
+    frontPart = [
+      textPart(parts[0])
+    ];
+  }
+  parts = frontPart.concat(
+    parts.slice(1).map(function (part) {
+      if (part.indexOf('}}') >= 0) {
+        return [
+          textPart(part.substring(0, part.indexOf('}}')), 'tag'),
+          textPart(part.substring(part.indexOf('}}') + 2))
+        ];
+      } else {
+        return textPart('{{' + part, 'text');
+      }
+    })
+  );
+  return [].concat.apply([], parts);
+};
+
+var SAFE_CONTROL_CODES = [
+  0x80,
+  0x81,
+  0x82,
+  0x83,
+  0x84,
+
+  0x86,
+  0x87,
+  0x88,
+  0x89,
+  0x8a,
+  0x8b,
+  0x8c,
+  0x8d,
+  0x8e,
+  0x8f,
+  0x90,
+  0x91,
+  0x92,
+  0x93,
+  0x94,
+  0x95,
+  0x96,
+  0x97,
+  0x98,
+  0x99,
+  0x9a,
+  0x9b,
+  0x9c,
+  0x9d,
+  0x9e,
+  0x9f
+];
+
+var CONTROL_CODE_INDEX = {};
+
+SAFE_CONTROL_CODES.forEach(function (code, i) {
+  CONTROL_CODE_INDEX[code] = i;
+});
+
+var toUtfBytes = function (str) {
+  var utf8 = unescape(encodeURIComponent(str));
+
+  var arr = [];
+  for (var i = 0; i < utf8.length; i++) {
+      arr.push(utf8.charCodeAt(i));
+  }
+  return arr;
+};
+
+var fromUtfBytes = function (uintArray) {
+    var encodedString = String.fromCharCode.apply(null, uintArray),
+        decodedString = decodeURIComponent(escape(encodedString));
+    return decodedString;
+};
+
+utils.hexToUnicode = function (message) {
+  message = message.toUpperCase();
+  return message.split('').map(function (char) {
+    var code = char.charCodeAt(0);
+    if (code >= '0'.charCodeAt(0) && code <= '9'.charCodeAt(0)) {
+      code = code - '0'.charCodeAt(0);
+      return String.fromCharCode(SAFE_CONTROL_CODES[code]);
+    } else if (code >= 'A'.charCodeAt(0) && code <= 'F'.charCodeAt(0)) {
+      code = code - 'A'.charCodeAt(0);
+      return String.fromCharCode(SAFE_CONTROL_CODES[code + 10]);
+    }
+  }).join('');
+};
+
+utils.unicodeToHex = function (message) {
+  return message.split('').map(function (char) {
+    var code = char.charCodeAt(0);
+    code = CONTROL_CODE_INDEX[code];
+    if (code < 10) {
+      return String.fromCharCode(code + '0'.charCodeAt(0));
+    } else {
+      return String.fromCharCode(code - 10 + 'A'.charCodeAt(0));
+    }
+  }).join('');
+};
+
+utils.stringToHex = function (string) {
+  return toUtfBytes(string).map(function (code) {
+    return code.toString(16);
+  }).join('');
+};
+
+utils.hexToString = function (hex) {
+  var bytes = hex.match(/.{1,2}/g).map(function (hex) {
+    return parseInt(hex, 16);
+  });
+  return fromUtfBytes(bytes);
+};
+
+utils.hideUnicodeMessage = function (message) {
+  return utils.hexToUnicode(utils.stringToHex(message));
+};
+
+utils.unhideUnicodeMessage = function (message) {
+  return utils.hexToString(utils.unicodeToHex(message));
+};
+
+// utils.charDiff = function (a, b, step) {
+//   var start = 0;
+//   var end = a.length;
+//   if (step > 0 || typeof step === 'undefined') {
+//     step = 1;
+//   } else {
+//     step = -1;
+//     start = a.length - 1;
+//     end = -1;
+//   }
+//   var i;
+//   for (i = start; i !== end; i = i + step) {
+//     if (a[i] !== b[i]) {
+//       if (step > 0) {
+//         return i;
+//       }
+//       return i + 1;
+//     }
+//   }
+//   return null;
+// };
+
+// utils.diff = function (a, b) {
+//   // Simple cases first.
+//   if (a === b) {
+//     return null;
+//   }
+//   if (b.substring(0, a.length) === a) {
+//     return {
+//       insert: b.substring(a.length),
+//       delete: '',
+//       pos: a.length
+//     };
+//   }
+//   if (b.substring(b.length - a.length) === a) {
+//     return {
+//       insert: b.substring(0, b.length - a.length),
+//       delete: '',
+//       pos: 0
+//     };
+//   }
+//   if (a.substring(0, b.length) === b) {
+//     return {
+//       delete: a.substring(b.length),
+//       insert: '',
+//       pos: b.length
+//     };
+//   }
+//   if (a.substring(a.length - b.length) === b) {
+//     return {
+//       delete: a.substring(0, a.length - b.length),
+//       insert: '',
+//       pos: 0
+//     };
+//   }
+// };
+
 module.exports = utils;

lib/views/react/code.js

@@ -5,10 +5,20 @@ 'use strict';
 var R = React.DOM;
+var _ = require('underscore');
 
-module.exports = React.createClass({
+module.exports = function (formatic, plugin) {
 
-  render: function () {
-    return R.pre({className: 'zf-field'},
-      this.props.field.value
-    );
-  }
-});
+  plugin.view = React.createClass({
+
+    render: function () {
+
+      var className = 'field code-field';
+      if (plugin.config.className) {
+        className += ' ' + plugin.config.className;
+      }
+
+      return R.pre(_.extend({className: className}, plugin.config.attributes),
+        this.props.field.value
+      );
+    }
+  });
+};

lib/views/react/form.js

@@ -5,12 +5,23 @@ 'use strict';
 var R = React.DOM;
+var _ = require('underscore');
 
-module.exports = React.createClass({
+module.exports = function (formatic, plugin) {
 
-  render: function () {
-    return R.form({className: 'zf-form'},
-      this.props.field.fields.map(function (field) {
-        return this.props.form.component(field);
-      }.bind(this))
-    );
-  }
-});
+  plugin.view = React.createClass({
+    
+    render: function () {
+
+      var className = 'formatic';
+
+      if (plugin.config.className) {
+        className += ' ' + plugin.config.className;
+      }
+
+      return R.form(_.extend({className: className}, plugin.config.attributes),
+        this.props.field.fields.map(function (field) {
+          return this.props.form.component(field);
+        }.bind(this))
+      );
+    }
+  });
+};

lib/views/react/select.js

 'use strict';
 
-var React = require('react/addons');
+var React = require('react');
 var R = React.DOM;
+var _ = require('underscore');
 
-var hasAncestor = function (child, parent) {
-  if (child.parentNode === parent) {
-    return true;
-  }
-  if (child.parentNode === child.parentNode) {
-    return false;
-  }
-  if (child.parentNode === null) {
-    return false;
-  }
-  return hasAncestor(child.parentNode, parent);
-};
+module.exports = function (formatic, plugin) {
 
-var isOutside = function (nodeOut, nodeIn) {
-  if (nodeOut === nodeIn) {
-    return false;
-  }
-  if (hasAncestor(nodeOut, nodeIn)) {
-    return false;
-  }
-  return true;
-};
+  plugin.view = React.createClass({
 
-module.exports = React.createClass({
+    mixins: [require('./mixins/input-actions')],
 
-  getInitialState: function () {
-    return {
-      open: false
-    };
-  },
+    render: function () {
 
-  onToggle: function () {
-    this.setState({open: !this.state.open});
-  },
+      var className = plugin.config.className || '';
 
-  onClose: function () {
-    this.setState({open: false});
-  },
+      var choices = this.props.field.choices;
 
-  onClickDocument: function (event) {
-    if (isOutside(event.target, this.refs.select.getDOMNode())) {
-      this.onClose();
-    }
-  },
+      if (!this.props.field.value) {
+        choices = [{
+          value: '',
+          label: ''
+        }].concat(choices);
+      }
 
-  fixChoicesWidth: function () {
-    this.setState({
-      choicesWidth: this.refs.active.getDOMNode().offsetWidth
-    });
-  },
-
-  onResize: function () {
-    this.fixChoicesWidth();
-  },
-
-  componentDidMount: function () {
-    this.fixChoicesWidth();
-    document.addEventListener('click', this.onClickDocument);
-    window.addEventListener('resize', this.onResize);
-  },
-
-  componentWillUnmount: function () {
-    document.removeEventListener('click', this.onClickDocument);
-    window.removeEventListener('resize', this.onResize);
-  },
-
-  render: function () {
-    var selectedLabel = '';
-    var matchingLabels = this.props.field.choices.filter(function (choice) {
-      return choice.value === this.props.field.value;
-    }.bind(this));
-    if (matchingLabels.length > 0) {
-      selectedLabel = matchingLabels[0].label;
+      return R.select(_.extend({
+        className: className,
+        onChange: this.onChange,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        name: this.props.field.key,
+        value: this.props.field.value //,
+        //onFocus: this.props.actions.focus
+      }, plugin.config.attributes),
+        choices.map(function (choice) {
+          return R.option({
+            value: choice.value
+          }, choice.label);
+        }.bind(this))
+      );
     }
-
-    return R.div({key: this.props.field.key, className: 'zf-field'},
-      R.label({},
-        this.props.field.label
-      ),
-      // R.select({onChange: this.props.onChange, name: this.props.field.key, value: this.props.field.value},
-      //   this.props.field.choices.map(function (choice) {
-      //     return R.option({
-      //       value: choice.value
-      //     }, choice.label);
-      //   }.bind(this))
-      // ),
-      R.div({className: 'zf-select', ref: 'select'},
-        R.div({className: 'zf-select-active', ref: 'active', onClick: this.onToggle}, selectedLabel),
-        R.div({className: 'zf-select-arrow ' + (this.state.open ? 'zf-open' : 'zf-closed'), onClick: this.onToggle}),
-        React.addons.CSSTransitionGroup({transitionName: 'zf-slide'},
-          this.state.open ? R.ul({ref: 'choices', className: 'zf-select-choices', style: {width: this.state.choicesWidth}},
-            this.props.field.choices.map(function (choice) {
-              return R.li({
-                className: 'zf-select-choice',
-                onClick: function () {
-                  this.setState({open: false});
-                  this.props.onChange(choice.value);
-                }.bind(this)
-              }, choice.label);
-            }.bind(this))
-          ) : []
-        )
-      )
-    );
-  }
-});
+  });
+};

lib/views/react/text.js

@@ -5,22 +5,28 @@ 'use strict';
 var R = React.DOM;
+var _ = require('underscore');
 
-module.exports = React.createClass({
+module.exports = function (formatic, plugin) {
 
-  render: function () {
+  plugin.view = React.createClass({
 
-    var field = this.props.field;
+    mixins: [require('./mixins/input-actions')],
 
-    return R.div({key: field.key, className: 'zf-field'},
-      R.label({},
-        field.label
-      ),
-      R.input({
+    render: function () {
+
+      var className = plugin.config.className || '';
+
+      var field = this.props.field;
+
+      return R.input(_.extend({
+        className: className,
         type: field.type,
         name: field.key,
         value: field.value,
-        onChange: this.props.onChange,
+        onChange: this.onChange,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
         readOnly: field.isReadOnly
-      })
-    );
-  }
-});
+      }, plugin.config.attributes));
+    }
+  });
+};

lib/views/react/textarea.js

@@ -5,17 +5,26 @@ 'use strict';
 var R = React.DOM;
+var _ = require('underscore');
 
-module.exports = React.createClass({
-  render: function () {
-    return R.div({key: this.props.field.key, className: 'zf-field'},
-      R.label({},
-        this.props.field.label
-      ),
-      R.textarea({
-        rows: 5,
-        name: this.props.field.key,
-        value: this.props.field.value,
-        onChange: this.props.onChange
-      })
-    );
-  }
-});
+module.exports = function (formatic, plugin) {
+
+  plugin.view = React.createClass({
+
+    mixins: [require('./mixins/input-actions')],
+
+    render: function () {
+
+      var className = plugin.config.className || '';
+
+      var field = this.props.field;
+
+      return R.textarea(_.extend({
+        className: className,
+        name: field.key,
+        value: field.value,
+        onChange: this.onChange,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur
+      }, plugin.config.attributes));
+    }
+  });
+};

package.json

 {
   "name": "formatic",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Automatic, pluggable form generation",
@@ -21,2 +21,3 @@ "main": "index.js",
     "gulp": "^3.8.0",
+    "gulp-changed": "^0.4.0",
     "gulp-eslint": "^0.1.8",
@@ -23,0 +24,0 @@ "gulp-load-plugins": "^0.5.3",

README.md

 # Formatic
 
+[![travis](https://travis-ci.org/zapier/formatic.svg?branch=master)](https://travis-ci.org/zapier/formatic)
+
 Automatic forms.
@@ -37,14 +39,13 @@
 
-Formatic is a forms builder builder. Thats not a typo. Formatic can't build
-anything until you tell it how to build something. You tell it how to build
-things by providing plugins that configure it.
+Formatic is a configurable, pluggable forms builder. Out of the box, it can
+build React-based forms, but you can configure it and add/remove plugins to make
+it work exactly how you want.
 
 ## Using formatic (quick version)
 
-If you don't want to extend formatic, you'll use it with an included plugin
-like this:
+If you don't want to extend formatic, you'll use it like this:
 
 ```js
-// Get a formatic instance configured with the react plugin.
-var formatic = require('formatic')('react');
+// Get the default formatic instance.
+var formatic = require('formatic');
 
@@ -85,3 +86,3 @@ // Get a new form.
 
-## Vanilla formatic
+<!-- ## Vanilla formatic
 
@@ -292,2 +293,2 @@ If you require formatic:
 of that. In fact, the types plugin is a plugin that adds in "mini plugins" to
-support various form elements and cool dynamic stuff.
+support various form elements and cool dynamic stuff. -->

tasks/server.js

@@ -10,3 +10,3 @@ 'use strict';
 
-gulp.task('server-live-app', function () {
+gulp.task('server-live-app', function (done) {
   var app = express();
@@ -19,9 +19,11 @@
       console.log('app server listening on %d', APP_PORT);
+      done();
     });
 });
 
-gulp.task('server-live-reload', function () {
+gulp.task('server-live-reload', function (done) {
   var lr = tinylr();
   lr.listen(LR_PORT, function () {
     console.log('reload server listening on %d', LR_PORT);
+    done();
   });
@@ -28,0 +30,0 @@ gulp.watch(['index.html', 'style/**/*.css', 'formatic-dev.js'], function (evt) {

TODO.txt

 derived fields
 buttons
-dependent fields
+dependent fields (like mutually exclusive/inclusive fields)
 multiple nodes (return react components)
@@ -22,1 +22,4 @@ clean up construction api
 get bundle smaller!!!
+
+config vs meta!!!
+default values?

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

64

increased by36.17%

Number of lines in readme file

292

increased by0.34%

Worsened metrics

Total package byte prevSize

2358422

decreased by-40.4%

Dev dependency count

17

increased by6.25%

Lines of code

31210

decreased by-39.99%

No dependency changes