feat: complete --target wc & multi-wc + tests

Author: yyx990803

packages/@vue/cli-service-global/__tests__/entry.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>{{ msg }}</h1>
+</template>
+
+<script>
+  export default {
+    data: () => ({ msg: 'hi' })
+  }
+</script>
+
+<style>
+h1 { color: red }
+</style>

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

@@ -14,19 +14,7 @@ const binPath = require.resolve('@vue/cli/bin/vue')
 const sleep = n => new Promise(resolve => setTimeout(resolve, n))
 const write = (file, content) => fs.writeFileSync(path.join(cwd, file), content)
 
-const entryVue = `
-<template>
-  <h1>{{ msg }}</h1>
-</template>
-<script>
-  export default {
-    data: () => ({ msg: 'hi' })
-  }
-</script>
-<style>
-h1 { color: red }
-</style>
-`.trim()
+const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
 
 const entryJs = `
 import Vue from 'vue'

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

@@ -0,0 +1,60 @@
+jest.setTimeout(20000)
+
+const fs = require('fs')
+const path = require('path')
+const portfinder = require('portfinder')
+const { createServer } = require('http-server')
+const mkdirp = require('mkdirp')
+const execa = require('execa')
+const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
+
+const cwd = path.resolve(__dirname, 'temp')
+const binPath = require.resolve('@vue/cli/bin/vue')
+const write = (file, content) => fs.writeFileSync(path.join(cwd, file), content)
+
+const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
+
+beforeAll(() => {
+  mkdirp.sync(cwd)
+  write('testLib.vue', entryVue)
+})
+
+let server, browser, page
+test('global build --target lib', async () => {
+  const { stdout } = await execa(binPath, ['build', 'testLib.vue', '--target', 'lib'], { cwd })
+
+  expect(stdout).toMatch('Build complete.')
+
+  const distDir = path.join(cwd, 'dist')
+  const hasFile = file => fs.existsSync(path.join(distDir, file))
+  expect(hasFile('demo.html')).toBe(true)
+  expect(hasFile('testLib.common.js')).toBe(true)
+  expect(hasFile('testLib.umd.js')).toBe(true)
+  expect(hasFile('testLib.umd.min.js')).toBe(true)
+  expect(hasFile('testLib.css')).toBe(true)
+
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: distDir })
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
+  browser = launched.browser
+  page = launched.page
+
+  const h1Text = await page.evaluate(() => {
+    return document.querySelector('h1').textContent
+  })
+
+  expect(h1Text).toMatch('hi')
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})

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

@@ -0,0 +1,58 @@
+jest.setTimeout(20000)
+
+const fs = require('fs')
+const path = require('path')
+const portfinder = require('portfinder')
+const { createServer } = require('http-server')
+const mkdirp = require('mkdirp')
+const execa = require('execa')
+const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
+
+const cwd = path.resolve(__dirname, 'temp')
+const binPath = require.resolve('@vue/cli/bin/vue')
+const write = (file, content) => fs.writeFileSync(path.join(cwd, file), content)
+
+const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
+
+beforeAll(() => {
+  mkdirp.sync(cwd)
+  write('my-wc.vue', entryVue)
+})
+
+let server, browser, page
+test('global build --target wc', async () => {
+  const { stdout } = await execa(binPath, ['build', 'my-wc.vue', '--target', 'wc'], { cwd })
+
+  expect(stdout).toMatch('Build complete.')
+
+  const distDir = path.join(cwd, 'dist')
+  const hasFile = file => fs.existsSync(path.join(distDir, file))
+  expect(hasFile('demo.html')).toBe(true)
+  expect(hasFile('my-wc.js')).toBe(true)
+  expect(hasFile('my-wc.min.js')).toBe(true)
+
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: distDir })
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
+  browser = launched.browser
+  page = launched.page
+
+  const h1Text = await page.evaluate(() => {
+    return document.querySelector('my-wc')._shadowRoot.querySelector('h1').textContent
+  })
+
+  expect(h1Text).toMatch('hi')
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})

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

@@ -6,7 +6,7 @@ const { toPlugin, findExisting } = require('./lib/util')
 
 const babelPlugin = toPlugin('@vue/cli-plugin-babel')
 const eslintPlugin = toPlugin('@vue/cli-plugin-eslint')
-const createConfigPlugin = require('./lib/createConfigPlugin')
+const globalConfigPlugin = require('./lib/globalConfigPlugin')
 
 function resolveEntry (entry) {
   const context = process.cwd()
@@ -44,7 +44,7 @@ function createService (context, entry, asLib) {
     plugins: [
       babelPlugin,
       eslintPlugin,
-      createConfigPlugin(context, entry, asLib)
+      globalConfigPlugin(context, entry, asLib)
     ]
   })
 }

packages/@vue/cli-service-global/index.js

@@ -71,7 +71,8 @@ module.exports = function createConfigPlugin (context, entry, asLib) {
               .clear()
               .end()
             .exclude
-              .add(/node_modules|@vue\/cli-service/)
+              .add(/node_modules/)
+              .add(/@vue\/cli-service/)
               .end()
             .uses
               .delete('cache-loader')

packages/@vue/cli-service-global/lib/createConfigPlugin.js renamed to packages/@vue/cli-service-global/lib/globalConfigPlugin.js

@@ -9,25 +9,16 @@ 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 project = await create('build-lib', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --traget lib --name testLib')
+  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib src/components/HelloWorld.vue')
   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`)
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/testLib.common.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.min.js')).toBe(true)
+  expect(project.has('dist/testLib.css')).toBe(true)
 
   const port = await portfinder.getPortPromise()
   server = createServer({ root: path.join(project.dir, 'dist') })
@@ -39,15 +30,19 @@ test('build as lib', async () => {
     })
   })
 
-  const launched = await launchPuppeteer(`http://localhost:${port}/`)
+  const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
   browser = launched.browser
   page = launched.page
 
   const h1Text = await page.evaluate(() => {
     return document.querySelector('h1').textContent
   })
+  expect(h1Text).toMatch('') // no props given
 
-  expect(h1Text).toMatch('Welcome to Your Vue.js App')
+  const h2Text = await page.evaluate(() => {
+    return document.querySelector('h2').textContent
+  })
+  expect(h2Text).toMatch('Essential Links')
 })
 
 afterAll(async () => {

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

@@ -0,0 +1,59 @@
+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 single wc', async () => {
+  const project = await create('build-multi-wc', defaultPreset)
+
+  const { stdout } = await project.run(`vue-cli-service build --target multi-wc **/*.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)
+
+  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}/demo.html`)
+  browser = launched.browser
+  page = launched.page
+
+  const styleCount = await page.evaluate(() => {
+    return document.querySelector('build-multi-wc-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
+  })
+  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
+  })
+  expect(childStyleCount).toBe(1)
+
+  const h2Text = await page.evaluate(() => {
+    return document.querySelector('build-multi-wc-hello-world')._shadowRoot.querySelector('h2').textContent
+  })
+  expect(h2Text).toMatch('Essential Links')
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})

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

@@ -0,0 +1,52 @@
+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 single wc', async () => {
+  const project = await create('build-wc', defaultPreset)
+
+  const { stdout } = await project.run('vue-cli-service build --target wc src/components/HelloWorld.vue')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/build-wc.js')).toBe(true)
+  expect(project.has('dist/build-wc.min.js')).toBe(true)
+
+  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}/demo.html`)
+  browser = launched.browser
+  page = launched.page
+
+  const styleCount = await page.evaluate(() => {
+    return document.querySelector('build-wc')._shadowRoot.querySelectorAll('style').length
+  })
+  expect(styleCount).toBe(1)
+
+  await page.evaluate(() => {
+    document.querySelector('build-wc').msg = 'hello'
+  })
+  const h1Text = await page.evaluate(() => {
+    return document.querySelector('build-wc')._shadowRoot.querySelector('h1').textContent
+  })
+  expect(h1Text).toBe('hello')
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})

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

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

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

@@ -11,19 +11,30 @@ const hyphenate = str => {
   return str.replace(hyphenateRE, '-$1').toLowerCase()
 }
 
-module.exports = function generateMultiWebComponentEntry (prefix, files) {
+exports.filesToComponentNames = (prefix, files) => {
+  return files.map(file => {
+    const basename = path.basename(file).replace(/\.(jsx?|vue)$/, '')
+    const camelName = camelize(basename)
+    const kebabName = `${prefix}-${hyphenate(basename)}`
+    return {
+      file,
+      basename,
+      camelName,
+      kebabName
+    }
+  })
+}
+
+exports.generateMultiWebComponentEntry = (prefix, files) => {
   const filePath = path.resolve(__dirname, 'entry-multi-wc.js')
   const content = `
 import Vue from 'vue'
 import wrap from '@vue/web-component-wrapper'
 
-${files.map(file => {
-    const basename = path.basename(file).replace(/\.(jsx?|vue)$/, '')
-    const camelName = camelize(basename)
-    const kebabName = hyphenate(basename)
+${exports.filesToComponentNames(prefix, files).map(({ file, camelName, kebabName }) => {
     return (
       `import ${camelName} from '~root/${file}'\n` +
-    `window.customElements.define('${prefix}-${kebabName}', wrap(Vue, ${camelName}))\n`
+    `window.customElements.define('${kebabName}', wrap(Vue, ${camelName}))\n`
     )
   }).join('\n')}`.trim()
   fs.writeFileSync(filePath, content)