Adding IgnorePlugin for momentjs. (#2)

* Adding IgnorePlugin for momentjs.

* Added ability to override parsing of initial state

* Upgraded typescript to 3.9.x.

* Small fix.

README.md

@@ -103,10 +103,10 @@ The library uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) to
 Default Configuration (see `packages/react-app/src/cli/options.ts`):
 ```json
 {
-  appEntry: ".",
-  bootstrapModule: "@mocoding/react-app-basic",
-  outputClientPath: "./wwwroot",
-  outputServerPath: "./wwwroot_node",
+  "appEntry": ".",
+  "bootstrapModule": "@mocoding/react-app-basic",
+  "outputClientPath": "./wwwroot",
+  "outputServerPath": "./wwwroot_node",
 }
 ```
 

package.json

@@ -2,9 +2,9 @@
   "name": "mocoding-react-app-monorepo",
   "private": true,
   "devDependencies": {
-    "lerna": "^3.20.2",
+    "lerna": "^3.21.0",
     "redux-thunk": "^2.3.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.2"
   },
   "workspaces": [
     "packages/*"
@@ -15,7 +15,10 @@
   "scripts": {
     "cli": "moapp",
     "version": "lerna version --no-git-tag-version --yes",
-    "build": "yarn workspace @mocoding/react-app build"
+    "build": "yarn workspace @mocoding/react-app build",
+    "basic": "yarn cli serve --config examples/basic/.moapp.json",
+    "redux": "yarn cli serve --config examples/router-redux/.moapp.json",
+    "redux-async": "yarn cli serve --config examples/router-redux-async/.moapp.json"    
   },
   "eslintConfig": {
     "extends": "@mocoding/eslint-config"

packages/eslint-config/package.json

@@ -16,14 +16,14 @@
     "prettier.js"
   ],
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-only-warn": "^1.0.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint": "^7.0.0",
     "prettier": "^2.0.5",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.2"
   }
 }

packages/react-app-common/components/body.tsx

@@ -12,7 +12,7 @@ export class Body extends React.Component<BodyProps> {
   public render(): React.ReactNode {
     const { scripts, markup, bodyAttrs } = this.props;
 
-    const type = process.env.SCRIPTS_TYPE || "module";
+    const type = process.env.MOAPP_SCRIPTS_TYPE || "text/javascript";
 
     const renderScripts = scripts.map((scriptSrc, i) => (
       <script type={type} src={scriptSrc} key={i} charSet="utf-8" />

packages/react-app-common/package.json

@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "^16.13.0",
-    "@types/react-dom": "^16.9.6",
-    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.8",
+    "@types/react": "^16.9.35",
     "@types/node": "^12.12.6",
     "react-dom": "^16.13.1",
-    "react-helmet-async": "^1.0.5",
-    "react-hot-loader": "^4.12.20",
+    "react-helmet-async": "^1.0.6",
+    "react-hot-loader": "^4.12.21",
     "react": "^16.13.1"
   }
 }

packages/react-app-router-redux/createContext.ts

@@ -4,7 +4,7 @@ import { createBrowserHistory, History } from "history";
 import * as Redux from "redux";
 import { Context } from "@mocoding/react-app-common";
 
-import { middlewares, reducers } from "injected-app-entry/store";
+import { middlewares, reducers, onParseInitialState } from "injected-app-entry/store";
 import devMiddlewares from "@mocoding/react-app-router-redux/middlewares";
 
 export interface ReduxRouterState {
@@ -57,12 +57,16 @@ function configureStore<TState extends ReduxRouterState>(
   return store;
 }
 
+function parseState<T>(serialized: string): T {
+  return onParseInitialState ? onParseInitialState(serialized) : JSON.parse(serialized);
+}
+
 export function createContext(abstractHistory?: History): Context {
-  const initialState =
+  const initialState: ReduxRouterState | undefined =
     typeof window === "undefined" ||
     typeof (window as any).__PRELOADED_STATE__ === "undefined"
       ? undefined
-      : JSON.parse((window as any)?.__PRELOADED_STATE__);
+      : parseState<ReduxRouterState>((window as any)?.__PRELOADED_STATE__);
   const history = abstractHistory ?? createBrowserHistory();
   return {
     history,

packages/react-app-router-redux/package.json

@@ -16,14 +16,13 @@
   },
   "dependencies": {
     "@mocoding/react-app-common": "^1.0.0",
-    "@types/react-redux": "^7.1.7",
+    "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.1.5",
-    "@types/redux-logger": "^3.0.7",
-    "@types/redux": "^3.6.0",
+    "@types/redux-logger": "^3.0.7",    
     "@types/webpack-env": "^1.15.2",
     "connected-react-router": "^6.8.0",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "redux-logger": "^3.0.6",
     "redux": "^4.0.5"
   }

packages/react-app-router-redux/typings.d.ts

@@ -8,4 +8,5 @@ declare module "injected-app-entry/store" {
   import { Middleware, Reducer } from "redux";
   export const middlewares: Middleware[];
   export const reducers: Reducer[];
+  export const onParseInitialState: (state: string) => unknown;
 }

packages/react-app/package.json

@@ -28,22 +28,22 @@
     "chalk": "^4.0.0",
     "commander": "^5.1.0",
     "cosmiconfig": "^6.0.0",
-    "css-loader": "^3.5.2",
+    "css-loader": "^3.5.3",
     "express": "^4.17.1",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
     "ignore-loader": "^0.1.2",
     "import-glob": "^1.5.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^2.0.5",
     "sass-loader": "^8.0.2",
-    "terser-webpack-plugin": "^2.3.5",
+    "terser-webpack-plugin": "^3.0.1",
     "ts-import-plugin": "^1.6.6",
-    "ts-loader": "^7.0.1",
+    "ts-loader": "^7.0.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^3.8.3",
+    "typescript": "^3.9.2",
     "url-loader": "^4.1.0",
     "webpack-bundle-analyzer": "^3.7.0",
     "webpack-dev-middleware": "^3.7.2",
@@ -57,6 +57,6 @@
     "@types/optimize-css-assets-webpack-plugin": "^5.0.1",
     "@types/terser-webpack-plugin": "^2.2.0",
     "@types/webpack-bundle-analyzer": "^2.13.3",
-    "@types/webpack": "^4.41.12"
+    "@types/webpack": "^4.41.13"
   }
 }

packages/react-app/src/config/create-server-config.ts

@@ -41,6 +41,7 @@ export function createServerConfig(
         tsconfig: tsConfigLocation,
         measureCompilationTime: false,
       }),
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     ],
     resolve: {
       alias: {},

packages/react-app/src/config/create-web-config.ts

@@ -15,6 +15,7 @@ export function createWebConfig(
     new MiniCssExtractPlugin({
       filename: isProduction ? "[name].[contenthash:6].css" : "[name].css",
     }),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ];
 
   const rules: webpack.RuleSetRule[] = [

packages/react-app/src/dev-server.ts

@@ -19,7 +19,7 @@ function serverRenderer(stats: ServerRenderStats) {
     const assets = jsonStats.assetsByChunkName;
     const assetsUrls: string[] = [].concat(...Object.values(assets));
     const defaultApiUrl = `${req.protocol}://${req.hostname}`;
-    const apiUrl = process.env.API_URL;
+    const apiUrl = process.env.MOAPP_API_URL;
     const baseUrl = typeof apiUrl !== "undefined" ? apiUrl : defaultApiUrl;
     const callback: RenderCallback = (error, result) => {
       if (error) {