feat: render every page with a real html (#229)

* feat: remove hash router * refactor: pull out plugins * fix: path error with fetching id * chore: update deps * fix: related path of fetching document
orzyyyy · Sep 23, 2019 · af2b902 · af2b902
1 parent c0336da
commit af2b902
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 119 deletions.
diff --git a/nino.koei.js b/nino.koei.js
@@ -1,30 +1,109 @@
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const PostCompile = require('post-compile-webpack-plugin');
 const IO = require('socket.io-client');
 const fs = require('fs-extra');
 
-const assetsFiles = fs.readdirSync(path.join(__dirname, 'src/assets'));
-const mappingFile = path.join(__dirname, 'src/assets/mapping.json');
-const targetFiles = fs
-  .readJsonSync(mappingFile)
-  .filter(item => item.visible !== false && !assetsFiles.includes(item.id))
-  .map(({ id, category }) => {
+const initMappingFiles = () => {
+  const assetsFiles = fs.readdirSync(path.join(__dirname, 'src/assets'));
+  const mappingFile = path.join(__dirname, 'src/assets/mapping.json');
+  const targetFiles = fs
+    .readJsonSync(mappingFile)
+    .filter(item => item.visible !== false && !assetsFiles.includes(item.id));
+  return targetFiles;
+};
+
+const getCopyPluginProps = mappings =>
+  mappings.map(({ id, category }) => {
     const src = `src/assets/${category}/${id}.${
       category === 'mapping' ? 'json' : 'md'
     }`;
     const dist = `dist/assets/${category}/${id}.${
       category === 'mapping' ? 'json' : 'md'
     }`;
-
     return {
       from: path.join(__dirname, src),
       to: path.join(__dirname, dist),
     };
   });
 
+const commonHtmlWebpackProps = {
+  template: './src/index.html',
+  environment: process.env.BUILD_ENV !== 'prod',
+  socket:
+    process.env.BUILD_ENV !== 'prod'
+      ? `
+        <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
+        <script>
+          io('http://localhost:9099').on('refresh', function() {
+            location.reload();
+          });
+        </script>`
+      : '',
+  inject: 'body',
+  minify: {
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+    collapseWhitespace: true,
+  },
+};
+
+const getHtmlPluginProps = mappings => {
+  const mainPageProps = [
+    new HtmlWebpackPlugin({
+      ...commonHtmlWebpackProps,
+      filename: 'index.html',
+      chunks: ['main-page'],
+    }),
+  ];
+  const detailPageProps = [];
+  const editorPageProps = [];
+
+  mappings.map(({ id, category }) => {
+    switch (category) {
+      case 'mapping':
+        detailPageProps.push(
+          new HtmlWebpackPlugin({
+            ...commonHtmlWebpackProps,
+            filename: `${category}/${id}/index.html`,
+            chunks: ['mapping-detail'],
+          }),
+        );
+        break;
+
+      case 'markdown':
+        detailPageProps.push(
+          new HtmlWebpackPlugin({
+            ...commonHtmlWebpackProps,
+            filename: `${category}/${id}/index.html`,
+            chunks: ['markdown-detail'],
+          }),
+        );
+        editorPageProps.push(
+          new HtmlWebpackPlugin({
+            ...commonHtmlWebpackProps,
+            filename: `markdown-editor/${id}/index.html`,
+            chunks: ['markdown-editor'],
+          }),
+        );
+        break;
+
+      default:
+        break;
+    }
+  });
+
+  return [...mainPageProps, ...detailPageProps, ...editorPageProps];
+};
+
+const readableMappingFiles = initMappingFiles();
+const copyPluginProps = getCopyPluginProps(readableMappingFiles);
+const htmlPluginProps = getHtmlPluginProps(readableMappingFiles);
+
 const exhentaiFiles = [];
 if (process.env.BUILD_ENV !== 'prod') {
   exhentaiFiles.push({
@@ -34,17 +113,18 @@ if (process.env.BUILD_ENV !== 'prod') {
 }
 
 const plugins = [
+  ...htmlPluginProps,
   new CopyWebpackPlugin([
     {
       from: path.join(__dirname, 'src/assets'),
       to: path.join(__dirname, 'dist/assets'),
       ignore: ['mapping/*', 'markdown/*', 'exhentai/*'],
     },
-    ...targetFiles,
+    ...copyPluginProps,
     ...exhentaiFiles,
   ]),
   new MomentLocalesPlugin({
-    localesToKeep: ['es-us', 'zh-cn'],
+    localesToKeep: ['zh-cn'],
   }),
 ];
 
@@ -63,19 +143,23 @@ if (process.env.BUILD_ENV !== 'prod') {
 
 module.exports = {
   entry: {
-    ninoninoni: path.join(__dirname, 'src'),
+    'main-page': path.join(
+      __dirname,
+      'src/controller/MainPageDataController.tsx',
+    ),
+    'markdown-detail': path.join(
+      __dirname,
+      'src/controller/MarkdownDetailDataController.tsx',
+    ),
+    'markdown-editor': path.join(
+      __dirname,
+      'src/controller/MarkdownEditorDataController.tsx',
+    ),
+    'mapping-detail': path.join(
+      __dirname,
+      'src/controller/MappingDetailDataController.tsx',
+    ),
   },
+  externals: { 'socket.io-client': 'socket.io-client' },
   plugins,
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        common: {
-          name: 'common',
-          chunks: 'initial',
-          priority: 2,
-          minChunks: 2,
-        },
-      },
-    },
-  },
 };
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "compile:server": "tsc -p server",
     "d": "npm run compile:server -- --watch",
     "dev": "rimraf dist && nino koei -w -d --not-copy-assets",
-    "go": "nino go",
     "lint": "nino eslint",
     "lint-staged": "lint-staged",
     "prettier": "nino prettier",
@@ -49,7 +48,10 @@
     "koa": "^2.8.1",
     "mini-xmind": "^1.3.2",
     "mysql": "^2.17.1",
+    "nino-cli": "^1.2.4",
     "puppeteer-core": "^1.20.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "typescript": "^3.6.3"
   },
   "devDependencies": {
@@ -65,7 +67,6 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-lazyload": "^2.5.0",
-    "@types/react-router-dom": "^4.3.5",
     "@types/request": "^2.48.3",
     "@types/socket.io": "^2.1.2",
     "@types/socket.io-client": "^1.4.32",
@@ -87,7 +88,6 @@
     "npm-run-all": "^4.1.5",
     "post-compile-webpack-plugin": "^0.1.2",
     "react-lazyload": "^2.6.2",
-    "react-router-dom": "^5.0.1",
     "rimraf": "^3.0.0",
     "socket.io": "^2.3.0",
     "socket.io-client": "^2.3.0",

diff --git a/src/controller/MainPageDataController.tsx b/src/controller/MainPageDataController.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
 import MainPage from '../pages/MainPage';
 import { MappingProps } from '../../server/controller/DocumentController';
 import MainPageList from '../pages/MainPageList';
@@ -50,7 +51,7 @@ const handleListItemClick = ({
   category: 'mapping' | 'markdown';
   id: string;
 }) => {
-  location.hash = `/${category}/${id}`;
+  location.href = `/${category}/${id}`;
 };
 
 const getExhentaiTargetDataSource = async (url: string) => {
@@ -79,7 +80,9 @@ const MainPageDataController = () => {
   useResize();
 
   useEffect(() => {
-    isLocal && getExhentaiDateSet();
+    if (isLocal) {
+      getExhentaiDateSet();
+    }
     getSider();
     getMapping();
   }, []);
@@ -155,9 +158,11 @@ const MainPageDataController = () => {
       message.success(`${item.category} 初始化完成`);
     }
     handleModalCancel();
-    location.hash = `/${item.category}${
-      item.category === 'markdown' ? '/edit' : ''
-    }/${id}`;
+    if (item.category === 'mapping') {
+      location.href = `/mapping/${id}`;
+      return;
+    }
+    location.href = `/markdown-editor/${id}`;
   };
 
   const handleHide = async ({ id }: MappingProps) => {
@@ -230,4 +235,4 @@ const MainPageDataController = () => {
   );
 };
 
-export default MainPageDataController;
+ReactDOM.render(<MainPageDataController />, document.getElementById('root'));
diff --git a/src/controller/MappingDetailDataController.tsx b/src/controller/MappingDetailDataController.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import MappingDetail from '../pages/MappingDetail';
 import { DataSource } from 'mini-xmind/lib/canvas/core';
 import { useFetchDocumentData } from '../hooks/useFetchDocumentData';
 import {
   MarkdownEditorSaveProps,
   showMessageAfterFetching,
 } from './MarkdownEditorDataController';
+import { getPathNameFromUrl } from '../utils';
 
-const MappingDetailDataController = (props: {
-  match: { params: { id: string } };
-}) => {
-  const id: string = props.match.params.id;
+const MappingDetailDataController = () => {
+  const id: string = getPathNameFromUrl();
 
   const handleOnSave = async (newData: DataSource) => {
     const params: MarkdownEditorSaveProps = {
@@ -37,4 +37,7 @@ const MappingDetailDataController = (props: {
   return <MappingDetail dataSource={data} onChange={handleOnChange} />;
 };
 
-export default MappingDetailDataController;
+ReactDOM.render(
+  <MappingDetailDataController />,
+  document.getElementById('root'),
+);
diff --git a/src/controller/MarkdownDetailDataController.tsx b/src/controller/MarkdownDetailDataController.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { useFetchDocumentData } from '../hooks/useFetchDocumentData';
 import MarkdownDetail from '../pages/MarkdownDetail';
+import { getPathNameFromUrl } from '../utils';
 
-const MarkdownDetailDataController = (props: {
-  match: { params: { id: string } };
-}) => {
-  const id: string = props.match.params.id;
+const MarkdownDetailDataController = () => {
+  const id: string = getPathNameFromUrl();
   const [data] = useFetchDocumentData(id, 'markdown');
 
   return <MarkdownDetail dataSource={data} />;
 };
 
-export default MarkdownDetailDataController;
+ReactDOM.render(
+  <MarkdownDetailDataController />,
+  document.getElementById('root'),
+);
diff --git a/src/controller/MarkdownEditorDataController.tsx b/src/controller/MarkdownEditorDataController.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { message } from 'antd';
 import { useFetchDocumentData } from '../hooks/useFetchDocumentData';
 import MarkdownEditor from '../pages/MarkdownEditor';
 import { DataSource } from 'mini-xmind/lib/canvas/core';
+import { getPathNameFromUrl } from '../utils';
 
 export interface MarkdownEditorDataControllerProps {
   match: any;
@@ -21,10 +23,8 @@ export function showMessageAfterFetching(result: any) {
   result ? message.success('保存成功') : message.error('保存失败');
 }
 
-const MarkdownEditorDataController = (props: {
-  match: { params: { id: string } };
-}) => {
-  const id: string = props.match.params.id;
+const MarkdownEditorDataController = () => {
+  const id: string = getPathNameFromUrl();
 
   const handleOnSave = async () => {
     const params: MarkdownEditorSaveProps = {
@@ -33,7 +33,7 @@ const MarkdownEditorDataController = (props: {
       category: 'markdown',
       format: true,
     };
-    const response = await fetch('document/update', {
+    const response = await fetch('../document/update', {
       body: JSON.stringify(params),
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -57,4 +57,7 @@ const MarkdownEditorDataController = (props: {
   );
 };
 
-export default MarkdownEditorDataController;
+ReactDOM.render(
+  <MarkdownEditorDataController />,
+  document.getElementById('root'),
+);
diff --git a/src/hooks/useFetchDocumentData.ts b/src/hooks/useFetchDocumentData.ts
@@ -8,7 +8,7 @@ export function useFetchDocumentData(
   onSaveCallback?: (data: DataSource) => void,
 ) {
   const ext = type === 'mapping' ? 'json' : 'md';
-  const url = `./assets/${type}/${id}.${ext}`;
+  const url = `../../assets/${type}/${id}.${ext}`;
   const [data, setData] = useState();
   useBindKeyDown(data, onSaveCallback);
 

diff --git a/src/index.html b/src/index.html
@@ -31,6 +31,10 @@
   </head>
 
   <body>
+    <%= htmlWebpackPlugin.options.socket %>
+    <script>
+      window.__isLocal = <%= htmlWebpackPlugin.options.environment %>;
+    </script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/index.tsx b/src/index.tsx