deku - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "deku",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Create view components using a virtual DOM",
   "main": "deku.js",
-  "scripts": {
-    "prepublish": "npm run build",
-    "build": "duo -s deku index.js | bfc > deku.js"
-  },
   "devDependencies": {
     "duo": "^0.8.10",
     "duo-test": "^0.3.10",
-    "bfc": "~0.2.0"
+    "duo-serve": "~0.6.1",
+    "jshint": "~2.5.11",
+    "bfc": "~0.2.0",
+    "minify": "~1.4.6"
   }
-}
+}

test/component/helpers.js

@@ -6,28 +6,12 @@
 
-window.HelloWorld = component({
-  render: function(dom, state, props){
-    return dom('span', null, ['Hello World']);
-  }
-});
+window.HelloWorld = function(dom, state, props){
+  return dom('span', null, ['Hello World']);
+};
 
-window.Span = component(function(dom, state, props){
+window.Span = function(dom, state, props){
   return dom('span', null, [props.text]);
-});
+};
 
-window.TwoWords = component({
-  render: function(dom, state, props){
-    return dom('span', null, [props.one + ' ' + props.two]);
-  }
-});
-
-window.StateChangeOnMount = component({
-  initialState: function(){
-    return { text: 'foo' };
-  },
-  afterMount: function(){
-    this.setState({ text: 'bar' });
-  },
-  render: function(n, state, props){
-    return Span({ text: state.text });
-  }
-});
+window.TwoWords = function(dom, state, props){
+  return dom('span', null, [props.one + ' ' + props.two]);
+};

test/component/index.js

@@ -10,3 +10,4 @@ var Emitter = require('component/emitter');
   it('should render a component', function(){
-    this.scene = HelloWorld.render(el);
+    var Test = component(HelloWorld);
+    this.scene = Test.render(el);
     assert.equal(el.innerHTML, '<span>Hello World</span>');
@@ -76,3 +77,4 @@ });
   it('should create a component with properties', function(){
-    this.scene = Span.render(el, { text: 'Hello World' });
+    var Test = component(Span);
+    this.scene = Test.render(el, { text: 'Hello World' });
     assert.equal(el.innerHTML, '<span>Hello World</span>');
@@ -82,5 +84,6 @@ });
   it('should compose without needing to use dom object', function () {
+    var Inner = component(Span);
     var Test = component({
       render: function(n, state, props){
-        return Span({ text: 'foo' });
+        return Inner({ text: 'foo' });
       }
@@ -93,3 +96,4 @@ });
   it('should remove from the DOM', function () {
-    var scene = HelloWorld.render(el);
+    var Test = component(HelloWorld);
+    var scene = Test.render(el);
     scene.remove();
@@ -99,4 +103,5 @@ assert.equal(el.innerHTML, '');
 
-  it.skip('should not call flush callbacks if removed', function () {
-    var scene = Span.render(el, { text: 'foo' });
+  it('should not call flush callbacks if removed', function (done) {
+    var Test = component(Span);
+    var scene = Test.render(el, { text: 'foo' });
     scene.setProps({ text: 'bar' }, function(){
@@ -106,23 +111,12 @@ throw new Error('Oops');
     scene.remove();
-    scene.emit('update');
+    requestAnimationFrame(function(){
+      done();
+    });
   });
 
-  it('should not try to update if it is removed', function (done) {
-    var mount = Span.render(el, { text: 'foo' });
-    try {
-      mount.setProps({ text: 'bar' });
-      mount.remove();
-      requestAnimationFrame(function(){
-        done();
-      });
-    }
-    catch (e) {
-      done(false);
-    }
-  });
-
   it('should compose components', function(){
+    var Inner = component(HelloWorld);
     var Composed = component({
       render: function(n, state, props){
-        return n(HelloWorld);
+        return n(Inner);
       }
@@ -135,4 +129,5 @@ });
   it('should compose components and pass in props', function(){
+    var Inner = component(TwoWords);
     var Composed = component(function(n, state, props){
-      return n(TwoWords, { one: 'Hello', two: 'World' });
+      return n(Inner, { one: 'Hello', two: 'World' });
     });
@@ -144,5 +139,6 @@ this.scene = Composed.render(el);
   it('should update sub-components', function(){
+    var Inner = component(TwoWords);
     var Composed = component(function(n, state, props){
       return n('div', null, [
-        n(TwoWords, { one: 'Hello', two: props.world })
+        n(Inner, { one: 'Hello', two: props.world })
       ]);
@@ -149,0 +145,0 @@ });

test/component/props.js

 
 describe('Updating Props', function () {
 
+  var Test = component(TwoWords);
+
   it('should replace props on the scene', function(){
-    this.scene = TwoWords.render(el, { one: 'Hello', two: 'World' });
+    this.scene = Test.render(el, { one: 'Hello', two: 'World' });
     this.scene.setProps({ one: 'Hello' });
@@ -12,3 +14,3 @@ this.scene.update();
   it('should update on the next frame', function(){
-    this.scene = TwoWords.render(el, { one: 'Hello', two: 'World' });
+    this.scene = Test.render(el, { one: 'Hello', two: 'World' });
     this.scene.setProps({ one: 'Hello', two: 'Pluto' });
@@ -18,4 +20,19 @@ assert.equal(el.innerHTML, '<span>Hello World</span>');
 
+  it('should not update props if the scene is removed', function (done) {
+    var Test = component(Span);
+    var mount = Test.render(el, { text: 'foo' });
+    try {
+      mount.setProps({ text: 'bar' });
+      mount.remove();
+      requestAnimationFrame(function(){
+        done();
+      });
+    }
+    catch (e) {
+      done(false);
+    }
+  });
+
   it('should setProps and call the callback', function(done){
-    this.scene = TwoWords.render(el, { one: 'Hello', two: 'World' });
+    this.scene = Test.render(el, { one: 'Hello', two: 'World' });
     this.scene.setProps({ one: 'Hello', two: 'Pluto' }, function(){
@@ -28,3 +45,3 @@ assert.equal(el.innerHTML, '<span>Hello Pluto</span>');
   it('should return a promise when changing the props', function(done){
-    this.scene = TwoWords.render(el, { one: 'Hello', two: 'World' });
+    this.scene = Test.render(el, { one: 'Hello', two: 'World' });
     this.scene.setProps({ one: 'Hello', two: 'Pluto' })
@@ -37,7 +54,11 @@ .then(function(){
 
-  it('should still call all callbacks even if it doesn\'t change', function(done){
-    this.scene = Span.render(el, { text: 'foo' });
+  it('should still call all callbacks even if it doesn\'t change', function(){
+    var called = false;
+    var Test = component(Span);
+    this.scene = Test.render(el, { text: 'foo' });
     this.scene.setProps({ text: 'foo' }, function(){
-      done();
+      called = true;
     });
+    this.scene.update();
+    assert(called);
   });
@@ -44,0 +65,0 @@

test/component/state.js

 
 describe('Updating State', function () {
 
+  var StateChangeOnMount = component({
+    initialState: function(){
+      return { text: 'foo' };
+    },
+    afterMount: function(){
+      this.setState({ text: 'bar' });
+    },
+    render: function(n, state, props){
+      var Test = component(Span);
+      return Test({ text: state.text });
+    }
+  });
+
   it('should update components when state changes', function(){
@@ -5,0 +18,0 @@ this.scene = StateChangeOnMount.render(el);

No alert changes

Improved metrics

Total package byte prevSize

121351

increased by25.3%

Lines of code

3093

increased by3.65%

Worsened metrics

Dev dependency count

6

increased by100%

Number of downloads

347

decreased by-20.96%

No dependency changes