RollCake SPA v.0.0.1

- Added spa class to initiliaze and integrate support objects
- Added page class to control life cycle methods, call elements render function, destroy and
  update it content
- Added element class to attach nodes in Document Model Object (DOM)
- Added creation functions
- Added shared folder

And a lot of others funcionalities...

.babelrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        require('@babel/preset-env'),
+        require('@babel/plugin-proposal-class-properties'),
+    ],
+    plugins: [
+        require('@babel/plugin-syntax-dynamic-import')
+    ],
+    ignore: [
+        'dist/*.js',
+    ]
+}

.editorconfig

@@ -0,0 +1,15 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+    root: true,
+    parserOptions: {
+      parser: require.resolve('babel-eslint'),
+      ecmaVersion: 2018,
+      sourceType: 'module'
+    },
+    env: {
+      es6: true,
+      node: true,
+      browser: true
+    },
+    extends: [
+      "eslint:recommended"
+    ],
+    rules: {
+      'no-console': process.env.NODE_ENV !== 'production' ? 0 : 2,
+      'no-useless-escape': 0,
+      'no-empty': 0
+    }
+  }

.gitignore

@@ -0,0 +1,110 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test

.npmrc

@@ -0,0 +1 @@
+registry=https://npm.pkg.github.com/rollcakejs

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Antonio Neto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+🖖 RollCakeSpa.js is a progressive, incrementally-adoptable JavaScript framework for building micro-frontends UI on the web.

examples/mf-sample/application-shell/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "application-shell",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "author": "Antonio Neto",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.10.2",
+    "babel-loader": "^8.1.0",
+    "babel-polyfill": "^6.26.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.3",
+    "html-webpack-plugin": "^4.3.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.0.0-beta.55",
+    "core-js": "^3.6.5"
+  }
+}

examples/mf-sample/application-shell/public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Microfrontend Sample</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/mf-sample/application-shell/src/broker.js

@@ -0,0 +1,17 @@
+import { RollCakeMFBroker } from "../../../../src/index";
+
+const buckets = [
+    {
+        name: 'react-bucket',
+        address: 'http://localhost:3000'
+    },
+    {
+        name: 'vue-bucket',
+        address: 'http://localhost:3001'
+    }
+];
+
+export default new RollCakeMFBroker({
+    buckets: buckets,
+    state: {}
+});

examples/mf-sample/application-shell/src/components/CommonHeader.js

@@ -0,0 +1,50 @@
+import { CONTEXT_ATTRIBUTE } from "../../../../../src/index";
+import { createElement, PUBLIC_BUS_PUBLISH_EVENT_TYPE, WINDOW_VARIABLE,  } from "../../../../../src/index";
+
+const CommonHeader = () => createElement({
+    tag: 'div',
+    children: [
+        createElement({
+            tag: 'button',
+            attr: {
+                style: {
+                    'margin-right': '10px' 
+                }
+            },
+            props: {
+                textContent: 'Home',
+                eventListener: 'click',
+                eventHandler: () => {
+                    window[WINDOW_VARIABLE.BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/');
+                }
+            }
+        }),
+        createElement({
+            tag: 'button',
+            attr: {
+                style: {
+                    'margin-right': '10px' 
+                }
+            },
+            props: {
+                textContent: 'React',
+                eventListener: 'click',
+                eventHandler: () => {
+                    window[WINDOW_VARIABLE.BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/react');
+                }
+            }
+        }),
+        createElement({
+            tag: 'button',
+            props: {
+                textContent: 'Vue',
+                eventListener: 'click',
+                eventHandler: () => {
+                    window[WINDOW_VARIABLE.BROKER][CONTEXT_ATTRIBUTE.BUS].publish(PUBLIC_BUS_PUBLISH_EVENT_TYPE.NAVIGATE_TO, '/vue');
+                }
+            }
+        }),
+    ]
+});
+
+export default CommonHeader;

examples/mf-sample/application-shell/src/components/ReactMf.js

@@ -0,0 +1,10 @@
+import { createElement } from "../../../../../src/index";
+
+const ReactMf = () => createElement({
+    tag: 'rollcake-microfrontend',
+    attr: {
+        name: 'react-bucket'
+    }
+});
+
+export default ReactMf;

examples/mf-sample/application-shell/src/components/VueMf.js

@@ -0,0 +1,10 @@
+import { createElement } from "../../../../../src/index";
+
+const VueMf = () => createElement({
+    tag: 'rollcake-microfrontend',
+    attr: {
+        name: 'vue-bucket'
+    }
+});
+
+export default VueMf;