feat: build --target wc-async

Author: yyx990803

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 template
 packages/test
 temp
+entry-wc.js

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

@@ -1,4 +1,4 @@
-jest.setTimeout(30000)
+jest.setTimeout(15000)
 
 const path = require('path')
 const portfinder = require('portfinder')
@@ -8,10 +8,10 @@ const create = require('@vue/cli-test-utils/createTestProject')
 const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
 
 let server, browser, page
-test('build as single wc', async () => {
+test('build as wc', async () => {
   const project = await create('build-wc', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --target wc src/components/HelloWorld.vue')
+  const { stdout } = await project.run(`vue-cli-service build --target wc **/*.vue`)
   expect(stdout).toMatch('Build complete.')
 
   expect(project.has('dist/demo.html')).toBe(true)
@@ -33,17 +33,24 @@ test('build as single wc', async () => {
   page = launched.page
 
   const styleCount = await page.evaluate(() => {
-    return document.querySelector('build-wc').shadowRoot.querySelectorAll('style').length
+    return document.querySelector('build-wc-app').shadowRoot.querySelectorAll('style').length
   })
-  expect(styleCount).toBe(1)
+  expect(styleCount).toBe(2) // should contain styles from both app and child
 
-  await page.evaluate(() => {
-    document.querySelector('build-wc').msg = 'hello'
-  })
   const h1Text = await page.evaluate(() => {
-    return document.querySelector('build-wc').shadowRoot.querySelector('h1').textContent
+    return document.querySelector('build-wc-app').shadowRoot.querySelector('h1').textContent
+  })
+  expect(h1Text).toMatch('Welcome to Your Vue.js App')
+
+  const childStyleCount = await page.evaluate(() => {
+    return document.querySelector('build-wc-hello-world').shadowRoot.querySelectorAll('style').length
+  })
+  expect(childStyleCount).toBe(1)
+
+  const h2Text = await page.evaluate(() => {
+    return document.querySelector('build-wc-hello-world').shadowRoot.querySelector('h2').textContent
   })
-  expect(h1Text).toBe('hello')
+  expect(h2Text).toMatch('Essential Links')
 })
 
 afterAll(async () => {

packages/@vue/cli-service/__tests__/buildMultiWc.spec.js renamed to packages/@vue/cli-service/__tests__/buildWcAsync.spec.js

@@ -1,4 +1,4 @@
-jest.setTimeout(30000)
+jest.setTimeout(15000)
 
 const path = require('path')
 const portfinder = require('portfinder')
@@ -8,15 +8,21 @@ const create = require('@vue/cli-test-utils/createTestProject')
 const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
 
 let server, browser, page
-test('build as single wc', async () => {
-  const project = await create('build-multi-wc', defaultPreset)
+test('build as wc in async mode', async () => {
+  const project = await create('build-wc-async', defaultPreset)
 
-  const { stdout } = await project.run(`vue-cli-service build --target multi-wc **/*.vue`)
+  const { stdout } = await project.run(`vue-cli-service build --target wc-async **/*.vue`)
   expect(stdout).toMatch('Build complete.')
 
   expect(project.has('dist/demo.html')).toBe(true)
-  expect(project.has('dist/build-multi-wc.js')).toBe(true)
-  expect(project.has('dist/build-multi-wc.min.js')).toBe(true)
+  expect(project.has('dist/build-wc-async.js')).toBe(true)
+  expect(project.has('dist/build-wc-async.min.js')).toBe(true)
+
+  // code-split chunks
+  expect(project.has('dist/build-wc-async.0.js')).toBe(true)
+  expect(project.has('dist/build-wc-async.0.min.js')).toBe(true)
+  expect(project.has('dist/build-wc-async.1.js')).toBe(true)
+  expect(project.has('dist/build-wc-async.1.min.js')).toBe(true)
 
   const port = await portfinder.getPortPromise()
   server = createServer({ root: path.join(project.dir, 'dist') })
@@ -33,22 +39,22 @@ test('build as single wc', async () => {
   page = launched.page
 
   const styleCount = await page.evaluate(() => {
-    return document.querySelector('build-multi-wc-app').shadowRoot.querySelectorAll('style').length
+    return document.querySelector('build-wc-async-app').shadowRoot.querySelectorAll('style').length
   })
   expect(styleCount).toBe(2) // should contain styles from both app and child
 
   const h1Text = await page.evaluate(() => {
-    return document.querySelector('build-multi-wc-app').shadowRoot.querySelector('h1').textContent
+    return document.querySelector('build-wc-async-app').shadowRoot.querySelector('h1').textContent
   })
   expect(h1Text).toMatch('Welcome to Your Vue.js App')
 
   const childStyleCount = await page.evaluate(() => {
-    return document.querySelector('build-multi-wc-hello-world').shadowRoot.querySelectorAll('style').length
+    return document.querySelector('build-wc-async-hello-world').shadowRoot.querySelectorAll('style').length
   })
   expect(childStyleCount).toBe(1)
 
   const h2Text = await page.evaluate(() => {
-    return document.querySelector('build-multi-wc-hello-world').shadowRoot.querySelector('h2').textContent
+    return document.querySelector('build-wc-async-hello-world').shadowRoot.querySelector('h2').textContent
   })
   expect(h2Text).toMatch('Essential Links')
 })

packages/@vue/cli-service/lib/commands/build/.gitignore

@@ -1 +1 @@
-entry-multi-wc.js
+entry-wc.js

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

@@ -2,4 +2,6 @@
 <script src="https://unpkg.com/vue"></script>
 <script src="./<%- htmlWebpackPlugin.options.libName %>.js"></script>
 
-<<%= htmlWebpackPlugin.options.libName %>></<%= htmlWebpackPlugin.options.libName %>>
+<% for (const comp of htmlWebpackPlugin.options.components) { %>
+<<%= comp %>></<%= comp %>>
+<% } %>

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

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import wrap from '@vue/web-component-wrapper'
-import Component from '~entry'
 
-window.customElements.define(
-  process.env.CUSTOM_ELEMENT_NAME,
-  wrap(Vue, Component)
-)
+// runtime shared by every component chunk
+import 'css-loader/lib/css-base'
+import 'vue-style-loader/lib/addStylesShadow'
+import 'vue-loader/lib/runtime/component-normalizer'
+
+import myWc from '~root/my-wc.vue'
+window.customElements.define('my-wc', wrap(Vue, myWc))

packages/@vue/cli-service/lib/commands/build/entry-wc.js

@@ -11,7 +11,7 @@ module.exports = (api, options) => {
     options: {
       '--mode': `specify env mode (default: ${defaults.mode})`,
       '--dest': `specify output directory (default: ${options.outputDir})`,
-      '--target': `app | lib | wc | multi-wc (default: ${defaults.target})`,
+      '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--name': `name for lib or (multi-)web-component mode (default: "name" in package.json or entry filename)`
     }
   }, args => {
@@ -56,8 +56,9 @@ module.exports = (api, options) => {
           webpackConfig = require('./resolveLibConfig')(api, args, options)
         } else if (
           args.target === 'web-component' ||
+          args.target === 'web-component-async' ||
           args.target === 'wc' ||
-          args.target === 'multi-wc'
+          args.target === 'wc-async'
         ) {
           webpackConfig = require('./resolveWebComponentConfig')(api, args, options)
         } else {

packages/@vue/cli-service/lib/commands/build/generateMultiWcEntry.js

@@ -15,26 +15,30 @@ module.exports = (api, { entry, name, dest }, options) => {
     const config = api.resolveChainableWebpackConfig()
 
     config.entryPoints.clear()
+    const entryName = `${libName}.${postfix}`
     // set proxy entry for *.vue files
     if (/\.vue$/.test(entry)) {
       config
-        .entry(`${libName}.${postfix}`)
+        .entry(entryName)
           .add(require.resolve('./entry-lib.js'))
       config.resolve
         .alias
           .set('~entry', api.resolve(entry))
     } else {
       config
-        .entry(`${libName}.${postfix}`)
+        .entry(entryName)
           .add(api.resolve(entry))
     }
 
     config.output
       .path(api.resolve(dest))
-      .filename(`[name].js`)
+      .filename(`${entryName}.js`)
+      .chunkFilename(`${entryName}.[id].js`)
       .library(libName)
       .libraryExport('default')
       .libraryTarget(format)
+      // use relative publicPath so this can be deployed anywhere
+      .publicPath('./')
 
     // adjust css output name so they write to the same file
     if (options.css.extract !== false) {

packages/@vue/cli-service/lib/commands/build/index.js

@@ -1,68 +1,61 @@
 const path = require('path')
 const {
-  filesToComponentNames,
-  generateMultiWebComponentEntry
-} = require('./generateMultiWcEntry')
+  resolveEntry,
+  fileToComponentName
+} = require('./resolveWebComponentEntry')
+
+module.exports = (api, { target, entry, name, dest }) => {
+  // setting this disables app-only configs
+  process.env.VUE_CLI_TARGET = 'web-component'
+  // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
+  process.env.VUE_CLI_CSS_SHADOW_MODE = true
 
-module.exports = (api, { target, entry, name, dest, prefix }) => {
   const { log, error } = require('@vue/cli-shared-utils')
   const abort = msg => {
     log()
     error(msg)
     process.exit(1)
   }
 
-  const libName = (
-    name ||
-    api.service.pkg.name ||
-    path.basename(entry).replace(/\.(jsx?|vue)$/, '')
-  )
-  if (libName.indexOf('-') < 0 && target !== 'multi-wc') {
-    abort(`--name must contain a hyphen with --target web-component. (got "${libName}")`)
-  }
+  const isAsync = /async/.test(target)
 
-  let dynamicEntry
-  let resolvedFiles
-  if (target === 'multi-wc') {
-    if (!entry) {
-      abort(`a glob pattern is required with --target multi-web-component.`)
+  // generate dynamic entry based on glob files
+  const resolvedFiles = require('globby').sync([entry], { cwd: api.resolve('.') })
+  if (!resolvedFiles.length) {
+    abort(`entry pattern "${entry}" did not match any files.`)
+  }
+  let libName
+  let prefix
+  if (resolvedFiles.length === 1) {
+    // in single mode, determine the lib name from filename
+    libName = name || fileToComponentName('', resolvedFiles[0]).kebabName
+    prefix = ''
+    if (libName.indexOf('-') < 0) {
+      abort(`--name must contain a hyphen when building a single web component.`)
     }
-    // generate dynamic entry based on glob files
-    resolvedFiles = require('globby').sync([entry], { cwd: api.resolve('.') })
-    if (!resolvedFiles.length) {
-      abort(`glob pattern "${entry}" did not match any files.`)
+  } else {
+    // multi mode
+    libName = prefix = (name || api.service.pkg.name)
+    if (!libName) {
+      abort(`--name is required when building multiple web components.`)
     }
-    dynamicEntry = generateMultiWebComponentEntry(libName, resolvedFiles)
   }
 
-  // setting this disables app-only configs
-  process.env.VUE_CLI_TARGET = 'web-component'
-  // inline all static asset files since there is no publicPath handling
-  process.env.VUE_CLI_INLINE_LIMIT = Infinity
-  // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
-  process.env.VUE_CLI_CSS_SHADOW_MODE = true
+  const dynamicEntry = resolveEntry(prefix, resolvedFiles, isAsync)
 
   function genConfig (minify, genHTML) {
     const config = api.resolveChainableWebpackConfig()
 
     config.entryPoints.clear()
+    const entryName = `${libName}${minify ? `.min` : ``}`
 
     // set proxy entry for *.vue files
-    if (target === 'multi-wc') {
-      config
-        .entry(`${libName}${minify ? `.min` : ``}`)
-          .add(dynamicEntry)
-      config.resolve
-        .alias
-          .set('~root', api.resolve('.'))
-    } else {
-      config
-        .entry(`${libName}${minify ? `.min` : ``}`)
-          .add(require.resolve('./entry-wc.js'))
-      config.resolve
-        .alias
-          .set('~entry', api.resolve(entry))
-    }
+    config
+      .entry(entryName)
+        .add(dynamicEntry)
+    config.resolve
+      .alias
+        .set('~root', api.resolve('.'))
 
     // make sure not to transpile wc-wrapper
     config.module
@@ -77,7 +70,10 @@ module.exports = (api, { target, entry, name, dest, prefix }) => {
 
     config.output
       .path(api.resolve(dest))
-      .filename(`[name].js`)
+      .filename(`${entryName}.js`)
+      .chunkFilename(`${libName}.[id]${minify ? `.min` : ``}.js`)
+      // use relative publicPath so this can be deployed anywhere
+      .publicPath('./')
 
     // externalize Vue in case user imports it
     config
@@ -106,13 +102,13 @@ module.exports = (api, { target, entry, name, dest, prefix }) => {
       config
         .plugin('demo-html')
           .use(require('html-webpack-plugin'), [{
-            template: path.resolve(__dirname, `./demo-${target}.html`),
+            template: path.resolve(__dirname, `./demo-wc.html`),
             inject: false,
             filename: 'demo.html',
             libName,
-            components: target === 'multi-wc'
-              ? filesToComponentNames(libName, resolvedFiles).map(c => c.kebabName)
-              : null
+            components: resolvedFiles.map(file => {
+              return fileToComponentName(prefix, file).kebabName
+            })
           }])
     }
 

packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js

@@ -0,0 +1,47 @@
+const fs = require('fs')
+const path = require('path')
+
+const camelizeRE = /-(\w)/g
+const camelize = str => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+}
+
+const hyphenateRE = /\B([A-Z])/g
+const hyphenate = str => {
+  return str.replace(hyphenateRE, '-$1').toLowerCase()
+}
+
+exports.fileToComponentName = (prefix, file) => {
+  const basename = path.basename(file).replace(/\.(jsx?|vue)$/, '')
+  const camelName = camelize(basename)
+  const kebabName = `${prefix ? `${prefix}-` : ``}${hyphenate(basename)}`
+  return {
+    basename,
+    camelName,
+    kebabName
+  }
+}
+
+exports.resolveEntry = (prefix, files, async) => {
+  const filePath = path.resolve(__dirname, 'entry-wc.js')
+  const content = `
+import Vue from 'vue'
+import wrap from '@vue/web-component-wrapper'
+
+// runtime shared by every component chunk
+import 'css-loader/lib/css-base'
+import 'vue-style-loader/lib/addStylesShadow'
+import 'vue-loader/lib/runtime/component-normalizer'
+
+${files.map(file => {
+    const { camelName, kebabName } = exports.fileToComponentName(prefix, file)
+    return async
+      ? `window.customElements.define('${kebabName}', wrap(Vue, () => import('~root/${file}')))\n`
+      : (
+        `import ${camelName} from '~root/${file}'\n` +
+      `window.customElements.define('${kebabName}', wrap(Vue, ${camelName}))\n`
+      )
+  }).join('\n')}`.trim()
+  fs.writeFileSync(filePath, content)
+  return filePath
+}

packages/@vue/cli-service/lib/commands/build/resolveWebComponentConfig.js

@@ -1,7 +1,7 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const resolveLocal = require('../util/resolveLocal')
-    const inlineLimit = process.env.VUE_CLI_INLINE_LIMIT || 1000
+    const inlineLimit = 10000
 
     webpackConfig
       .context(api.service.context)

packages/@vue/cli-service/lib/commands/build/resolveWebComponentEntry.js

@@ -23,7 +23,7 @@
   "dependencies": {
     "@vue/cli-overlay": "^3.0.0-alpha.7",
     "@vue/cli-shared-utils": "^3.0.0-alpha.7",
-    "@vue/web-component-wrapper": "^1.1.2",
+    "@vue/web-component-wrapper": "^1.2.0",
     "address": "^1.0.3",
     "autodll-webpack-plugin": "^0.3.8",
     "autoprefixer": "^7.2.5",