diff --git a/packages/@vue/cli-service-global/__tests__/entry.vue b/packages/@vue/cli-service-global/__tests__/entry.vue new file mode 100644 index 0000000000..e5c33fab42 --- /dev/null +++ b/packages/@vue/cli-service-global/__tests__/entry.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/packages/@vue/cli-service-global/__tests__/globalService.spec.js b/packages/@vue/cli-service-global/__tests__/globalService.spec.js index a8abfb7ee5..e4cf2f79c5 100644 --- a/packages/@vue/cli-service-global/__tests__/globalService.spec.js +++ b/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 = ` - - - -`.trim() +const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8') const entryJs = ` import Vue from 'vue' diff --git a/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js b/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js index e69de29bb2..e4c9afce42 100644 --- a/packages/@vue/cli-service-global/__tests__/globalServiceBuildLib.spec.js +++ b/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() +}) diff --git a/packages/@vue/cli-service-global/__tests__/globalServiceBuildWc.spec.js b/packages/@vue/cli-service-global/__tests__/globalServiceBuildWc.spec.js new file mode 100644 index 0000000000..8730bd6dc9 --- /dev/null +++ b/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() +}) diff --git a/packages/@vue/cli-service-global/__tests__/globalServiceBuildWebComponent.spec.js b/packages/@vue/cli-service-global/__tests__/globalServiceBuildWebComponent.spec.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/@vue/cli-service-global/index.js b/packages/@vue/cli-service-global/index.js index 4aff584009..5763e59f12 100644 --- a/packages/@vue/cli-service-global/index.js +++ b/packages/@vue/cli-service-global/index.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) ] }) } diff --git a/packages/@vue/cli-service-global/lib/createConfigPlugin.js b/packages/@vue/cli-service-global/lib/globalConfigPlugin.js similarity index 98% rename from packages/@vue/cli-service-global/lib/createConfigPlugin.js rename to packages/@vue/cli-service-global/lib/globalConfigPlugin.js index 2646f0b3ee..bdcaaa78f6 100644 --- a/packages/@vue/cli-service-global/lib/createConfigPlugin.js +++ b/packages/@vue/cli-service-global/lib/globalConfigPlugin.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') diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js index 3fdb4ae943..c82083b7b3 100644 --- a/packages/@vue/cli-service/__tests__/buildLib.spec.js +++ b/packages/@vue/cli-service/__tests__/buildLib.spec.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(/]+app[^>]+\.js>/) - expect(index).toMatch(/]+vendor[^>]+\.js>/) - - const vendorFile = index.match(/]+(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 () => { diff --git a/packages/@vue/cli-service/__tests__/buildMultiWc.spec.js b/packages/@vue/cli-service/__tests__/buildMultiWc.spec.js new file mode 100644 index 0000000000..c1471f7fd6 --- /dev/null +++ b/packages/@vue/cli-service/__tests__/buildMultiWc.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() +}) diff --git a/packages/@vue/cli-service/__tests__/buildWc.spec.js b/packages/@vue/cli-service/__tests__/buildWc.spec.js new file mode 100644 index 0000000000..d40303b7a3 --- /dev/null +++ b/packages/@vue/cli-service/__tests__/buildWc.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() +}) diff --git a/packages/@vue/cli-service/__tests__/buildWebComponent.spec.js b/packages/@vue/cli-service/__tests__/buildWebComponent.spec.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/@vue/cli-service/lib/commands/build/demo-multi-wc.html b/packages/@vue/cli-service/lib/commands/build/demo-multi-wc.html new file mode 100644 index 0000000000..349bfd1355 --- /dev/null +++ b/packages/@vue/cli-service/lib/commands/build/demo-multi-wc.html @@ -0,0 +1,6 @@ +<%- htmlWebpackPlugin.options.libName %> demo + + +<% for (const comp of htmlWebpackPlugin.options.components) { %> +<<%= comp %>>> +<% } %> diff --git a/packages/@vue/cli-service/lib/commands/build/generateMultiWcEntry.js b/packages/@vue/cli-service/lib/commands/build/generateMultiWcEntry.js index 33bb32869a..aca732b63b 100644 --- a/packages/@vue/cli-service/lib/commands/build/generateMultiWcEntry.js +++ b/packages/@vue/cli-service/lib/commands/build/generateMultiWcEntry.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) diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js index c7164062c6..76a27018b8 100644 --- a/packages/@vue/cli-service/lib/commands/build/index.js +++ b/packages/@vue/cli-service/lib/commands/build/index.js @@ -15,9 +15,11 @@ module.exports = (api, options) => { '--name': `name for lib or (multi-)web-component mode (default: "name" in package.json or entry filename)` } }, args => { - args.entry = args._[0] + args.entry = args.entry || args._[0] for (const key in defaults) { - if (args[key] == null) args[key] = defaults[key] + if (args[key] == null) { + args[key] = defaults[key] + } } if (args.dest == null) { args.dest = options.outputDir diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js index c0e362d7db..d83aaaafea 100644 --- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js +++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js @@ -1,7 +1,11 @@ const path = require('path') module.exports = (api, { entry, name, dest }, options) => { - const libName = name || api.service.pkg.name || entry.replace(/\.(js|vue)$/, '') + const libName = ( + name || + api.service.pkg.name || + path.basename(entry).replace(/\.(jsx?|vue)$/, '') + ) // setting this disables app-only configs process.env.VUE_CLI_TARGET = 'lib' // inline all static asset files since there is no publicPath handling diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWebComponentConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveWebComponentConfig.js index 9a29380c35..04d2996df2 100644 --- a/packages/@vue/cli-service/lib/commands/build/resolveWebComponentConfig.js +++ b/packages/@vue/cli-service/lib/commands/build/resolveWebComponentConfig.js @@ -1,4 +1,8 @@ const path = require('path') +const { + filesToComponentNames, + generateMultiWebComponentEntry +} = require('./generateMultiWcEntry') module.exports = (api, { target, entry, name, dest, prefix }) => { const { log, error } = require('@vue/cli-shared-utils') @@ -8,22 +12,27 @@ module.exports = (api, { target, entry, name, dest, prefix }) => { process.exit(1) } - const libName = name || api.service.pkg.name || entry.replace(/\.(js|vue)$/, '') + 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}")`) } 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 files = require('globby').sync([entry], { cwd: api.resolve('.') }) - if (!files.length) { + resolvedFiles = require('globby').sync([entry], { cwd: api.resolve('.') }) + if (!resolvedFiles.length) { abort(`glob pattern "${entry}" did not match any files.`) } - dynamicEntry = require('./generateMultiWcEntry')(libName, files) + dynamicEntry = generateMultiWebComponentEntry(libName, resolvedFiles) } // setting this disables app-only configs @@ -55,6 +64,12 @@ module.exports = (api, { target, entry, name, dest, prefix }) => { .set('~entry', api.resolve(entry)) } + // make sure not to transpile wc-wrapper + config.module + .rule('js') + .exclude + .add(/vue-wc-wrapper/) + // only minify min entry if (!minify) { config.plugins.delete('uglify') @@ -91,10 +106,13 @@ module.exports = (api, { target, entry, name, dest, prefix }) => { config .plugin('demo-html') .use(require('html-webpack-plugin'), [{ - template: path.resolve(__dirname, './demo-wc.html'), + template: path.resolve(__dirname, `./demo-${target}.html`), inject: false, filename: 'demo.html', - libName + libName, + components: target === 'multi-wc' + ? filesToComponentNames(libName, resolvedFiles).map(c => c.kebabName) + : null }]) } diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index 87e667c115..50dde4a9eb 100644 --- a/packages/@vue/cli-service/package.json +++ b/packages/@vue/cli-service/package.json @@ -23,7 +23,7 @@ "dependencies": { "@vue/cli-overlay": "^3.0.0-alpha.5", "@vue/cli-shared-utils": "^3.0.0-alpha.5", - "@vue/web-component-wrapper": "^1.0.0", + "@vue/web-component-wrapper": "^1.1.2", "address": "^1.0.3", "autodll-webpack-plugin": "^0.3.8", "autoprefixer": "^7.2.5", @@ -57,7 +57,7 @@ "thread-loader": "^1.1.2", "uglifyjs-webpack-plugin": "^1.1.6", "url-loader": "^0.6.2", - "vue-loader": "^14.1.0", + "vue-loader": "^14.1.1", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0", "webpack-chain": "^4.5.0", diff --git a/packages/@vue/cli/bin/vue.js b/packages/@vue/cli/bin/vue.js index ebfa401258..21bc86de4f 100755 --- a/packages/@vue/cli/bin/vue.js +++ b/packages/@vue/cli/bin/vue.js @@ -127,7 +127,9 @@ function cleanArgs (cmd) { const args = {} cmd.options.forEach(o => { const key = o.long.replace(/^--/, '') - args[key] = cmd[key] + if (typeof cmd[key] === 'string') { + args[key] = cmd[key] + } }) return args } diff --git a/yarn.lock b/yarn.lock index 5d4eb853dc..3785fbed4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -713,9 +713,9 @@ dependencies: lodash "^4.17.4" -"@vue/web-component-wrapper@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.0.0.tgz#67b357616b38289836ae5f18bfb0095ba66b3fe4" +"@vue/web-component-wrapper@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.1.2.tgz#9148b4655560bb5e77c0ab7d9836b98d5cd2ffb6" JSONStream@^1.0.4: version "1.3.2" @@ -10081,9 +10081,9 @@ vue-jest@^2.0.0: tsconfig "^7.0.0" vue-template-es2015-compiler "^1.5.3" -vue-loader@^14.1.0: - version "14.1.0" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.1.0.tgz#ae31d62a11421061fca8bac30cbc15875df886d3" +vue-loader@^14.1.1: + version "14.1.1" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.1.1.tgz#331f197fcea790d6b8662c29b850806e7eb29342" dependencies: consolidate "^0.14.0" hash-sum "^1.0.2"