feat: Use runtime helper package instead of inline generated code

Author: znck

package.json

@@ -44,12 +44,13 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.46",
-    "@vue/component-compiler": "^3.4.4",
+    "@vue/component-compiler": "^3.6",
     "@vue/component-compiler-utils": "^2.1.0",
     "debug": "^2.6.0",
     "hash-sum": "^1.0.2",
     "querystring": "^0.2.0",
-    "rollup-pluginutils": "^2.0.1"
+    "rollup-pluginutils": "^2.0.1",
+    "vue-runtime-helpers": "^0.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.46",

src/index.ts

@@ -115,6 +115,10 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
   d(`Build environment: ${isProduction ? 'production' : 'development'}`)
   d(`Build target: ${process.env.VUE_ENV || 'browser'}`)
 
+  if (!opts.normalizer) opts.normalizer = '~vue-runtime-helpers/normalize-component.js'
+  if (!opts.styleInjector) opts.styleInjector = '~vue-runtime-helpers/inject-style/browser.js'
+  if (!opts.styleInjectorSSR) opts.styleInjectorSSR = '~vue-runtime-helpers/inject-style/server.js'
+
   createVuePartRequest.defaultLang = {
     ...createVuePartRequest.defaultLang,
     ...opts.defaultLang
@@ -207,8 +211,10 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
         descriptors.set(filename, descriptor)
         const input: any = {
           scopeId,
-          styles: descriptor.styles.map(style =>
-            compiler.compileStyle(filename, scopeId, style)
+          styles: await Promise.all(
+            descriptor.styles.map(style =>
+              compiler.compileStyleAsync(filename, scopeId, style)
+            )
           ),
           customBlocks: []
         }

test/setup/index.ts

@@ -17,7 +17,7 @@ const cache = {}
 export async function build(filename, css = false): Promise<string> {
   const cacheKey = JSON.stringify({filename, css})
   if (cacheKey in cache) return cache[cacheKey]
-  let style: string | undefined
+  let style: string = ''
   const input = filename + '__app.js'
   const options = {defaultLang: {markdown: 'pluginMarkdown'}, css: css, style: {
     postcssPlugins: [assets({ basePath: '/' })]

yarn.lock

@@ -1269,9 +1269,9 @@
     source-map "^0.5.6"
     vue-template-es2015-compiler "^1.6.0"
 
-"@vue/component-compiler@^3.4.4":
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.4.4.tgz#4bec11116116c292f1f865afc2d88421953fc393"
+"@vue/component-compiler@^3.6":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.6.0.tgz#8db313e50eaa2903cef5aac68c37a09364dba79d"
   dependencies:
     "@vue/component-compiler-utils" "^2.1.0"
     clean-css "^4.1.11"
@@ -8902,6 +8902,10 @@ vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
 
+vue-runtime-helpers@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-0.2.0.tgz#8f8aa9e5ed40be2f3716c3ef8ee5e319290bedde"
+
 vue-server-renderer@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.5.16.tgz#279ef8e37e502a0de3a9ae30758cc04a472eaac0"