refactor: add runtime-vue (#73)

* chore: add runtime-vue

* chore: add example

* chore: add missing dependencies

Author: fengzilong

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 renamed to packages/driver-pages/lib/webpack/base.js

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

plugins/pages/microfrontends/lib/webpack/config/css.js renamed to packages/driver-pages/lib/webpack/css.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 )
+    }
+  } )
+}