refactor: add runtime-vue

examples/vue/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "vue",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

examples/vue/pages.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  router: {
+    mode: 'history',
+  }
+}

examples/vue/src/app.js

@@ -0,0 +1 @@
+export default () => {}

examples/vue/src/pages/hello.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Hello
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css">
+</style>

examples/vue/src/pages/home.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Home
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css">
+</style>

packages/driver-pages/lib/driver.js

@@ -9,6 +9,7 @@ const exit = require( 'exit' )
 const whyIsNodeRunning = require( 'why-is-node-running' )
 const VirtualModulesPlugin = require( '@nut-project/webpack-virtual-modules' )
 const HtmlWebpackPlugin = require( 'html-webpack-plugin' )
+const CopyPlugin = require( 'copy-webpack-plugin' )
 const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin
 const WebpackBar = require( 'webpackbar' )
 const {
@@ -21,6 +22,7 @@ const {
   SyncHook, SyncWaterfallHook, AsyncSeriesHook, AsyncSeriesWaterfallHook
 } = require( 'tapable' )
 const getPages = require( './get-pages' )
+const extendWebpack = require( './webpack' )
 
 class PagesDriver {
   constructor( options ) {
@@ -228,8 +230,12 @@ class PagesDriver {
   }
 
   _setupWebpack() {
+    const config = this.config
+
     this._webpack = chain()
 
+    extendWebpack( this )
+
     // virtual modules
     const virtualModules = this._virtualModules = new VirtualModulesPlugin(
       this._getDefaultModules()
@@ -267,9 +273,20 @@ class PagesDriver {
       .add( path.join( root, '../../' ) )
       .add( path.join( root, 'node_modules' ) )
 
+    this.webpack
+      .plugin( 'copy' )
+      .use( CopyPlugin, [] )
+
     this.webpack
       .plugin( 'html' )
-      .use( HtmlWebpackPlugin )
+      .use( HtmlWebpackPlugin, [
+        {
+          template: path.join( __dirname, './webpack/template.ejs' ),
+          title: config.html && config.html.title,
+          favicon: config.html && config.html.favicon,
+          excludeChunks: [],
+        }
+      ] )
 
     this.webpack
       .plugin( 'webpackbar' )
@@ -284,11 +301,11 @@ class PagesDriver {
   async apply() {
     const { cli } = this
 
-    // make webpack available
-    this._setupWebpack()
-
     await this.getConfig()
 
+    // make this.webpack available
+    this._setupWebpack()
+
     if ( await this.getConfigFile() ) {
       this.verbose = this.config.verbose === true
     } else {
@@ -560,11 +577,11 @@ class PagesDriver {
   }
 
   get cliOptions() {
-    return this._cliOptions
+    return this._cliOptions || {}
   }
 
   get config() {
-    return this._config
+    return this._config || {}
   }
 
   get webpack() {

plugins/pages/microfrontends/lib/webpack/config/base.js → packages/driver-pages/lib/webpack/base.js

@@ -13,7 +13,6 @@ const resolveFrom = require( 'resolve-from' )
     env = 'development',
     clean = true,
     browserslist: [],
-    transpileModules: [],
     include,
     exclude,
   }

packages/driver-pages/lib/webpack/index.js

@@ -0,0 +1,115 @@
+const path = require( 'path' )
+const base = require( './base' )
+const dev = require( './dev' )
+const prod = require( './prod' )
+
+const DEFAULTS = {
+  browserslist: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' ]
+}
+
+function tryRequirePackage( context ) {
+  let pkg
+
+  try {
+    pkg = require( path.join( context, 'package.json' ) )
+  } catch ( e ) {}
+
+  return pkg
+}
+
+const ID = 'driver-pages:webpack'
+
+module.exports = function ( api ) {
+  api.hooks.chainWebpack.tapPromise( ID, async () => {
+    const pkg = tryRequirePackage( process.cwd() )
+
+    const browserslist = api.config.browserslist ||
+      ( pkg && pkg.browserslist ) ||
+      DEFAULTS.browserslist
+
+    let transpileModules = (
+      api.config.babel && api.config.babel.transpileModules
+    ) || []
+
+    // clone
+    transpileModules = transpileModules.slice()
+
+    if ( api.config && api.config.plugins ) {
+      api.config.plugins.forEach( plugin => {
+        const pkg = tryRequirePackage( plugin.context )
+
+        if ( pkg ) {
+          transpileModules.push( pkg.name )
+        } else {
+          transpileModules.push( function ( filepath ) {
+            return filepath.includes( plugin.context )
+          } )
+        }
+      } )
+    }
+
+    const exclude = [
+      /\.nut\/pages\.js/,
+      /\.nut\/routes\.js/,
+      /\.nut\/route-components\//,
+    ]
+
+    const includeCaches = {}
+
+    // from egoist/poi
+    function include( filepath ) {
+      filepath = filepath.replace( /\\/g, '/' )
+
+      // use cache
+      if ( typeof includeCaches[ filepath ] === 'boolean' ) {
+        return includeCaches[ filepath ]
+      }
+
+      if ( !filepath.includes( 'node_modules' ) ) {
+        includeCaches[ filepath ] = true
+        return true
+      }
+
+      if ( transpileModules ) {
+        const shouldTranspile = transpileModules.some( m => {
+          if ( typeof m === 'string' ) {
+            return filepath.includes( `/node_modules/${ m }/` ) ||
+              filepath.includes( `/node_modules/_${ m.replace( /\//g, '_' ) }` )
+          }
+
+          if ( typeof m === 'function' ) {
+            return m( filepath )
+          }
+
+          if ( m && m.test ) {
+            return m.test( filepath )
+          }
+
+          return false
+        } )
+
+        includeCaches[ filepath ] = shouldTranspile
+        return shouldTranspile
+      }
+
+      includeCaches[ filepath ] = false
+      return false
+    }
+
+    const options = {
+      browserslist,
+      include,
+      exclude,
+      clean: api.config.output && api.config.output.clean === true,
+      publicPath: api.config.output && api.config.output.publicPath,
+    }
+
+    base( api.webpack, options )
+
+    if ( api.env === 'production' ) {
+      prod( api.webpack, options )
+    } else {
+      dev( api.webpack, options )
+    }
+  } )
+}

packages/driver-pages/lib/webpack/template.ejs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <noscript>
+    We're sorry but our website doesn't work properly without JavaScript enabled. Please enable it to continue.
+  </noscript>
+</body>
+</html>

packages/driver-pages/package.json

@@ -1,60 +1,101 @@
 {
   "name": "@nut-project/driver-pages",
   "version": "1.0.0-alpha.3",
-  "publishConfig": {
-    "access": "public"
-  },
   "description": "A framework born for micro frontends",
   "keywords": [
-    "microfrontends",
-    "micro",
-    "frontend",
     "architecture",
-    "spa",
     "cli",
-    "static site generator",
-    "hmr"
-  ],
-  "main": "lib/index.js",
-  "files": [
-    "bin",
-    "lib",
-    "yarn.lock",
-    "README.md"
+    "frontend",
+    "hmr",
+    "micro",
+    "microfrontends",
+    "spa",
+    "static site generator"
   ],
-  "engines": {
-    "node": ">=8.9.0"
-  },
-  "repository": "https://github.com/nut-project/nut/tree/master/packages/gatherer",
   "homepage": "http://nut.js.org",
   "bugs": {
     "url": "https://github.com/nut-project/nut/issues/new/choose"
   },
-  "scripts": {
-    "prepublishOnly": "cp ../../README.md ./README.md"
-  },
+  "repository": "https://github.com/nut-project/nut/tree/master/packages/gatherer",
+  "license": "MIT",
   "author": {
     "name": "fengzilong",
     "email": "[email protected]",
     "url": "https://github.com/fengzilong"
   },
-  "license": "MIT",
+  "files": [
+    "bin",
+    "lib",
+    "yarn.lock",
+    "README.md"
+  ],
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "cp ../../README.md ./README.md"
+  },
   "dependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.6.2",
     "@nut-project/dev-utils": "^1.0.0-alpha.2",
+    "@nut-project/mini-css-extract": "^1.0.0-alpha.2",
     "@nut-project/webpack": "^1.0.0-alpha.2",
     "@nut-project/webpack-virtual-modules": "^1.0.0-alpha.2",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-jsx": "^1.1.0",
+    "autoprefixer": "^9.6.1",
+    "babel-loader": "^8.0.6",
+    "cache-loader": "^4.1.0",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "chokidar": "^3.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
     "exit": "^0.1.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^1.5.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "globby": "^10.0.1",
     "html-webpack-plugin": "^3.2.0",
     "import-fresh": "^3.1.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss": "^7.0.21",
+    "postcss-loader": "^3.0.0",
     "pretty-bytes": "^5.2.0",
+    "pug": "^2.0.4",
+    "pug-plain-loader": "^1.0.0",
+    "raw-loader": "^3.1.0",
     "readline": "^1.3.0",
     "resolve-from": "^5.0.0",
+    "sass": "^1.23.3",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "tapable": "^1.1.3",
+    "terser-webpack-plugin": "^2.1.0",
+    "thread-loader": "^2.1.3",
     "tildify": "^2.0.0",
+    "ts-loader": "^6.1.2",
+    "tslint": "^5.18.0",
+    "typescript": "^3.6.3",
+    "url-loader": "^2.1.0",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.2",
+    "vue-template-compiler": "^2.6.10",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpackbar": "^4.0.0",
     "why-is-node-running": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=8.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }