dompteuse - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

example/package.json

@@ -13,3 +13,3 @@ {
     "typescript": "1.8.7",
-    "dompteuse": "0.3.3",
+    "dompteuse": "0.3.4",
     "snabbdom": "0.4.2",
@@ -16,0 +16,0 @@ "most": "0.19.6",

example/src/blue.ts

 import { api as router } from 'abyssa'
-import { Component, h, ConnectParams, Message } from 'dompteuse'
+import { Component, h, ConnectParams, Message, Messages } from 'dompteuse'
 import * as most from 'most'
@@ -50,3 +50,3 @@ import { Stream } from 'most'
 function connect({ on, messages }: ConnectParams<void, State>) {
-  messages.listen(Increment).forEach(_ => appState.send(incrementBlue()))
+  on(Increment, _ => appState.send(incrementBlue()))
 
@@ -57,2 +57,22 @@ on(appState, state => merge(state, readGlobalState()))
 
+  const [userData, loading] = getUserData(messages)
+  on(userData, (state, users) => merge(state, { users }))
+  on(loading, (state, loading) => merge(state, { loading }))
+}
+
+function getUserData(messages: Messages): [Stream<string[]>, Stream<boolean>] {
+
+  function getSomeUsers() {
+    interface User {
+      name: { first: string, last: string }
+    }
+
+    return most.fromPromise(fetch('https://randomuser.me/api/?results=10')
+      .then(res => res.json())
+      .then(json => (json.results as Array<User>).map((user: any) =>
+        `${user.name.first} ${user.name.last}`)
+      )
+    ).delay(2000)
+  }
+
   const refreshes = messages.listen(RefreshSelect).startWith(undefined).multicast()
@@ -69,4 +89,3 @@ const userData = refreshes
 
-  on(userData, (state, users) => merge(state, { users }))
-  on(loading, (state, loading) => merge(state, { loading }))
+  return [userData, loading]
 }
@@ -95,3 +114,3 @@
   if (route === 'app.blue.red') return [
-    h('div.red', [
+    h('div.red', { key: 'red' }, [
       h('button', { events: { onClick: RefreshSelect } }, 'Refresh select list'),
@@ -108,14 +127,1 @@ h('br'),
 }
-
-function getSomeUsers() {
-  interface User {
-    name: { first: string, last: string }
-  }
-
-  return most.fromPromise(fetch('https://randomuser.me/api/?results=10')
-    .then(res => res.json())
-    .then(json => (json.results as Array<User>).map((user: any) =>
-      `${user.name.first} ${user.name.last}`)
-    )
-  ).delay(2000)
-}

example/src/green.ts

@@ -89,3 +89,3 @@ import { Component, h, Message, ConnectParams } from 'dompteuse'
 
-  return popup({ content })
+  return popup({ content, onClose: Popup.Close })
 }

example/src/util/popup.ts

@@ -14,2 +14,3 @@
   content: Array<Vnode>
+  onClose: Function
 }
@@ -34,6 +35,8 @@
 
-  messages.listenAt('#popups', Close).forEach(_ => messages.send(Close()))
+  messages.listenAt('#popups', Close).forEach(_ =>
+    messages.send(props().onClose()))
 
   messages.listenAt('#popups', OverlayClick).forEach(evt => {
-    if (!findParentByClass('popup', evt.target as Element)) messages.send(Close())
+    if (!findParentByClass('popup', evt.target as Element))
+      messages.send(props().onClose())
   })
@@ -40,0 +43,0 @@ }

example/src/util/select.ts

@@ -49,6 +49,3 @@ import update from 'immupdate'
 
-  on(ItemSelected, (state, item) => {
-    messages.send(props().onChange(item))
-    return state
-  })
+  on(ItemSelected, (state, item) => messages.send(props().onChange(item)))
 }
@@ -55,0 +52,0 @@

lib/component.js

@@ -97,6 +97,10 @@ 'use strict';
       var oldState = component.state;
-      component.state = fn(oldState, val);
+      var newState = fn(oldState, val);
 
-      if (!(0, _shallowEqual2.default)(oldState, component.state)) {
-        if (_log2.default.stream) console.log('Component state changed', '\'' + component.key + '\'', component.state);
+      if (newState === undefined) return;
+
+      component.state = newState;
+
+      if (!(0, _shallowEqual2.default)(oldState, newState)) {
+        if (_log2.default.stream) console.log('Component state updated %c' + component.key, 'font-weight: bold', component.state);
         (0, _render.renderComponentAsync)(component);
@@ -103,0 +107,0 @@ }

lib/dompteuse.d.ts

@@ -11,5 +11,5 @@
 interface StreamSub<S> {
-  <A>(stream: Stream<A>, cb: (state: S, value: A) => S): Stream<A>;
-  (message: NoArgMessage, cb: (state: S) => S): Stream<void>;
-  <P>(message: Message<P>, cb: (state: S, payload: P) => S): Stream<P>;
+  <A>(stream: Stream<A>, cb: (state: S, value: A) => S|void): Stream<A>;
+  (message: NoArgMessage, cb: (state: S) => S|void): Stream<void>;
+  <P>(message: Message<P>, cb: (state: S, payload: P) => S|void): Stream<P>;
 }
@@ -16,0 +16,0 @@

lib/globalStream.js

@@ -32,3 +32,3 @@ 'use strict';
 
-  if (log) console.log('%cInitial state:', 'color: green', initialState);
+  if (log) console.log('%cGlobal stream - initial state:', 'color: green', initialState);
 
@@ -59,3 +59,3 @@ var stream = _most2.default.create(function (add, end, error) {
       } finally {
-        if (log) console.log('%cNew GlobalStream state:', 'color: blue', newState);
+        if (log) console.log('%cGlobal stream - state updated:', 'color: green', newState);
 
@@ -62,0 +62,0 @@ dispatching = false;

lib/render.js

@@ -30,9 +30,9 @@ 'use strict';
 function renderApp(app, appElm) {
-  // Non destructive patching inside the app element
-  var elmToReplace = document.createElement('div');
-  var appNode = Render.patch(elmToReplace, app);
-  appElm.appendChild(appNode.elm);
+  logBeginRender();
+  var emptyVnode = (0, _vnode2.default)('div', { key: '_init' }, [], undefined, appElm);
+  Render.patch(emptyVnode, app);
   newComponents.forEach(function (c) {
     return c.lifecycle.inserted(c);
   });
+  logEndRender();
 }
@@ -88,3 +88,6 @@
 
-  if (_log2.default.render) console.log('Render component \'' + component.key + '\'', performance.now() - beforeRender + ' ms', component);
+  if (_log2.default.render) {
+    var renderTime = Math.round((performance.now() - beforeRender) * 100) / 100;
+    console.log('Render component %c' + component.key, 'font-weight: bold', renderTime + ' ms', component);
+  }
 
@@ -101,3 +104,3 @@ component.lifecycle.rendered(component, newVnode);
 
-  if (_log2.default.render) console.log('%cBegin rendering', 'color: orange');
+  logBeginRender();
 
@@ -120,3 +123,11 @@ // Render components in a top-down fashion.
 
-  if (_log2.default.render) console.log('%cEnd rendering', 'color: orange');
+  logEndRender();
+}
+
+function logBeginRender() {
+  if (_log2.default.render) console.log('%cRender - begin', 'color: orange');
+}
+
+function logEndRender() {
+  if (_log2.default.render) console.log('%cRender - end\n\n', 'color: orange');
 }

package.json

 {
   "name": "dompteuse",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "main": "lib/dompteuse",
@@ -5,0 +5,0 @@ "typings": "lib/dompteuse.d.ts",

README.md

@@ -279,2 +279,3 @@ # dompteuse
 Used to subscribe to a stream and update the component state.  
+If nothing is returned (undefined) then the component state is not modified.  
 
@@ -284,7 +285,7 @@ Signature:
 ```javascript
-on<A>(stream: Stream<A>, cb: (state: S, value: A) => S): Stream<A>
-on(message: NoArgMessage, cb: (state: S) => S): Stream<void>
+on<A>(stream: Stream<A>, cb: (state: S, value: A) => S|void): Stream<A>
+on(message: NoArgMessage, cb: (state: S) => S|void): Stream<void>
 
 // Shortcut for on(messages.listen(MyMessage))
-on<P>(message: Message<P>, cb: (state: S, payload: P) => S): Stream<P>
+on<P>(message: Message<P>, cb: (state: S, payload: P) => S|void): Stream<P>
 ```
@@ -291,0 +292,0 @@

src/component.js

@@ -69,7 +69,11 @@ import h from 'snabbdom/h';
       const oldState = component.state;
-      component.state = fn(oldState, val);
+      const newState = fn(oldState, val);
 
-      if (!shallowEqual(oldState, component.state)) {
+      if (newState === undefined) return;
+
+      component.state = newState;
+
+      if (!shallowEqual(oldState, newState)) {
         if (log.stream)
-          console.log('Component state changed', `'${component.key}'`, component.state);
+          console.log(`Component state updated %c${component.key}`, 'font-weight: bold', component.state);
         renderComponentAsync(component);
@@ -76,0 +80,0 @@ }

src/globalStream.js

@@ -19,3 +19,3 @@ /* Opt-in, convenience construct used to update a global stream imperatively and in a type safe fashion */
   if (log)
-    console.log('%cInitial state:', 'color: green', initialState);
+    console.log('%cGlobal stream - initial state:', 'color: green', initialState);
 
@@ -46,3 +46,3 @@ const stream = most.create((add, end, error) => {
         if (log)
-          console.log(`%cNew GlobalStream state:`, 'color: blue', newState);
+          console.log(`%cGlobal stream - state updated:`, 'color: green', newState);
 
@@ -49,0 +49,0 @@ dispatching = false;

src/render.js

@@ -16,7 +16,7 @@
 export function renderApp(app, appElm) {
-  // Non destructive patching inside the app element
-  const elmToReplace = document.createElement('div');
-  const appNode = Render.patch(elmToReplace, app);
-  appElm.appendChild(appNode.elm);
+  logBeginRender();
+  const emptyVnode = Vnode('div', { key: '_init' }, [], undefined, appElm);
+  Render.patch(emptyVnode, app);
   newComponents.forEach(c => c.lifecycle.inserted(c));
+  logEndRender();
 }
@@ -66,4 +66,6 @@
 
-  if (log.render) console.log(`Render component '${component.key}'`,
-    (performance.now() - beforeRender) + ' ms', component);
+  if (log.render) {
+    const renderTime = Math.round((performance.now() - beforeRender) * 100) / 100;
+    console.log(`Render component %c${component.key}`, 'font-weight: bold', renderTime + ' ms', component);
+  }
 
@@ -80,3 +82,3 @@ component.lifecycle.rendered(component, newVnode);
 
-  if (log.render) console.log('%cBegin rendering', 'color: orange');
+  logBeginRender();
 
@@ -93,3 +95,11 @@ // Render components in a top-down fashion.
 
-  if (log.render) console.log('%cEnd rendering', 'color: green');
+  logEndRender();
 }
+
+function logBeginRender() {
+  if (log.render) console.log('%cRender - begin', 'color: orange');
+}
+
+function logEndRender() {
+  if (log.render) console.log('%cRender - end\n\n', 'color: orange');
+}

typings/dompteuse.d.ts

@@ -11,5 +11,5 @@
 interface StreamSub<S> {
-  <A>(stream: Stream<A>, cb: (state: S, value: A) => S): Stream<A>;
-  (message: NoArgMessage, cb: (state: S) => S): Stream<void>;
-  <P>(message: Message<P>, cb: (state: S, payload: P) => S): Stream<P>;
+  <A>(stream: Stream<A>, cb: (state: S, value: A) => S|void): Stream<A>;
+  (message: NoArgMessage, cb: (state: S) => S|void): Stream<void>;
+  <P>(message: Message<P>, cb: (state: S, payload: P) => S|void): Stream<P>;
 }
@@ -16,0 +16,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1366694

increased by0.15%

Lines of code

14254

increased by0.27%

Number of lines in readme file

347

increased by0.29%

No dependency changes