404
Looks like we've got some broken links.Take me home.
diff --git a/README.md b/README.md index 73497d7..de3ae8f 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,23 @@ Vue plugin with conventions for automatically wiring components, pages and route - Docs will be available at https://kaizendorks.github.io/vue-autowire/. -Use it by cloning the repo and building with `npm run build`. \ No newline at end of file +Use it by cloning the repo and building with `npm run build`. + +``` +import Vue from 'vue' +import App from './App.vue' +import VueAutowire from './autowire'; + +Vue.config.productionTip = false + +Vue.use(VueAutowire, { + // All .js and .vue files except the ones ending with .async.vue + context: require.context('./', true, /\/(?:[^.]+|(?!\.async\.vue$))(\.js|\.vue)$/), + // All the .async.vue files as async components on their own vue file + asyncContext: require.context('./', true, /async\.vue$/, 'lazy') +}) + +new Vue({ + render: h => h(App), +}).$mount('#app') +``` diff --git a/dist/vue-autowire.common.js b/dist/vue-autowire.common.js index a7970e9..c316e04 100644 --- a/dist/vue-autowire.common.js +++ b/dist/vue-autowire.common.js @@ -8,39 +8,37 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js/ + pattern: /\.router.js$/ }, components: { - enabled: false, + enabled: true, pattern: /\/components\/.*\.vue$/ } }; /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Load router files * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerRoutes (Vue, requireInstance, options) { - var routeFiles = requireInstance +function registerRoutes (Vue, options) { + var routeFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.routes.pattern); }); return routeFiles.map(function (routeFile) { - var routerConfig = requireInstance(routeFile); + var routerConfig = options.requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Register components files using Vue.component and requiring the file from the context * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerComponents (Vue, requireInstance, options) { - var componentsFiles = requireInstance +function registerComponents (Vue, options) { + var componentsFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.components.pattern); }); @@ -48,43 +46,106 @@ function registerComponents (Vue, requireInstance, options) { return componentsFiles.map(function (file) { var name = getFileName(file); - var vueFile = requireInstance(file); - var component = vueFile.hasOwnProperty('default') ? vueFile.default : vueFile; - return Vue.component(name, component); + var component = options.requireContext(file); + // Unwrap "default" from ES6 module + if (component.hasOwnProperty('default')) { component = component.default; } + Vue.component(name, component); + + // Return the registered component + return Vue.component(name); }); } /** - @param {Object} options User defined options to be parsed - @returns {Object} * @param {Object} options + * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Each of these components will be on its own chunk + * @param {Vue} Vue VueJS instance + * @param {Object} options */ -function parseOptions (options) { - options = options || {}; +function registerAsyncComponents (Vue, options) { + var componentsFiles = options.requireAsyncContext + .keys() + .filter(function (file) { return file.match(options.components.pattern); }); + + var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; + + return componentsFiles.map(function (file) { + var name = getFileName(file); + // Register as async component https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components + Vue.component( + name, + function () { return options.requireAsyncContext(file); } + ); + + // Return the registered component + return Vue.component(name); + }); +} + +/** + * Merges user provided options with the library defaults + * @param {Object} userOptions User defined options to be parsed + * @returns {Object} + */ +function parseOptions (userOptions) { + userOptions = userOptions || {}; + return { - routes: Object.assign({}, _defaults.routes, options.routes), - components: Object.assign({}, _defaults.components, options.components) + // context and asyncContext are user provided using the require.context API + // which allows a 4th argument to specify the mode in which to load files + // By default this is 'sync', but can be made async as in require.context('./', true, /async\.vue$/, 'lazy') + // See https://github.com/webpack/docs/wiki/context#context-module-api + requireContext: userOptions.context, + requireAsyncContext: userOptions.asyncContext && userOptions.asyncContext.id.includes("lazy") ? + userOptions.asyncContext : + null, + + // Async mode is enabled/disabled depending on the last argument provided to require.context + // For example, enable async with: require.context('./', true, /(\.js|\.vue)$/, 'lazy') + // async: requireContext.id.includes("lazy"), + + // Merge user-specific options for each of the different asset types + routes: Object.assign({}, _defaults.routes, userOptions.routes), + components: Object.assign({}, _defaults.components, userOptions.components) }; } -function register (options, context, Vue) { - options = parseOptions(options); +/** + * Register each of the different type of assets if they are enabled by the options + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options to be parsed + * @param {require} requireContext webpack require.context instance. https://github.com/webpack/docs/wiki/context#context-module-api + * @returns {Object} The Autowire object with all the assets that were wired + */ +function register (Vue, userOptions) { + var options = parseOptions(userOptions); // Returned autowiring object with registered elements var aw = { routes: [], components: [] }; - if (options.routes.enabled) { - aw.routes = registerRoutes(Vue, context, options); + if (options.routes.enabled && options.requireContext) { + aw.routes.push(registerRoutes(Vue, options)); + } + if (options.components.enabled && options.requireContext) { + aw.components.push(registerComponents(Vue, options)); } - if (options.components.enabled) { - aw.components = registerComponents(Vue, context, options); + if (options.components.enabled && options.requireAsyncContext) { + aw.components.push(registerAsyncComponents(Vue, options)); } + return aw; } -function install (Vue, options) { - Vue.autowire = register(options, options.context, Vue); +/** + * Vue plugin definition. See https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options + * @returns {Object} The Autowire object with all the assets that were wired + */ +function install (Vue, userOptions) { + Vue.autowire = register(Vue, userOptions); } module.exports = install; diff --git a/dist/vue-autowire.esm.browser.js b/dist/vue-autowire.esm.browser.js index 28c5460..ce78f15 100644 --- a/dist/vue-autowire.esm.browser.js +++ b/dist/vue-autowire.esm.browser.js @@ -6,39 +6,37 @@ const _defaults = { routes: { enabled: true, - pattern: /\.router.js/ + pattern: /\.router.js$/ }, components: { - enabled: false, + enabled: true, pattern: /\/components\/.*\.vue$/ } }; /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Load router files * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerRoutes (Vue, requireInstance, options) { - const routeFiles = requireInstance +function registerRoutes (Vue, options) { + const routeFiles = options.requireContext .keys() .filter(file => file.match(options.routes.pattern)); return routeFiles.map(routeFile => { - const routerConfig = requireInstance(routeFile); + const routerConfig = options.requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Register components files using Vue.component and requiring the file from the context * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerComponents (Vue, requireInstance, options) { - const componentsFiles = requireInstance +function registerComponents (Vue, options) { + const componentsFiles = options.requireContext .keys() .filter(file => file.match(options.components.pattern)); @@ -46,43 +44,106 @@ function registerComponents (Vue, requireInstance, options) { return componentsFiles.map(file => { const name = getFileName(file); - const vueFile = requireInstance(file); - const component = vueFile.hasOwnProperty('default') ? vueFile.default : vueFile; - return Vue.component(name, component); + let component = options.requireContext(file); + // Unwrap "default" from ES6 module + if (component.hasOwnProperty('default')) component = component.default; + Vue.component(name, component); + + // Return the registered component + return Vue.component(name); }); } /** - @param {Object} options User defined options to be parsed - @returns {Object} * @param {Object} options + * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Each of these components will be on its own chunk + * @param {Vue} Vue VueJS instance + * @param {Object} options */ -function parseOptions (options) { - options = options || {}; +function registerAsyncComponents (Vue, options) { + const componentsFiles = options.requireAsyncContext + .keys() + .filter(file => file.match(options.components.pattern)); + + const getFileName = name => /\/([^\/]*)\.async\.vue$/.exec(name)[1]; + + return componentsFiles.map(file => { + const name = getFileName(file); + // Register as async component https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components + Vue.component( + name, + () => options.requireAsyncContext(file) + ); + + // Return the registered component + return Vue.component(name); + }); +} + +/** + * Merges user provided options with the library defaults + * @param {Object} userOptions User defined options to be parsed + * @returns {Object} + */ +function parseOptions (userOptions) { + userOptions = userOptions || {}; + return { - routes: Object.assign({}, _defaults.routes, options.routes), - components: Object.assign({}, _defaults.components, options.components) + // context and asyncContext are user provided using the require.context API + // which allows a 4th argument to specify the mode in which to load files + // By default this is 'sync', but can be made async as in require.context('./', true, /async\.vue$/, 'lazy') + // See https://github.com/webpack/docs/wiki/context#context-module-api + requireContext: userOptions.context, + requireAsyncContext: userOptions.asyncContext && userOptions.asyncContext.id.includes("lazy") ? + userOptions.asyncContext : + null, + + // Async mode is enabled/disabled depending on the last argument provided to require.context + // For example, enable async with: require.context('./', true, /(\.js|\.vue)$/, 'lazy') + // async: requireContext.id.includes("lazy"), + + // Merge user-specific options for each of the different asset types + routes: Object.assign({}, _defaults.routes, userOptions.routes), + components: Object.assign({}, _defaults.components, userOptions.components) }; } -function register (options, context, Vue) { - options = parseOptions(options); +/** + * Register each of the different type of assets if they are enabled by the options + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options to be parsed + * @param {require} requireContext webpack require.context instance. https://github.com/webpack/docs/wiki/context#context-module-api + * @returns {Object} The Autowire object with all the assets that were wired + */ +function register (Vue, userOptions) { + const options = parseOptions(userOptions); // Returned autowiring object with registered elements const aw = { routes: [], components: [] }; - if (options.routes.enabled) { - aw.routes = registerRoutes(Vue, context, options); + if (options.routes.enabled && options.requireContext) { + aw.routes.push(registerRoutes(Vue, options)); + } + if (options.components.enabled && options.requireContext) { + aw.components.push(registerComponents(Vue, options)); } - if (options.components.enabled) { - aw.components = registerComponents(Vue, context, options); + if (options.components.enabled && options.requireAsyncContext) { + aw.components.push(registerAsyncComponents(Vue, options)); } + return aw; } -function install (Vue, options) { - Vue.autowire = register(options, options.context, Vue); +/** + * Vue plugin definition. See https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options + * @returns {Object} The Autowire object with all the assets that were wired + */ +function install (Vue, userOptions) { + Vue.autowire = register(Vue, userOptions); } export default install; diff --git a/dist/vue-autowire.esm.browser.min.js b/dist/vue-autowire.esm.browser.min.js index 1e0f63a..2e22b85 100644 --- a/dist/vue-autowire.esm.browser.min.js +++ b/dist/vue-autowire.esm.browser.min.js @@ -3,4 +3,4 @@ * (c) 2019 Kaizen Dorks * @license MIT */ -const t={routes:{enabled:!0,pattern:/\.router.js/},components:{enabled:!1,pattern:/\/components\/.*\.vue$/}};function e(e,n,o){const r={routes:[],components:[]};return(e=function(e){return e=e||{},{routes:Object.assign({},t.routes,e.routes),components:Object.assign({},t.components,e.components)}}(e)).routes.enabled&&(r.routes=function(t,e,n){return e.keys().filter(t=>t.match(n.routes.pattern)).map(t=>{const n=e(t);return n.default?n.default:n})}(0,n,e)),e.components.enabled&&(r.components=function(t,e,n){return e.keys().filter(t=>t.match(n.components.pattern)).map(n=>{const o=(t=>/\/([^\/]*)\.vue$/.exec(t)[1])(n),r=e(n),s=r.hasOwnProperty("default")?r.default:r;return t.component(o,s)})}(o,n,e)),r}export default function(t,n){t.autowire=e(n,n.context,t)} \ No newline at end of file +const e={routes:{enabled:!0,pattern:/\.router.js$/},components:{enabled:!0,pattern:/\/components\/.*\.vue$/}};function t(t,n){const o=function(t){return{requireContext:(t=t||{}).context,requireAsyncContext:t.asyncContext&&t.asyncContext.id.includes("lazy")?t.asyncContext:null,routes:Object.assign({},e.routes,t.routes),components:Object.assign({},e.components,t.components)}}(n),r={routes:[],components:[]};return o.routes.enabled&&o.requireContext&&r.routes.push(function(e,t){return t.requireContext.keys().filter(e=>e.match(t.routes.pattern)).map(e=>{const n=t.requireContext(e);return n.default?n.default:n})}(0,o)),o.components.enabled&&o.requireContext&&r.components.push(function(e,t){return t.requireContext.keys().filter(e=>e.match(t.components.pattern)).map(n=>{const o=(e=>/\/([^\/]*)\.vue$/.exec(e)[1])(n);let r=t.requireContext(n);return r.hasOwnProperty("default")&&(r=r.default),e.component(o,r),e.component(o)})}(t,o)),o.components.enabled&&o.requireAsyncContext&&r.components.push(function(e,t){return t.requireAsyncContext.keys().filter(e=>e.match(t.components.pattern)).map(n=>{const o=(e=>/\/([^\/]*)\.async\.vue$/.exec(e)[1])(n);return e.component(o,()=>t.requireAsyncContext(n)),e.component(o)})}(t,o)),r}export default function(e,n){e.autowire=t(e,n)} \ No newline at end of file diff --git a/dist/vue-autowire.esm.js b/dist/vue-autowire.esm.js index 94d1363..5578c63 100644 --- a/dist/vue-autowire.esm.js +++ b/dist/vue-autowire.esm.js @@ -6,39 +6,37 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js/ + pattern: /\.router.js$/ }, components: { - enabled: false, + enabled: true, pattern: /\/components\/.*\.vue$/ } }; /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Load router files * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerRoutes (Vue, requireInstance, options) { - var routeFiles = requireInstance +function registerRoutes (Vue, options) { + var routeFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.routes.pattern); }); return routeFiles.map(function (routeFile) { - var routerConfig = requireInstance(routeFile); + var routerConfig = options.requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Register components files using Vue.component and requiring the file from the context * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerComponents (Vue, requireInstance, options) { - var componentsFiles = requireInstance +function registerComponents (Vue, options) { + var componentsFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.components.pattern); }); @@ -46,43 +44,106 @@ function registerComponents (Vue, requireInstance, options) { return componentsFiles.map(function (file) { var name = getFileName(file); - var vueFile = requireInstance(file); - var component = vueFile.hasOwnProperty('default') ? vueFile.default : vueFile; - return Vue.component(name, component); + var component = options.requireContext(file); + // Unwrap "default" from ES6 module + if (component.hasOwnProperty('default')) { component = component.default; } + Vue.component(name, component); + + // Return the registered component + return Vue.component(name); }); } /** - @param {Object} options User defined options to be parsed - @returns {Object} * @param {Object} options + * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Each of these components will be on its own chunk + * @param {Vue} Vue VueJS instance + * @param {Object} options */ -function parseOptions (options) { - options = options || {}; +function registerAsyncComponents (Vue, options) { + var componentsFiles = options.requireAsyncContext + .keys() + .filter(function (file) { return file.match(options.components.pattern); }); + + var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; + + return componentsFiles.map(function (file) { + var name = getFileName(file); + // Register as async component https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components + Vue.component( + name, + function () { return options.requireAsyncContext(file); } + ); + + // Return the registered component + return Vue.component(name); + }); +} + +/** + * Merges user provided options with the library defaults + * @param {Object} userOptions User defined options to be parsed + * @returns {Object} + */ +function parseOptions (userOptions) { + userOptions = userOptions || {}; + return { - routes: Object.assign({}, _defaults.routes, options.routes), - components: Object.assign({}, _defaults.components, options.components) + // context and asyncContext are user provided using the require.context API + // which allows a 4th argument to specify the mode in which to load files + // By default this is 'sync', but can be made async as in require.context('./', true, /async\.vue$/, 'lazy') + // See https://github.com/webpack/docs/wiki/context#context-module-api + requireContext: userOptions.context, + requireAsyncContext: userOptions.asyncContext && userOptions.asyncContext.id.includes("lazy") ? + userOptions.asyncContext : + null, + + // Async mode is enabled/disabled depending on the last argument provided to require.context + // For example, enable async with: require.context('./', true, /(\.js|\.vue)$/, 'lazy') + // async: requireContext.id.includes("lazy"), + + // Merge user-specific options for each of the different asset types + routes: Object.assign({}, _defaults.routes, userOptions.routes), + components: Object.assign({}, _defaults.components, userOptions.components) }; } -function register (options, context, Vue) { - options = parseOptions(options); +/** + * Register each of the different type of assets if they are enabled by the options + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options to be parsed + * @param {require} requireContext webpack require.context instance. https://github.com/webpack/docs/wiki/context#context-module-api + * @returns {Object} The Autowire object with all the assets that were wired + */ +function register (Vue, userOptions) { + var options = parseOptions(userOptions); // Returned autowiring object with registered elements var aw = { routes: [], components: [] }; - if (options.routes.enabled) { - aw.routes = registerRoutes(Vue, context, options); + if (options.routes.enabled && options.requireContext) { + aw.routes.push(registerRoutes(Vue, options)); + } + if (options.components.enabled && options.requireContext) { + aw.components.push(registerComponents(Vue, options)); } - if (options.components.enabled) { - aw.components = registerComponents(Vue, context, options); + if (options.components.enabled && options.requireAsyncContext) { + aw.components.push(registerAsyncComponents(Vue, options)); } + return aw; } -function install (Vue, options) { - Vue.autowire = register(options, options.context, Vue); +/** + * Vue plugin definition. See https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options + * @returns {Object} The Autowire object with all the assets that were wired + */ +function install (Vue, userOptions) { + Vue.autowire = register(Vue, userOptions); } export default install; diff --git a/dist/vue-autowire.js b/dist/vue-autowire.js index b62d960..11cb24f 100644 --- a/dist/vue-autowire.js +++ b/dist/vue-autowire.js @@ -12,39 +12,37 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js/ + pattern: /\.router.js$/ }, components: { - enabled: false, + enabled: true, pattern: /\/components\/.*\.vue$/ } }; /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Load router files * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerRoutes (Vue, requireInstance, options) { - var routeFiles = requireInstance +function registerRoutes (Vue, options) { + var routeFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.routes.pattern); }); return routeFiles.map(function (routeFile) { - var routerConfig = requireInstance(routeFile); + var routerConfig = options.requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register ruoter files by loading them with webpack.require and wire up Router instance to Vue + * Register components files using Vue.component and requiring the file from the context * @param {Vue} Vue VueJS instance - * @param {require} requireInstance * @param {Object} options */ -function registerComponents (Vue, requireInstance, options) { - var componentsFiles = requireInstance +function registerComponents (Vue, options) { + var componentsFiles = options.requireContext .keys() .filter(function (file) { return file.match(options.components.pattern); }); @@ -52,43 +50,106 @@ function registerComponents (Vue, requireInstance, options) { return componentsFiles.map(function (file) { var name = getFileName(file); - var vueFile = requireInstance(file); - var component = vueFile.hasOwnProperty('default') ? vueFile.default : vueFile; - return Vue.component(name, component); + var component = options.requireContext(file); + // Unwrap "default" from ES6 module + if (component.hasOwnProperty('default')) { component = component.default; } + Vue.component(name, component); + + // Return the registered component + return Vue.component(name); }); } /** - @param {Object} options User defined options to be parsed - @returns {Object} * @param {Object} options + * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Each of these components will be on its own chunk + * @param {Vue} Vue VueJS instance + * @param {Object} options */ -function parseOptions (options) { - options = options || {}; +function registerAsyncComponents (Vue, options) { + var componentsFiles = options.requireAsyncContext + .keys() + .filter(function (file) { return file.match(options.components.pattern); }); + + var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; + + return componentsFiles.map(function (file) { + var name = getFileName(file); + // Register as async component https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components + Vue.component( + name, + function () { return options.requireAsyncContext(file); } + ); + + // Return the registered component + return Vue.component(name); + }); +} + +/** + * Merges user provided options with the library defaults + * @param {Object} userOptions User defined options to be parsed + * @returns {Object} + */ +function parseOptions (userOptions) { + userOptions = userOptions || {}; + return { - routes: Object.assign({}, _defaults.routes, options.routes), - components: Object.assign({}, _defaults.components, options.components) + // context and asyncContext are user provided using the require.context API + // which allows a 4th argument to specify the mode in which to load files + // By default this is 'sync', but can be made async as in require.context('./', true, /async\.vue$/, 'lazy') + // See https://github.com/webpack/docs/wiki/context#context-module-api + requireContext: userOptions.context, + requireAsyncContext: userOptions.asyncContext && userOptions.asyncContext.id.includes("lazy") ? + userOptions.asyncContext : + null, + + // Async mode is enabled/disabled depending on the last argument provided to require.context + // For example, enable async with: require.context('./', true, /(\.js|\.vue)$/, 'lazy') + // async: requireContext.id.includes("lazy"), + + // Merge user-specific options for each of the different asset types + routes: Object.assign({}, _defaults.routes, userOptions.routes), + components: Object.assign({}, _defaults.components, userOptions.components) }; } -function register (options, context, Vue) { - options = parseOptions(options); +/** + * Register each of the different type of assets if they are enabled by the options + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options to be parsed + * @param {require} requireContext webpack require.context instance. https://github.com/webpack/docs/wiki/context#context-module-api + * @returns {Object} The Autowire object with all the assets that were wired + */ +function register (Vue, userOptions) { + var options = parseOptions(userOptions); // Returned autowiring object with registered elements var aw = { routes: [], components: [] }; - if (options.routes.enabled) { - aw.routes = registerRoutes(Vue, context, options); + if (options.routes.enabled && options.requireContext) { + aw.routes.push(registerRoutes(Vue, options)); + } + if (options.components.enabled && options.requireContext) { + aw.components.push(registerComponents(Vue, options)); } - if (options.components.enabled) { - aw.components = registerComponents(Vue, context, options); + if (options.components.enabled && options.requireAsyncContext) { + aw.components.push(registerAsyncComponents(Vue, options)); } + return aw; } -function install (Vue, options) { - Vue.autowire = register(options, options.context, Vue); +/** + * Vue plugin definition. See https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin + * @param {Object} Vue The Vue API + * @param {Object} userOptions User defined options + * @returns {Object} The Autowire object with all the assets that were wired + */ +function install (Vue, userOptions) { + Vue.autowire = register(Vue, userOptions); } return install; diff --git a/dist/vue-autowire.min.js b/dist/vue-autowire.min.js index aff1f40..dd90523 100644 --- a/dist/vue-autowire.min.js +++ b/dist/vue-autowire.min.js @@ -3,4 +3,4 @@ * (c) 2019 Kaizen Dorks * @license MIT */ -var e,t;e=this,t=function(){"use strict";var e={routes:{enabled:!0,pattern:/\.router.js/},components:{enabled:!1,pattern:/\/components\/.*\.vue$/}};function t(t,n,o){var r={routes:[],components:[]};return(t=function(t){return t=t||{},{routes:Object.assign({},e.routes,t.routes),components:Object.assign({},e.components,t.components)}}(t)).routes.enabled&&(r.routes=function(e,t,n){return t.keys().filter(function(e){return e.match(n.routes.pattern)}).map(function(e){var n=t(e);return n.default?n.default:n})}(0,n,t)),t.components.enabled&&(r.components=function(e,t,n){return t.keys().filter(function(e){return e.match(n.components.pattern)}).map(function(n){var o=function(e){return/\/([^\/]*)\.vue$/.exec(e)[1]}(n),r=t(n),u=r.hasOwnProperty("default")?r.default:r;return e.component(o,u)})}(o,n,t)),r}return function(e,n){e.autowire=t(n,n.context,e)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueAutowire=t(); \ No newline at end of file +var e,n;e=this,n=function(){"use strict";var e={routes:{enabled:!0,pattern:/\.router.js$/},components:{enabled:!0,pattern:/\/components\/.*\.vue$/}};function n(n,t){var o=function(n){return{requireContext:(n=n||{}).context,requireAsyncContext:n.asyncContext&&n.asyncContext.id.includes("lazy")?n.asyncContext:null,routes:Object.assign({},e.routes,n.routes),components:Object.assign({},e.components,n.components)}}(t),r={routes:[],components:[]};return o.routes.enabled&&o.requireContext&&r.routes.push(function(e,n){return n.requireContext.keys().filter(function(e){return e.match(n.routes.pattern)}).map(function(e){var t=n.requireContext(e);return t.default?t.default:t})}(0,o)),o.components.enabled&&o.requireContext&&r.components.push(function(e,n){return n.requireContext.keys().filter(function(e){return e.match(n.components.pattern)}).map(function(t){var o=function(e){return/\/([^\/]*)\.vue$/.exec(e)[1]}(t),r=n.requireContext(t);return r.hasOwnProperty("default")&&(r=r.default),e.component(o,r),e.component(o)})}(n,o)),o.components.enabled&&o.requireAsyncContext&&r.components.push(function(e,n){return n.requireAsyncContext.keys().filter(function(e){return e.match(n.components.pattern)}).map(function(t){var o=function(e){return/\/([^\/]*)\.async\.vue$/.exec(e)[1]}(t);return e.component(o,function(){return n.requireAsyncContext(t)}),e.component(o)})}(n,o)),r}return function(e,t){e.autowire=n(e,t)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.VueAutowire=n(); \ No newline at end of file diff --git a/docs-src/guide/README.md b/docs-src/guide/README.md index d547b54..b642665 100755 --- a/docs-src/guide/README.md +++ b/docs-src/guide/README.md @@ -1,3 +1,22 @@ # Getting Started -WIP +Sample usage + +``` +import Vue from 'vue' +import App from './App.vue' +import VueAutowire from './autowire'; + +Vue.config.productionTip = false + +Vue.use(VueAutowire, { + // All .js and .vue files except the ones ending with .async.vue + context: require.context('./', true, /\/(?:[^.]+|(?!\.async\.vue$))(\.js|\.vue)$/), + // All the .async.vue files as async components on their own webpack chunk + asyncContext: require.context('./', true, /async\.vue$/, 'lazy') +}) + +new Vue({ + render: h => h(App), +}).$mount('#app') +``` diff --git a/docs/404.html b/docs/404.html index 290d887..6f871ad 100644 --- a/docs/404.html +++ b/docs/404.html @@ -7,11 +7,11 @@ - +
-