mobx-deku - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

index.js

@@ -1,2 +0,2 @@
-import {reaction} from 'mobx';
+import {reaction, toJS} from 'mobx';
 
@@ -30,6 +30,18 @@ exports.observer = observer;
           if (!store) return {};
-          Object.keys(store).map((prop) => {
+          return Object.keys(store).map((prop) => {
+            if (typeof store[prop] === 'object') {
+              const obj = toJS(store[prop]);
+              // If its an array, make all objects inside observable
+              if (Array.isArray(obj)) {
+                return obj.map((obj) => {
+                  return Object.keys(obj).map((x) => x);
+                });
+              }
+              // If its a regular object, make all props of the object observable
+              return Object.keys(obj).map((x) => x);
+            }
             return store[prop];
           });
-        });
+        }).reduce((a, b) => a.concat(b));
+
         return observables;
@@ -36,0 +48,0 @@ },

lib/index.js

@@ -35,6 +35,24 @@ 'use strict';
         if (!store) return {};
-        Object.keys(store).map(function (prop) {
+        return Object.keys(store).map(function (prop) {
+          if (_typeof(store[prop]) === 'object') {
+            var obj = (0, _mobx.toJS)(store[prop]);
+            // If its an array, make all objects inside observable
+            if (Array.isArray(obj)) {
+              return obj.map(function (obj) {
+                return Object.keys(obj).map(function (x) {
+                  return x;
+                });
+              });
+            }
+            // If its a regular object, make all props of the object observable
+            return Object.keys(obj).map(function (x) {
+              return x;
+            });
+          }
           return store[prop];
         });
+      }).reduce(function (a, b) {
+        return a.concat(b);
       });
+
       return observables;
@@ -41,0 +59,0 @@ }, function (observables) {

package.json

 {
   "name": "mobx-deku",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "mobx bindings for deku",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

test/test.js

@@ -22,2 +22,8 @@ import {render, tree} from 'deku';
 class AppState3 {
+  @observable bool = false;
+  @observable objectOne = {
+    id: 42,
+    something: 'ok!'
+  }
+  @observable simpleArray = [1, 2, 3];
   @observable todos = [{
@@ -50,4 +56,11 @@ title: 'test',
         <div class='app3'>
-          {props.appState3.todos.map((todo) => {
-            return (<div>{todo.title}<span>{todo.id}</span></div>);
+          <div class='simpleArray'>{props.appState3.simpleArray[0]}</div>
+          <div class='objectExample'>{props.appState3.objectOne.id}</div>
+          {props.appState3.todos.map((todo, index) => {
+            return (
+              <div class={{'completed': todo.completed, todo: true}}>
+                {todo.title}<span>{todo.id}</span>
+                <button onClick={onClick(index)}></button>
+              </div>
+            );
           })}
@@ -57,2 +70,7 @@ </div>
     );
+    function onClick (index) {
+      return function () {
+        props.appState3.completeTodo(index);
+      };
+    }
   }
@@ -104,6 +122,20 @@ });
 
+  t.is($app.querySelector('.simpleArray').innerHTML, '1');
+
   setTimeout(() => {
-    t.is($app.querySelector('div').textContent, 'New Title20');
+    t.is($app.querySelector('.todo').textContent, 'New Title20');
+    $app.querySelector('button').click();
+  });
+
+  setTimeout(() => {
+    t.is($app.querySelector('.todo').className, 'completed todo');
+    appState3.objectOne.id = 'it worked!';
+    appState3.simpleArray[0] = 42;
+  }, 100);
+
+  setTimeout(() => {
+    t.is($app.querySelector('.objectExample').innerHTML, 'it worked!');
+    t.is($app.querySelector('.simpleArray').innerHTML, '42');
     t.end();
-  }, 100);
+  }, 200);
 });

No alert changes

Improved metrics

Total package byte prevSize

12414

increased by21.55%

Lines of code

288

increased by24.68%

No dependency changes