feat: use partial imports from vuetify/lib

README.md

@@ -6,45 +6,39 @@
 ```js
 // webpack.config.js
 
-exports.module.rules = [{
-  test: /\.vue$/,
-  use: ['vuetify-loader', 'vue-loader'],
-  exclude: /node_modules/
-}]
+const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
+
+exports.plugins.push(
+  new VuetifyLoaderPlugin()
+)
 ```
 
 You can also provide a custom match function to import your own project's components too:
 ```js
 // webpack.config.js
 
-exports.module.rules = [{
-  test: /\.vue$/,
-  use: [
-    {
-      loader: 'vuetify-loader',
-      options: {
-        /**
-         * This function will be called for every tag used in each vue component
-         * It should return an array, the first element will be inserted into the
-         * components array, the second should be a corresponding import
-         *
-         * originalTag - the tag as it was originally used in the template
-         * kebabTag    - the tag normalised to kebab-case
-         * camelTag    - the tag normalised to PascalCase
-         * path        - a relative path to the current .vue file
-         * component   - a parsed representation of the current component
-         */
-        match (originalTag, { kebabTag, camelTag, path, component }) {
-          if (kebabTag.startsWith('core-')) {
-            return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
-          }
-        }
+const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
+
+exports.plugins.push(
+  new VuetifyLoaderPlugin({
+    /**
+     * This function will be called for every tag used in each vue component
+     * It should return an array, the first element will be inserted into the
+     * components array, the second should be a corresponding import
+     *
+     * originalTag - the tag as it was originally used in the template
+     * kebabTag    - the tag normalised to kebab-case
+     * camelTag    - the tag normalised to PascalCase
+     * path        - a relative path to the current .vue file
+     * component   - a parsed representation of the current component
+     */
+    match (originalTag, { kebabTag, camelTag, path, component }) {
+      if (kebabTag.startsWith('core-')) {
+        return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
       }
-    },
-    'vue-loader'
-  ],
-  exclude: /node_modules/
-}]
+    }
+  })
+)
 ```
 
 ```html
@@ -75,7 +69,7 @@ Will be compiled into:
 </template>
 
 <script>
-  import { VCard } from 'vuetify/es5/components/VCard'
+  import { VCard } from 'vuetify/lib'
   import CoreForm from '@/components/core/Form.vue'
 
   export default {

dev/src/main.js

@@ -1,6 +1,6 @@
 import 'vuetify/src/stylus/app.styl'
 import Vue from 'vue'
-import Vuetify from 'vuetify/lib/components/Vuetify'
+import Vuetify from 'vuetify/lib'
 import App from './App.vue'
 
 Vue.use(Vuetify)

lib/matcher/generator.js

@@ -11,16 +11,4 @@ const components = require('vuetify/es5/components')
 
 Module._load = originalLoader
 
-const componentMap = {}
-
-for (const name in components) {
-  if (components[name].hasOwnProperty('$_vuetify_subcomponents')) {
-    for (const childName in components[name].$_vuetify_subcomponents) {
-      componentMap[childName] = { name: hyphenate(childName), component: childName, group: name }
-    }
-  } else {
-    componentMap[name] = { name: hyphenate(name), component: name, group: name }
-  }
-}
-
-module.exports = Object.values(componentMap)
+module.exports = Object.keys(components)

lib/matcher/index.js

@@ -1,8 +1,7 @@
-const componentMap = require('./generator')
+const components = require('./generator')
 
 module.exports = function match (_, { kebabTag, camelTag: tag }) {
   if (!kebabTag.startsWith('v-')) return
 
-  const component = componentMap.find(val => val.component === tag)
-  if (component) return [tag, `import { ${tag} } from 'vuetify/lib/components/${component.group}'`]
+  if (components.includes(tag)) return [tag, `import { ${tag} } from 'vuetify/lib'`]
 }

lib/plugin.js

@@ -11,23 +11,22 @@ class VuetifyLoaderPlugin {
     const { rules } = new RuleSet(rawRules)
 
     // find the rule that applies to vue files
-    let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
-    if (vueRuleIndex < 0) {
-      vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
-    }
+    let vueRuleIndex = rules.findIndex(rule => rule.use.find(u => u.loader === 'vue-loader'))
     const vueRule = rules[vueRuleIndex]
 
     if (!vueRule) {
       throw new Error(
-        `[VuetifyLoaderPlugin Error] No matching rule for .vue files found.\n` +
-        `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
+        `[VuetifyLoaderPlugin Error] No matching rule for vue-loader found.\n` +
+        `Make sure there is at least one root-level rule that uses vue-loader.`
       )
     }
 
     vueRule.use.unshift({
       loader: require.resolve('./loader'),
       options: this.options
     })
+
+    compiler.options.module.rules = rules
   }
 }
 

package.json

@@ -25,6 +25,7 @@
     "webpack": "^4.20.2"
   },
   "peerDependencies": {
+    "vuetify": "^1.3.0",
     "vue-template-compiler": "^2.5.0"
   }
 }