new: support flummox rc1

Author: istarkov

package.json

@@ -5,7 +5,7 @@
   "main": "server.js",
   "dependencies": {
     "async": "^0.9.2",
-    "async-decorators": "^0.1.2",
+    "async-decorators": "^0.1.3",
     "autoprefixer-loader": "^1.2.0",
     "babel": "^5.5.5",
     "babel-core": "^5.5.5",
@@ -24,7 +24,7 @@
     "extract-text-webpack-plugin": "^0.3.5",
     "faker": "^2.1.4",
     "file-loader": "^0.8.4",
-    "flummox": "^4.0.0-alpha2",
+    "flummox": "^4.0.0-rc1",
     "fs-loader": "0.0.1",
     "google-map-react": "^0.3.0",
     "html-hint": "^0.0.2",

web/flux/actions/example_actions.js

@@ -1,11 +1,7 @@
-import { Actions } from 'flummox';
-
-export default class ExampleActions extends Actions {
-  constructor() {
-    super();
-  }
-
-  initExampleInfo({title, info, source, next, prev}) {
-    return {title, info, source, next, prev};
-  }
+export default function createExampleActions() {
+  return {
+    initExampleInfo({title, info, source, next, prev}) {
+      return {title, info, source, next, prev};
+    }
+  };
 }

web/flux/actions/map_actions.js

@@ -1,7 +1,6 @@
 /*
  * emulate async server data query
  */
-import { Actions } from 'flummox';
 import {memoize, serialize} from 'async-decorators';
 
 import genMarkersData from 'components/examples/data/gen_markers_data.js';
@@ -12,35 +11,34 @@ const getDataAsync = (ms = 0, data = null) => new Promise(r => setTimeout(() =>
 const K_EMUL_ROUNDTRIP_TIME_MS = 100;
 const K_ROW_DEBOUNCE_INTERVAL = 16; // increase if you wanna show really big amount of markers
 
-export default class MapActions extends Actions {
-  constructor() {
-    super();
-  }
-
-  @serialize({raiseSkipError: false}) // possible memory leak, check
-  @memoize({expireMs: 1000 * 60 * 15})
-  async query(params) {
-    return await getDataAsync(K_EMUL_ROUNDTRIP_TIME_MS, genMarkersData(params));
-  }
-
-  changeBounds({center, zoom, bounds, marginBounds}) {
-    return {center, zoom, bounds, marginBounds};
-  }
-
-  tableHoveredRowIndexChange(index) {
-    return index;
-  }
-
-  markerHoverIndexChange(index) {
-    return index;
-  }
-
-  showBallon(index) {
-    return index;
-  }
-
-  @serialize({raiseSkipError: false}) // skips all but first and last
-  async tableVisibleRowsChange({visibleRowFirst, visibleRowLast, maxVisibleRows}) {
-    return await getDataAsync(K_ROW_DEBOUNCE_INTERVAL, {visibleRowFirst, visibleRowLast, maxVisibleRows});
-  }
+
+export default function createMapActions() {
+  return {
+    @serialize({raiseSkipError: false}) // possible memory leak, check
+    @memoize({expireMs: 1000 * 60 * 15})
+    async query(params) {
+      return await getDataAsync(K_EMUL_ROUNDTRIP_TIME_MS, genMarkersData(params));
+    },
+
+    changeBounds({center, zoom, bounds, marginBounds}) {
+      return {center, zoom, bounds, marginBounds};
+    },
+
+    tableHoveredRowIndexChange(index) {
+      return index;
+    },
+
+    markerHoverIndexChange(index) {
+      return index;
+    },
+
+    showBallon(index) {
+      return index;
+    },
+
+    @serialize({raiseSkipError: false}) // skips all but first and last
+    async tableVisibleRowsChange({visibleRowFirst, visibleRowLast, maxVisibleRows}) {
+      return await getDataAsync(K_ROW_DEBOUNCE_INTERVAL, {visibleRowFirst, visibleRowLast, maxVisibleRows});
+    }
+  };
 }

web/flux/actions/remote_actions.js

@@ -1,24 +1,22 @@
-import { Actions } from 'flummox';
 import resource from 'utils/resource.js';
 
 import {memoize, serialize /*, isSkipError */} from 'async-decorators';
 
-export default class RemoteActions extends Actions {
-  constructor(url) {
-    super();
-    this.resource = resource(url);
-  }
+export default function createRemoteActions(url) {
+  const resource_ = resource(url);
 
-  @serialize({raiseSkipError: false}) // possible memory leak, check
-  @memoize({expireMs: 1000 * 60 * 15})
-  async query(params) {
-    return await this.resource
-      .get(params);
-  }
+  return {
+    @serialize({raiseSkipError: false}) // possible memory leak, check
+    @memoize({expireMs: 1000 * 60 * 15})
+    async query(params) {
+      return await resource_
+        .get(params);
+    },
 
-  @serialize({raiseSkipError: false})
-  async save(params, obj) {
-    return await this.resource
-      .save(params, obj);
-  }
+    @serialize({raiseSkipError: false})
+    async save(params, obj) {
+      return await resource_
+        .save(params, obj);
+    }
+  };
 }

web/flux/actions/route_actions.js

@@ -1,47 +1,41 @@
-import { Actions } from 'flummox';
-
 import routeTemplate from 'utils/route_template.js';
 import utilsText from 'utils/text.js';
 
-export default class RouteActions extends Actions {
-
-  constructor(page) {
-    super();
-    this.page = page;
-  }
-
-  routeTemplatesCache_ = {};
-
-  defaultRoute({routeName, routePath, routeContext, routeParams}) {
-    return {routeName, routePath, routeContext, routeParams};
-  }
-
-  gotoLink(link) {
-    this.page(link);
-  }
-
-  gotoLinkWParams(link, params, routeContextParams, defaultParams) {
-    // const routeContextParams = routes_store.get_route_context_params ();
-
-    if (routeContextParams && link !== undefined && typeof link === 'string') {
-      if (!(link in this.routeTemplatesCache_)) {
-        this.routeTemplatesCache_[link] = routeTemplate(link);
-      }
-      const linkTemplate = this.routeTemplatesCache_[link];
-      const evaluatedLink = linkTemplate(
-        utilsText.encode_link_object_properties(
-           Object.assign(
-            {},
-            defaultParams || {},
-            routeContextParams.toJS(),
-            params || {}
+export default function createRouteActions(page) {
+  const routeTemplatesCache_ = {};
+
+  return {
+    defaultRoute({routeName, routePath, routeContext, routeParams}) {
+      return {routeName, routePath, routeContext, routeParams};
+    },
+
+    gotoLink(link) {
+      page(link);
+    },
+
+    gotoLinkWParams(link, params, routeContextParams, defaultParams) {
+      // const routeContextParams = routes_store.get_route_context_params ();
+
+      if (routeContextParams && link !== undefined && typeof link === 'string') {
+        if (!(link in routeTemplatesCache_)) {
+          routeTemplatesCache_[link] = routeTemplate(link);
+        }
+        const linkTemplate = routeTemplatesCache_[link];
+        const evaluatedLink = linkTemplate(
+          utilsText.encode_link_object_properties(
+             Object.assign(
+              {},
+              defaultParams || {},
+              routeContextParams.toJS(),
+              params || {}
+              )
             )
-          )
-        );
+          );
 
-      this.page(evaluatedLink);
-    } else {
-      throw new Error('unrecognized link');
+        page(evaluatedLink);
+      } else {
+        throw new Error('unrecognized link');
+      }
     }
-  }
+  };
 }

web/flux/app.js

@@ -1,7 +1,7 @@
 import React from 'react/addons';
 
 import AppFlux from 'utils/appflux.js';
-import FluxComponent from 'flummox/component';
+import {FluxComponent} from 'flummox/addons/react';
 
 import Main from 'components/main.jsx';
 

web/flux/components/decorators/flux_component_decorator.js

@@ -1,6 +1,6 @@
 // TODO replace fluxComponentDecorator with import {connect} from 'flummox/connect'
 import React, { Component } from 'react';
-import FluxComponent from 'flummox/component';
+import {FluxComponent} from 'flummox/addons/react';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 
 export default function fluxComponentDecorator(fluxComponentProps) {

web/flux/components/examples/x_main/main_map_page.jsx

@@ -1,7 +1,7 @@
 import React, {PropTypes, Component} from 'react/addons';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 
-import FluxComponent from 'flummox/component';
+import {FluxComponent} from 'flummox/addons/react';
 
 import MainMapLayout from './main_map_layout.jsx';
 import IceTable from 'components/controls/fixed_table_examples/ice_table.jsx';

web/flux/components/main.jsx

@@ -3,7 +3,7 @@ import shouldPureComponentUpdate from 'react-pure-render/function';
 import {routeNames} from 'create_routes.js';
 import {examples} from 'consts/example_defs.js';
 
-import FluxComponent from 'flummox/component';
+import {FluxComponent} from 'flummox/addons/react';
 
 import MainMapPage from './examples/x_main/main_map_page.jsx';
 import SimpleMapPage from './examples/x_simple/simple_map_page.jsx';

web/flux/initflux.js

@@ -1,15 +1,14 @@
-// import RemoteActions from 'actions/remote_actions.js';
-import MapActions from 'actions/map_actions.js';
-import ExampleActions from 'actions/example_actions.js';
+import createMapActions from 'actions/map_actions.js';
+import createExampleActions from 'actions/example_actions.js';
 
 import MapStore from 'stores/map_store.js';
 import ExampleStore from 'stores/example_store.js';
 
 export default function initFlux(flux) {
-  const mapActions = flux.createActions('map', MapActions);
+  const mapActions = flux.createActions('map', createMapActions());
   flux.createStore('map', MapStore, { mapActions });
 
-  const exampleActions = flux.createActions('example', ExampleActions);
+  const exampleActions = flux.createActions('example', createExampleActions());
   flux.createStore('example', ExampleStore, { exampleActions });
   // you nedd to return actions to pass them into create_routes
   return {mapActions, exampleActions};

web/flux/utils/appflux.js

@@ -1,5 +1,5 @@
 import { Flummox } from 'flummox';
-import RouteActions from 'actions/route_actions.js';
+import createRouteActions from 'actions/route_actions.js';
 import RouteStore from 'stores/route_store.js';
 
 import initFlux from 'initflux.js';
@@ -14,8 +14,8 @@ export default class AppFlux extends Flummox {
     super();
 
     const pageRouter = createPage(); // pagejs роутер
+    const routeActions = this.createActions('route', createRouteActions(pageRouter));
 
-    const routeActions = this.createActions('route', RouteActions, pageRouter);
     this.createStore('route', RouteStore, { routeActions });
 
     const actions = initFlux(this);