feat: improve build lib/web-component

Author: yyx990803

packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js

@@ -0,0 +1,56 @@
+jest.setTimeout(30000)
+
+const path = require('path')
+const portfinder = require('portfinder')
+const { createServer } = require('http-server')
+const { defaultPreset } = require('@vue/cli/lib/options')
+const create = require('@vue/cli-test-utils/createTestProject')
+const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
+
+let server, browser, page
+test('build as lib', async () => {
+  const project = await create('e2e-build-lib', defaultPreset)
+
+  const { stdout } = await project.run('vue-cli-service build --traget lib --name testLib')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/index.html')).toBe(true)
+  expect(project.has('dist/favicon.ico')).toBe(true)
+  expect(project.has('dist/js')).toBe(true)
+  expect(project.has('dist/css')).toBe(true)
+
+  const index = await project.read('dist/index.html')
+  // should preload app.js & vendor.js
+  expect(index).toMatch(/<link rel=preload [^>]+app[^>]+\.js>/)
+  expect(index).toMatch(/<link rel=preload [^>]+vendor[^>]+\.js>/)
+
+  const vendorFile = index.match(/<link rel=preload [^>]+(vendor[^>]+\.js)>/)[1]
+  const vendor = await project.read(`dist/js/${vendorFile}`)
+  expect(vendor).toMatch(`router-link`)
+  expect(vendor).toMatch(`vuex`)
+
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: path.join(project.dir, 'dist') })
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  const launched = await launchPuppeteer(`http://localhost:${port}/`)
+  browser = launched.browser
+  page = launched.page
+
+  const h1Text = await page.evaluate(() => {
+    return document.querySelector('h1').textContent
+  })
+
+  expect(h1Text).toMatch('Welcome to Your Vue.js App')
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})

packages/@vue/cli-service-global/__tests__/globalServiceBuildWebComponent.spec.js

@@ -51,6 +51,10 @@ module.exports = class PluginAPI {
     return this.service.resolveWebpackConfig()
   }
 
+  resolveChainableWebpackConfig () {
+    return this.service.resolveChainableWebpackConfig()
+  }
+
   configureDevServer (fn) {
     this.service.devServerConfigFns.push(fn)
   }

packages/@vue/cli-service/__tests__/buildLib.spec.js

@@ -16,7 +16,6 @@ module.exports = class Service {
   constructor (context, { plugins, pkg, projectOptions, useBuiltIn } = {}) {
     process.VUE_CLI_SERVICE = this
     this.context = context
-    this.webpackConfig = new Config()
     this.webpackChainFns = []
     this.webpackRawConfigFns = []
     this.devServerConfigFns = []
@@ -132,11 +131,16 @@ module.exports = class Service {
     return Promise.resolve(fn(args, rawArgv))
   }
 
-  resolveWebpackConfig () {
+  resolveChainableWebpackConfig () {
+    const chainableConfig = new Config()
     // apply chains
-    this.webpackChainFns.forEach(fn => fn(this.webpackConfig))
-    // to raw config
-    let config = this.webpackConfig.toConfig()
+    this.webpackChainFns.forEach(fn => fn(chainableConfig))
+    return chainableConfig
+  }
+
+  resolveWebpackConfig () {
+    // get raw config
+    let config = this.resolveChainableWebpackConfig().toConfig()
     // apply raw config fns
     this.webpackRawConfigFns.forEach(fn => {
       if (typeof fn === 'function') {

packages/@vue/cli-service/__tests__/buildWebComponent.spec.js

@@ -0,0 +1,16 @@
+<title><%- htmlWebpackPlugin.options.libName %> demo</title>
+<script src="https://unpkg.com/vue"></script>
+<script src="./<%- htmlWebpackPlugin.options.libName %>.umd.js"></script>
+<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.libName %>.css">
+
+<div id="app">
+  <demo></demo>
+</div>
+
+<script>
+new Vue({
+  components: {
+    demo: <%- htmlWebpackPlugin.options.libName %>
+  }
+}).$mount('#app')
+</script>

packages/@vue/cli-service/lib/PluginAPI.js

@@ -0,0 +1,5 @@
+<title><%- htmlWebpackPlugin.options.libName %> demo</title>
+<script src="https://unpkg.com/vue"></script>
+<script src="./<%- htmlWebpackPlugin.options.libName %>.js"></script>
+
+<<%= htmlWebpackPlugin.options.libName %>></<%= htmlWebpackPlugin.options.libName %>>

packages/@vue/cli-service/lib/Service.js

@@ -1,97 +1,12 @@
-/* global HTMLElement */
-
 import Vue from 'vue'
 import Component from '~entry'
+import wrap from '@vue/web-component-wrapper'
 
-// Name to register the custom element as. Must contain a hyphen.
 const name = process.env.CUSTOM_ELEMENT_NAME
 
-// Whether to keep the instance alive when element is removed from DOM.
-// Default: false.
-// - false: the instance is destroyed and recreated when element is removed / reinserted
-// - true: the instance is always kept alive
-const keepAlive = process.env.CUSTOM_ELEMENT_KEEP_ALIVE
-
-const options = typeof Component === 'function'
-  ? Component.options
-  : Component
-
-const arrToObj = (arr, defaultValue) => arr.reduce((acc, key) => {
-  acc[key] = defaultValue
-  return acc
-}, {})
-
-const props = Array.isArray(options.props)
-  ? arrToObj(options.props, {})
-  : options.props || {}
-const propsList = Object.keys(props)
-
 // CSS injection function exposed by vue-loader & vue-style-loader
+const options = typeof Component === 'function' ? Component.options : Component
 const styleInjectors = window[options.__shadowInjectId]
-const injectStyle = root => styleInjectors.forEach(inject => inject(root))
-
-// TODO use ES5 syntax
-class CustomElement extends HTMLElement {
-  static get observedAttributes () {
-    return propsList
-  }
-
-  constructor () {
-    super()
-
-    const data = arrToObj(propsList)
-    data._active = false
-    this._wrapper = new Vue({
-      data,
-      render: h => data._active
-        ? h(Component, { props: this._data })
-        : null
-    })
-
-    this._attached = false
-    this._shadowRoot = this.attachShadow({ mode: 'open' })
-    injectStyle(this._shadowRoot)
-  }
-
-  connectedCallback () {
-    this._attached = true
-    if (!this._wrapper._isMounted) {
-      this._wrapper.$mount()
-      this._shadowRoot.appendChild(this._wrapper.$el)
-    }
-    this._wrapper._data._active = true
-  }
-
-  disconnectedCallback () {
-    this._attached = false
-    const destroy = () => {
-      this._wrapper._data._active = false
-    }
-    if (!keepAlive) {
-      destroy()
-    } else if (typeof keepAlive === 'number') {
-      setTimeout(() => {
-        if (!this._attached) destroy()
-      }, keepAlive)
-    }
-  }
-
-  attributeChangedCallback (attrName, oldVal, newVal) {
-    this._wrapper._data[attrName] = newVal
-  }
-}
-
-propsList.forEach(key => {
-  Object.defineProperty(CustomElement.prototype, key, {
-    get () {
-      return this._wrapper._data[key]
-    },
-    set (newVal) {
-      this._wrapper._data[key] = newVal
-    },
-    enumerable: false,
-    configurable: true
-  })
-})
+const onMounted = root => styleInjectors.forEach(inject => inject(root))
 
-window.customElements.define(name, CustomElement)
+wrap(Vue, name, Component, onMounted)

packages/@vue/cli-service/lib/commands/build/demo-lib.html

@@ -1,8 +1,7 @@
 const defaults = {
   mode: 'production',
   target: 'app',
-  entry: 'src/App.vue',
-  keepAlive: false
+  entry: 'src/App.vue'
 }
 
 module.exports = (api, options) => {
@@ -14,8 +13,7 @@ module.exports = (api, options) => {
       '--dest': `specify output directory (default: ${options.outputDir})`,
       '--target': `app | lib | web-component (default: ${defaults.target})`,
       '--entry': `entry for lib or web-component (default: ${defaults.entry})`,
-      '--name': `name for lib or web-component (default: "name" in package.json or entry filename)`,
-      '--keepAlive': `keep component alive when web-component is detached? (default: ${defaults.keepAlive})`
+      '--name': `name for lib or web-component (default: "name" in package.json or entry filename)`
     }
   }, args => {
     for (const key in defaults) {
@@ -53,7 +51,7 @@ module.exports = (api, options) => {
         let webpackConfig
         if (args.target === 'lib') {
           webpackConfig = require('./resolveLibConfig')(api, args, options)
-        } else if (args.target === 'web-component') {
+        } else if (args.target === 'web-component' || args.target === 'wc') {
           webpackConfig = require('./resolveWebComponentConfig')(api, args, options)
         } else {
           webpackConfig = api.resolveWebpackConfig()
@@ -65,7 +63,10 @@ module.exports = (api, options) => {
           }
 
           if (!args.silent) {
+            // TODO polish output
             process.stdout.write(stats.toString({
+              hash: false,
+              timings: false,
               colors: true,
               modules: false,
               children: api.hasPlugin('typescript') || args.target !== 'app',

packages/@vue/cli-service/lib/commands/build/demo-web-component.html

@@ -1,18 +1,38 @@
+const path = require('path')
+
 module.exports = (api, { entry, name, dest }, options) => {
   const libName = name || api.service.pkg.name || entry.replace(/\.(js|vue)$/, '')
   // setting this disables app-only configs
   process.env.VUE_CLI_TARGET = 'lib'
   // inline all static asset files since there is no publicPath handling
   process.env.VUE_CLI_INLINE_LIMIT = Infinity
 
-  api.chainWebpack(config => {
+  function genConfig (format, postfix = format, genHTML) {
+    const config = api.resolveChainableWebpackConfig()
+
+    config.entryPoints.clear()
+    // set proxy entry for *.vue files
+    if (/\.vue$/.test(entry)) {
+      config
+        .entry(`${libName}.${postfix}`)
+          .add(require.resolve('./entry-lib.js'))
+      config.resolve
+        .alias
+          .set('~entry', api.resolve(entry))
+    } else {
+      config
+        .entry(`${libName}.${postfix}`)
+          .add(api.resolve(entry))
+    }
+
     config.output
       .path(api.resolve(dest))
       .filename(`[name].js`)
       .library(libName)
       .libraryExport('default')
+      .libraryTarget(format)
 
-    // adjust css output name
+    // adjust css output name so they write to the same file
     if (options.css.extract !== false) {
       config
         .plugin('extract-css')
@@ -23,12 +43,9 @@ module.exports = (api, { entry, name, dest }, options) => {
     }
 
     // only minify min entry
-    config
-      .plugin('uglify')
-        .tap(args => {
-          args[0].include = /\.min\.js$/
-          return args
-        })
+    if (!/\.min/.test(postfix)) {
+      config.plugins.delete('uglify')
+    }
 
     // externalize Vue in case user imports it
     config
@@ -39,34 +56,25 @@ module.exports = (api, { entry, name, dest }, options) => {
           root: 'Vue'
         }
       })
-  })
 
-  function genConfig (format, postfix = format) {
-    api.chainWebpack(config => {
-      config.entryPoints.clear()
-      // set proxy entry for *.vue files
-      if (/\.vue$/.test(entry)) {
-        config
-          .entry(`${libName}.${postfix}`)
-            .add(require.resolve('./entry-lib.js'))
-        config.resolve
-          .alias
-            .set('~entry', api.resolve(entry))
-      } else {
-        config
-          .entry(`${libName}.${postfix}`)
-            .add(api.resolve(entry))
-      }
+    // inject demo page for umd
+    if (genHTML) {
+      config
+        .plugin('demo-html')
+          .use(require('html-webpack-plugin'), [{
+            template: path.resolve(__dirname, './demo-lib.html'),
+            inject: false,
+            filename: 'demo.html',
+            libName
+          }])
+    }
 
-      config.output
-        .libraryTarget(format)
-    })
-    return api.resolveWebpackConfig()
+    return config.toConfig()
   }
 
   return [
     genConfig('commonjs2', 'common'),
-    genConfig('umd'),
+    genConfig('umd', undefined, true),
     genConfig('umd', 'umd.min')
   ]
 }