Non-blocking Regions for Widgets sharing state (#56)

* examples: counter. * examples: multiple widgets. * examples: shared state. * mapToProps: make self state immediately availalble. * example: read state from each other. * mapToProps: wait for Widget to load (if not loaded already), and then map its state as shared state to Component. * examples: minor update. * upgrade rxjs to latest stable version * tests for waiting for widget to load, and then map its state * test waiting period for loading widgets * test unmounting of widgets * test rendering Region with no Core App * eslint fix * test possible widget observable error in Region * docs: typo
frintjs · Dec 13, 2016 · 521c919 · 521c919
1 parent 1b0730a
commit 521c919
Show file tree

Hide file tree

Showing 53 changed files with 1,005 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -132,3 +132,6 @@ fabric.properties
 # modules.xml
 # .idea/misc.xml
 # *.ipr
+
+examples/**/build/js/*.js
+examples/**/build/js/*.map
diff --git a/.npmignore b/.npmignore
@@ -11,3 +11,4 @@ _book
 *.swo
 coverage
 .nyc_output/
+examples/
diff --git a/docs/api/mapToProps.md b/docs/api/mapToProps.md
@@ -76,7 +76,7 @@ export default mapToProps({
 
 ## Shared state from other Apps
 
-If you app is alloed to listen to state changes happening in other Apps, you can:
+If you app is allwoed to listen to state changes happening in other Apps, you can:
 
 ```js
 export default mapToProps({

diff --git a/examples/config.js b/examples/config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  externals: {
+    'lodash': '_',
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'rxjs': 'Rx',
+  }
+};
diff --git a/examples/counter/Makefile b/examples/counter/Makefile
@@ -0,0 +1,3 @@
+serve:
+	(cd ./core && npm run build)
+	(cd ./build && ../../../node_modules/.bin/http-server -p 5001)
diff --git a/examples/counter/README.md b/examples/counter/README.md
@@ -0,0 +1,7 @@
+# Counter
+
+Run:
+
+```
+$ make serve
+```
diff --git a/examples/counter/build/index.html b/examples/counter/build/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Counter example</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.5/Rx.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
+
+    <script src="./js/core.js"></script>
+  </body>
+</html>
diff --git a/examples/counter/core/.babelrc b/examples/counter/core/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "travix"
+  ]
+}
diff --git a/examples/counter/core/actions/counter.js b/examples/counter/core/actions/counter.js
@@ -0,0 +1,16 @@
+import {
+  INCREMENT_COUNTER,
+  DECREMENT_COUNTER
+} from '../constants';
+
+export function incrementCounter() {
+  return {
+    type: INCREMENT_COUNTER
+  };
+}
+
+export function decrementCounter() {
+  return {
+    type: DECREMENT_COUNTER
+  };
+}
diff --git a/examples/counter/core/app/index.js b/examples/counter/core/app/index.js
@@ -0,0 +1,10 @@
+import { createApp } from '../../../../src';
+
+import RootComponent from '../components/Root';
+import rootReducer from '../reducers';
+
+export default createApp({
+  name: 'CounterApp',
+  component: RootComponent,
+  reducer: rootReducer,
+});
diff --git a/examples/counter/core/components/Root.js b/examples/counter/core/components/Root.js
@@ -0,0 +1,50 @@
+import { createComponent, mapToProps } from '../../../../src';
+
+import {
+  incrementCounter,
+  decrementCounter
+} from '../actions/counter';
+
+const Root = createComponent({
+  render() {
+    return (
+      <div className="container">
+        <div className="row">
+          <div className="eight columns">
+            <h3>Counter App</h3>
+
+            <p>Counter value: <code>{this.props.counter}</code></p>
+
+            <div>
+              <button
+                className="button button-primary"
+                onClick={() => this.props.incrementCounter()}
+              >
+                +
+              </button>
+
+              <button
+                className="button"
+                onClick={() => this.props.decrementCounter()}
+              >
+                -
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+export default mapToProps({
+  dispatch: {
+    incrementCounter,
+    decrementCounter,
+  },
+  state(state) {
+    return {
+      counter: state.counter.value
+    };
+  }
+})(Root);
diff --git a/examples/counter/core/constants/index.js b/examples/counter/core/constants/index.js
@@ -0,0 +1,2 @@
+export const INCREMENT_COUNTER = "INCREMENT_COUNTER";
+export const DECREMENT_COUNTER = "DECREMENT_COUNTER";
diff --git a/examples/counter/core/index.js b/examples/counter/core/index.js
@@ -0,0 +1,10 @@
+import { render } from '../../../src';
+
+import App from './app';
+
+window.app = new App();
+
+render(
+  window.app,
+  document.getElementById('root')
+);
diff --git a/examples/counter/core/package.json b/examples/counter/core/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "frint-example-counter",
+  "version": "0.0.1",
+  "description": "Counter example in frint",
+  "main": "index.js",
+  "scripts": {
+    "build": "../../../node_modules/.bin/webpack"
+  },
+  "author": "Travix International B.V.",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/examples/counter/core/reducers/counter.js b/examples/counter/core/reducers/counter.js
@@ -0,0 +1,25 @@
+import {
+  INCREMENT_COUNTER,
+  DECREMENT_COUNTER
+} from '../constants';
+
+const INITIAL_STATE = {
+  value: 0
+};
+
+export default function counter(state = INITIAL_STATE, action) {
+  switch (action.type) {
+    case INCREMENT_COUNTER:
+      return Object.assign({}, {
+        value: state.value + 1
+      });
+
+    case DECREMENT_COUNTER:
+      return Object.assign({}, {
+        value: state.value - 1
+      });
+
+    default:
+      return state;
+  }
+}
diff --git a/examples/counter/core/reducers/index.js b/examples/counter/core/reducers/index.js
@@ -0,0 +1,7 @@
+import { combineReducers } from '../../../../src';
+
+import counter from './counter';
+
+export default combineReducers({
+  counter
+});
diff --git a/examples/counter/core/webpack.config.js b/examples/counter/core/webpack.config.js
@@ -0,0 +1,27 @@
+var config = require('../../config');
+
+module.exports = {
+  entry: __dirname + '/index.js',
+  devtool: 'source-map',
+  output: {
+    path: __dirname + '/../build/js',
+    filename: 'core.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.(js)$/,
+        loaders: [
+          'babel'
+        ]
+      }
+    ]
+  },
+  externals: config.externals,
+  resolve: {
+    extensions: [
+      '',
+      '.js'
+    ]
+  }
+};
diff --git a/examples/multiple-widgets/Makefile b/examples/multiple-widgets/Makefile
@@ -0,0 +1,11 @@
+bundle:
+	(cd ./core && npm run build)
+	(cd ./widget-foo && npm run build)
+	(cd ./widget-bar && npm run build)
+
+serve-only:
+	(cd ./build && ../../../node_modules/.bin/http-server -p 5002)
+
+serve:
+	make bundle
+	make serve-only
diff --git a/examples/multiple-widgets/README.md b/examples/multiple-widgets/README.md
@@ -0,0 +1,7 @@
+# Multiple widgets
+
+Run:
+
+```
+$ make serve
+```
diff --git a/examples/multiple-widgets/build/index.html b/examples/multiple-widgets/build/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Multiple widgets example</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.5/Rx.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
+
+    <script src="./js/core.js"></script>
+    <script src="./js/widget-foo.js"></script>
+    <script src="./js/widget-bar.js"></script>
+  </body>
+</html>
diff --git a/examples/multiple-widgets/core/.babelrc b/examples/multiple-widgets/core/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "travix"
+  ]
+}
diff --git a/examples/multiple-widgets/core/app/index.js b/examples/multiple-widgets/core/app/index.js
@@ -0,0 +1,8 @@
+import { createApp } from '../../../../src';
+
+import RootComponent from '../components/Root';
+
+export default createApp({
+  name: 'MultipleWidgetsApp',
+  component: RootComponent,
+});
diff --git a/examples/multiple-widgets/core/components/Root.js b/examples/multiple-widgets/core/components/Root.js
@@ -0,0 +1,27 @@
+import { createComponent, Region } from '../../../../src';
+
+export default createComponent({
+  render() {
+    return (
+      <div className="container">
+        <div className="row">
+          <div className="eight columns">
+            <h3>Main</h3>
+
+            <hr />
+
+            <Region name="main" />
+          </div>
+
+          <div className="four columns">
+            <h3>Sidebar</h3>
+
+            <hr />
+
+            <Region name="sidebar" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/examples/multiple-widgets/core/index.js b/examples/multiple-widgets/core/index.js
@@ -0,0 +1,10 @@
+import { render } from '../../../src';
+
+import App from './app';
+
+window.app = new App();
+
+render(
+  window.app,
+  document.getElementById('root')
+);
diff --git a/examples/multiple-widgets/core/package.json b/examples/multiple-widgets/core/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "frint-multiple-widgets-counter",
+  "version": "0.0.1",
+  "description": "Multiple widgets example in frint",
+  "main": "index.js",
+  "scripts": {
+    "build": "../../../node_modules/.bin/webpack"
+  },
+  "author": "Travix International B.V.",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/examples/multiple-widgets/core/webpack.config.js b/examples/multiple-widgets/core/webpack.config.js
@@ -0,0 +1,27 @@
+var config = require('../../config');
+
+module.exports = {
+  entry: __dirname + '/index.js',
+  devtool: 'source-map',
+  output: {
+    path: __dirname + '/../build/js',
+    filename: 'core.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.(js)$/,
+        loaders: [
+          'babel'
+        ]
+      }
+    ]
+  },
+  externals: config.externals,
+  resolve: {
+    extensions: [
+      '',
+      '.js'
+    ]
+  }
+};
diff --git a/examples/multiple-widgets/widget-bar/.babelrc b/examples/multiple-widgets/widget-bar/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "travix"
+  ]
+}
diff --git a/examples/multiple-widgets/widget-bar/actions/color.js b/examples/multiple-widgets/widget-bar/actions/color.js
@@ -0,0 +1,10 @@
+import {
+  CHANGE_COLOR
+} from '../constants';
+
+export function changeColor(color) {
+  return {
+    type: CHANGE_COLOR,
+    color
+  };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const INCREMENT_COUNTER = "INCREMENT_COUNTER";
		export const DECREMENT_COUNTER = "DECREMENT_COUNTER";