RollCake SPA v0.0.3

- Update RollCake MF Broker version to v0.0.4 - Remove page state feature - Refactor page update logic
rollcakejs · Oct 29, 2020 · 52fddc8 · 52fddc8
1 parent 124b01f
commit 52fddc8
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 68 deletions.
diff --git a/examples/mf-sample/application-shell/src/broker.js b/examples/mf-sample/application-shell/src/broker.js
@@ -11,7 +11,4 @@ const buckets = [
     }
 ];
 
-export default new RollCakeMFBroker({
-    buckets: buckets,
-    state: {}
-});
+export default new RollCakeMFBroker(buckets);
diff --git a/examples/mf-sample/application-shell/src/components/CommonHeader.js b/examples/mf-sample/application-shell/src/components/CommonHeader.js
@@ -1,5 +1,5 @@
 import { CONTEXT_ATTRIBUTE } from "../../../../../src/index";
-import { createElement, PUBLIC_BUS_PUBLISH_EVENT_TYPE, WINDOW_VARIABLE,  } from "../../../../../src/index";
+import { createElement, PUBLIC_BUS_PUBLISH_EVENT_TYPE, WINDOW_VARIABLE } from "../../../../../src/index";
 
 const CommonHeader = () => createElement({
     tag: 'div',
@@ -15,7 +15,7 @@ const CommonHeader = () => createElement({
                 textContent: 'Home',
                 eventListener: 'click',
                 eventHandler: () => {
-                    window[WINDOW_VARIABLE.MF_BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/');
+                    window[WINDOW_VARIABLE.ROLLCAKE][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/');
                 }
             }
         }),
@@ -30,7 +30,7 @@ const CommonHeader = () => createElement({
                 textContent: 'React',
                 eventListener: 'click',
                 eventHandler: () => {
-                    window[WINDOW_VARIABLE.MF_BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/react');
+                    window[WINDOW_VARIABLE.ROLLCAKE][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/react');
                 }
             }
         }),
@@ -40,7 +40,7 @@ const CommonHeader = () => createElement({
                 textContent: 'Vue',
                 eventListener: 'click',
                 eventHandler: () => {
-                    window[WINDOW_VARIABLE.MF_BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/vue');
+                    window[WINDOW_VARIABLE.ROLLCAKE][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/vue');
                 }
             }
         }),

diff --git a/examples/render-sample/src/broker.js b/examples/render-sample/src/broker.js
@@ -2,7 +2,4 @@ import { RollCakeMFBroker } from "../../../src/index";
 
 const buckets = [];
 
-export default new RollCakeMFBroker({
-    buckets: buckets,
-    state: {}
-});
+export default new RollCakeMFBroker(buckets);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rollcakejs/rollcake-spa",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "🖖 RollCakeSpa.js is a progressive, incrementally-adoptable JavaScript framework for building micro-frontends UI on the web.",
   "main": "src/index.js",
   "sideEffects": false,
@@ -41,7 +41,7 @@
     "babel-eslint": "^10.1.0"
   },
   "dependencies": {
-    "@rollcakejs/rollcake-mf-broker": "0.0.3",
+    "@rollcakejs/rollcake-mf-broker": "0.0.4",
     "@rollcakejs/rollcake-router": "0.0.1",
     "loadash": "^1.0.0"
   },

diff --git a/src/core/create-element.js b/src/core/create-element.js
@@ -1,6 +1,6 @@
 import Element from './element';
 
-export function createElement(config = null) {
+export function createElement(config = {}) {
     const { tag, attr, props, children } = config;
     return new Element(tag, attr, props, children);
 }
diff --git a/src/core/create-page.js b/src/core/create-page.js
@@ -1,6 +1,6 @@
 import  Page from './page';
 
-export function createPage(config = null) {
-    const { state, onInit, onUpdate, onDestroy, content, loadingContent } = config;
-    return new Page(state, onInit, onUpdate, onDestroy, content, loadingContent);
+export function createPage(config = {}) {
+    const { onInit, onUpdate, onDestroy, content, loadingContent } = config;
+    return new Page(onInit, onUpdate, onDestroy, content, loadingContent);
 }
diff --git a/src/core/page.js b/src/core/page.js
@@ -1,15 +1,12 @@
 import { WINDOW_VARIABLE, CONTEXT_ATTRIBUTE, INTERNAL_BUS_PUBLISH_EVENT_TYPE } from "@rollcakejs/rollcake-mf-broker"; 
-import { ERROR_MESSAGE } from "../shared/constants";
 
 class Page {
     constructor(
-        state = null,
         onInit = () => {},
         onUpdate = () => {},
         onDestroy = () => {},
         content = null
     ) {
-        this.state = state;
         this.onInit = onInit;
         this.onUpdate = onUpdate;
         this.onDestroy = onDestroy;
@@ -19,32 +16,30 @@ class Page {
         this.onBeforeDestroy = () => {};
 
         // strictly internal
+        this._rollCakeMFBroker = window[WINDOW_VARIABLE.ROLLCAKE];
         this._entryDOMNode = null;
         this._childDOMNode = null;
         this._loadingContentDOMNode = null;
         this._prevStateValue = null;
 
-        this._configuration();
+        this._watchIsStoreUpdatedEvent();
+        this._watchIsMicrofrontendFetchingEvent();
     }
 
-    _configuration() {
-        if (this.state) {
-            const state = window[WINDOW_VARIABLE.MF_BROKER][CONTEXT_ATTRIBUTE.STATE];
+    _watchIsStoreUpdatedEvent() {
+        const bus = this._rollCakeMFBroker[CONTEXT_ATTRIBUTE.BUS];
 
-            if (state === null || state === undefined)
-            {
-                throw Error(ERROR_MESSAGE.STATE_NOT_INITIALIZED);
-            }
-
-            state[this.state.key] = this.state.value;
-            this._prevStateValue = JSON.parse(JSON.stringify(this.state.value));
+        bus.subscribe(INTERNAL_BUS_PUBLISH_EVENT_TYPE.IS_STORE_UPDATED, () => {
+            this._destroyContent();
+            this.onUpdate();
+            this._renderContent();
+        });
+    }
 
-            this._useStateReferenceCheckAndUpdate();
-        }
-
-        const bus = window[WINDOW_VARIABLE.MF_BROKER][CONTEXT_ATTRIBUTE.BUS];
+    _watchIsMicrofrontendFetchingEvent() {
+        const bus = this._rollCakeMFBroker[CONTEXT_ATTRIBUTE.BUS];
 
-        bus.subscribe(INTERNAL_BUS_PUBLISH_EVENT_TYPE.IS_FETCHING_MICFRONTEND, (isFetching) => {
+        bus.subscribe(INTERNAL_BUS_PUBLISH_EVENT_TYPE.IS_FETCHING_MICROFRONTEND, (isFetching) => {
             if (isFetching && this.loadingContent && !this._loadingContentDOMNode) {
                 this._hideContent();
                 this._renderLoadingContent();
@@ -56,18 +51,6 @@ class Page {
         });
     }
 
-    _useStateReferenceCheckAndUpdate() {
-        setInterval(() => {
-            if (JSON.stringify(this._prevStateValue) !== JSON.stringify(this.state.value)) {
-                this._destroyContent();
-                this.onUpdate();
-                this._renderContent();
-
-                this._prevStateValue = JSON.parse(JSON.stringify(this.state.value));
-            }
-        });
-    }
-
     render(entryDOMNode, loadingContent = null) {
         this.onBeforeInit();
         this._entryDOMNode = entryDOMNode;

diff --git a/src/core/spa.js b/src/core/spa.js
@@ -1,32 +1,28 @@
 import { PUBLIC_BUS_PUBLISH_EVENT_TYPE } from "../shared/constants";
 
 class RollCakeSpa {
-    constructor(broker, router, entryDOMNode, loadingContent = null) {
-        this.broker = broker;
-        this.router = router;
-        this.entryDOMNode = entryDOMNode;
-
+    constructor(broker, router, entryDOMNode, loadingContent) {
         // strictly internal
         this._VPage = null;
 
-        this.broker.init();
+        broker.init();
 
-        this.router.init((props) => {
+        router.init((response) => {
             if (this._VPage !== null)
             {
                 this._VPage.destroy();
             }
-            if (props && props.item) {
-                this._VPage = props.item();
-                this._VPage.render(this.entryDOMNode, loadingContent);
+            if (response && response.item) {
+                this._VPage = response.item();
+                this._VPage.render(entryDOMNode, loadingContent);
             }
             else {
                 this._VPage = null;
             }
         });
 
-        this.broker.bus().subscribe(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, (path) => {
-            this.router.navigateTo(path);
+        broker.getBus().subscribe(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, (path) => {
+            router.navigateTo(path);
         });
     }
 }

diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,7 @@ import { RollCakeRouter } from '@rollcakejs/rollcake-router';
 import { RollCakeMFBroker } from '@rollcakejs/rollcake-mf-broker';
 
 export { PUBLIC_BUS_PUBLISH_EVENT_TYPE } from './shared/constants';
-export { WINDOW_VARIABLE, CONTEXT_ATTRIBUTE, CUSTOM_ELEMENT_TAG } from '@rollcakejs/rollcake-mf-broker';
+export { WINDOW_VARIABLE, CONTEXT_ATTRIBUTE, CUSTOM_ELEMENT_TAG, LOCAL_STORAGE } from '@rollcakejs/rollcake-mf-broker';
 export { NAVIGATION_MODE } from "@rollcakejs/rollcake-router";
 
 export { RollCakeSpa, RollCakeRouter, RollCakeMFBroker };
diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -1,9 +1,3 @@
-export const ERROR_MESSAGE = {
-    BROKER_NOT_INTIALIZED: 'Please, refresh your screen. The broker was not initialized yet.',
-    STATE_NOT_INITIALIZED: 'Please, refresh your screen. The state was not initialized yet.',
-    STATE_KEY_ALREADY_BEING_USED: 'You cannot use this key, because it is already being used in another page declaration.',
-    EVENT_BUS_NOT_INITIALIZED: 'Please, refresh your screen. The event bus was not initialized yet.'
-};
 export const PUBLIC_BUS_PUBLISH_EVENT_TYPE = {
     NAVIGATE_TO: 'navigate-to'
 }