From 36ad580a45798e4f7de5a2317fd8df1d84eef770 Mon Sep 17 00:00:00 2001 From: Daniel Jimenez Garcia Date: Sat, 18 May 2019 13:04:20 +0100 Subject: [PATCH] GH-9, rearchitect to allow zero-config usage with default conventions --- .eslintignore | 1 + README.md | 30 +++-- dist/vue-autowire.common.js | 118 ++++++++++-------- dist/vue-autowire.esm.browser.js | 118 ++++++++++-------- dist/vue-autowire.esm.browser.min.js | 2 +- dist/vue-autowire.esm.js | 118 ++++++++++-------- dist/vue-autowire.js | 118 ++++++++++-------- dist/vue-autowire.min.js | 2 +- docs-src/guide/README.md | 26 ++-- docs/404.html | 6 +- docs/assets/js/4.0c51f0c4.js | 1 + docs/assets/js/4.afea4750.js | 1 - .../js/{app.1d6ce94f.js => app.34f7c533.js} | 4 +- docs/guide/index.html | 30 +++-- docs/guide/registering-components.html | 4 +- docs/guide/registering-directives.html | 4 +- docs/guide/registering-mixins.html | 4 +- docs/guide/registering-routes.html | 4 +- docs/guide/registering-views.html | 4 +- docs/index.html | 4 +- docs/installation.html | 4 +- docs/service-worker.js | 26 ++-- src/index.js | 118 ++++++++++-------- 23 files changed, 426 insertions(+), 321 deletions(-) create mode 100644 docs/assets/js/4.0c51f0c4.js delete mode 100644 docs/assets/js/4.afea4750.js rename docs/assets/js/{app.1d6ce94f.js => app.34f7c533.js} (94%) diff --git a/.eslintignore b/.eslintignore index 1521c8b..f9085fe 100755 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ dist +docs \ No newline at end of file diff --git a/README.md b/README.md index de3ae8f..e0cdd3d 100644 --- a/README.md +++ b/README.md @@ -3,25 +3,35 @@ Vue plugin with conventions for automatically wiring components, pages and routes. -- Docs will be available at https://kaizendorks.github.io/vue-autowire/. - -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'; +import VueAutowire from 'vue-autowire'; Vue.config.productionTip = false +// Use default settings +Vue.use(VueAutowire); + +// Enable only certain options 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') -}) + routes: { enabled: false }, +}); + +// Provide your own webpack context with your own convention for folder/file names +Vue.use(VueAutowire, { + components: { + // all components in the /src/components folder that end with .vue, excluding the .async.vue ones + context: require.context('@/components', true, /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/), + // all components in the /src/components folder that end with async.vue + // Not the last argument to use webpack's lazy mode so they get their own chunk + context: require.context('@/components', true, /async\.vue$/, 'lazy'), + }, +}); new Vue({ render: h => h(App), }).$mount('#app') ``` + +For more information, check the docs at https://kaizendorks.github.io/vue-autowire/! diff --git a/dist/vue-autowire.common.js b/dist/vue-autowire.common.js index c316e04..cf9aeda 100644 --- a/dist/vue-autowire.common.js +++ b/dist/vue-autowire.common.js @@ -8,45 +8,65 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js$/ + requireContext: null }, components: { enabled: true, - pattern: /\/components\/.*\.vue$/ + requireContext: null, + requireAsyncContext: null } }; /** * Load router files * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} routesOptions */ -function registerRoutes (Vue, options) { - var routeFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.routes.pattern); }); - +function registerRoutes (Vue, routesOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = routesOptions.requireContext || require.context( + // root folder for routes + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/', + // recursive + true, + // include all .router.js files + /\.router.js$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var routeFiles = requireContext.keys(); + + // Return them all loaded, so users can pass them onto their VueRouter declaration return routeFiles.map(function (routeFile) { - var routerConfig = options.requireContext(routeFile); + var routerConfig = requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register components files using Vue.component and requiring the file from the context + * Register components files using Vue.component and requiring the file from webpack's context * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerComponents (Vue, options) { - var componentsFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = componentOptions.requireContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include all .vue files except for the .async.vue ones + /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var componentFiles = requireContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.map(function (file) { var name = getFileName(file); - var component = options.requireContext(file); + var component = requireContext(file); // Unwrap "default" from ES6 module if (component.hasOwnProperty('default')) { component = component.default; } Vue.component(name, component); @@ -57,25 +77,34 @@ function registerComponents (Vue, options) { } /** - * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Register components files using Vue.component as async components by setting up a factory function + * that loads the module using webpack's lazy mode * Each of these components will be on its own chunk * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerAsyncComponents (Vue, options) { - var componentsFiles = options.requireAsyncContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerAsyncComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireAsyncContext = componentOptions.requireAsyncContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include only .async.vue components + /async\.vue$/, + // webpack's lazy mode for require.context + 'lazy'); + + // Ask webpack to list the files (In lazy mode, files are added to their own chunk and only if we require them) + var componentFiles = requireAsyncContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.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); } - ); + Vue.component(name, function () { return requireAsyncContext(file); }); // Return the registered component return Vue.component(name); @@ -91,19 +120,6 @@ function parseOptions (userOptions) { userOptions = userOptions || {}; return { - // 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) @@ -125,14 +141,12 @@ function register (Vue, userOptions) { routes: [], components: [] }; - 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.routes.enabled) { + aw.routes.push(registerRoutes(Vue, options.routes)); } - if (options.components.enabled && options.requireAsyncContext) { - aw.components.push(registerAsyncComponents(Vue, options)); + if (options.components.enabled) { + aw.components.push(registerComponents(Vue, options.components)); + aw.components.push(registerAsyncComponents(Vue, options.components)); } return aw; diff --git a/dist/vue-autowire.esm.browser.js b/dist/vue-autowire.esm.browser.js index ce78f15..07b8caa 100644 --- a/dist/vue-autowire.esm.browser.js +++ b/dist/vue-autowire.esm.browser.js @@ -6,45 +6,65 @@ const _defaults = { routes: { enabled: true, - pattern: /\.router.js$/ + requireContext: null }, components: { enabled: true, - pattern: /\/components\/.*\.vue$/ + requireContext: null, + requireAsyncContext: null } }; /** * Load router files * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} routesOptions */ -function registerRoutes (Vue, options) { - const routeFiles = options.requireContext - .keys() - .filter(file => file.match(options.routes.pattern)); - +function registerRoutes (Vue, routesOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireContext = routesOptions.requireContext || require.context( + // root folder for routes + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/', + // recursive + true, + // include all .router.js files + /\.router.js$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + const routeFiles = requireContext.keys(); + + // Return them all loaded, so users can pass them onto their VueRouter declaration return routeFiles.map(routeFile => { - const routerConfig = options.requireContext(routeFile); + const routerConfig = requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register components files using Vue.component and requiring the file from the context + * Register components files using Vue.component and requiring the file from webpack's context * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerComponents (Vue, options) { - const componentsFiles = options.requireContext - .keys() - .filter(file => file.match(options.components.pattern)); - +function registerComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireContext = componentOptions.requireContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include all .vue files except for the .async.vue ones + /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + const componentFiles = requireContext.keys(); + + // Register all of them in Vue const getFileName = name => /\/([^\/]*)\.vue$/.exec(name)[1]; - - return componentsFiles.map(file => { + return componentFiles.map(file => { const name = getFileName(file); - let component = options.requireContext(file); + let component = requireContext(file); // Unwrap "default" from ES6 module if (component.hasOwnProperty('default')) component = component.default; Vue.component(name, component); @@ -55,25 +75,34 @@ function registerComponents (Vue, options) { } /** - * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Register components files using Vue.component as async components by setting up a factory function + * that loads the module using webpack's lazy mode * Each of these components will be on its own chunk * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerAsyncComponents (Vue, options) { - const componentsFiles = options.requireAsyncContext - .keys() - .filter(file => file.match(options.components.pattern)); - +function registerAsyncComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireAsyncContext = componentOptions.requireAsyncContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include only .async.vue components + /async\.vue$/, + // webpack's lazy mode for require.context + 'lazy'); + + // Ask webpack to list the files (In lazy mode, files are added to their own chunk and only if we require them) + const componentFiles = requireAsyncContext.keys(); + + // Register all of them in Vue const getFileName = name => /\/([^\/]*)\.async\.vue$/.exec(name)[1]; - - return componentsFiles.map(file => { + return componentFiles.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) - ); + Vue.component(name, () => requireAsyncContext(file)); // Return the registered component return Vue.component(name); @@ -89,19 +118,6 @@ function parseOptions (userOptions) { userOptions = userOptions || {}; return { - // 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) @@ -123,14 +139,12 @@ function register (Vue, userOptions) { routes: [], components: [] }; - 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.routes.enabled) { + aw.routes.push(registerRoutes(Vue, options.routes)); } - if (options.components.enabled && options.requireAsyncContext) { - aw.components.push(registerAsyncComponents(Vue, options)); + if (options.components.enabled) { + aw.components.push(registerComponents(Vue, options.components)); + aw.components.push(registerAsyncComponents(Vue, options.components)); } return aw; diff --git a/dist/vue-autowire.esm.browser.min.js b/dist/vue-autowire.esm.browser.min.js index 2e22b85..ec899ab 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 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 +const e={routes:{enabled:!0,requireContext:null},components:{enabled:!0,requireContext:null,requireAsyncContext:null}};function n(n,t){const o=function(n){return n=n||{},{routes:Object.assign({},e.routes,n.routes),components:Object.assign({},e.components,n.components)}}(t),u={routes:[],components:[]};return o.routes.enabled&&u.routes.push(function(e,n){const t=n.requireContext||require.context("@/",!0,/\.router.js$/);return t.keys().map(e=>{const n=t(e);return n.default?n.default:n})}(0,o.routes)),o.components.enabled&&(u.components.push(function(e,n){const t=n.requireContext||require.context("@/components",!0,/\/(?:[^.]+|(?!\.async\.vue$))\.vue$/);return t.keys().map(n=>{const o=(e=>/\/([^\/]*)\.vue$/.exec(e)[1])(n);let u=t(n);return u.hasOwnProperty("default")&&(u=u.default),e.component(o,u),e.component(o)})}(n,o.components)),u.components.push(function(e,n){const t=n.requireAsyncContext||require.context("@/components",!0,/async\.vue$/,"lazy");return t.keys().map(n=>{const o=(e=>/\/([^\/]*)\.async\.vue$/.exec(e)[1])(n);return e.component(o,()=>t(n)),e.component(o)})}(n,o.components))),u}export default function(e,t){e.autowire=n(e,t)} \ No newline at end of file diff --git a/dist/vue-autowire.esm.js b/dist/vue-autowire.esm.js index 5578c63..b77d08c 100644 --- a/dist/vue-autowire.esm.js +++ b/dist/vue-autowire.esm.js @@ -6,45 +6,65 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js$/ + requireContext: null }, components: { enabled: true, - pattern: /\/components\/.*\.vue$/ + requireContext: null, + requireAsyncContext: null } }; /** * Load router files * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} routesOptions */ -function registerRoutes (Vue, options) { - var routeFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.routes.pattern); }); - +function registerRoutes (Vue, routesOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = routesOptions.requireContext || require.context( + // root folder for routes + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/', + // recursive + true, + // include all .router.js files + /\.router.js$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var routeFiles = requireContext.keys(); + + // Return them all loaded, so users can pass them onto their VueRouter declaration return routeFiles.map(function (routeFile) { - var routerConfig = options.requireContext(routeFile); + var routerConfig = requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register components files using Vue.component and requiring the file from the context + * Register components files using Vue.component and requiring the file from webpack's context * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerComponents (Vue, options) { - var componentsFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = componentOptions.requireContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include all .vue files except for the .async.vue ones + /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var componentFiles = requireContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.map(function (file) { var name = getFileName(file); - var component = options.requireContext(file); + var component = requireContext(file); // Unwrap "default" from ES6 module if (component.hasOwnProperty('default')) { component = component.default; } Vue.component(name, component); @@ -55,25 +75,34 @@ function registerComponents (Vue, options) { } /** - * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Register components files using Vue.component as async components by setting up a factory function + * that loads the module using webpack's lazy mode * Each of these components will be on its own chunk * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerAsyncComponents (Vue, options) { - var componentsFiles = options.requireAsyncContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerAsyncComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireAsyncContext = componentOptions.requireAsyncContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include only .async.vue components + /async\.vue$/, + // webpack's lazy mode for require.context + 'lazy'); + + // Ask webpack to list the files (In lazy mode, files are added to their own chunk and only if we require them) + var componentFiles = requireAsyncContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.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); } - ); + Vue.component(name, function () { return requireAsyncContext(file); }); // Return the registered component return Vue.component(name); @@ -89,19 +118,6 @@ function parseOptions (userOptions) { userOptions = userOptions || {}; return { - // 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) @@ -123,14 +139,12 @@ function register (Vue, userOptions) { routes: [], components: [] }; - 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.routes.enabled) { + aw.routes.push(registerRoutes(Vue, options.routes)); } - if (options.components.enabled && options.requireAsyncContext) { - aw.components.push(registerAsyncComponents(Vue, options)); + if (options.components.enabled) { + aw.components.push(registerComponents(Vue, options.components)); + aw.components.push(registerAsyncComponents(Vue, options.components)); } return aw; diff --git a/dist/vue-autowire.js b/dist/vue-autowire.js index 11cb24f..6104fc1 100644 --- a/dist/vue-autowire.js +++ b/dist/vue-autowire.js @@ -12,45 +12,65 @@ var _defaults = { routes: { enabled: true, - pattern: /\.router.js$/ + requireContext: null }, components: { enabled: true, - pattern: /\/components\/.*\.vue$/ + requireContext: null, + requireAsyncContext: null } }; /** * Load router files * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} routesOptions */ -function registerRoutes (Vue, options) { - var routeFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.routes.pattern); }); - +function registerRoutes (Vue, routesOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = routesOptions.requireContext || require.context( + // root folder for routes + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/', + // recursive + true, + // include all .router.js files + /\.router.js$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var routeFiles = requireContext.keys(); + + // Return them all loaded, so users can pass them onto their VueRouter declaration return routeFiles.map(function (routeFile) { - var routerConfig = options.requireContext(routeFile); + var routerConfig = requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register components files using Vue.component and requiring the file from the context + * Register components files using Vue.component and requiring the file from webpack's context * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerComponents (Vue, options) { - var componentsFiles = options.requireContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireContext = componentOptions.requireContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include all .vue files except for the .async.vue ones + /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/); + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + var componentFiles = requireContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.map(function (file) { var name = getFileName(file); - var component = options.requireContext(file); + var component = requireContext(file); // Unwrap "default" from ES6 module if (component.hasOwnProperty('default')) { component = component.default; } Vue.component(name, component); @@ -61,25 +81,34 @@ function registerComponents (Vue, options) { } /** - * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Register components files using Vue.component as async components by setting up a factory function + * that loads the module using webpack's lazy mode * Each of these components will be on its own chunk * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerAsyncComponents (Vue, options) { - var componentsFiles = options.requireAsyncContext - .keys() - .filter(function (file) { return file.match(options.components.pattern); }); - +function registerAsyncComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + var requireAsyncContext = componentOptions.requireAsyncContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include only .async.vue components + /async\.vue$/, + // webpack's lazy mode for require.context + 'lazy'); + + // Ask webpack to list the files (In lazy mode, files are added to their own chunk and only if we require them) + var componentFiles = requireAsyncContext.keys(); + + // Register all of them in Vue var getFileName = function (name) { return /\/([^\/]*)\.async\.vue$/.exec(name)[1]; }; - - return componentsFiles.map(function (file) { + return componentFiles.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); } - ); + Vue.component(name, function () { return requireAsyncContext(file); }); // Return the registered component return Vue.component(name); @@ -95,19 +124,6 @@ function parseOptions (userOptions) { userOptions = userOptions || {}; return { - // 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) @@ -129,14 +145,12 @@ function register (Vue, userOptions) { routes: [], components: [] }; - 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.routes.enabled) { + aw.routes.push(registerRoutes(Vue, options.routes)); } - if (options.components.enabled && options.requireAsyncContext) { - aw.components.push(registerAsyncComponents(Vue, options)); + if (options.components.enabled) { + aw.components.push(registerComponents(Vue, options.components)); + aw.components.push(registerAsyncComponents(Vue, options.components)); } return aw; diff --git a/dist/vue-autowire.min.js b/dist/vue-autowire.min.js index dd90523..6c1a852 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,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 +var e,n;e=this,n=function(){"use strict";var e={routes:{enabled:!0,requireContext:null},components:{enabled:!0,requireContext:null,requireAsyncContext:null}};function n(n,t){var o,r,u=function(n){return n=n||{},{routes:Object.assign({},e.routes,n.routes),components:Object.assign({},e.components,n.components)}}(t),c={routes:[],components:[]};return u.routes.enabled&&c.routes.push((o=u.routes,(r=o.requireContext||require.context("@/",!0,/\.router.js$/)).keys().map(function(e){var n=r(e);return n.default?n.default:n}))),u.components.enabled&&(c.components.push(function(e,n){var t=n.requireContext||require.context("@/components",!0,/\/(?:[^.]+|(?!\.async\.vue$))\.vue$/);return t.keys().map(function(n){var o=function(e){return/\/([^\/]*)\.vue$/.exec(e)[1]}(n),r=t(n);return r.hasOwnProperty("default")&&(r=r.default),e.component(o,r),e.component(o)})}(n,u.components)),c.components.push(function(e,n){var t=n.requireAsyncContext||require.context("@/components",!0,/async\.vue$/,"lazy");return t.keys().map(function(n){var o=function(e){return/\/([^\/]*)\.async\.vue$/.exec(e)[1]}(n);return e.component(o,function(){return t(n)}),e.component(o)})}(n,u.components))),c}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 b642665..31a6e32 100755 --- a/docs-src/guide/README.md +++ b/docs-src/guide/README.md @@ -1,20 +1,32 @@ # Getting Started -Sample usage +Sample usage with a project generated with the vue-cli ``` import Vue from 'vue' import App from './App.vue' -import VueAutowire from './autowire'; +import VueAutowire from 'vue-autowire'; Vue.config.productionTip = false +// Use default settings +Vue.use(VueAutowire); + +// Enable only certain options +Vue.use(VueAutowire, { + routes: { enabled: false }, +}); + +// Provide your own webpack context with your own convention for folder/file names 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') -}) + components: { + // all components in the /src/components folder that end with .vue, excluding the .async.vue ones + context: require.context('@/components', true, /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/), + // all components in the /src/components folder that end with async.vue + // Not the last argument to use webpack's lazy mode so they get their own chunk + context: require.context('@/components', true, /async\.vue$/, 'lazy'), + }, +}); new Vue({ render: h => h(App), diff --git a/docs/404.html b/docs/404.html index 6f871ad..adfc867 100644 --- a/docs/404.html +++ b/docs/404.html @@ -7,11 +7,11 @@ - + -

404

How did we get here?
Take me home.
- +

404

Looks like we've got some broken links.
Take me home.
+ diff --git a/docs/assets/js/4.0c51f0c4.js b/docs/assets/js/4.0c51f0c4.js new file mode 100644 index 0000000..047dc15 --- /dev/null +++ b/docs/assets/js/4.0c51f0c4.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{174:function(e,t,n){"use strict";n.r(t);var o=n(0),s=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")]),this._v(" "),t("p",[this._v("Sample usage with a project generated with the vue-cli")]),this._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[this._v("import Vue from 'vue'\nimport App from './App.vue'\nimport VueAutowire from 'vue-autowire';\n\nVue.config.productionTip = false\n\n// Use default settings\nVue.use(VueAutowire);\n\n// Enable only certain options\nVue.use(VueAutowire, {\n routes: { enabled: false },\n});\n\n// Provide your own webpack context with your own convention for folder/file names\nVue.use(VueAutowire, {\n components: {\n // all components in the /src/components folder that end with .vue, excluding the .async.vue ones\n context: require.context('@/components', true, /\\/(?:[^.]+|(?!\\.async\\.vue$))\\.vue$/),\n // all components in the /src/components folder that end with async.vue\n // Not the last argument to use webpack's lazy mode so they get their own chunk\n context: require.context('@/components', true, /async\\.vue$/, 'lazy'),\n },\n});\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n")])])])])}],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/4.afea4750.js b/docs/assets/js/4.afea4750.js deleted file mode 100644 index 2800d1a..0000000 --- a/docs/assets/js/4.afea4750.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{174:function(e,t,n){"use strict";n.r(t);var s=n(0),a=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")]),this._v(" "),t("p",[this._v("Sample usage")]),this._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[this._v("import Vue from 'vue'\nimport App from './App.vue'\nimport VueAutowire from './autowire';\n\nVue.config.productionTip = false\n\nVue.use(VueAutowire, {\n // All .js and .vue files except the ones ending with .async.vue\n context: require.context('./', true, /\\/(?:[^.]+|(?!\\.async\\.vue$))(\\.js|\\.vue)$/),\n // All the .async.vue files as async components on their own webpack chunk\n asyncContext: require.context('./', true, /async\\.vue$/, 'lazy')\n})\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n")])])])])}],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/app.1d6ce94f.js b/docs/assets/js/app.34f7c533.js similarity index 94% rename from docs/assets/js/app.1d6ce94f.js rename to docs/assets/js/app.34f7c533.js index b352051..618aef9 100644 --- a/docs/assets/js/app.1d6ce94f.js +++ b/docs/assets/js/app.34f7c533.js @@ -1,8 +1,8 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f0?o(r(t),9007199254740991):0}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){for(var r=n(20),o=n(28),i=n(11),a=n(3),s=n(10),c=n(18),u=n(1),l=u("iterator"),f=u("toStringTag"),p=c.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=o(d),v=0;v=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){"use strict";var r=n(6);t.exports=function(t,e){return!!t&&r(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){"use strict";var r=n(2),o=n(32)(3);r(r.P+r.F*!n(21)([].some,!0),"Array",{some:function(t){return o(this,t,arguments[1])}})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(8).f,o=n(14),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(2);r(r.S+r.F,"Object",{assign:n(104)})},function(t,e,n){var r=n(80),o=n(63);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(61),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(19),o=n(28);n(83)("keys",function(){return function(t){return o(r(t))}})},function(t,e,n){"use strict";var r=n(2),o=n(32)(0),i=n(21)([].forEach,!0);r(r.P+r.F*!i,"Array",{forEach:function(t){return o(this,t,arguments[1])}})},function(t,e,n){var r=n(9),o=n(61),i=n(19),a=n(15),s=n(112);t.exports=function(t,e){var n=1==t,c=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f,d=e||s;return function(e,s,h){for(var v,m,g=i(e),y=o(g),b=r(s,h,3),_=a(y.length),x=0,w=n?d(e,_):c?d(e,0):void 0;_>x;x++)if((p||x in y)&&(m=b(v=y[x],x,g),t))if(n)w[x]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:w.push(v)}else if(l)return!1;return f?-1:u||l?l:w}}},function(t,e,n){"use strict";var r=n(2),o=n(32)(2);r(r.P+r.F*!n(21)([].filter,!0),"Array",{filter:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(2),o=n(32)(1);r(r.P+r.F*!n(21)([].map,!0),"Array",{map:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(5),o=n(19),i=n(15),a=n(25),s=n(68),c=n(69),u=Math.max,l=Math.min,f=Math.floor,p=/\$([$&`']|\d\d?|<[^>]*>)/g,d=/\$([$&`']|\d\d?)/g;n(71)("replace",2,function(t,e,n,h){return[function(r,o){var i=t(this),a=null==r?void 0:r[e];return void 0!==a?a.call(r,i,o):n.call(String(i),r,o)},function(t,e){var o=h(n,t,this,e);if(o.done)return o.value;var f=r(t),p=String(this),d="function"==typeof e;d||(e=String(e));var m=f.global;if(m){var g=f.unicode;f.lastIndex=0}for(var y=[];;){var b=c(f,p);if(null===b)break;if(y.push(b),!m)break;""===String(b[0])&&(f.lastIndex=s(p,i(f.lastIndex),g))}for(var _,x="",w=0,k=0;k=w&&(x+=p.slice(w,$)+j,w=$+C.length)}return x+p.slice(w)}];function v(t,e,r,i,a,s){var c=r+t.length,u=i.length,l=d;return void 0!==a&&(a=o(a),l=p),n.call(s,l,function(n,o){var s;switch(o.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(c);case"<":s=a[o.slice(1,-1)];break;default:var l=+o;if(0===l)return n;if(l>u){var p=f(l/10);return 0===p?n:p<=u?void 0===i[p-1]?o.charAt(1):i[p-1]+o.charAt(1):n}s=i[l-1]}return void 0===s?"":s})}})},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){var r,o; +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f0?o(r(t),9007199254740991):0}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){for(var r=n(20),o=n(28),i=n(11),a=n(3),s=n(10),c=n(18),u=n(1),l=u("iterator"),f=u("toStringTag"),p=c.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=o(d),v=0;v=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){"use strict";var r=n(6);t.exports=function(t,e){return!!t&&r(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){"use strict";var r=n(2),o=n(32)(3);r(r.P+r.F*!n(21)([].some,!0),"Array",{some:function(t){return o(this,t,arguments[1])}})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(8).f,o=n(14),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(2);r(r.S+r.F,"Object",{assign:n(104)})},function(t,e,n){var r=n(80),o=n(63);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(61),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(19),o=n(28);n(83)("keys",function(){return function(t){return o(r(t))}})},function(t,e,n){"use strict";var r=n(2),o=n(32)(0),i=n(21)([].forEach,!0);r(r.P+r.F*!i,"Array",{forEach:function(t){return o(this,t,arguments[1])}})},function(t,e,n){var r=n(9),o=n(61),i=n(19),a=n(15),s=n(112);t.exports=function(t,e){var n=1==t,c=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f,d=e||s;return function(e,s,h){for(var v,m,g=i(e),y=o(g),b=r(s,h,3),_=a(y.length),x=0,w=n?d(e,_):c?d(e,0):void 0;_>x;x++)if((p||x in y)&&(m=b(v=y[x],x,g),t))if(n)w[x]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:w.push(v)}else if(l)return!1;return f?-1:u||l?l:w}}},function(t,e,n){"use strict";var r=n(2),o=n(32)(2);r(r.P+r.F*!n(21)([].filter,!0),"Array",{filter:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(2),o=n(32)(1);r(r.P+r.F*!n(21)([].map,!0),"Array",{map:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(5),o=n(19),i=n(15),a=n(25),s=n(68),c=n(69),u=Math.max,l=Math.min,f=Math.floor,p=/\$([$&`']|\d\d?|<[^>]*>)/g,d=/\$([$&`']|\d\d?)/g;n(71)("replace",2,function(t,e,n,h){return[function(r,o){var i=t(this),a=null==r?void 0:r[e];return void 0!==a?a.call(r,i,o):n.call(String(i),r,o)},function(t,e){var o=h(n,t,this,e);if(o.done)return o.value;var f=r(t),p=String(this),d="function"==typeof e;d||(e=String(e));var m=f.global;if(m){var g=f.unicode;f.lastIndex=0}for(var y=[];;){var b=c(f,p);if(null===b)break;if(y.push(b),!m)break;""===String(b[0])&&(f.lastIndex=s(p,i(f.lastIndex),g))}for(var _,x="",w=0,k=0;k=w&&(x+=p.slice(w,$)+j,w=$+C.length)}return x+p.slice(w)}];function v(t,e,r,i,a,s){var c=r+t.length,u=i.length,l=d;return void 0!==a&&(a=o(a),l=p),n.call(s,l,function(n,o){var s;switch(o.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(c);case"<":s=a[o.slice(1,-1)];break;default:var l=+o;if(0===l)return n;if(l>u){var p=f(l/10);return 0===p?n:p<=u?void 0===i[p-1]?o.charAt(1):i[p-1]+o.charAt(1):n}s=i[l-1]}return void 0===s?"":s})}})},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){var r,o; /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress * @license MIT */void 0===(o="function"==typeof(r=function(){var t,e,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function o(t,e,n){return tn?n:t}function i(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=o(t,r.minimum,1),n.status=1===t?null:t;var c=n.render(!e),u=c.querySelector(r.barSelector),l=r.speed,f=r.easing;return c.offsetWidth,a(function(e){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(t,e,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(t)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(t)+"%,0)"}:{"margin-left":i(t)+"%"}).transition="all "+e+"ms "+n,o}(t,l,f)),1===t?(s(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout(function(){s(c,{transition:"all "+l+"ms linear",opacity:0}),setTimeout(function(){n.remove(),e()},l)},l)):setTimeout(e,l)}),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout(function(){n.status&&(n.trickle(),t())},r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?("number"!=typeof t&&(t=(1-e)*o(Math.random()*e,.1,.95)),e=o(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===e&&n.start(),t++,e++,r.always(function(){0==--e?(t=0,n.done()):n.set((t-e)/t)}),this):this},n.render=function(t){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=r.template;var o,a=e.querySelector(r.barSelector),c=t?"-100":i(n.status||0),l=document.querySelector(r.parent);return s(a,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),r.showSpinner||(o=e.querySelector(r.spinnerSelector))&&p(o),l!=document.body&&u(l,"nprogress-custom-parent"),l.appendChild(e),e},n.remove=function(){l(document.documentElement,"nprogress-busy"),l(document.querySelector(r.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&p(t)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),s=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(t,e){return e.toUpperCase()}),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function c(t,e){var n="string"==typeof t?t:f(t);return n.indexOf(" "+e+" ")>=0}function u(t,e){var n=f(t),r=n+e;c(n,e)||(t.className=r.substring(1))}function l(t,e){var n,r=f(t);c(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function f(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e){t.exports=!1},function(t,e,n){var r=n(12),o=n(1)("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var e,n,a;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?n:i?r(e):"Object"==(a=r(e))&&"function"==typeof e.callee?"Arguments":a}},function(t,e,n){var r=n(13),o=n(3),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(52)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,e,n){var r=n(4),o=n(3).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},function(t,e,n){var r=n(9),o=n(96),i=n(97),a=n(5),s=n(15),c=n(98),u={},l={};(e=t.exports=function(t,e,n,f,p){var d,h,v,m,g=p?function(){return t}:c(t),y=r(n,f,e?2:1),b=0;if("function"!=typeof g)throw TypeError(t+" is not iterable!");if(i(g)){for(d=s(t.length);d>b;b++)if((m=e?y(a(h=t[b])[0],h[1]):y(t[b]))===u||m===l)return m}else for(v=g.call(t);!(h=v.next()).done;)if((m=o(v,y,h.value,e))===u||m===l)return m}).BREAK=u,e.RETURN=l},function(t,e,n){var r=n(11);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){"use strict";var r=n(3),o=n(8),i=n(7),a=n(1)("species");t.exports=function(t){var e=r[t];i&&e&&!e[a]&&o.f(e,a,{configurable:!0,get:function(){return this}})}},function(t,e,n){var r=n(12);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(54)("keys"),o=n(24);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(24)("meta"),o=n(4),i=n(14),a=n(8).f,s=0,c=Object.isExtensible||function(){return!0},u=!n(6)(function(){return c(Object.preventExtensions({}))}),l=function(t){a(t,r,{value:{i:"O"+ ++s,w:{}}})},f=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!c(t))return"F";if(!e)return"E";l(t)}return t[r].i},getWeak:function(t,e){if(!i(t,r)){if(!c(t))return!0;if(!e)return!1;l(t)}return t[r].w},onFreeze:function(t){return u&&f.NEED&&c(t)&&!i(t,r)&&l(t),t}}},function(t,e,n){"use strict";var r=n(52),o=n(2),i=n(11),a=n(10),s=n(18),c=n(109),u=n(26),l=n(111),f=n(1)("iterator"),p=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,e,n,h,v,m,g){c(n,e,h);var y,b,_,x=function(t){if(!p&&t in $)return $[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},w=e+" Iterator",k="values"==v,C=!1,$=t.prototype,S=$[f]||$["@@iterator"]||v&&$[v],O=S||x(v),E=v?k?x("entries"):O:void 0,A="Array"==e&&$.entries||S;if(A&&(_=l(A.call(new t)))!==Object.prototype&&_.next&&(u(_,w,!0),r||"function"==typeof _[f]||a(_,f,d)),k&&S&&"values"!==S.name&&(C=!0,O=function(){return S.call(this)}),r&&!g||!p&&!C&&$[f]||a($,f,O),s[e]=O,s[w]=d,v)if(y={values:k?O:x("values"),keys:m?O:x("keys"),entries:E},g)for(b in y)b in $||i($,b,y[b]);else o(o.P+o.F*(p||C),e,y);return y}},function(t,e,n){var r=n(8).f,o=Function.prototype,i=/^\s*function ([^ (]*)/;"name"in o||n(7)&&r(o,"name",{configurable:!0,get:function(){try{return(""+this).match(i)[1]}catch(t){return""}}})},function(t,e,n){"use strict";var r=n(2),o=n(81)(!1),i=[].indexOf,a=!!i&&1/[1].indexOf(1,-0)<0;r(r.P+r.F*(a||!n(21)(i)),"Array",{indexOf:function(t){return a?i.apply(this,arguments)||0:o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(88)(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){"use strict";var r=n(53),o=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var i=n.call(t,e);if("object"!=typeof i)throw new TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";var r,o,i=n(89),a=RegExp.prototype.exec,s=String.prototype.replace,c=a,u=(r=/a/,o=/b*/g,a.call(r,"a"),a.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),l=void 0!==/()??/.exec("")[1];(u||l)&&(c=function(t){var e,n,r,o,c=this;return l&&(n=new RegExp("^"+c.source+"$(?!\\s)",i.call(c))),u&&(e=c.lastIndex),r=a.call(c,t),u&&r&&(c.lastIndex=c.global?r.index+r[0].length:e),l&&r&&r.length>1&&s.call(r[0],n,function(){for(o=1;o")}),f=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var p=s(t),d=!i(function(){var e={};return e[p]=function(){return 7},7!=""[t](e)}),h=d?!i(function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[u]=function(){return n}),n[p](""),!e}):void 0;if(!d||!h||"replace"===t&&!l||"split"===t&&!f){var v=/./[p],m=n(a,p,""[t],function(t,e,n,r,o){return e.exec===c?d&&!o?{done:!0,value:v.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}}),g=m[0],y=m[1];r(String.prototype,t,g),o(RegExp.prototype,p,2==e?function(t,e){return y.call(t,this,e)}:function(t){return y.call(t,this)})}}},function(t,e,n){"use strict";var r,o,i,a,s=n(52),c=n(3),u=n(9),l=n(53),f=n(2),p=n(4),d=n(23),h=n(57),v=n(58),m=n(75),g=n(76).set,y=n(100)(),b=n(78),_=n(101),x=n(102),w=n(103),k=c.TypeError,C=c.process,$=C&&C.versions,S=$&&$.v8||"",O=c.Promise,E="process"==l(C),A=function(){},j=o=b.f,T=!!function(){try{var t=O.resolve(1),e=(t.constructor={})[n(1)("species")]=function(t){t(A,A)};return(E||"function"==typeof PromiseRejectionEvent)&&t.then(A)instanceof e&&0!==S.indexOf("6.6")&&-1===x.indexOf("Chrome/66")}catch(t){}}(),L=function(t){var e;return!(!p(t)||"function"!=typeof(e=t.then))&&e},P=function(t,e){if(!t._n){t._n=!0;var n=t._c;y(function(){for(var r=t._v,o=1==t._s,i=0,a=function(e){var n,i,a,s=o?e.ok:e.fail,c=e.resolve,u=e.reject,l=e.domain;try{s?(o||(2==t._h&&M(t),t._h=1),!0===s?n=r:(l&&l.enter(),n=s(r),l&&(l.exit(),a=!0)),n===e.promise?u(k("Promise-chain cycle")):(i=L(n))?i.call(n,c,u):c(n)):u(r)}catch(t){l&&!a&&l.exit(),u(t)}};n.length>i;)a(n[i++]);t._c=[],t._n=!1,e&&!t._h&&I(t)})}},I=function(t){g.call(c,function(){var e,n,r,o=t._v,i=R(t);if(i&&(e=_(function(){E?C.emit("unhandledRejection",o,t):(n=c.onunhandledrejection)?n({promise:t,reason:o}):(r=c.console)&&r.error&&r.error("Unhandled promise rejection",o)}),t._h=E||R(t)?2:1),t._a=void 0,i&&e.e)throw e.v})},R=function(t){return 1!==t._h&&0===(t._a||t._c).length},M=function(t){g.call(c,function(){var e;E?C.emit("rejectionHandled",t):(e=c.onrejectionhandled)&&e({promise:t,reason:t._v})})},D=function(t){var e=this;e._d||(e._d=!0,(e=e._w||e)._v=t,e._s=2,e._a||(e._a=e._c.slice()),P(e,!0))},N=function(t){var e,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===t)throw k("Promise can't be resolved itself");(e=L(t))?y(function(){var r={_w:n,_d:!1};try{e.call(t,u(N,r,1),u(D,r,1))}catch(t){D.call(r,t)}}):(n._v=t,n._s=1,P(n,!1))}catch(t){D.call({_w:n,_d:!1},t)}}};T||(O=function(t){h(this,O,"Promise","_h"),d(t),r.call(this);try{t(u(N,this,1),u(D,this,1))}catch(t){D.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=n(59)(O.prototype,{then:function(t,e){var n=j(m(this,O));return n.ok="function"!=typeof t||t,n.fail="function"==typeof e&&e,n.domain=E?C.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&P(this,!1),n.promise},catch:function(t){return this.then(void 0,t)}}),i=function(){var t=new r;this.promise=t,this.resolve=u(N,t,1),this.reject=u(D,t,1)},b.f=j=function(t){return t===O||t===a?new i(t):o(t)}),f(f.G+f.W+f.F*!T,{Promise:O}),n(26)(O,"Promise"),n(60)("Promise"),a=n(13).Promise,f(f.S+f.F*!T,"Promise",{reject:function(t){var e=j(this);return(0,e.reject)(t),e.promise}}),f(f.S+f.F*(s||!T),"Promise",{resolve:function(t){return w(s&&this===a?O:this,t)}}),f(f.S+f.F*!(T&&n(79)(function(t){O.all(t).catch(A)})),"Promise",{all:function(t){var e=this,n=j(e),r=n.resolve,o=n.reject,i=_(function(){var n=[],i=0,a=1;v(t,!1,function(t){var s=i++,c=!1;n.push(void 0),a++,e.resolve(t).then(function(t){c||(c=!0,n[s]=t,--a||r(n))},o)}),--a||r(n)});return i.e&&o(i.v),n.promise},race:function(t){var e=this,n=j(e),r=n.reject,o=_(function(){v(t,!1,function(t){e.resolve(t).then(n.resolve,r)})});return o.e&&r(o.v),n.promise}})},function(t,e,n){t.exports=!n(7)&&!n(6)(function(){return 7!=Object.defineProperty(n(55)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(5),o=n(23),i=n(1)("species");t.exports=function(t,e){var n,a=r(t).constructor;return void 0===a||null==(n=r(a)[i])?e:o(n)}},function(t,e,n){var r,o,i,a=n(9),s=n(99),c=n(77),u=n(55),l=n(3),f=l.process,p=l.setImmediate,d=l.clearImmediate,h=l.MessageChannel,v=l.Dispatch,m=0,g={},y=function(){var t=+this;if(g.hasOwnProperty(t)){var e=g[t];delete g[t],e()}},b=function(t){y.call(t.data)};p&&d||(p=function(t){for(var e=[],n=1;arguments.length>n;)e.push(arguments[n++]);return g[++m]=function(){s("function"==typeof t?t:Function(t),e)},r(m),m},d=function(t){delete g[t]},"process"==n(12)(f)?r=function(t){f.nextTick(a(y,t,1))}:v&&v.now?r=function(t){v.now(a(y,t,1))}:h?(i=(o=new h).port2,o.port1.onmessage=b,r=a(i.postMessage,i,1)):l.addEventListener&&"function"==typeof postMessage&&!l.importScripts?(r=function(t){l.postMessage(t+"","*")},l.addEventListener("message",b,!1)):r="onreadystatechange"in u("script")?function(t){c.appendChild(u("script")).onreadystatechange=function(){c.removeChild(this),y.call(t)}}:function(t){setTimeout(a(y,t,1),0)}),t.exports={set:p,clear:d}},function(t,e,n){var r=n(3).document;t.exports=r&&r.documentElement},function(t,e,n){"use strict";var r=n(23);function o(t){var e,n;this.promise=new t(function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r}),this.resolve=r(e),this.reject=r(n)}t.exports.f=function(t){return new o(t)}},function(t,e,n){var r=n(1)("iterator"),o=!1;try{var i=[7][r]();i.return=function(){o=!0},Array.from(i,function(){throw 2})}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var i=[7],a=i[r]();a.next=function(){return{done:n=!0}},i[r]=function(){return a},t(i)}catch(t){}return n}},function(t,e,n){var r=n(14),o=n(29),i=n(81)(!1),a=n(62)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)n!=a&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},function(t,e,n){var r=n(29),o=n(15),i=n(105);t.exports=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(2),o=n(13),i=n(6);t.exports=function(t,e){var n=(o.Object||{})[t]||Object[t],a={};a[t]=e(n),r(r.S+r.F*i(function(){n(1)}),"Object",a)}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(5),o=n(110),i=n(63),a=n(62)("IE_PROTO"),s=function(){},c=function(){var t,e=n(55)("iframe"),r=i.length;for(e.style.display="none",n(77).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write(" + diff --git a/docs/guide/registering-components.html b/docs/guide/registering-components.html index 66af513..a3ff724 100644 --- a/docs/guide/registering-components.html +++ b/docs/guide/registering-components.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,6 @@ →

- + diff --git a/docs/guide/registering-directives.html b/docs/guide/registering-directives.html index 360e3da..524af33 100644 --- a/docs/guide/registering-directives.html +++ b/docs/guide/registering-directives.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,6 @@ →

- + diff --git a/docs/guide/registering-mixins.html b/docs/guide/registering-mixins.html index b801315..a97b587 100644 --- a/docs/guide/registering-mixins.html +++ b/docs/guide/registering-mixins.html @@ -7,7 +7,7 @@ - + @@ -20,6 +20,6 @@

- + diff --git a/docs/guide/registering-routes.html b/docs/guide/registering-routes.html index 5af7ec8..a46cd0d 100644 --- a/docs/guide/registering-routes.html +++ b/docs/guide/registering-routes.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,6 @@ →

- + diff --git a/docs/guide/registering-views.html b/docs/guide/registering-views.html index e8719d5..d1a911e 100644 --- a/docs/guide/registering-views.html +++ b/docs/guide/registering-views.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,6 @@ →

- + diff --git a/docs/index.html b/docs/index.html index 86a3552..6b97b1d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,6 @@ →

- + diff --git a/docs/installation.html b/docs/installation.html index 0853c6f..45a8aa3 100644 --- a/docs/installation.html +++ b/docs/installation.html @@ -7,7 +7,7 @@ - + @@ -30,6 +30,6 @@ →

- + diff --git a/docs/service-worker.js b/docs/service-worker.js index 8e2ad51..85769da 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -21,7 +21,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox self.__precacheManifest = [ { "url": "404.html", - "revision": "7c6f669e11aa7f777db0b82f16887fa8" + "revision": "a187604263e1d9dd07d7070416f9c3f2" }, { "url": "assets/css/0.styles.26b306d6.css", @@ -48,8 +48,8 @@ self.__precacheManifest = [ "revision": "f61a5fe51a8d3ace3a49fb1913e3d833" }, { - "url": "assets/js/4.afea4750.js", - "revision": "60f669bc2a649e8a30f3d54003e62962" + "url": "assets/js/4.0c51f0c4.js", + "revision": "8359a4aca2926ea2035b505458d90128" }, { "url": "assets/js/5.a52d3cc8.js", @@ -72,40 +72,40 @@ self.__precacheManifest = [ "revision": "37129b0472e2153021241e95ae09313d" }, { - "url": "assets/js/app.1d6ce94f.js", - "revision": "3efedf22474672b8a141883c4e74d1a5" + "url": "assets/js/app.34f7c533.js", + "revision": "e9ac3127a7c91d0cdf1ae4205f4eb5ae" }, { "url": "guide/index.html", - "revision": "07a19a872b214c26325af7f2768024b3" + "revision": "0fdb9c4d44454ed8c3a5252f55d249ca" }, { "url": "guide/registering-components.html", - "revision": "2d6765dbdd6f870ec3d114076a39167d" + "revision": "4055f79c97f2b359527aa8b6050ce7d3" }, { "url": "guide/registering-directives.html", - "revision": "ba811cd55f5fca13dea31d60f8760661" + "revision": "6e7d05cf1890b8b15549ba8a22890b10" }, { "url": "guide/registering-mixins.html", - "revision": "139842ab1a77b7a6f6e7f1828502c35f" + "revision": "2edbd6709d05fb398c39091ff4ee9fc9" }, { "url": "guide/registering-routes.html", - "revision": "2386ecaa8050155d3dd87480ab6b802d" + "revision": "e791aeab4ecd3376521fbda5d25592db" }, { "url": "guide/registering-views.html", - "revision": "760e3980e0a80baae78a7c67b651008b" + "revision": "f285ff5ec03f5562c9aa07a65a0b00bb" }, { "url": "index.html", - "revision": "5e01c44878f11ce8ade5571220b17c53" + "revision": "445b2a5ac9431161fa5d3652d65a6cb3" }, { "url": "installation.html", - "revision": "1a1db2e939bb52beec155515285d1329" + "revision": "791fcbf3392980c1d2765c9eba4e0534" } ].concat(self.__precacheManifest || []); workbox.precaching.suppressWarnings(); diff --git a/src/index.js b/src/index.js index 13f9450..3a08776 100644 --- a/src/index.js +++ b/src/index.js @@ -3,45 +3,65 @@ const _defaults = { routes: { enabled: true, - pattern: /\.router.js$/ + requireContext: null }, components: { enabled: true, - pattern: /\/components\/.*\.vue$/ + requireContext: null, + requireAsyncContext: null } }; /** * Load router files * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} routesOptions */ -function registerRoutes (Vue, options) { - const routeFiles = options.requireContext - .keys() - .filter(file => file.match(options.routes.pattern)); - +function registerRoutes (Vue, routesOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireContext = routesOptions.requireContext || require.context( + // root folder for routes + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/', + // recursive + true, + // include all .router.js files + /\.router.js$/) + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + const routeFiles = requireContext.keys(); + + // Return them all loaded, so users can pass them onto their VueRouter declaration return routeFiles.map(routeFile => { - const routerConfig = options.requireContext(routeFile); + const routerConfig = requireContext(routeFile); return routerConfig.default ? routerConfig.default : routerConfig; }); } /** - * Register components files using Vue.component and requiring the file from the context + * Register components files using Vue.component and requiring the file from webpack's context * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerComponents (Vue, options) { - const componentsFiles = options.requireContext - .keys() - .filter(file => file.match(options.components.pattern)); - +function registerComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireContext = componentOptions.requireContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include all .vue files except for the .async.vue ones + /\/(?:[^.]+|(?!\.async\.vue$))\.vue$/) + + // Ask webpack to list the files (In sync mode, require.context already adds all files to bundle) + const componentFiles = requireContext.keys(); + + // Register all of them in Vue const getFileName = name => /\/([^\/]*)\.vue$/.exec(name)[1]; - - return componentsFiles.map(file => { + return componentFiles.map(file => { const name = getFileName(file); - let component = options.requireContext(file); + let component = requireContext(file); // Unwrap "default" from ES6 module if (component.hasOwnProperty('default')) component = component.default; Vue.component(name, component); @@ -52,25 +72,34 @@ function registerComponents (Vue, options) { } /** - * Register components files using Vue.component as async components by setting up a factory function using the requireAsyncContext + * Register components files using Vue.component as async components by setting up a factory function + * that loads the module using webpack's lazy mode * Each of these components will be on its own chunk * @param {Vue} Vue VueJS instance - * @param {Object} options + * @param {Object} componentOptions */ -function registerAsyncComponents (Vue, options) { - const componentsFiles = options.requireAsyncContext - .keys() - .filter(file => file.match(options.components.pattern)); - +function registerAsyncComponents (Vue, componentOptions) { + // Setup webpack's require context. See https://github.com/webpack/docs/wiki/context#context-module-api + const requireAsyncContext = componentOptions.requireAsyncContext || require.context( + // root folder for components + // relies on vue-cli setting a webpack alias of '@' to the project's /src folder + '@/components', + // recursive + true, + // include only .async.vue components + /async\.vue$/, + // webpack's lazy mode for require.context + 'lazy') + + // Ask webpack to list the files (In lazy mode, files are added to their own chunk and only if we require them) + const componentFiles = requireAsyncContext.keys(); + + // Register all of them in Vue const getFileName = name => /\/([^\/]*)\.async\.vue$/.exec(name)[1]; - - return componentsFiles.map(file => { + return componentFiles.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) - ); + Vue.component(name, () => requireAsyncContext(file)); // Return the registered component return Vue.component(name); @@ -86,19 +115,6 @@ function parseOptions (userOptions) { userOptions = userOptions || {}; return { - // 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) @@ -120,14 +136,12 @@ function register (Vue, userOptions) { routes: [], components: [] }; - 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.routes.enabled) { + aw.routes.push(registerRoutes(Vue, options.routes)); } - if (options.components.enabled && options.requireAsyncContext) { - aw.components.push(registerAsyncComponents(Vue, options)); + if (options.components.enabled) { + aw.components.push(registerComponents(Vue, options.components)); + aw.components.push(registerAsyncComponents(Vue, options.components)); } return aw;