feat(maleo playground): add default server and client (#29)

add defult server, client, and routes for auto import, so user no need to register snippet

BREAKING CHANGE: client haven't use the route yet

feat(client route): add register route

added register route for client to be able to pass it to window and feed to default client

docs(readmemd): update docs for default server and client

feat(webpack client wrap): add register wrap to window

feat(webpack register-loader client): auto register

add auto register using register loader for wrap and routes to be used by client

feat(webpack app client): add auto register for app

refactor(webpack): clean up static entries

refactor static entries to be more readable

fix(webpack): comment out hardsourcewbp

fix(webpack): fix node externals

fix(webpack server tsplugin): fix error not bundling on client

error caused by webpack getting imported to server.ts not sure what cause the error

feat(client): added register entry class

docs(readmemd): update register route readme

example/playground/_document.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Document, Header, Main, Scripts } from '@airy/maleo/document';
+import { default as Document, Header, Main, Scripts } from '@airy/maleo/document';
 import { ReduxScript } from '@airy/maleo-redux-plugin';
 
-export class MyDocument extends Document {
+export default class MyDocument extends Document {
   static getInitialProps = async (ctx) => {
     const initialProps = await Document.getInitialProps(ctx);
 

example/playground/_wrap.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { _Wrap } from '@airy/maleo/wrap';
+import Wrap from '@airy/maleo/wrap';
 import pageWithStyles from '@airy/maleo-css-plugin/lib/pageWithStyles';
 import { withRedux } from '@airy/maleo-redux-plugin';
 
 import { makeStoreClient } from './store';
 
 @pageWithStyles
 @withRedux(makeStoreClient)
-export class Wrap extends _Wrap {
+export default class extends Wrap {
   static getInitialProps = ({ store }) => {
     console.log('\nGIP wrap store', store);
   };
@@ -25,4 +25,4 @@ export class Wrap extends _Wrap {
       </div>
     );
   }
-}
+}

example/playground/routes.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Dynamic from '@airy/maleo/lib/utils/dynamicImport';
+import Dynamic from '@airy/maleo/dynamic';
+import { registerRoutes } from '@airy/maleo/routes';
 
 import { RoomsMainApp } from './src/MainApp';
 
@@ -24,9 +25,8 @@ const RoomsDetail = Dynamic({
 // import { RoomsDetail } from 'src/Detail';
 // import { RoomsSearch } from 'src/Search';
 
-export const routes = [
+const routes = [
   {
-    path: '/',
     component: RoomsMainApp,
     key: 'rootWrapper',
     routes: [
@@ -48,7 +48,6 @@ export const routes = [
             exact: true,
           },
         ],
-        // exact: true,
       },
       {
         path: '/detail',
@@ -64,3 +63,5 @@ export const routes = [
     ],
   },
 ];
+
+export default routes;

example/playground/src/MainApp.tsx

@@ -17,7 +17,6 @@ export class RoomsMainApp extends React.Component<any, any> {
   };
 
   render() {
-    console.log('Data', this.props.data);
     return (
       <div>
         rooms main app

packages/Maleo.js/README.md

@@ -22,6 +22,7 @@ Readme below is the documentation for the `canary` (prerelease) branch. To view
   - [Custom Document](#custom-document)
   - [Custom Wrap](#custom-wrap)
 - [Custom Configuration](#custom-configuration)
+  - [Customize Server](#customize-server)
   - [Customize Webpack](#customize-webpack)
   - [Customize Babel Config](#customize-babel-config)
 - [CDN Support](#cdn-support)
@@ -75,36 +76,6 @@ export default [
 ];
 ```
 
-And then create a `server.js` file
-
-Here you can customize Maleo's server.
-```js
-import { Server } from '@airy/maleo/server';
-import path from 'path';
-
-import routeConfig from './routes';
-
-const PORT = process.env.PORT || 8080;
-
-const maleoServer = Server.init({
-  port: PORT,
-  routes: routeConfig,
-});
-
-maleoServer.run(() => {
-  console.log('Server running on port :', PORT);
-});
-```
-
-And lastly create a `client.js` file
-```js
-import { init } from '@airy/maleo/client';
-
-import routes from './routes';
-
-init(routes, module);
-```
-
 After that you can now run `$ npm run dev` and go to `http://localhost:3000`.
 
 You should now see your app running on your browser.
@@ -525,6 +496,47 @@ Here are the API's for the configuration:
   </tr>
 </table>
 
+#### Customize Server
+
+Create a `server.js` file on root directory where your `package.json` lives.
+Here you can customize Maleo's server.
+```js
+import { Server } from '@airy/maleo/server';
+import path from 'path';
+
+import routeConfig from './routes';
+
+const PORT = process.env.PORT || 8080;
+
+const maleoServer = Server.init({
+  port: PORT,
+});
+
+maleoServer.run(() => {
+  console.log('Server running on port :', PORT);
+});
+```
+
+Here are the API's for the configuration:
+
+<table>
+  <tr>
+    <td>Key</td>
+    <td>Type</td>
+    <td>Description</td>
+  </tr>
+  <tr>
+    <td><code>port</code></td>
+    <td><code>Number?</code> [<code>3000</code>]</td>
+    <td>Port to run Maleo server</td>
+  </tr>
+  <tr>
+    <td><code>assetDir</code></td>
+    <td><code>String?</code> [<code>'<root>/.maleo/client'</code>]</td>
+    <td>Directory for all client related assets</td>
+  </tr>
+</table>
+
 #### Customize Webpack
 
 You are able to extend Maleo.js' default webpack configuration by defining a function on `maleo.config.js`

packages/Maleo.js/babel.config.js

@@ -4,7 +4,13 @@ const aliases = {};
 
 Object.keys(paths).forEach((item) => {
   const key = item.replace('/*', '');
-  const path = paths[item][0].replace(/src\/(.+)\/\*/, './lib/$1/');
+
+  let path = '';
+  if (paths[item][0] === './*') {
+    path = './';
+  } else {
+    path = paths[item][0].replace(/src\/(.+)\/\*/, './lib/$1/');
+  }
 
   aliases[key] = path;
 });

packages/Maleo.js/client.js

@@ -1 +1 @@
-module.exports = require('./lib/client/Client');
+module.exports = require('./lib/client/client');

packages/Maleo.js/gulpfile.js

@@ -18,6 +18,8 @@ const paths = {
   server: 'src/server/**',
   client: 'src/client/**',
   bin: 'src/bin/*.ts',
+  routes: 'src/routes/**',
+  default: 'src/default/*.ts',
 };
 
 let tasks = Object.keys(paths);

packages/Maleo.js/package.json

@@ -31,6 +31,7 @@
         "es6-promise": "4.2.5",
         "express": "4.16.4",
         "figlet": "^1.2.1",
+        "friendly-errors-webpack-plugin": "^1.7.0",
         "hard-source-webpack-plugin": "0.12.0",
         "helmet": "3.14.0",
         "isomorphic-fetch": "2.2.1",
@@ -50,7 +51,6 @@
         "webpack-cli": "3.1.2",
         "webpack-dev-middleware": "3.4.0",
         "webpack-hot-middleware": "2.24.3",
-        "webpack-node-externals": "1.7.2",
         "webpack-stats-plugin": "^0.2.1",
         "webpackbar": "2.6.3"
     },

packages/Maleo.js/routes.js

@@ -0,0 +1 @@
+module.exports = require('./lib/routes/registerRoutes');

packages/Maleo.js/server.js

@@ -1 +1 @@
-module.exports = require('./lib/server/Server.js');
+module.exports = require('./lib/server/server.js');

packages/Maleo.js/src/build/loaders/maleo-babel-loader.ts

@@ -9,6 +9,15 @@ export default babelLoader.custom((babel) => {
   const configs = new Set();
 
   return {
+    customOptions(opts) {
+      const loader = {
+        cacheCompression: false,
+        cacheDirectory: true,
+        ...opts,
+      };
+
+      return { loader };
+    },
     config(config) {
       const options = { ...config.options };
       if (config.hasFilesystemConfig()) {

packages/Maleo.js/src/build/loaders/maleo-register-loader.ts

@@ -0,0 +1,23 @@
+import { loader } from 'webpack';
+import loaderUtils from 'loader-utils';
+import { REGISTERS } from '@constants/index';
+
+const maleoRegisterLoader: loader.Loader = function() {
+  const { absolutePagePath, page }: any = loaderUtils.getOptions(this);
+  const stringifiedAbsolutePagePath = JSON.stringify(absolutePagePath);
+  const stringifiedPage = JSON.stringify(page);
+
+  return `
+    (window.${REGISTERS.WINDOW_VAR_NAME}=window.${
+    REGISTERS.WINDOW_VAR_NAME
+  }||[]).push([${stringifiedPage}, function() {
+      var page = require(${stringifiedAbsolutePagePath});
+      if(module.hot) {
+        module.hot.accept(${stringifiedAbsolutePagePath});
+      }
+      return page.default || page;
+    }]);
+  `;
+};
+
+export default maleoRegisterLoader;

packages/Maleo.js/src/build/webpack/plugins/stats-writer.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import { Compiler } from 'webpack';
-import { AUTODLL_PATH } from '@src/constants';
+import { AUTODLL_PATH } from '@constants/index';
 
 const INDENT = 2;
 const DEFAULT_TRANSFORM = async (data) => JSON.stringify(data, null, INDENT);