Converting extension to use dynamic import by default (module plugin …

…mode), updating upstream to the latest master branch (geosolutions-it#36)

js/extension/plugins/Extension.jsx

@@ -1,50 +1,4 @@
-import {connect} from "react-redux";
-import { name } from '../../../config';
+import {toModulePlugin} from "@mapstore/utils/ModulePluginsUtils";
+import {name} from "../../../config";
 
-import ExtensionComponent from "../components/Component";
-import Rx from "rxjs";
-import { changeZoomLevel } from "@mapstore/actions/map";
-
-import '../assets/style.css';
-export default {
-    name,
-    component: connect(state => ({
-        value: state.sampleExtension && state.sampleExtension.value
-    }), {
-        onIncrease: () => {
-            return {
-                type: 'INCREASE_COUNTER'
-            };
-        }, changeZoomLevel
-    })(ExtensionComponent),
-    reducers: {
-        sampleExtension: (state = { value: 1 }, action) => {
-            if (action.type === 'INCREASE_COUNTER') {
-                return { value: state.value + 1 };
-            }
-            return state;
-        }
-    },
-    epics: {
-        logCounterValue: (action$, store) => action$.ofType('INCREASE_COUNTER').switchMap(() => {
-            /* eslint-disable */
-            console.log('CURRENT VALUE: ' + store.getState().sampleExtension.value);
-            /* eslint-enable */
-            return Rx.Observable.empty();
-        })
-    },
-    containers: {
-        Toolbar: {
-            name: "sampleExtension",
-            position: 10,
-            text: "INC",
-            doNotHide: true,
-            action: () => {
-                return {
-                    type: 'INCREASE_COUNTER'
-                };
-            },
-            priority: 1
-        }
-    }
-};
+export default toModulePlugin(name, () => import(/* webpackChunkName: 'extension' */ './Module'));

js/extension/plugins/Module.jsx

@@ -0,0 +1,51 @@
+import {connect} from "react-redux";
+import { name } from '../../../config';
+
+import {createPlugin} from "@mapstore/utils/PluginsUtils";
+import ExtensionComponent from "../components/Component";
+import Rx from "rxjs";
+
+import { changeZoomLevel } from "@mapstore/actions/map";
+import '../assets/style.css';
+
+export default createPlugin(name, {
+    component: connect(state => ({
+        value: state.sampleExtension && state.sampleExtension.value
+    }), {
+        onIncrease: () => {
+            return {
+                type: 'INCREASE_COUNTER'
+            };
+        }, changeZoomLevel
+    })(ExtensionComponent),
+    reducers: {
+        sampleExtension: (state = { value: 1 }, action) => {
+            if (action.type === 'INCREASE_COUNTER') {
+                return { value: state.value + 1 };
+            }
+            return state;
+        }
+    },
+    epics: {
+        logCounterValue: (action$, store) => action$.ofType('INCREASE_COUNTER').switchMap(() => {
+            /* eslint-disable */
+            console.log('CURRENT VALUE: ' + store.getState().sampleExtension.value);
+            /* eslint-enable */
+            return Rx.Observable.empty();
+        })
+    },
+    containers: {
+        Toolbar: {
+            name: "sampleExtension",
+            position: 10,
+            text: "INC",
+            doNotHide: true,
+            action: () => {
+                return {
+                    type: 'INCREASE_COUNTER'
+                };
+            },
+            priority: 1
+        }
+    }
+});

js/extensions.js

@@ -6,11 +6,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createPlugin } from "@mapstore/utils/PluginsUtils";
 import Extension from './extension/plugins/Extension';
 import { name } from '../config';
 
 
 export default {
-    [name]: createPlugin(name, Extension)
+    [name]: Extension
 };