feat: shadowMode

Author: yyx990803

lib/loader.js

@@ -12,7 +12,6 @@ const styleCompilerPath = normalize.lib('style-compiler/index')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const templatePreprocessorPath = normalize.lib('template-compiler/preprocessor')
 const componentNormalizerPath = normalize.lib('runtime/component-normalizer')
-const componentNormalizerESMPath = normalize.lib('runtime/component-normalizer.esm')
 
 // dep loaders
 const styleLoaderPath = normalize.dep('vue-style-loader')
@@ -64,6 +63,10 @@ module.exports = function (content) {
     query
   )
 
+  // shadow mode is an internal option
+  // enabled via vue-cli's --target web-component
+  const isShadowMode = !!options.shadowMode
+
   // disable esModule in inject mode
   // because import/export must be top-level
   if (query.inject) {
@@ -167,11 +170,12 @@ module.exports = function (content) {
   // add requires for styles
   let cssModules
   if (parts.styles.length) {
-    let styleInjectionCode = 'function injectStyle (ssrContext) {\n'
+    const needsLazyInjection = isServer || isShadowMode
+    let styleInjectionCode = 'function injectStyle (context) {\n'
     if (needsHotReload) {
       styleInjectionCode += `  if (disposed) return\n`
     }
-    if (isServer) {
+    if (needsLazyInjection) {
       styleInjectionCode += `var i\n`
     }
     parts.styles.forEach((style, i) => {
@@ -182,11 +186,11 @@ module.exports = function (content) {
 
       const hasStyleLoader = requireString.indexOf('style-loader') > -1
       const hasVueStyleLoader = requireString.indexOf('vue-style-loader') > -1
-      // vue-style-loader exposes inject functions during SSR so they are
-      // always called
+      // vue-style-loader exposes inject functions in SSR or shadow mode so they
+      // are always called
       const invokeStyle =
-        isServer && hasVueStyleLoader
-          ? code => `;(i=${code},i.__inject__&&i.__inject__(ssrContext),i)\n`
+        needsLazyInjection && hasVueStyleLoader
+          ? code => `;(i=${code},i.__inject__&&i.__inject__(context),i)\n`
           : code => `  ${code}\n`
 
       const moduleName = style.module === true ? '$style' : style.module
@@ -261,16 +265,16 @@ module.exports = function (content) {
   //   scopeId,
   //   moduleIdentifier (server only)
   // )
+  const componentNormalizerRequest = loaderUtils.stringifyRequest(
+    loaderContext,
+    '!' + componentNormalizerPath
+  )
   if (!options.esModule) {
     output +=
-      'var normalizeComponent = require(' +
-      loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
-      ')\n'
+      `var normalizeComponent = require(${componentNormalizerRequest}).default\n`
   } else {
     output +=
-      `import normalizeComponent from ` +
-      loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerESMPath) +
-      '\n'
+      `import normalizeComponent from ${componentNormalizerRequest}\n`
   }
 
   // <script>
@@ -332,10 +336,13 @@ module.exports = function (content) {
     '\n'
 
   // style
+  // the injection function is passed to the normalizer and injected into
+  // component lifecycle hooks. In shadow mode, we expose the inject function
+  // directly on the component's options so we don't pass it here.
   output += '/* styles */\n'
   output +=
     'var __vue_styles__ = ' +
-    (parts.styles.length ? 'injectStyle' : 'null') +
+    (parts.styles.length && !isShadowMode ? 'injectStyle' : 'null') +
     '\n'
 
   // scopeId
@@ -363,6 +370,21 @@ module.exports = function (content) {
     '  __vue_module_identifier__\n' +
     ')\n'
 
+  // expose style injection on options
+  // this will be used by vue-cli's web component entry
+  if (isShadowMode) {
+    // the shadow inject id will be the module id of the entry Vue component,
+    // which is the frist Vue component encountered in this compilation
+    let shadowInjectId = process.env.VUE_SHADOW_INJECT_ID
+    if (!shadowInjectId) {
+      shadowInjectId = process.env.VUE_SHADOW_INJECT_ID =
+        `__vue_shadow_injector__${moduleId.replace(`data-v-`, '')}`
+    }
+    output +=
+      `var shadowInjectId = Component.options.__shadowInjectId = '${shadowInjectId}'\n` +
+      `;(window[shadowInjectId] || (window[shadowInjectId] = [])).push(injectStyle)\n`
+  }
+
   // development-only code
   if (!isProduction) {
     // add filename in dev

lib/runtime/component-normalizer.esm.js

@@ -4,7 +4,7 @@
 // This module is a runtime utility for cleaner component module output and will
 // be included in the final webpack user bundle.
 
-module.exports = function normalizeComponent (
+export default function normalizeComponent (
   rawScriptExports,
   compiledTemplate,
   functionalTemplate,