feat(build): honor custom component name for single file wc builds (fixes #1146)

Fixes issue that prevented single entry wc builds from honoring the `--name` argument.
The build process would just use the entry file name for the component name when registering the component previously

Author: test

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

@@ -17,7 +17,10 @@ module.exports = (api, { target, entry, name }) => {
   const isAsync = /async/.test(target)
 
   // generate dynamic entry based on glob files
-  const resolvedFiles = require('globby').sync([entry], { cwd: api.resolve('.') })
+  const resolvedFiles = require('globby').sync([entry], {
+    cwd: api.resolve('.')
+  })
+
   if (!resolvedFiles.length) {
     abort(`entry pattern "${entry}" did not match any files.`)
   }
@@ -28,17 +31,19 @@ module.exports = (api, { target, entry, name }) => {
     libName = name || fileToComponentName('', resolvedFiles[0]).kebabName
     prefix = ''
     if (libName.indexOf('-') < 0) {
-      abort(`--name must contain a hyphen when building a single web component.`)
+      abort(
+        `--name must contain a hyphen when building a single web component.`
+      )
     }
   } else {
     // multi mode
-    libName = prefix = (name || api.service.pkg.name)
+    libName = prefix = name || api.service.pkg.name
     if (!libName) {
       abort(`--name is required when building multiple web components.`)
     }
   }
 
-  const dynamicEntry = resolveEntry(prefix, resolvedFiles, isAsync)
+  const dynamicEntry = resolveEntry(prefix, libName, resolvedFiles, isAsync)
 
   function genConfig (minify, genHTML) {
     const config = api.resolveChainableWebpackConfig()
@@ -47,18 +52,11 @@ module.exports = (api, { target, entry, name }) => {
     const entryName = `${libName}${minify ? `.min` : ``}`
 
     // set proxy entry for *.vue files
-    config
-      .entry(entryName)
-        .add(dynamicEntry)
-    config.resolve
-      .alias
-        .set('~root', api.resolve('.'))
+    config.entry(entryName).add(dynamicEntry)
+    config.resolve.alias.set('~root', api.resolve('.'))
 
     // make sure not to transpile wc-wrapper
-    config.module
-      .rule('js')
-        .exclude
-          .add(/vue-wc-wrapper/)
+    config.module.rule('js').exclude.add(/vue-wc-wrapper/)
 
     // only minify min entry
     if (!minify) {
@@ -74,47 +72,48 @@ module.exports = (api, { target, entry, name }) => {
       .publicPath('')
 
     // externalize Vue in case user imports it
-    config
-      .externals({
-        vue: 'Vue'
-      })
+    config.externals({
+      vue: 'Vue'
+    })
 
     config
       .plugin('web-component-options')
-        .use(require('webpack/lib/DefinePlugin'), [{
+      .use(require('webpack/lib/DefinePlugin'), [
+        {
           'process.env': {
             CUSTOM_ELEMENT_NAME: JSON.stringify(libName)
           }
-        }])
+        }
+      ])
 
     // enable shadow mode in vue-loader
     config.module
       .rule('vue')
-        .use('vue-loader')
-          .tap(options => {
-            options.shadowMode = true
-            return options
-          })
+      .use('vue-loader')
+      .tap(options => {
+        options.shadowMode = true
+        return options
+      })
 
     if (genHTML) {
-      config
-        .plugin('demo-html')
-          .use(require('html-webpack-plugin'), [{
-            template: path.resolve(__dirname, `./demo-wc.html`),
-            inject: false,
-            filename: 'demo.html',
-            libName,
-            components: resolvedFiles.map(file => {
-              return fileToComponentName(prefix, file).kebabName
-            })
-          }])
+      config.plugin('demo-html').use(require('html-webpack-plugin'), [
+        {
+          template: path.resolve(__dirname, `./demo-wc.html`),
+          inject: false,
+          filename: 'demo.html',
+          libName,
+          components:
+            prefix === ''
+              ? [libName]
+              : resolvedFiles.map(file => {
+                return fileToComponentName(prefix, file).kebabName
+              })
+        }
+      ])
     }
 
     return api.resolveWebpackConfig(config)
   }
 
-  return [
-    genConfig(false, true),
-    genConfig(true, false)
-  ]
+  return [genConfig(false, true), genConfig(true, false)]
 }

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

@@ -3,14 +3,30 @@ const path = require('path')
 
 const camelizeRE = /-(\w)/g
 const camelize = str => {
-  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
 }
 
 const hyphenateRE = /\B([A-Z])/g
 const hyphenate = str => {
   return str.replace(hyphenateRE, '-$1').toLowerCase()
 }
 
+/**
+ * Creates the script to add the component to the custom elements
+ * @param {string} prefix The prefix for the component library
+ * @param {string} component The component name for single entry builds, component file for multi-entry builds
+ * @param {string} file The file for the component
+ * @param {boolean} async Whether to load component async or not
+ */
+const createElement = (prefix, component, file, async) => {
+  const { camelName, kebabName } = exports.fileToComponentName(prefix, component)
+
+  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`
+}
+
 exports.fileToComponentName = (prefix, file) => {
   const basename = path.basename(file).replace(/\.(jsx?|vue)$/, '')
   const camelName = camelize(basename)
@@ -22,8 +38,13 @@ exports.fileToComponentName = (prefix, file) => {
   }
 }
 
-exports.resolveEntry = (prefix, files, async) => {
+exports.resolveEntry = (prefix, libName, files, async) => {
   const filePath = path.resolve(__dirname, 'entry-wc.js')
+  const elements =
+    prefix === ''
+      ? [createElement('', libName, files[0])]
+      : files.map(file => createElement(prefix, file, file, async)).join('\n')
+
   const content = `
 import Vue from 'vue'
 import wrap from '@vue/web-component-wrapper'
@@ -40,15 +61,7 @@ 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()
+${elements}`.trim()
   fs.writeFileSync(filePath, content)
   return filePath
 }