refactor(md): clean up md and template

.github/pull_request_template.md

@@ -1,4 +1,4 @@
-<!-- Maleo.JS Pull Request Template -->
+<!-- Maleo.js Pull Request Template -->
 
 <!-- IMPORTANT Please review https://github.com/airyrooms/maleo.js/blob/master/CONTRIBUTING.md for detailed contributing guidelines -->
 <!-- Help with PRs can be found at (added soon) -->
@@ -8,8 +8,8 @@
 <!-- Go over all points below, and after creating the PR, tick all the checkboxes that apply. -->
 <!-- All points should be verified, otherwise, read the CONTRIBUTING guidelines from above-->
 <!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] Your pull request targets the `canary` branch of Maleo.JS.
-- [ ] Branch starts with either `fix/`, `feature/`, `optimization/`, or `translate/` (e.g. `fix/build-issue`)
+- [ ] Your pull request targets the `canary` branch of Maleo.js.
+- [ ] Branch starts with either `fix/`, `feature/`, etc (e.g. `fix/build-issue`. [more info](https://github.com/airyrooms/maleo.js/blob/canary/CONTRIBUTING.md))
 - [ ] You have only one commit (if not, [squash](http://forum.freecodecamp.org/t/how-to-squash-multiple-commits-into-one-with-git/13231) them into one commit).
 - [ ] All new and existing tests pass the command `yarn test`. Use `git commit --amend` to amend any fixes.
 
@@ -20,6 +20,8 @@
 - [ ] Optimization (non-breaking change which provides better optimization)
 - [ ] Breaking change (fix or feature that would change existing functionality)
 - [ ] Add new translation (feature adding new translations)
+- [ ] Update Documentation (added new docs or doc updates)
+- [ ] Other (<!-- Please write more info inside this parentheses --> )
 
 #### Checklist:
 <!-- Go over all points below, and after creating the PR, tick the checkboxes that apply. -->

CONTRIBUTING.md

@@ -2,15 +2,15 @@
 
 Hello 👋!
 
-Maleo.JS is an un-opinionated framework to enable Universal Rendering in JavaScript using React with no hassle.
+Maleo.js is an un-opinionated framework to enable Universal Rendering in JavaScript using React with no hassle.
 
 We are here to solve the time consuming setups Universal Rendering Required.
 
 Feel free to contribute to this project. We are grateful for your contributions and we are excited to welcome you abroad!
 
 Happy contributing 🎉!
 
-### Setting Up Maleo.JS in Local Environment
+### Setting Up Maleo.js in Local Environment
 
 **Clone Repo to Local Machine**
 
@@ -21,7 +21,7 @@ $ git clone https://github.com/<username>/maleo.js.git
 $ cd maleo.js
 ```
 
-Add Maleo.JS repo as upstream to keep your fork up to date
+Add Maleo.js repo as upstream to keep your fork up to date
 
 ```bash
 $ git remote add upstream https://github.com/airyrooms/maleo.js
@@ -30,7 +30,7 @@ $ git remote add upstream https://github.com/airyrooms/maleo.js
 Make sure you are currently on branch `canary`, if not you can run this command
 ```bash
 $ git checkout canary
-$ git pull upstream canary # sync with Maleo.JS repo
+$ git pull upstream canary # sync with Maleo.js repo
 ```
 
 **Setup**
@@ -45,7 +45,7 @@ $ npm install --global yarn
 ```
 Should the install fails, use `sudo`
 
-And then, install all the dependencies required by Maleo.JS
+And then, install all the dependencies required by Maleo.js
 
 ```bash
 $ yarn
@@ -97,7 +97,7 @@ Here is the draft:
     </tr>
 </table>
 
-For example if you want to contribute to fix bug in Maleo.JS you need to create new branch with `fix/` as the prefix.
+For example if you want to contribute to fix bug in Maleo.js you need to create new branch with `fix/` as the prefix.
 
 For example:
 ```bash
@@ -108,7 +108,7 @@ $ git checkout -b fix/webpack-bug
 
 **Development**
 
-You are now ready to contribute to Maleo.JS. Yaay 🤓!
+You are now ready to contribute to Maleo.js. Yaay 🤓!
 
 To build the module you can run this command:
 ```bash
@@ -157,26 +157,26 @@ $ git push
 
 YEAH!! 🎉🎉 You are ready to make your changes available for other people
 
-Your code are now available in your repository, but it's time to make a [Pull Request](https://help.github.com/articles/about-pull-requests/) to Maleo.JS
+Your code are now available in your repository, but it's time to make a [Pull Request](https://help.github.com/articles/about-pull-requests/) to Maleo.js
 
 ## FAQ
 <details>
-  <summary>How to test Maleo.JS on local development machine in the <code>example</code> directory?</summary>
+  <summary>How to test Maleo.js on local development machine in the <code>example</code> directory?</summary>
   Maleo.js is utilizing <a href="https://github.com/lerna/lerna">Lerna</a> and <a href="https://yarnpkg.com/lang/en/docs/workspaces/">Yarn Workspace</a> to manage the mono repo structure.
-  So you can use the Maleo.JS inside <code>package</code> folder or <code>example</code> folder. Because Yarn Workspace and Lerna has hoisted all the dependencies into root directory. Therefore every app inside <code>example</code> able to add symlinked Maleo.JS as dependency.
+  So you can use the Maleo.js inside <code>package</code> folder or <code>example</code> folder. Because Yarn Workspace and Lerna has hoisted all the dependencies into root directory. Therefore every app inside <code>example</code> able to add symlinked Maleo.js as dependency.
 </details>
 
 <br/>
 
 <details>
-  <summary>How to test Maleo.JS on your own app during development?</summary>
+  <summary>How to test Maleo.js on your own app during development?</summary>
   You can run this command inside <code>packages/Maleo.js</code> directory
   <pre>
   $ yarn link # if you are using yarn on your app
   $ npm link # if you are using npm on your app</pre>
   And then go to your app directory and add <code>@airy/maleo.js</code> to your own app's <code>package.json</code> and run this command:
   <pre>$ yarn link @airy/maleo.js</pre>
-  And you are good to go! Maleo.JS are now living in your <code>node_modules</code> directory as a symlinked module
+  And you are good to go! Maleo.js are now living in your <code>node_modules</code> directory as a symlinked module
 
   more: 
     <ul>

packages/Maleo.js/README.md

@@ -1,12 +1,12 @@
-# Welcome to Maleo.JS
+# Welcome to Maleo.js
 
-Maleo.JS is an un-opinionated framework to enable Universal Rendering in JavaScript using React with no hassle.
+Maleo.js is an un-opinionated framework to enable Universal Rendering in JavaScript using React with no hassle.
 
 We are here to solve the time consuming setups Universal Rendering Required.
 
 ---
 
-Readme below is the documentation for the `canary` (prerelease) branch. To view the documentation for the latest stable Maleo.JS version change branch to `master`
+Readme below is the documentation for the `canary` (prerelease) branch. To view the documentation for the latest stable Maleo.js version change branch to `master`
 
 ---
 
@@ -25,6 +25,7 @@ Readme below is the documentation for the `canary` (prerelease) branch. To view
   - [Customize Webpack](#customize-webpack)
   - [Customize Babel Config](#customize-babel-config)
 - [CDN Support](#cdn-support)
+- [Plugins](#plugins)
 - [FAQ](#faq)
 - [Contributing](#contributing)
 
@@ -37,7 +38,7 @@ Readme below is the documentation for the `canary` (prerelease) branch. To view
 
 ## Setup
 
-Install Maleo.JS 
+Install Maleo.js 
 
 **NPM**
 ```bash
@@ -52,7 +53,7 @@ Add this script to your `package.json`
 ```json
 {
   "scripts": {
-    "dev": "maleo run",
+    "dev": "maleo",
     "build": "export NODE_ENV=production && maleo build",
     "start": "export NODE_ENV=production && node .maleo/server.js"
   }
@@ -117,7 +118,7 @@ To see how simple this is, check out the sample app!
 
 ## Component Lifecycle 
 
-Maleo.JS added a new component lifecycle hook called `getInitialProps`, this function is called during Server Side Rendering (SSR).
+Maleo.js added a new component lifecycle hook called `getInitialProps`, this function is called during Server Side Rendering (SSR).
 
 This is useful especially for SEO purposes. 
 
@@ -250,7 +251,7 @@ export default [
 ```
 
 ## Dynamic Import Component
-Maleo.JS supports TC39 [dynamic import proposal](https://github.com/tc39/proposal-dynamic-import) for JavaScript.
+Maleo.js supports TC39 [dynamic import proposal](https://github.com/tc39/proposal-dynamic-import) for JavaScript.
 
 You can think dynamic import as another way to split your code into manageable chunks. You can use our `Dynamic` function which utilizes [react loadable](https://github.com/jamiebuilds/react-loadable)
 
@@ -297,7 +298,7 @@ export default [
 
 For optimization purposes, you can also preload a component even before the component got rendered.
 
-For example, if you want to load a when a button get pressed, you can start preloading the component when the user hovers the mouse over the button.
+For example, if you want to load component when a button get pressed, you can start preloading the component when the user hovers the mouse over the button.
 
 The component created by `Dynamic` exposes a [static `preload` method](https://github.com/jamiebuilds/react-loadable#loadablecomponentpreload).
 
@@ -340,14 +341,14 @@ class MyComponent extends React.Component {
 
 Highly inspired by what [Next.js](https://github.com/zeit/next.js) has done on their awesome template customization.
 
-Maleo.JS also enable customization on `Document` as document's markup. So you don't need to include tags like `<html>`, `<head>`, `<body>`, etc. 
+Maleo.js also enable customization on `Document` as document's markup. So you don't need to include tags like `<html>`, `<head>`, `<body>`, etc. 
 
 To override the default behavior, you'll need to create a component that extends the `Document` React class provided by Maleo.
 
 ```jsx
 // _document.jsx
 import React from 'react';
-import { Document, Header, Main, Scripts } from '@airy/maleo/Document';
+import { Document, Header, Main, Scripts } from '@airy/maleo/document';
 
 export default class extends Document {
   render() {
@@ -356,7 +357,7 @@ export default class extends Document {
         <Header>
           <title>Maleo JS</title>
           <meta charset="utf-8" />
-          <meta name="description" content="Maleo.JS is awesome!" />
+          <meta name="description" content="Maleo.js is awesome!" />
 
           <style>
             {` body { background-color: #fff } `}
@@ -378,7 +379,7 @@ export default class extends Document {
 
 ### Custom Wrap
 
-Maleo.JS uses the `Wrap` component to initialize pages. `Wrap` contains React Router's Component. You can add HoC here to wrap the application and control the page initialization. Which allows you to do amazing things like:
+Maleo.js uses the `Wrap` component to initialize pages. `Wrap` contains React Router's Component. You can add HoC here to wrap the application and control the page initialization. Which allows you to do amazing things like:
 - Persisting layour between page changes
 - Keeping state when navigating pages
 - Custom error handling using `componentDidCatch`
@@ -389,9 +390,9 @@ To override the default behavior, you'll need to create a component that extends
 ```jsx
 // _wrap.jsx
 import React from 'react';
-import { Wrap } from '@airy/maleo/Wrap';
+import { Wrap } from '@airy/maleo/wrap';
 
-// Redux plugin for Maleo.JS
+// Redux plugin for Maleo.js
 // Hoc that creates store and add Redux Provider
 import { withRedux } from '@airy/maleo-redux-plugin';
 
@@ -444,7 +445,7 @@ const maleoServer = Server.init({
 For Custom `Wrap` you'll need to register it on `client.js` as well.
 
 ```js
-import { init } from '@airy/maleo/Client';
+import { init } from '@airy/maleo/client';
 
 import routeConfig from './routes';
 import CustomWrap from './_wrap';
@@ -463,7 +464,7 @@ init(routeConfig, module, { Wrap: CustomWrap });
 
 ## Custom Configuration
 
-For more advanced configuration of Maleo.JS, like `webpack` config, registering `plugins`, and adding `path alias`, you can create a `maleo.config.js` in the root of your project directory. (same directory with `package.json`)
+For more advanced configuration of Maleo.js, like `webpack` config, registering `plugins`, and adding `path alias`, you can create a `maleo.config.js` in the root of your project directory. (same directory with `package.json`)
 
 ```js
 // maleo.config.js
@@ -484,7 +485,7 @@ Here are the API's for the configuration:
   <tr>
     <td><code>buildDir</code></td>
     <td><code>String?</code> [<code>.maleo</code>]</td>
-    <td>Directory to put Maleo.JS' build assets</td>
+    <td>Directory to put Maleo.js' build assets</td>
   </tr>
   <tr>
     <td><code>cache</code></td>
@@ -515,7 +516,7 @@ Here are the API's for the configuration:
   <tr>
     <td><code>analyzeBundle</code></td>
     <td><code>Boolean?</code> [<code>false</code>]</td>
-    <td>To enable webpack's bundle analyzer, for analyzing bundle sizes during bundle debugging should Maleo.JS' build process got slow</td>
+    <td>To enable webpack's bundle analyzer, for analyzing bundle sizes during bundle debugging should Maleo.js' build process got slow</td>
   </tr>
   <tr>
     <td><code>webpack</code></td>
@@ -526,7 +527,7 @@ Here are the API's for the configuration:
 
 #### Customize Webpack
 
-You are able to extend Maleo.JS' default webpack configuration by defining a function on `maleo.config.js`
+You are able to extend Maleo.js' default webpack configuration by defining a function on `maleo.config.js`
 
 ```js
 // maleo.config.js
@@ -627,9 +628,9 @@ module.exports = {
 
 #### Customize Babel Config
 
-Maleo.JS also let you have your own babel config. Just simply add `.babelrc` file at the root directory of your app.
+Maleo.js also let you have your own babel config. Just simply add `.babelrc` file at the root directory of your app.
 
-You can include Maleo.JS' babel preset in order to have latest JavaScript preset.
+You can include Maleo.js' babel preset in order to have latest JavaScript preset.
 
 Here's an example of `.babelrc` file:
 ```json
@@ -651,7 +652,7 @@ The `@airy/maleo/babel` preset includes everything you need to get your developm
 
 ## CDN Support
 
-If you are using a CDN, you can set up the `publicPath` setting and configure your CDN's origin to resolve to the domain that Maleo.JS is hosted on.
+If you are using a CDN, you can set up the `publicPath` setting and configure your CDN's origin to resolve to the domain that Maleo.js is hosted on.
 
 ```js
 // maleo.config.js
@@ -665,6 +666,15 @@ module.exports = {
 
 ## FAQ
 
+== TO BE DETERMINED == 
+
+## Plugins
+- [css-plugin](https://github.com/airyrooms/maleo.js/tree/canary/packages/plugins/css-plugin)
+- [typescript-plugin](https://github.com/airyrooms/maleo.js/tree/canary/packages/plugins/typescript-plugin)
+- [redux-plugin](https://github.com/airyrooms/maleo.js/tree/canary/packages/plugins/redux-plugin)
 
 ## Contributing
-[Please follow these steps to contribute](https://github.com/airyrooms/maleo.js/blob/canary/CONTRIBUTING.md)
+[Please follow these steps to contribute to Maleo.js](https://github.com/airyrooms/maleo.js/blob/canary/CONTRIBUTING.md)
+
+[Please follow these steps to contribute to Maleo.js' plugins](https://github.com/airyrooms/maleo.js/tree/canary/packages/plugins)
+

packages/Maleo.js/dynamic.js

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

packages/Maleo.js/src/bin/maleo.ts

@@ -27,7 +27,7 @@ import { spawn } from 'child_process';
 import { build } from '../build/index';
 
 console.log(
-  figlet.textSync('Maleo.JS', {
+  figlet.textSync('Maleo.js', {
     horizontalLayout: 'default',
     verticalLayout: 'default',
   }),