use happypack

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+*.log

babel.config.js

@@ -0,0 +1,25 @@
+module.exports = function(api) {
+    api.cache(true);
+
+    const config = {
+        "presets": [
+            ["@babel/preset-env", {
+                "targets": {
+                    "browsers": [
+                        "last 2 versions"
+                    ]
+                },
+                "modules": "cjs",
+            }]
+        ],
+        "plugins": [
+            "@babel/plugin-transform-runtime",
+            ["@babel/plugin-proposal-decorators", {"legacy": true}],
+            "@babel/plugin-proposal-class-properties",
+            "@babel/plugin-syntax-dynamic-import",
+            "@babel/plugin-proposal-do-expressions",
+        ]
+    };
+
+    return config;
+}

config/webpack.config.js

@@ -0,0 +1,206 @@
+const Path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const HappyPack = require('happypack');
+
+const resolve = (path) => Path.resolve(__dirname, path);
+
+module.exports = {
+    mode: 'development',
+    entry: {
+        app: resolve('../src/app.js'),
+    },
+    output: {
+        path: resolve('../dist'),
+        filename: 'static/js/[name].[hash].js',
+        chunkFilename: 'static/js/[name].[hash].js',
+    },
+    devtool: '#inline-source-map',
+    resolve: {
+        alias: {
+            '@': resolve('../src'),
+            'kpc': 'kpc/@stylus',
+            '~': resolve('../node_modules/kpc-demo')
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.m?jsx?$/,
+                include: [
+                    resolve('../src'), 
+                    resolve('../node_modules/kpc-demo'),
+                ],
+                use: 'happypack/loader?id=js',
+                // use: [
+                    // {
+                        // loader: 'babel-loader',
+                        // options: {
+                            // cacheDirectory: true, 
+                        // }
+                    // }
+                // ]
+            },
+            {
+                test: /\.vdt$/,
+                use: 'happypack/loader?id=vdt',
+                // use: [
+                    // {
+                        // loader: 'babel-loader',
+                        // options: {
+                            // cacheDirectory: true, 
+                        // }
+                    // },
+                    // {
+                        // loader: 'vdt-loader',
+                        // options: {
+                            // delimiters: ['{{', '}}'],
+                            // skipWhitespace: true,
+                        // }
+                    // }
+                // ]
+            },
+            {
+                test: /\.styl$/,
+                use: 'happypack/loader?id=styl',
+                // use: [
+                    // {
+                        // loader: 'style-loader',
+                    // },
+                    // {
+                        // loader: 'css-loader', 
+                        // options: {
+                            // url: true,
+                        // }
+                    // },
+                    // {
+                        // loader: 'stylus-loader', 
+                        // options: {
+                            // 'include css': true,
+                            // 'resolve url': true,
+                            // sourceMap: false,
+                            // 'import': resolve('../src/theme/index.styl'),
+                        // }
+                    // }
+                // ]
+            },
+            {
+                test: /\.css$/,
+                use: 'happypack/loader?id=css',
+                // use: [
+                    // {
+                        // loader: 'style-loader',
+                    // },
+                    // {
+                        // loader: 'css-loader',
+                        // options: {
+                            // url: true
+                        // }
+                    // }
+                // ]
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf|svg|png)(\?.*)?$/,
+                use: 'happypack/loader?id=file',
+                // use: [
+                    // {
+                        // loader: 'file-loader',
+                        // options: {
+                            // outputPath: 'static/media/',
+                        // }
+                    // }
+                // ]
+            },
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            inject: true,
+            template: resolve('../public/index.html'),
+        }),
+        new HappyPack({
+            id: 'js',
+            loaders: [
+                {
+                    loader: 'babel-loader',
+                    options: {
+                        cacheDirectory: true, 
+                    }
+                }
+            ]
+        }),
+        new HappyPack({
+            id: 'vdt',
+            loaders: [
+                {
+                    loader: 'babel-loader',
+                    options: {
+                        cacheDirectory: true, 
+                    }
+                },
+                {
+                    loader: 'vdt-loader',
+                    options: {
+                        delimiters: ['{{', '}}'],
+                        skipWhitespace: true,
+                    }
+                }
+            ]
+        }),
+        new HappyPack({
+            id: 'styl',
+            loaders: [
+                {
+                    loader: 'style-loader',
+                },
+                {
+                    loader: 'css-loader', 
+                    options: {
+                        url: true,
+                    }
+                },
+                {
+                    loader: 'stylus-loader', 
+                    options: {
+                        'include css': true,
+                        'resolve url': true,
+                        sourceMap: false,
+                        'import': resolve('../src/theme/index.styl'),
+                    }
+                }
+            ]
+        }),
+        new HappyPack({
+            id: 'css',
+            loaders: [
+                {
+                    loader: 'style-loader',
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        url: true
+                    }
+                }
+            ]
+        }),
+        new HappyPack({
+            id: 'file',
+            loaders: [
+                {
+                    loader: 'file-loader',
+                    options: {
+                        outputPath: 'static/media/',
+                    }
+                }
+            ]
+        }),
+    ],
+    devServer: {
+        port: 5678,
+        hot: true,
+    },
+    watchOptions: {
+        ignored: /node_modules/
+    }
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "kpc-theme",
+  "version": "0.0.1",
+  "description": "A tool for customizing kpc theme.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --config config/webpack.config.js",
+    "build": "rm ./dist -rf && webpack --config config/webpack.config.js"
+  },
+  "keywords": [
+    "kpc",
+    "theme",
+    "tool"
+  ],
+  "author": "Javey",
+  "license": "MIT",
+  "dependencies": {
+    "happypack": "^5.0.1",
+    "history": "^4.9.0",
+    "kpc": "^1.0.1",
+    "kpc-demo": "git+https://github.com/ksc-fe/kpc.git#gh-pages",
+    "universal-router": "^8.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/plugin-proposal-do-expressions": "^7.5.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.1.0",
+    "file-loader": "^4.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.23.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "thread-loader": "^2.1.2",
+    "vdt-loader": "^1.5.1",
+    "webpack": "^4.37.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
+  }
+}

public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>KPC Theme Tool</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
+    <meta http-equiv="Cache-Control" content="no-siteapp" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

src/app.js

@@ -0,0 +1,26 @@
+import App from 'kpc/components/app';
+import router from './router';
+import {createBrowserHistory} from 'history';
+
+const history = createBrowserHistory();
+const app = new App({container: document.getElementById('app')});
+
+let unlisten;
+function init(router) {
+    if (unlisten) unlisten();
+
+    unlisten = history.listen(async ({hash}) => {
+        app.showLoading();
+        const {Page, data} = await router.resolve({pathname: hash.substring(1)});
+        await app.load(Page, data);
+    });
+    history.replace(location);
+}
+init(router);
+
+if (module.hot) {
+    module.hot.accept('./pages/index', () => {
+        const router = require('./router').default;
+        init(router);
+    });
+}

src/data/components.js

@@ -0,0 +1,13 @@
+const docJson = require('kpc-demo/doc.json');
+
+module.exports = docJson['组件'].reduce((acc, value) => {
+    const [, name] = value.path.match(/components\/([^\/]+)/); 
+
+    // ignore app
+    if (name === 'app') return acc;
+
+    acc.push({name, title: value.title});
+    return acc;
+}, []).sort((a, b) => {
+    return a.name > b.name ? 1 : -1;
+});

src/pages/index/index.js

@@ -0,0 +1,36 @@
+import Intact from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import components from '@/data/components';
+
+const req = require.context('kpc-demo', true, /^\.\/components\/\w+\/demos\/.*index\.js$/);
+
+export default class Index extends Intact {
+    @Intact.template()
+    static template = template; 
+
+    defaults() {
+        return {
+            components,
+        };
+    }
+
+    _init() {
+        const componentName = this.get('name');
+
+        const Demos = [];
+        req.keys().forEach(key => {
+            if (key.startsWith(`./components/${componentName}/`)) {
+                const Demo = req(key);
+                Demos.push({
+                    Demo: Demo.default,
+                    data: Demo.data.setting,
+                    index: Demo.data.index,
+                });
+            }
+        });
+        this.set({Demos: Demos.sort((a, b) => {
+            return a.data.order - b.data.order;
+        })});
+    }
+}