From 2d763f420cffaebac86eaddfcc85b1344b3d1540 Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Wed, 23 Jan 2019 14:59:16 +0700 Subject: [PATCH 01/67] docs(contributing md): add contributing documentation (#16) docs(readmemd): add initial readme md until dynamic import --- CONTRIBUTING.md | 186 ++++++++++ README.md | 1 + packages/Maleo.js/README.md | 670 ++++++++++++++++++++++++++++++++++++ 3 files changed, 857 insertions(+) create mode 100644 CONTRIBUTING.md create mode 120000 README.md create mode 100644 packages/Maleo.js/README.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..4dadab6a --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,186 @@ +# Contributing Guidelines + +Hello 👋! + +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 + +**Clone Repo to Local Machine** + +[Fork](https://help.github.com/articles/fork-a-repo/) this repository to your GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local machine from forked repo. + +```bash +$ git clone https://github.com//maleo.js.git +$ cd maleo.js +``` + +Add Maleo.JS repo as upstream to keep your fork up to date + +```bash +$ 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 +``` + +**Setup** + +Make sure you are using the same or higher version of [Node.js](https://nodejs.org/en/) from `.nvmrc` file. (more info about [nvm](https://github.com/creationix/nvm)) + +We are using [Yarn](https://yarnpkg.com/en/) as package manager + +Install yarn as global dependency +```bash +$ npm install --global yarn +``` +Should the install fails, use `sudo` + +And then, install all the dependencies required by Maleo.JS + +```bash +$ yarn +``` + +After the installation finished, run `fix:bin` command to fix binary symlink issue +```bash +$ yarn fix:bin +``` + +--- + +***Before making any changes, please check our [issues list](https://github.com/airyrooms/maleo.js/issues), for issues that you want to solve.*** + +Create a new branch based on what kind of contribution you are going to do. + +Here is the draft: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Contributing Type Branch Prefix Description
Fix fix/< name > Fixing current bug or issues
Feature feature/< name > Adding new feature
Optimization optimization/< name > Optimize current unoptimized code
Documentation docs/< name > Add or edit documentation related file
Translation translate/< name > Add or edit documentation's translation
+ +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 +$ git checkout -b fix/webpack-bug +``` + +--- + +**Development** + +You are now ready to contribute to Maleo.JS. Yaay 🤓! + +To build the module you can run this command: +```bash +$ yarn build +``` + +During development we are more likely watch our code changes, therefore we use this command: +```bash +$ yarn watch +``` + +The command above watches for every changes from folder `/packages/plugins` and `/packages/Maleo.js` + +**Test** + +For every new feature you are required to add unit test. + +You can add the unit test on folder `test` with filename having `[feature-name].test.js` prefix. + + +Running test: +```bash +$ yarn test +``` + +**Commit and Push Changes** + +Awesome 🎉! + +You have arrived at this stage, you are almost ready to make your changes available for other people. + +After you have made changes and tested, please don't commit the changes using `$ git commit`, instead use this command: +```bash +$ yarn commit +``` + +The command above will display a wizard for you to fill, it uses our standard commit message. After you have finished filling the answers, we will run [linting](https://stackoverflow.com/questions/8503559/what-is-linting) and `prettify` process to your code and stage those changes to the commit to make sure your code have the same formatting as the other. + +If you have passed all the process above you can now push your changes! 😙 + +```bash +$ git push +``` + +**Making Pull Request** + +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 + +## FAQ +
+ How to test Maleo.JS on local development machine in the example directory? + Maleo.js is utilizing Lerna and Yarn Workspace to manage the mono repo structure. + So you can use the Maleo.JS inside package folder or example folder. Because Yarn Workspace and Lerna has hoisted all the dependencies into root directory. Therefore every app inside example able to add symlinked Maleo.JS as dependency. +
+ +
+ +
+ How to test Maleo.JS on your own app during development? + You can run this command inside packages/Maleo.js directory + 
+  $ yarn link # if you are using yarn on your app
+  $ npm link # if you are using npm on your app
+ And then go to your app directory and add @airy/maleo.js to your own app's package.json and run this command: + 
$ yarn link @airy/maleo.js
+ And you are good to go! Maleo.JS are now living in your node_modules directory as a symlinked module + + more: + +
\ No newline at end of file diff --git a/README.md b/README.md new file mode 120000 index 00000000..4a1f29ae --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +packages/Maleo.js/README.md \ No newline at end of file diff --git a/packages/Maleo.js/README.md b/packages/Maleo.js/README.md new file mode 100644 index 00000000..a0048c9c --- /dev/null +++ b/packages/Maleo.js/README.md @@ -0,0 +1,670 @@ +# Welcome to Maleo.JS + +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` + +--- + +# Table of Contents +- [Features](#features) +- [Setup](#setup) +- [Component Lifecycle](#component-lifecycle) +- [Routing](#routing) +- [Dynamic Import Component](#dynamic-import-component) + - [Tips](#tips) + - [Preloading](#preloading) +- [Customizable Component](#customizable-component) + - [Custom Document](#custom-document) + - [Custom Wrap](#custom-wrap) +- [Custom Configuration](#custom-configuration) + - [Customize Webpack](#customize-webpack) + - [Customize Babel Config](#customize-babel-config) +- [CDN Support](#cdn-support) +- [FAQ](#faq) +- [Contributing](#contributing) + +--- + +## Features +- Universal Rendering +- Plugin based framework +- Customizable + +## Setup + +Install Maleo.JS + +**NPM** +```bash +$ npm install --save @airy/maleo react react-router-dom +``` +**Yarn** +```bash +$ yarn add @airy/maleo react react-router-dom +``` + +Add this script to your `package.json` +```json +{ + "scripts": { + "dev": "maleo run", + "build": "export NODE_ENV=production && maleo build", + "start": "export NODE_ENV=production && node .maleo/server.js" + } +} +``` + +Create a routing file called `routes.js` +```jsx +import React from 'react'; + +const App = () => (

Hello World

); + +export default [ + { + path: '/', + component: App, + key: 'root', + }, +]; +``` + +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. + +By now you should see +- Automatic transpilation and bundling (with webpack and babel) +- Hot code reloading +- Server rendering + +To see how simple this is, check out the sample app! + +## Component Lifecycle + +Maleo.JS added a new component lifecycle hook called `getInitalProps`, this function is called during Server Side Rendering (SSR). + +This is useful especially for SEO purposes. + +Example for stateful component: +```jsx +import React from 'react'; + +export default class extends React.Component { + static getInitialProps = async (ctx) => { + const { req } = ctx; + + const userAgent = req ? req.headers['user-agent'] : navigator.userAgent; + + return { userAgent }; + } + + render() { + return ( +
+ Hello World {this.props.userAgent} +
+ ); + } +} +``` + +Example for stateless component: +```jsx +const Component = (props) => ( +
+ Hello World {props.userAgent} +
+); + +Component.getInitialprops = async (ctx) => { + const { req } = ctx; + + const userAgent = req ? req.headers['user-agent'] : navigator.userAgent; + + return { userAgent }; +}; + +export default Component; +``` + +`getInitialProps` receives a context object with the following properties: +- `req` - HTTP request object (server only) +- `res` - HTTP response object (server only) +- `...wrapProps` - Spreaded properties from custom Wrap +- `...appProps` - Spreaded properties from custom App + +## Routing + +Routing are declared as a centralized route config. +Register all the route config in `routes.js` file. + +Routes file has to export default the route configuration. +The route object **expected to have distinct key** to indicate the route. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyTypeDescription
pathString!React Router path string
componentReact.Component!React Component to render on this route. You can use this.props.children to make the component as a Wrapper and render the child routes
keyString!Distinct or unique key to identify the route
exactBoolean? [false]To make url has to match exactly the path in order to render the component. Give false value if the route is a wrapper route component
routesRouteObject?Nested route
+ + +For example: +```js +// routes.js +export default [ + // wrapper route + { + path: '/', + component: SomeWrapperComponent, + key: 'root-Wrapper', // distinct key to indicate the route + // declare routes inside this wrapper + routes: [ + // nested route + { + path: '/', + key: 'root-Page', + component: RootPageComponent, + exact: true, // indicate that the path has to be exact + }, + // this route receives wrapper from root + // and declare other wrapper inside it for other routes + { + path: '/some-url', + key: 'someUrl-Wrapper', + component: SomeURLWrapper, + routes: [ + { + path: '/some-url/hello', + key: 'someUrl-HelloPage', + component: SomeURLHelloPage, + exact: true, + } + ], + }, + ], + }, +]; +``` + +## Dynamic Import Component +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) + +For Example +```js +// DynamicComponent.js +import Dynamic from '@airy/maleo/dynamic'; + +export default Dynamic({ + loader: () => import('./component/DynamicLoad' /* webpackChunkName:"DynamicComponent" */), +}) +``` + +### **Tips** + +This dynamic import best used for splitting routes based component. + +For Example: + +```jsx +import Dynamic from '@airy/maleo/dynamic'; + +export default [ + { + path: '/', + component: Dynamic({ + loader: () => import('./component/RootComponent' /* webpackChunkName:"RootComponent" */), + }), + key: 'root-RootComponent', + exact: true, + }, + { + path: '/hello-world', + component: Dynamic({ + loader: () => import('./component/HelloWorldComponent' /* webpackChunkName: "HelloWorldComponent" */), + }), + key: 'hello-world-HelloWorldComponent', + exact: true, + } +] +``` + +### **Preloading** + +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. + +The component created by `Dynamic` exposes a [static `preload` method](https://github.com/jamiebuilds/react-loadable#loadablecomponentpreload). + +```jsx +import React from 'react'; +import Dynamic from '@airy/maleo/dynamic'; + +const DynamicBar = Dynamic({ + loader: () => import('./Bar'), + loading: LoadingCompoinent +}); + +class MyComponent extends React.Component { + state = { showBar: false }; + + onClick = () => { + this.setState({ showBar: true }); + }; + + onMouseOver = () => DynamicBar.preload(); + + render() { + return ( +
+ + { this.state.showBar && } +
+ ) + } +} +``` + +## Customizable Component + +### Custom Document + +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 ``, ``, ``, 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'; + +export default class extends Document { + render() { + return ( + +
+ Maleo JS + + + + +
+ + +
+ + + + + + + ); + } +} +``` + +### 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: +- Persisting layour between page changes +- Keeping state when navigating pages +- Custom error handling using `componentDidCatch` +- Inject additional data into pages (like Redux provider, etc) + +To override the default behavior, you'll need to create a component that extends the `Wrap` React class provided by Maleo. + +```jsx +// _wrap.jsx +import React from 'react'; +import { Wrap } from '@airy/maleo/Wrap'; + +// Redux plugin for Maleo.JS +// Hoc that creates store and add Redux Provider +import { withRedux } from '@airy/maleo-redux-plugin'; + +// Custom Wrapper that will be rendered for the whole Application +import CustomWrapper from './component/CustomWrapper'; + +import { createStore } from './store'; + +@withRedux(createStore) +export default class extends Wrap { + static getInitialProps = (ctx) => { + const { store } = ctx + // you receive store from context + // you can access or do something with the store here + console.log('Initialized Redux Store', store); + } + + render() { + return ( + + {super.render()} + + ) + } +} + +``` + + +After that register the all custom `Document` or `Wrap` to your `server.js` file. like so: + +``` +... + +import CustomDocument from './_document'; +import CustomWrap from './_wrap'; + +... + +const maleoServer = Server.init({ + ... + _document: CustomDocument, + _wrap: CustomWrap, + ... +}); + +... +``` + +For Custom `Wrap` you'll need to register it on `client.js` as well. + +```js +import { init } from '@airy/maleo/Client'; + +import routeConfig from './routes'; +import CustomWrap from './_wrap'; + +init(routeConfig, module, { Wrap: CustomWrap }); +``` +--- + +***We are currently working on automatic custom `Document` and `Wrap` registration*** + +***For now you can register the component like the example above*** + +***We are also working on adding default and customizable `Error` component page*** + +--- + +## 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`) + +```js +// maleo.config.js + +module.exports = { + /* config options here */ +} +``` + +Here are the API's for the configuration: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyTypeDescription
buildDirString? [.maleo]Directory to put Maleo.JS' build assets
cacheBoolean? [true]Enable webpack build caching
sourceMapsBoolean? [true]Enable webpack to generate source maps
aliasObject?A key value pair for aliasing path directory +
+ + { 'component': './src/component' } + +
publicPathString? [/_assets/]To customize webpack's publicPath +
Comes in handy if using CDN to put built assets
analyzeBundleBoolean? [false]To enable webpack's bundle analyzer, for analyzing bundle sizes during bundle debugging should Maleo.JS' build process got slow
webpackFunction?To customize webpack configuration, more details here
+ +#### Customize Webpack + +You are able to extend Maleo.JS' default webpack configuration by defining a function on `maleo.config.js` + +```js +// maleo.config.js + +module.exports = { + webpack(config, context, next) { + // Perform customizations to webpack config + // Important: This call is required in order to let Maleo pass the config to webpack + return next(); + }, +}; +``` + +Webpack function will receive three arguments: + + + + + + + + + + + + + + + + + + +
ArgumentDetails
configThis contains webpack configuration object that you can manipulate
contextThis contains some keys that are useful for the build context +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
isDevBooleanCheck if current build is for development
publicPathStringPublic Path of user defined or default's value
analyzeBundleBooleanCheck if analyze bundle is enabled
buildDirectoryStringBuild Directory of user defined or default's value
nameStringBuild name 'server' || 'client'
+
nextA callback required to be called to pass the custom configuration
+ +Example of adding `ts-loader` through `maleo.config.js`: + +```js +// maleo.config.js + +// Partly taken and modified from @airy/maleo-ts-plugin source +// for simplicity purposes + +module.exports = { + webpack(config, context, next) { + const { isDev } = context + + config.module.rules.push({ + test: /\.tsx?/, + exclude: /node_modules/, + use: [ + require.resolve('@airy/maleo/lib/build/loaders/maleo-babel-loader'), + { + loader: 'ts-loader', + options: { + transpileOnly: true, + }, + }, + ], + + if (isDev) { + config.plugins.push(new ForkTSCheckerWebpackPlugin()); + } + + return next(); + }) + }, +}; +``` + +#### 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. + +You can include Maleo.JS' babel preset in order to have latest JavaScript preset. + +Here's an example of `.babelrc` file: +```json +{ + "presets": ["@airy/maleo/babel"], + "plugins": [] +} +``` + +The `@airy/maleo/babel` preset includes everything you need to get your development started. The preset includes: +- `@babel/preset-env` +- `@babel/preset-react` +- `@babel/plugin-proposal-class-properties` +- `@babel/plugin-proposal-decorators` +- `@babel/plugin-proposal-object-rest-spread` +- `@babel/plugin-transform-runtime` +- `react-hot-loader/babel` +- `react-loadable/babel` + +## 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. + +```js +// maleo.config.js + +const isProd = process.env.NODE_ENV === 'production'; + +module.exports = { + assetPrefix: isProd && 'https://cdn.example.com'; +} +``` + +## FAQ + + +## Contributing +[Please follow these steps to contribute](https://github.com/airyrooms/maleo.js/blob/docs/contribution/CONTRIBUTING.md) \ No newline at end of file From 892f63b3db4a5bc9129e30ab7b22291c42d93191 Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Wed, 23 Jan 2019 15:02:43 +0700 Subject: [PATCH 02/67] docs(readmemd): fix contributing url (#18) fix contributing url on readme md --- packages/Maleo.js/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Maleo.js/README.md b/packages/Maleo.js/README.md index a0048c9c..bc879a56 100644 --- a/packages/Maleo.js/README.md +++ b/packages/Maleo.js/README.md @@ -667,4 +667,4 @@ module.exports = { ## Contributing -[Please follow these steps to contribute](https://github.com/airyrooms/maleo.js/blob/docs/contribution/CONTRIBUTING.md) \ No newline at end of file +[Please follow these steps to contribute](https://github.com/airyrooms/maleo.js/blob/canary/CONTRIBUTING.md) From 064352c42fd02ccdeca3242b79af00ab1661390c Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Fri, 25 Jan 2019 11:43:22 +0700 Subject: [PATCH 03/67] fix(babelconfigjs): fix built absolute path to relative path (#19) Fix built file path and extract customizable to outer maleo fix(playground): change path to root maleo fix(plugins): change name of plugins into maleo- fix(maleo binary): add figlet to maleo binary --- example/playground/_document.tsx | 4 ++-- example/playground/_wrap.tsx | 6 +++--- example/playground/client.ts | 2 +- example/playground/maleo.config.js | 4 ++-- example/playground/package.json | 6 +++--- example/playground/server.ts | 4 ++-- example/playground/src/Detail/index.tsx | 2 +- example/playground/store.ts | 2 +- example/playground/tsconfig.json | 2 +- packages/Maleo.js/app.js | 1 + packages/Maleo.js/babel.config.js | 7 ++----- packages/Maleo.js/client.js | 1 + packages/Maleo.js/document.js | 1 + packages/Maleo.js/package.json | 7 ++++--- packages/Maleo.js/server.js | 2 +- packages/Maleo.js/src/bin/maleo.ts | 21 ++++++++----------- packages/Maleo.js/wrap.js | 1 + packages/plugins/css-plugin/gulpfile.js | 2 +- packages/plugins/css-plugin/package.json | 4 ++-- packages/plugins/gulp-plugin/package.json | 2 +- .../gulpfile.js | 2 +- .../package.json | 4 ++-- .../src/const.ts | 0 .../src/index.ts | 0 .../src/makeStore.ts | 0 .../src/reduxScript.jsx | 0 .../src/withRedux.jsx | 0 .../plugins/typescript-plugin/gulpfile.js | 2 +- .../plugins/typescript-plugin/package.json | 4 ++-- yarn.lock | 5 +++++ 30 files changed, 51 insertions(+), 47 deletions(-) create mode 100644 packages/Maleo.js/app.js create mode 100644 packages/Maleo.js/client.js create mode 100644 packages/Maleo.js/document.js create mode 100644 packages/Maleo.js/wrap.js rename packages/plugins/{with-redux-plugin => redux-plugin}/gulpfile.js (60%) rename packages/plugins/{with-redux-plugin => redux-plugin}/package.json (83%) rename packages/plugins/{with-redux-plugin => redux-plugin}/src/const.ts (100%) rename packages/plugins/{with-redux-plugin => redux-plugin}/src/index.ts (100%) rename packages/plugins/{with-redux-plugin => redux-plugin}/src/makeStore.ts (100%) rename packages/plugins/{with-redux-plugin => redux-plugin}/src/reduxScript.jsx (100%) rename packages/plugins/{with-redux-plugin => redux-plugin}/src/withRedux.jsx (100%) diff --git a/example/playground/_document.tsx b/example/playground/_document.tsx index 3f6eb133..6a01b6ef 100644 --- a/example/playground/_document.tsx +++ b/example/playground/_document.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Document, Header, Main, Scripts } from '@airy/maleo/lib/render/_document'; -import { ReduxScript } from '@airy/with-redux-plugin'; +import { Document, Header, Main, Scripts } from '@airy/maleo/document'; +import { ReduxScript } from '@airy/maleo-redux-plugin'; export class MyDocument extends Document { static getInitialProps = async (ctx) => { diff --git a/example/playground/_wrap.tsx b/example/playground/_wrap.tsx index 73237321..5bdabf79 100644 --- a/example/playground/_wrap.tsx +++ b/example/playground/_wrap.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { _Wrap } from '@airy/maleo/lib/render/_wrap'; -import pageWithStyles from '@airy/css-plugin/lib/pageWithStyles'; -import { withRedux } from '@airy/with-redux-plugin'; +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'; diff --git a/example/playground/client.ts b/example/playground/client.ts index 04f4c93b..a5afc10f 100644 --- a/example/playground/client.ts +++ b/example/playground/client.ts @@ -1,4 +1,4 @@ -import { init } from '@airy/maleo/lib/client/Client'; +import { init } from '@airy/maleo/client'; import { routes } from './routes'; import { Wrap } from './_wrap'; diff --git a/example/playground/maleo.config.js b/example/playground/maleo.config.js index a10c230e..dd7e90bf 100644 --- a/example/playground/maleo.config.js +++ b/example/playground/maleo.config.js @@ -1,5 +1,5 @@ -const tsPlugin = require('@airy//typescript-plugin'); -const cssPlugin = require('@airy//css-plugin'); +const tsPlugin = require('@airy/maleo-typescript-plugin'); +const cssPlugin = require('@airy/maleo-css-plugin'); module.exports = tsPlugin( cssPlugin({ diff --git a/example/playground/package.json b/example/playground/package.json index 7293eb0f..2840f239 100644 --- a/example/playground/package.json +++ b/example/playground/package.json @@ -12,9 +12,9 @@ "author": "", "license": "ISC", "dependencies": { - "@airy/css-plugin": "1.0.0", - "@airy/typescript-plugin": "1.0.0", - "@airy/with-redux-plugin": "^1.0.0", + "@airy/maleo-css-plugin": "1.0.0", + "@airy/maleo-typescript-plugin": "1.0.0", + "@airy/maleo-redux-plugin": "^1.0.0", "@airy/maleo": "1.0.0", "react": "16.5.2", "react-redux": "^5.1.1", diff --git a/example/playground/server.ts b/example/playground/server.ts index 0def294c..8077c9f9 100644 --- a/example/playground/server.ts +++ b/example/playground/server.ts @@ -1,11 +1,11 @@ -import { Server } from '@airy/maleo/lib/server/Server'; +import { Server } from '@airy/maleo/server'; import path from 'path'; import { MyDocument } from './_document'; import { routes } from './routes'; import { Wrap } from './_wrap'; -const PORT = process.env.PORT || 8080; +const PORT = process.env.PORT || 3000; const maleoServer = Server.init({ port: PORT, diff --git a/example/playground/src/Detail/index.tsx b/example/playground/src/Detail/index.tsx index d07f53c9..4ec20b1a 100644 --- a/example/playground/src/Detail/index.tsx +++ b/example/playground/src/Detail/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import withStyles from '@airy//css-plugin/lib/withStyles'; +import withStyles from '@airy/maleo-css-plugin/lib/withStyles'; import { AppContext } from '../../interface/AppContext'; diff --git a/example/playground/store.ts b/example/playground/store.ts index 78cec890..e9732857 100644 --- a/example/playground/store.ts +++ b/example/playground/store.ts @@ -1,6 +1,6 @@ import { Action, combineReducers } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; -import { makeStore } from '@airy/with-redux-plugin'; +import { makeStore } from '@airy/maleo-redux-plugin'; interface State { initVal: string; diff --git a/example/playground/tsconfig.json b/example/playground/tsconfig.json index a6036f07..24344d21 100644 --- a/example/playground/tsconfig.json +++ b/example/playground/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../node_modules/@airy/typescript-plugin/tsconfig.base.json", + "extends": "../../node_modules/@airy/maleo-typescript-plugin/tsconfig.base.json", "compilerOptions": { "baseUrl": ".", "rootDir": ".", diff --git a/packages/Maleo.js/app.js b/packages/Maleo.js/app.js new file mode 100644 index 00000000..269dbf94 --- /dev/null +++ b/packages/Maleo.js/app.js @@ -0,0 +1 @@ +module.exports = require('./lib/render/_app'); diff --git a/packages/Maleo.js/babel.config.js b/packages/Maleo.js/babel.config.js index 92d16376..2cf5d1e7 100644 --- a/packages/Maleo.js/babel.config.js +++ b/packages/Maleo.js/babel.config.js @@ -1,15 +1,12 @@ -const { resolve } = require('path'); - const { paths } = require('./tsconfig.json').compilerOptions; const aliases = {}; Object.keys(paths).forEach((item) => { const key = item.replace('/*', ''); - const path = paths[item][0].replace(/src\/(.+)\/\*/, '$1/'); - const value = resolve('lib', path); + const path = paths[item][0].replace(/src\/(.+)\/\*/, './lib/$1/'); - aliases[key] = value; + aliases[key] = path; }); module.exports = (api) => { diff --git a/packages/Maleo.js/client.js b/packages/Maleo.js/client.js new file mode 100644 index 00000000..a227ba50 --- /dev/null +++ b/packages/Maleo.js/client.js @@ -0,0 +1 @@ +module.exports = require('./lib/client/Client'); diff --git a/packages/Maleo.js/document.js b/packages/Maleo.js/document.js new file mode 100644 index 00000000..29ff33db --- /dev/null +++ b/packages/Maleo.js/document.js @@ -0,0 +1 @@ +module.exports = require('./lib/render/_document'); diff --git a/packages/Maleo.js/package.json b/packages/Maleo.js/package.json index a0352bdf..6e744a31 100644 --- a/packages/Maleo.js/package.json +++ b/packages/Maleo.js/package.json @@ -30,6 +30,7 @@ "case-sensitive-paths-webpack-plugin": "2.1.2", "es6-promise": "4.2.5", "express": "4.16.4", + "figlet": "^1.2.1", "hard-source-webpack-plugin": "0.12.0", "helmet": "3.14.0", "isomorphic-fetch": "2.2.1", @@ -45,10 +46,12 @@ "source-map-support": "0.5.9", "terser-webpack-plugin": "1.1.0", "webpack": "4.19.0", + "webpack-bundle-analyzer": "^3.0.3", "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" }, "peerDependencies": { @@ -64,8 +67,6 @@ "gulp-clean": "^0.4.0", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.1", - "gulp-watch": "^5.0.1", - "webpack-bundle-analyzer": "^3.0.3", - "webpack-stats-plugin": "^0.2.1" + "gulp-watch": "^5.0.1" } } diff --git a/packages/Maleo.js/server.js b/packages/Maleo.js/server.js index 0b139434..022ffc65 100644 --- a/packages/Maleo.js/server.js +++ b/packages/Maleo.js/server.js @@ -1 +1 @@ -module.exports = require('.lib/server/Server.js'); +module.exports = require('./lib/server/Server.js'); diff --git a/packages/Maleo.js/src/bin/maleo.ts b/packages/Maleo.js/src/bin/maleo.ts index 6a28c5d7..565a6a98 100755 --- a/packages/Maleo.js/src/bin/maleo.ts +++ b/packages/Maleo.js/src/bin/maleo.ts @@ -20,28 +20,25 @@ const buildDirectory = path.join(projectPath, '.maleo'); // bin codes starts here // Importing node's own dependencies import path from 'path'; +import figlet from 'figlet'; import { spawn } from 'child_process'; // Importing required bin dependencies import { build } from '../build/index'; -const figletZones = ` -============================================ -============================================ -== |__ / / _ \\ | \\ | | | ____| / ___| == -== / / | | | | | \\| | | _| \\___ \\ == -== / /_ | |_| | | |\\ | | |___ ___) | == -== /____| \\___/ |_| \\_| |_____| |____/ == -============================================ -============================================ -`; +console.log( + figlet.textSync('Maleo.JS', { + horizontalLayout: 'default', + verticalLayout: 'default', + }), +); -console.log(figletZones); console.log('==> Current Working Directory: ', projectPath); +console.log('==> Environment (isDevelopment): ', env, '(' + isDev + ')'); console.log('==> Running Command: ', type); console.log('==> Command Args: ', args); -if (type === 'build') { +if (type === 'build' || !type) { console.log('==> Running build'); build({ env, diff --git a/packages/Maleo.js/wrap.js b/packages/Maleo.js/wrap.js new file mode 100644 index 00000000..0483f7a8 --- /dev/null +++ b/packages/Maleo.js/wrap.js @@ -0,0 +1 @@ +module.exports = require('./lib/render/_wrap'); diff --git a/packages/plugins/css-plugin/gulpfile.js b/packages/plugins/css-plugin/gulpfile.js index 24aba109..98a3bc14 100644 --- a/packages/plugins/css-plugin/gulpfile.js +++ b/packages/plugins/css-plugin/gulpfile.js @@ -1,4 +1,4 @@ -const gulpTaskRunner = require('@airy/gulp-plugin'); +const gulpTaskRunner = require('@airy/maleo-gulp-plugin'); const distDir = '.'; const paths = { diff --git a/packages/plugins/css-plugin/package.json b/packages/plugins/css-plugin/package.json index 2d25443d..be128fba 100644 --- a/packages/plugins/css-plugin/package.json +++ b/packages/plugins/css-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "@airy/css-plugin", + "name": "@airy/maleo-css-plugin", "version": "1.0.0", "main": "lib/index.js", "license": "MIT", @@ -16,7 +16,7 @@ "isomorphic-style-loader": "^4.0.0" }, "devDependencies": { - "@airy/gulp-plugin": "1.0.0", + "@airy/maleo-gulp-plugin": "1.0.0", "gulp": "gulpjs/gulp.git#4.0" } } diff --git a/packages/plugins/gulp-plugin/package.json b/packages/plugins/gulp-plugin/package.json index 3489f08a..dd016f5f 100644 --- a/packages/plugins/gulp-plugin/package.json +++ b/packages/plugins/gulp-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "@airy/gulp-plugin", + "name": "@airy/maleo-gulp-plugin", "version": "1.0.0", "main": "index.js", "license": "MIT", diff --git a/packages/plugins/with-redux-plugin/gulpfile.js b/packages/plugins/redux-plugin/gulpfile.js similarity index 60% rename from packages/plugins/with-redux-plugin/gulpfile.js rename to packages/plugins/redux-plugin/gulpfile.js index b365fef6..def0c50d 100644 --- a/packages/plugins/with-redux-plugin/gulpfile.js +++ b/packages/plugins/redux-plugin/gulpfile.js @@ -1,4 +1,4 @@ -const gulpTaskRunner = require('@airy/gulp-plugin'); +const gulpTaskRunner = require('@airy/maleo-gulp-plugin'); const distDir = '.'; const paths = { diff --git a/packages/plugins/with-redux-plugin/package.json b/packages/plugins/redux-plugin/package.json similarity index 83% rename from packages/plugins/with-redux-plugin/package.json rename to packages/plugins/redux-plugin/package.json index db1596f2..273a76de 100644 --- a/packages/plugins/with-redux-plugin/package.json +++ b/packages/plugins/redux-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "@airy/with-redux-plugin", + "name": "@airy/maleo-redux-plugin", "version": "1.0.0", "main": "lib/index.js", "license": "MIT", @@ -16,6 +16,6 @@ "redux": "^4.0.1" }, "devDependencies": { - "@airy/gulp-plugin": "^1.0.0" + "@airy/maleo-gulp-plugin": "^1.0.0" } } diff --git a/packages/plugins/with-redux-plugin/src/const.ts b/packages/plugins/redux-plugin/src/const.ts similarity index 100% rename from packages/plugins/with-redux-plugin/src/const.ts rename to packages/plugins/redux-plugin/src/const.ts diff --git a/packages/plugins/with-redux-plugin/src/index.ts b/packages/plugins/redux-plugin/src/index.ts similarity index 100% rename from packages/plugins/with-redux-plugin/src/index.ts rename to packages/plugins/redux-plugin/src/index.ts diff --git a/packages/plugins/with-redux-plugin/src/makeStore.ts b/packages/plugins/redux-plugin/src/makeStore.ts similarity index 100% rename from packages/plugins/with-redux-plugin/src/makeStore.ts rename to packages/plugins/redux-plugin/src/makeStore.ts diff --git a/packages/plugins/with-redux-plugin/src/reduxScript.jsx b/packages/plugins/redux-plugin/src/reduxScript.jsx similarity index 100% rename from packages/plugins/with-redux-plugin/src/reduxScript.jsx rename to packages/plugins/redux-plugin/src/reduxScript.jsx diff --git a/packages/plugins/with-redux-plugin/src/withRedux.jsx b/packages/plugins/redux-plugin/src/withRedux.jsx similarity index 100% rename from packages/plugins/with-redux-plugin/src/withRedux.jsx rename to packages/plugins/redux-plugin/src/withRedux.jsx diff --git a/packages/plugins/typescript-plugin/gulpfile.js b/packages/plugins/typescript-plugin/gulpfile.js index 24aba109..98a3bc14 100644 --- a/packages/plugins/typescript-plugin/gulpfile.js +++ b/packages/plugins/typescript-plugin/gulpfile.js @@ -1,4 +1,4 @@ -const gulpTaskRunner = require('@airy/gulp-plugin'); +const gulpTaskRunner = require('@airy/maleo-gulp-plugin'); const distDir = '.'; const paths = { diff --git a/packages/plugins/typescript-plugin/package.json b/packages/plugins/typescript-plugin/package.json index 63f24d28..b5e97b27 100644 --- a/packages/plugins/typescript-plugin/package.json +++ b/packages/plugins/typescript-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "@airy/typescript-plugin", + "name": "@airy/maleo-typescript-plugin", "version": "1.0.0", "main": "lib/index.js", "license": "MIT", @@ -17,7 +17,7 @@ "typescript": "^3.1.5" }, "devDependencies": { - "@airy/gulp-plugin": "1.0.0", + "@airy/maleo-gulp-plugin": "1.0.0", "gulp": "gulpjs/gulp.git#4.0" } } diff --git a/yarn.lock b/yarn.lock index 0c23072d..24f152cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4658,6 +4658,11 @@ figgy-pudding@^3.1.0, figgy-pudding@^3.4.1, figgy-pudding@^3.5.1: resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w== +figlet@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/figlet/-/figlet-1.2.1.tgz#48d35df9d9b10b1b3888302e6e57904a0b00509c" + integrity sha512-qc8gycfnnfOmfvPl7Fi3JeTbcvdmbZkckyUVGGAM02je7Ookvu+bBfKy1I4FKqTsQHCs3ARJ76ip/k98r+OQuQ== + figures@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962" From c48b77db4ae5fd21f8061024d45ff82125edebba Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Fri, 25 Jan 2019 12:38:33 +0700 Subject: [PATCH 04/67] test(test): make babel-jest working (#20) Adding babelrc and @babel/plugin-transform-modules-commonjs to make babel-jest works --- package.json | 4 +++- .../__test__/server}/loadInitialProps.test.js | 8 +++---- setup-test/babelrc.json | 4 ++++ jest.config.js => setup-test/jest.config.js | 21 +++++++------------ setup-test/transformer.js | 1 + 5 files changed, 18 insertions(+), 20 deletions(-) rename {test/unit => packages/Maleo.js/__test__/server}/loadInitialProps.test.js (90%) create mode 100644 setup-test/babelrc.json rename jest.config.js => setup-test/jest.config.js (94%) create mode 100644 setup-test/transformer.js diff --git a/package.json b/package.json index ecc06ac6..9bdc9bf2 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,8 @@ "ts:lint": "tslint -c tslint.json 'packages/**/**.ts'", "lint": "yarn ts:lint", "pretty:fix": "prettier --config-precedence file-override --config .prettierrc --write 'packages/**/**+(.jsx|.tsx|.js|.ts)'", - "test": "yarn build && jest" + "test": "jest --config ./setup-test/jest.config.js", + "build:test": "yarn build && yarn test" }, "husky": { "hooks": { @@ -59,6 +60,7 @@ "babel-core": "7.0.0-bridge.0" }, "devDependencies": { + "@babel/plugin-transform-modules-commonjs": "^7.2.0", "@commitlint/cli": "^7.3.2", "@commitlint/config-conventional": "^7.3.1", "@types/express": "^4.16.0", diff --git a/test/unit/loadInitialProps.test.js b/packages/Maleo.js/__test__/server/loadInitialProps.test.js similarity index 90% rename from test/unit/loadInitialProps.test.js rename to packages/Maleo.js/__test__/server/loadInitialProps.test.js index 5a6baaee..cf2858c0 100644 --- a/test/unit/loadInitialProps.test.js +++ b/packages/Maleo.js/__test__/server/loadInitialProps.test.js @@ -1,7 +1,7 @@ -const React = require('react'); +import React from 'react'; -const { matchingRoutes } = require('@airy/maleo/lib/server/routeHandler'); -const { loadInitialProps } = require('@airy/maleo/lib/server/loadInitialProps'); +import { matchingRoutes } from '@airy/maleo/lib/server/routeHandler'; +import { loadInitialProps } from '@airy/maleo/lib/server/loadInitialProps'; describe('[Load Initial Props] Simple', () => { let routes = []; @@ -82,7 +82,5 @@ describe('[Load Initial Props] Nested', () => { const pathname = '/nested'; const mr = matchingRoutes(routes, pathname); const { branch, data } = await loadInitialProps(mr, {}); - - console.log(branch); }); }); diff --git a/setup-test/babelrc.json b/setup-test/babelrc.json new file mode 100644 index 00000000..dcdf8c46 --- /dev/null +++ b/setup-test/babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": ["@airy/maleo/babel"], + "plugins": ["@babel/plugin-transform-modules-commonjs"] +} diff --git a/jest.config.js b/setup-test/jest.config.js similarity index 94% rename from jest.config.js rename to setup-test/jest.config.js index 7f6c5732..78acf6cc 100644 --- a/jest.config.js +++ b/setup-test/jest.config.js @@ -50,18 +50,13 @@ module.exports = { // globalTeardown: null, // A set of global variables that need to be available in all test environments - // globals: {}, + // globals: null, // An array of directory names to be searched recursively up from the requiring module's location moduleDirectories: ['node_modules'], // An array of file extensions your modules use - // moduleFileExtensions: [ - // "js", - // "json", - // "jsx", - // "node" - // ], + moduleFileExtensions: ['js', 'json', 'jsx', 'node'], // A map from regular expressions to module names that allow to stub out resources with a single module // moduleNameMapper: {}, @@ -97,12 +92,10 @@ module.exports = { // restoreMocks: false, // The root directory that Jest should scan for tests and modules within - rootDir: 'test', + rootDir: process.cwd(), // A list of paths to directories that Jest should use to search for files in - // roots: [ - // "" - // ], + roots: ['/packages', '/packages/plugins'], // Allows you to use a custom runner instead of Jest's default test runner // runner: "jest-runner", @@ -126,10 +119,10 @@ module.exports = { // testLocationInResults: false, // The glob patterns Jest uses to detect test files - testMatch: ['**/*.test.js', '**/*.spec.js'], + testMatch: ['**/__test__/**/*.test.js', '**/__test__/**/*.spec.js'], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: ['/node_modules/'], + // testPathIgnorePatterns: ['/node_modules/'], // The regexp pattern Jest uses to detect test files // testRegex: "", @@ -148,7 +141,7 @@ module.exports = { // A map from regular expressions to paths to transformers transform: { - '^.+\\.jsx?$': 'babel-jest', + '^.+\\.jsx?$': '/setup-test/transformer.js', }, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation diff --git a/setup-test/transformer.js b/setup-test/transformer.js new file mode 100644 index 00000000..b4631108 --- /dev/null +++ b/setup-test/transformer.js @@ -0,0 +1 @@ +module.exports = require('babel-jest').createTransformer(require('./babelrc.json')); From 8850805785bbd9218b4b92bbc279bc035cf32aec Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Mon, 28 Jan 2019 15:28:45 +0700 Subject: [PATCH 05/67] chore(package json example): remove example from workspace (#21) need to remove example from workspace since we dont want hoisted dependency to be used by example, it doesnt really mimic how the library works fix(maleo/build/webpack): resolve add node modules on project root directory to resolve fix(webpackts): change nodeexternals to own function remove node externals switch it to our own function fix(package json): add dev dependencies react and react router fix(webpack): add nodeexternals add airy maleo --- .gitignore | 4 ++ example/playground/package.json | 8 +-- package.json | 3 +- packages/Maleo.js/package.json | 4 +- packages/Maleo.js/src/bin/maleo.ts | 4 +- .../Maleo.js/src/build/webpack/webpack.ts | 19 +++++-- packages/Maleo.js/src/constants/index.ts | 2 + .../plugins/typescript-plugin/src/index.js | 32 ++++++++--- yarn.lock | 55 ++++++------------- 9 files changed, 68 insertions(+), 63 deletions(-) diff --git a/.gitignore b/.gitignore index f261f80c..05ada888 100644 --- a/.gitignore +++ b/.gitignore @@ -68,3 +68,7 @@ package-lock.json @types .vscode + +# ignore yarn lock on example +example/*/yarn.lock +example/*/package-lock.json \ No newline at end of file diff --git a/example/playground/package.json b/example/playground/package.json index 2840f239..fba17892 100644 --- a/example/playground/package.json +++ b/example/playground/package.json @@ -12,10 +12,10 @@ "author": "", "license": "ISC", "dependencies": { - "@airy/maleo-css-plugin": "1.0.0", - "@airy/maleo-typescript-plugin": "1.0.0", - "@airy/maleo-redux-plugin": "^1.0.0", - "@airy/maleo": "1.0.0", + "@airy/maleo-css-plugin": "latest", + "@airy/maleo-typescript-plugin": "latest", + "@airy/maleo-redux-plugin": "latest", + "@airy/maleo": "latest", "react": "16.5.2", "react-redux": "^5.1.1", "react-router-dom": "^4.4.0-beta.1", diff --git a/package.json b/package.json index 9bdc9bf2..ba15c049 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,7 @@ "webpack" ], "workspaces": [ - "packages/**", - "example/**" + "packages/**" ], "typeScriptVersion": "3.1.1", "engines": { diff --git a/packages/Maleo.js/package.json b/packages/Maleo.js/package.json index 6e744a31..d129f6e6 100644 --- a/packages/Maleo.js/package.json +++ b/packages/Maleo.js/package.json @@ -67,6 +67,8 @@ "gulp-clean": "^0.4.0", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.1", - "gulp-watch": "^5.0.1" + "gulp-watch": "^5.0.1", + "react": "^16.5.2", + "react-router-dom": "^4.4.0-beta.1" } } diff --git a/packages/Maleo.js/src/bin/maleo.ts b/packages/Maleo.js/src/bin/maleo.ts index 565a6a98..6fb9a3f9 100755 --- a/packages/Maleo.js/src/bin/maleo.ts +++ b/packages/Maleo.js/src/bin/maleo.ts @@ -38,13 +38,13 @@ console.log('==> Environment (isDevelopment): ', env, '(' + isDev + ')'); console.log('==> Running Command: ', type); console.log('==> Command Args: ', args); -if (type === 'build' || !type) { +if (type === 'build') { console.log('==> Running build'); build({ env, buildType, }); -} else if (type === 'run') { +} else if (type === 'run' || !type) { console.log('[MALEO] Running Application'); const serverPath = path.join(buildDirectory, 'server.js'); diff --git a/packages/Maleo.js/src/build/webpack/webpack.ts b/packages/Maleo.js/src/build/webpack/webpack.ts index 592ab9f7..5e0da5c6 100644 --- a/packages/Maleo.js/src/build/webpack/webpack.ts +++ b/packages/Maleo.js/src/build/webpack/webpack.ts @@ -34,7 +34,8 @@ import { RUNTIME_CHUNK_FILE, SERVER_ASSETS_ROUTE, MALEO_PROJECT_ROOT_NODE_MODULES, -} from '@src/constants'; + PROJECT_ROOT_NODE_MODULES, +} from '@src/constants/index'; import { Context, CustomConfig, @@ -108,8 +109,10 @@ export const createWebpackConfig = (context: Context, customConfig: CustomConfig resolve: { extensions: ['.js', '.jsx', '.json'], alias, + symlinks: true, modules: [ MALEO_PROJECT_ROOT_NODE_MODULES, + PROJECT_ROOT_NODE_MODULES, 'node_modules', ...nodePathList, // Support for NODE_PATH environment variable ], @@ -135,13 +138,17 @@ export const createWebpackConfig = (context: Context, customConfig: CustomConfig baseConfigs = { ...baseConfigs, - // Extract all server node_modules from bundles except React + // Extract all server node_modules from bundles externals: [ nodeExternals({ - whitelist: [/react/], + whitelist: [ + /react/, + /@airy[/\\]maleo/, + /@babel[/\\]runtime[/\\]/, + /@babel[/\\]runtime-corejs2[/\\]/, + ], }), ], - node: { // Keep __dirname relative to file not root project __dirname: true, @@ -182,8 +189,8 @@ export const getDefaultEntry = (context: BuildContext): Configuration['entry'] = return { main: [ - 'webpack-hot-middleware/client?name=client', - 'react-hot-loader/patch', + require.resolve('webpack-hot-middleware/client'), + require.resolve('react-hot-loader/patch'), path.join(projectDir, CLIENT_ENTRY_NAME), ], }; diff --git a/packages/Maleo.js/src/constants/index.ts b/packages/Maleo.js/src/constants/index.ts index d0cf1c0f..fac4922b 100644 --- a/packages/Maleo.js/src/constants/index.ts +++ b/packages/Maleo.js/src/constants/index.ts @@ -25,4 +25,6 @@ export const MALEO_PROJECT_ROOT_NODE_MODULES: string = path.join( 'node_modules', ); +export const PROJECT_ROOT_NODE_MODULES: string = path.join(process.cwd(), 'node_modules'); + export const AUTODLL_PATH: string = './static/dll'; diff --git a/packages/plugins/typescript-plugin/src/index.js b/packages/plugins/typescript-plugin/src/index.js index 3ef1fda9..4d30ad7d 100644 --- a/packages/plugins/typescript-plugin/src/index.js +++ b/packages/plugins/typescript-plugin/src/index.js @@ -2,17 +2,31 @@ const path = require('path'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const TsConfigPathPlugin = require('tsconfig-paths-webpack-plugin'); +const whitelistEntries = /(webpack-hot-middleware|react-hot-loader)/; + const replaceJStoTS = (entries = {}) => - Object.keys(entries).reduce( - (p, c) => ({ + Object.keys(entries).reduce((p, c) => { + let entry = entries[c]; + + if (typeof entry === 'string') { + if (whitelistEntries.test(entry)) { + return { + ...p, + [c]: entry, + }; + } + + return { + ...p, + [c]: entry.replace(/\.js$/, '.ts'), + }; + } + + return { ...p, - [c]: - typeof entries[c] === 'string' - ? entries[c].replace(/\.js$/, '.ts') - : entries[c].map((e) => e.replace(/\.js$/, '.ts')), - }), - {}, - ); + [c]: Object.values(replaceJStoTS(entry)), + }; + }, {}); module.exports = (customConfig = {}) => { return Object.assign({}, customConfig, { diff --git a/yarn.lock b/yarn.lock index 24f152cc..0a369570 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7287,7 +7287,7 @@ longest@^1.0.1: resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc= -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -9103,12 +9103,12 @@ react-hot-loader@4.3.12: react-lifecycles-compat "^3.0.4" shallowequal "^1.0.2" -react-is@^16.3.2, react-is@^16.5.2, react-is@^16.6.0: +react-is@^16.3.2, react-is@^16.5.2: version "16.7.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g== -react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -9120,19 +9120,6 @@ react-loadable@5.5.0: dependencies: prop-types "^15.5.0" -react-redux@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f" - integrity sha512-LE7Ned+cv5qe7tMV5BPYkGQ5Lpg8gzgItK07c67yHvJ8t0iaD9kPFPAli/mYkiyJYrs2pJgExR2ZgsGqlrOApg== - dependencies: - "@babel/runtime" "^7.1.2" - hoist-non-react-statics "^3.1.0" - invariant "^2.2.4" - loose-envify "^1.1.0" - prop-types "^15.6.1" - react-is "^16.6.0" - react-lifecycles-compat "^3.0.0" - react-router-config@4.4.0-beta.6: version "4.4.0-beta.6" resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-4.4.0-beta.6.tgz#bb2a29acb22b6458ed044cc48c5d69db71ab0cfd" @@ -9191,15 +9178,15 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@16.5.2: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42" - integrity sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw== +react@^16.5.2: + version "16.7.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381" + integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - schedule "^0.5.0" + scheduler "^0.12.0" read-cmd-shim@^1.0.1: version "1.0.1" @@ -9343,19 +9330,6 @@ redent@^2.0.0: indent-string "^3.0.0" strip-indent "^2.0.0" -redux-devtools-extension@^2.13.7: - version "2.13.7" - resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.7.tgz#14bd7a1a7c8bee7f397beb1116fd16fc9633b752" - integrity sha512-F2GlWMWxCTJGRjJ+GSZcGDcVAj6Pbf77FKb4C9S8eni5Eah6UBGNwxNj8K1MTtmItdZH1Wx+EvIifHN2KKcQrw== - -redux@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5" - integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg== - dependencies: - loose-envify "^1.4.0" - symbol-observable "^1.2.0" - referrer-policy@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/referrer-policy/-/referrer-policy-1.1.0.tgz#35774eb735bf50fb6c078e83334b472350207d79" @@ -9786,6 +9760,14 @@ schedule@^0.5.0: dependencies: object-assign "^4.1.1" +scheduler@^0.12.0: + version "0.12.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b" + integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.4.4, schema-utils@^0.4.5: version "0.4.7" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187" @@ -10393,11 +10375,6 @@ sver-compat@^1.5.0: es6-iterator "^2.0.1" es6-symbol "^3.1.1" -symbol-observable@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" - integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== - symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" From c8b20a3ce6d7a765acbafd44c57e2bbd1e01205c Mon Sep 17 00:00:00 2001 From: Sena Candra Mulyana PC Date: Mon, 28 Jan 2019 15:46:56 +0700 Subject: [PATCH 06/67] docs(readme): fixed typo on getinitalprops to getinitialprops (#22) --- packages/Maleo.js/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Maleo.js/README.md b/packages/Maleo.js/README.md index bc879a56..fafcd0ae 100644 --- a/packages/Maleo.js/README.md +++ b/packages/Maleo.js/README.md @@ -117,7 +117,7 @@ To see how simple this is, check out the sample app! ## Component Lifecycle -Maleo.JS added a new component lifecycle hook called `getInitalProps`, 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. From 8a4435cbeaf5a68406e864372f8e6991b21f0de6 Mon Sep 17 00:00:00 2001 From: Alvin Kristanto Date: Mon, 28 Jan 2019 16:11:03 +0700 Subject: [PATCH 07/67] refactor(md): clean up md and template (#23) --- .github/pull_request_template.md | 8 +++-- CONTRIBUTING.md | 24 ++++++------- packages/Maleo.js/README.md | 56 ++++++++++++++++++------------ packages/Maleo.js/dynamic.js | 1 + packages/Maleo.js/src/bin/maleo.ts | 2 +- 5 files changed, 52 insertions(+), 39 deletions(-) create mode 100644 packages/Maleo.js/dynamic.js diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b1b48bed..a816f7ed 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,4 +1,4 @@ - + @@ -8,8 +8,8 @@ -- [ ] 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 ( ) #### Checklist: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4dadab6a..f7da5540 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ 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. @@ -10,7 +10,7 @@ Feel free to contribute to this project. We are grateful for your contributions 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//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: -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
- How to test Maleo.JS on local development machine in the example directory? + How to test Maleo.js on local development machine in the example directory? Maleo.js is utilizing Lerna and Yarn Workspace to manage the mono repo structure. - So you can use the Maleo.JS inside package folder or example folder. Because Yarn Workspace and Lerna has hoisted all the dependencies into root directory. Therefore every app inside example able to add symlinked Maleo.JS as dependency. + So you can use the Maleo.js inside package folder or example folder. Because Yarn Workspace and Lerna has hoisted all the dependencies into root directory. Therefore every app inside example able to add symlinked Maleo.js as dependency.

- How to test Maleo.JS on your own app during development? + How to test Maleo.js on your own app during development? You can run this command inside packages/Maleo.js directory 
   $ yarn link # if you are using yarn on your app
   $ npm link # if you are using npm on your app
And then go to your app directory and add @airy/maleo.js to your own app's package.json and run this command: 
$ yarn link @airy/maleo.js
- And you are good to go! Maleo.JS are now living in your node_modules directory as a symlinked module + And you are good to go! Maleo.js are now living in your node_modules directory as a symlinked module more:
    diff --git a/packages/Maleo.js/README.md b/packages/Maleo.js/README.md index fafcd0ae..c8ff5895 100644 --- a/packages/Maleo.js/README.md +++ b/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 ``, ``, ``, etc. +Maleo.js also enable customization on `Document` as document's markup. So you don't need to include tags like ``, ``, ``, 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 {
    Maleo JS - +