Add component type attribute so that renderqueue can choose which com… (

#112) * Add component type attribute so that renderqueue can choose which component type needs optimisation * Add correct bundlesize after file changes * Fix meldoy-streams not passing through catched errors while not in production environment. * Prettier
trivago · Apr 3, 2019 · 064ea1b · 064ea1b
1 parent 54e3f12
commit 064ea1b
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -90,7 +90,9 @@
             "prettier",
             "git add"
         ],
-        "ignore": ["./.history"]
+        "ignore": [
+            "./.history"
+        ]
     },
     "bundlesize": [
         {
@@ -99,7 +101,7 @@
         },
         {
             "path": "./packages/melody-idom/lib/index.js",
-            "maxSize": "4.66 kB"
+            "maxSize": "4.67 kB"
         },
         {
             "path": "./packages/melody-hoc/lib/index.js",
@@ -108,6 +110,10 @@
         {
             "path": "./packages/melody-redux/lib/index.js",
             "maxSize": "1.35 kB"
+        },
+        {
+            "path": "./packages/melody-streams/lib/index.js",
+            "maxSize": "1.52 kB"
         }
     ]
 }
diff --git a/packages/melody-idom/src/core.ts b/packages/melody-idom/src/core.ts
@@ -43,6 +43,7 @@ export interface RenderableComponent {
     refs: any;
     render(): void;
     notify(): void;
+    type: String;
 }
 
 /** @type {?Node} */

diff --git a/packages/melody-idom/src/renderQueue.ts b/packages/melody-idom/src/renderQueue.ts
@@ -90,17 +90,19 @@ function addToQueue(component: RenderableComponent): void {
                 return;
             }
 
-            // 2: Is the parent of this component already scheduled for an update?
-            if (getParent(component) === head.component) {
-                // if so: we don't need to do anything
-                return;
-            }
+            if (component.type !== 'streaming') {
+                // 2: Is the parent of this component already scheduled for an update?
+                if (getParent(component) === head.component) {
+                    // if so: we don't need to do anything
+                    return;
+                }
 
-            // 3: Is the component a parent of a node within the queue?
-            if (getParent(head.component) === component) {
-                // if so: replace the child with its parent
-                head.component = component;
-                return;
+                // 3: Is the component a parent of a node within the queue?
+                if (getParent(head.component) === component) {
+                    // if so: replace the child with its parent
+                    head.component = component;
+                    return;
+                }
             }
 
             if (head.next === NIL) {

diff --git a/packages/melody-plugin-idom/src/visitors/mount.js b/packages/melody-plugin-idom/src/visitors/mount.js
@@ -152,7 +152,7 @@ Example:
 This is the placeholder content that will be shown to your users while the async component is being loaded.`,
                             path.node.loc.start.line === path.node.loc.end.line
                                 ? path.node.loc.end.column -
-                                  path.node.loc.start.column
+                                      path.node.loc.start.column
                                 : 'mount async'.length
                         );
                     }

diff --git a/packages/melody-streams/__tests__/componentSpec.js b/packages/melody-streams/__tests__/componentSpec.js
@@ -30,7 +30,7 @@ import {
     applyAsGroupAndComplete,
 } from './util/testHelpers';
 import { last, first } from 'rxjs/operators';
-import { Observable, ReplaySubject } from 'rxjs';
+import { Observable, ReplaySubject, concat, throwError, of } from 'rxjs';
 
 const template = {
     render(_context) {
@@ -198,6 +198,21 @@ describe('component', () => {
             /* eslint-enable no-console */
         })
     );
+    it('should pass through an error message for non-production environments', () => {
+        const root = document.createElement('div');
+        const error = new Error('oops!');
+        const MyComponent = createComponent(
+            () => concat(of(7), throwError(error)),
+            template
+        );
+        /* eslint-disable no-console */
+        const temp = console.error;
+        console.error = jest.fn();
+        render(root, MyComponent);
+        expect(console.error).toHaveBeenCalledWith('Error: ', error);
+        console.error = temp;
+        /* eslint-enable no-console */
+    });
     it(
         'should not emit a warning message after if component emits state before 500ms if not state updates',
         fakeSchedulers(advance => {

diff --git a/packages/melody-streams/src/component.js b/packages/melody-streams/src/component.js
@@ -51,6 +51,7 @@ function Component(element) {
 }
 
 Object.assign(Component.prototype, {
+    type: 'streaming',
     apply(props) {
         this.propsStream.next(props);
         if (this.subscriptions.length === 0) {
@@ -67,26 +68,21 @@ Object.assign(Component.prototype, {
                 subscribe: obs => this.subscriptions.push(obs.subscribe()),
             });
             const warningSubscription = warningTimer.subscribe();
-            const s = t
-                .pipe(
-                    distinctUntilChanged(shallowEqual),
-                    catchError(err => of(err))
-                )
-                .subscribe(
-                    state => {
-                        if (!warningSubscription.closed)
-                            warningSubscription.unsubscribe();
-                        this.state = state;
-                        enqueueComponent(this);
-                    },
-                    err => {
-                        if (process.env.NODE_ENV !== 'production') {
-                            /* eslint-disable no-console */
-                            console.error('Error: ', err);
-                            /* eslint-enable no-console */
-                        }
+            const s = t.pipe(distinctUntilChanged(shallowEqual)).subscribe(
+                state => {
+                    if (!warningSubscription.closed)
+                        warningSubscription.unsubscribe();
+                    this.state = state;
+                    enqueueComponent(this);
+                },
+                err => {
+                    if (process.env.NODE_ENV !== 'production') {
+                        /* eslint-disable no-console */
+                        console.error('Error: ', err);
+                        /* eslint-enable no-console */
                     }
-                );
+                }
+            );
 
             this.subscriptions.push(s);
         }

diff --git a/packages/melody-streams/src/operators/combine.js b/packages/melody-streams/src/operators/combine.js
@@ -20,7 +20,7 @@ import { isObservable } from 'rxjs';
 
 export const combine = (...streams) =>
     mergeIntoObject(
-        ...streams.map(
-            stream => (isObservable(stream) ? stream : mergeObject(stream))
+        ...streams.map(stream =>
+            isObservable(stream) ? stream : mergeObject(stream)
         )
     );
diff --git a/yarn.lock b/yarn.lock
@@ -5113,7 +5113,7 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-"micromatch@github:jonschlinkert/micromatch#2.2.0":
+micromatch@jonschlinkert/micromatch#2.2.0:
   version "2.2.0"
   resolved "https://codeload.github.com/jonschlinkert/micromatch/tar.gz/5017fd78202e04c684cc31d3c2fb1f469ea222ff"
   dependencies: