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) {