fix(runtime): Fix Runtime component adding in vue2

Within Vue2, the addComponent will occasionally fail due to the component / script signature being inconsistent. To fix this we're using the vuetify addComponent code as it's known to work

Vue3 does not seem to have this issue so it's still using the old version

Have also taken the opportunity to update the dependencies so the build does not include them.

Author: harlan-zw

.eslintignore

@@ -6,3 +6,4 @@ coverage
 index.js
 examples
 generator
+src/runtime

index.js

@@ -1,3 +1,3 @@
-var loader = require('./dist');
+var plugin = require('./dist');
 
-module.exports = loader;
+module.exports = plugin;

package.json

@@ -6,7 +6,7 @@
   "types": "dist",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/loonpwn/vue-cli-plugin-import-components.git"
+    "url": "git+https://github.com/harlan-zw/vue-cli-plugin-import-components.git"
   },
   "files": [
     "/dist",
@@ -23,7 +23,7 @@
     "automatic"
   ],
   "scripts": {
-    "build": "yarn clean && bili src/index.ts,src/loader.ts",
+    "build": "yarn clean && bili src/index.ts,src/loader.ts && mkdist --src src/runtime --dist dist/runtime --format cjs",
     "clean": "rimraf dist",
     "test": "jest --coverage",
     "release": "dotenv release-it --",
@@ -32,9 +32,9 @@
   "author": "Harlan Wilton",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/loonpwn/vue-cli-plugin-import-components/issues"
+    "url": "https://github.com/harlan-zw/vue-cli-plugin-import-components/issues"
   },
-  "homepage": "https://github.com/loonpwn/vue-cli-plugin-import-components#readme",
+  "homepage": "https://github.com/harlan-zw/vue-cli-plugin-import-components#readme",
   "publishConfig": {
     "access": "public"
   },
@@ -49,19 +49,21 @@
     "@types/node": "14.14.21",
     "@types/webpack": "^4.41.26",
     "@vue/cli-service": "^4.5.10",
-    "@vue/cli-shared-utils": "^4.5.10",
     "@vue/compiler-sfc": "^3.0.5",
     "bili": "^5.0.5",
-    "chalk": "^4.1.0",
     "dotenv-cli": "^4.0.0",
     "eslint": "^7.29.0",
-    "loader-utils": "^2.0.0",
-    "lodash": "^4.17.20",
+    "mkdist": "^0.3.2",
     "pug": "^3.0.0",
     "release-it": "^14.2.2",
     "rollup-plugin-typescript2": "^0.29.0",
-    "typescript": "^4.1.3",
-    "upath": "^2.0.1"
+    "typescript": "^4.1.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "globby": "^11.0.4",
+    "loader-utils": "^2.0.0",
+    "lodash": "^4.17.21",
+    "upath": "^2.0.1",
+    "@vue/cli-shared-utils": "^4.5.13"
+  }
 }

src/index.ts

@@ -60,10 +60,12 @@ const plugin: ServicePlugin = (api: PluginAPI, options: VueCliPluginComponentsOp
 
   if (vueVersion === 2) {
     pluginOptions.extractor = vue2.extractTagsFromSfc as TagExtractor
+    pluginOptions.injector = vue2.injectComponents
     pluginOptions.compiler = loadVue2TemplateCompiler(api)
   }
   else if (vueVersion === 3) {
     pluginOptions.extractor = vue3.extractTagsFromSfc as TagExtractor
+    pluginOptions.injector = vue3.injectComponents
     pluginOptions.compiler = loadVue3Compiler(api)
   }
   else {
@@ -89,4 +91,9 @@ const plugin: ServicePlugin = (api: PluginAPI, options: VueCliPluginComponentsOp
   return true
 }
 
+export {
+  VueCliPluginComponentsOptions,
+  PluginOptions,
+}
+
 export default plugin

src/loader.ts

@@ -2,7 +2,6 @@ import { loader as webpackLoader } from 'webpack'
 import { getOptions } from 'loader-utils'
 import { resolve } from 'upath'
 import { matcher, scanComponents } from './util/scanComponents'
-import { injectComponents } from './util/injectComponents'
 import { PluginOptions, Component } from './types'
 
 export default async function loader(this: webpackLoader.LoaderContext, source: string) {
@@ -33,5 +32,5 @@ export default async function loader(this: webpackLoader.LoaderContext, source:
   if (components.length <= 0)
     return source
 
-  return injectComponents(source, components)
+  return options.injector.call(this, source, components)
 }

src/runtime/installComponents.js

@@ -0,0 +1,21 @@
+// Source: Vuetify Loader, see https://github.com/vuetifyjs/vuetify-loader/blob/master/lib/runtime/installComponents.js
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+module.exports = function installComponents (component, components) {
+  var options = typeof component.exports === 'function'
+    ? component.exports.extendOptions
+    : component.options
+
+  if (typeof component.exports === 'function') {
+    options.components = component.exports.options.components
+  }
+
+  options.components = options.components || {}
+
+  for (var i in components) {
+    options.components[i] = options.components[i] || components[i]
+  }
+}

src/types.ts

@@ -29,6 +29,7 @@ export interface PluginOptions {
 
   // hidden options
   extractor: TagExtractor
+  injector: any
   vueVersion: 2 | 3
   compiler: any
 }

src/vue2/index.ts

@@ -1,3 +1,4 @@
 export { default as parseSfcComponent } from './parseSfc'
 export { default as compileTemplateFromDescriptor } from './compileTemplateFromDescriptor'
 export { default as extractTagsFromSfc } from './extractTagsFromSfc'
+export { default as injectComponents } from './injectComponents'

src/vue2/injectComponents.ts

@@ -0,0 +1,23 @@
+import { loader as webpackLoader } from 'webpack'
+import { stringifyRequest } from 'loader-utils'
+import type { Component } from '../types'
+
+const installComponents = require.resolve('./runtime/installComponents')
+
+export default function injectComponents(this: webpackLoader.LoaderContext, source: string, components: Component[]) {
+  const installComponentRuntime = `const installComponents = require(${stringifyRequest(this, `!${installComponents}`)})`
+
+  const injectScript
+    = `/* vue-cli-plugin-import-components */
+${installComponentRuntime}
+${components.map(c => c.import).join('\n')}
+installComponents(component, {${components.map(c => c.pascalName).join(', ')}});`
+
+  const hotReload = source.indexOf('/* hot reload */')
+  if (hotReload > -1)
+    source = `${source.slice(0, hotReload) + injectScript}\n\n${source.slice(hotReload)}`
+  else
+    source += `\n\n${injectScript}`
+
+  return source
+}

src/vue3/index.ts

@@ -1,3 +1,4 @@
 export { default as parseSfcComponent } from './parseSfc'
 export { default as compileTemplateFromDescriptor } from './compileTemplateFromDescriptor'
 export { default as extractTagsFromSfc } from './extractTagsFromSfc'
+export { default as injectComponents } from './injectComponents'