├── .editorconfig
├── README.md
├── async
├── index.html
└── index.js
├── context
├── index.html
└── index.js
├── custom-iterator
├── index.html
└── index.js
├── index.html
├── lib
├── vue-router.js
└── vue.js
├── package.json
└── template-slot
├── helper.js
├── index.html
└── index.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | indent_size=2
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-advanced-programming
2 |
3 | A collection of tricks in [Vue.js](https://github.com/vuejs/vue).
4 |
5 | Online demo: https://herringtondarkholme.github.io/vue-advanced-programming/
6 |
--------------------------------------------------------------------------------
/async/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | async
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/async/index.js:
--------------------------------------------------------------------------------
1 | function Foo(resolve) {
2 | setTimeout(() => {
3 | resolve({
4 | template: 'foo
'
5 | })
6 | })
7 | }
8 |
9 | const router = new VueRouter({
10 | routes: [
11 | { path: '/', component: Foo }
12 | ]
13 | })
14 |
15 | new Vue({
16 | template: '
',
17 | router
18 | }).$mount('#app')
19 |
--------------------------------------------------------------------------------
/context/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | context
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/context/index.js:
--------------------------------------------------------------------------------
1 | function contextToken(name) {
2 | return typeof Symbol === 'function' ? Symbol(name) : name + Math.random()
3 | }
4 |
5 | Vue.mixin({
6 | beforeCreate() {
7 | if (!this.$options.expose) return
8 | const computed = this.$options.computed || {}
9 | computed.$context = () => this.$options.expose.call(this, this)
10 | this.$options.computed = computed
11 | }
12 | })
13 |
14 | Vue.mixin({
15 | beforeCreate() {
16 | if (!this.$options.inject) return
17 | const computed = this.$options.computed || {}
18 | for (let key of Object.keys(this.$options.inject)) {
19 | const token = this.$options.inject[key]
20 | computed[key] = () => this.$inject({token})
21 | }
22 | this.$options.computed = computed
23 | },
24 | methods: {
25 | $inject({token, all}) {
26 | let parent = this
27 | let ret = []
28 | while (parent) {
29 | const $context = parent.$context
30 | if ($context && $context.hasOwnProperty(token)) {
31 | if (all) ret.push($context[token])
32 | else return $context[token]
33 | }
34 | parent = parent.$parent
35 | }
36 | return all ? ret : undefined
37 | }
38 | }
39 | })
40 |
41 |
42 | // example
43 |
44 | var user = contextToken('user')
45 | var anotherUser = contextToken('user')
46 | var allUser = contextToken('allUser')
47 |
48 | Vue.component('parent', {
49 | template: `
50 |
51 |
52 | Child in template:
53 | Man in the middle:
54 |
55 |
`,
56 |
57 | data() {
58 | return {
59 | user: {
60 | name: 'Sebastian ',
61 | },
62 | }
63 | },
64 | expose: (vm) => ({
65 | [user]: vm.user,
66 | [allUser]: vm.user.name
67 | })
68 | })
69 |
70 | Vue.component('mitm', {
71 | template: ``,
72 | data() {
73 | return {
74 | user: {
75 | name: 'Deyne',
76 | }
77 | }
78 | },
79 | expose() {
80 | let name = this.user.name
81 | return {
82 | [anotherUser]: this.user,
83 | [allUser]: name
84 | }
85 | }
86 | })
87 |
88 | Vue.component('child', {
89 | template: '{{ user.name }} in {{$inject({token: allUser, all: true})}}
',
90 | data: () => ({allUser}),
91 | inject: { user }
92 | })
93 |
94 | new Vue({
95 | el: '#app',
96 | template: 'Another child in slot: '
97 | })
98 |
--------------------------------------------------------------------------------
/custom-iterator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | custom iterator
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/custom-iterator/index.js:
--------------------------------------------------------------------------------
1 | class Counter {
2 | constructor() {
3 | this.i = 1
4 | }
5 | *[Symbol.iterator]() {
6 | for (let i = 0; i < this.i; i++) yield i
7 | }
8 | increment() {
9 | this.i++
10 | }
11 | }
12 |
13 | new Vue({
14 | el: '#app',
15 | template: `
16 | `,
20 | data: {
21 | list: new Counter
22 | }
23 | })
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vue Advanced Programming
7 |
8 |
9 | Vue Advanced Programming
10 | A collection of tricks in vue.js
11 | Template Slot
12 | Custom iterator
13 | Context
14 | Async
15 |
16 |
17 |
--------------------------------------------------------------------------------
/lib/vue-router.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-router v2.1.1
3 | * (c) 2016 Evan You
4 | * @license MIT
5 | */
6 | (function (global, factory) {
7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8 | typeof define === 'function' && define.amd ? define(factory) :
9 | (global.VueRouter = factory());
10 | }(this, (function () { 'use strict';
11 |
12 |
13 | var resolveRouterView
14 | function initialLoad() {
15 | resolveRouterView(View)
16 | }
17 |
18 | var View = {
19 | name: 'router-view',
20 | functional: true,
21 | props: {
22 | name: {
23 | type: String,
24 | default: 'default'
25 | }
26 | },
27 | render: function render (h, ref) {
28 | var props = ref.props;
29 | var children = ref.children;
30 | var parent = ref.parent;
31 | var data = ref.data;
32 |
33 | data.routerView = true
34 |
35 | var route = parent.$route
36 | var cache = parent._routerViewCache || (parent._routerViewCache = {})
37 | var depth = 0
38 | var inactive = false
39 |
40 | while (parent) {
41 | if (parent.$vnode && parent.$vnode.data.routerView) {
42 | depth++
43 | }
44 | if (parent._inactive) {
45 | inactive = true
46 | }
47 | parent = parent.$parent
48 | }
49 |
50 | data.routerViewDepth = depth
51 | var matched = route.matched[depth]
52 | if (!matched) {
53 | return h()
54 | }
55 |
56 | var name = props.name
57 | var component = inactive
58 | ? cache[name]
59 | : (cache[name] = matched.components[name])
60 |
61 | if (!inactive) {
62 | var hooks = data.hook || (data.hook = {})
63 | hooks.init = function (vnode) {
64 | matched.instances[name] = vnode.child
65 | }
66 | hooks.prepatch = function (oldVnode, vnode) {
67 | matched.instances[name] = vnode.child
68 | }
69 | hooks.destroy = function (vnode) {
70 | if (matched.instances[name] === vnode.child) {
71 | matched.instances[name] = undefined
72 | }
73 | }
74 | }
75 |
76 | return h(component, data, children)
77 | }
78 | }
79 |
80 | /* */
81 |
82 | function assert (condition, message) {
83 | if (!condition) {
84 | throw new Error(("[vue-router] " + message))
85 | }
86 | }
87 |
88 | function warn (condition, message) {
89 | if (!condition) {
90 | typeof console !== 'undefined' && console.warn(("[vue-router] " + message))
91 | }
92 | }
93 |
94 | /* */
95 |
96 | var encode = encodeURIComponent
97 | var decode = decodeURIComponent
98 |
99 | function resolveQuery (
100 | query,
101 | extraQuery
102 | ) {
103 | if ( extraQuery === void 0 ) extraQuery = {};
104 |
105 | if (query) {
106 | var parsedQuery
107 | try {
108 | parsedQuery = parseQuery(query)
109 | } catch (e) {
110 | "development" !== 'production' && warn(false, e.message)
111 | parsedQuery = {}
112 | }
113 | for (var key in extraQuery) {
114 | parsedQuery[key] = extraQuery[key]
115 | }
116 | return parsedQuery
117 | } else {
118 | return extraQuery
119 | }
120 | }
121 |
122 | function parseQuery (query) {
123 | var res = {}
124 |
125 | query = query.trim().replace(/^(\?|#|&)/, '')
126 |
127 | if (!query) {
128 | return res
129 | }
130 |
131 | query.split('&').forEach(function (param) {
132 | var parts = param.replace(/\+/g, ' ').split('=')
133 | var key = decode(parts.shift())
134 | var val = parts.length > 0
135 | ? decode(parts.join('='))
136 | : null
137 |
138 | if (res[key] === undefined) {
139 | res[key] = val
140 | } else if (Array.isArray(res[key])) {
141 | res[key].push(val)
142 | } else {
143 | res[key] = [res[key], val]
144 | }
145 | })
146 |
147 | return res
148 | }
149 |
150 | function stringifyQuery (obj) {
151 | var res = obj ? Object.keys(obj).map(function (key) {
152 | var val = obj[key]
153 |
154 | if (val === undefined) {
155 | return ''
156 | }
157 |
158 | if (val === null) {
159 | return encode(key)
160 | }
161 |
162 | if (Array.isArray(val)) {
163 | var result = []
164 | val.slice().forEach(function (val2) {
165 | if (val2 === undefined) {
166 | return
167 | }
168 | if (val2 === null) {
169 | result.push(encode(key))
170 | } else {
171 | result.push(encode(key) + '=' + encode(val2))
172 | }
173 | })
174 | return result.join('&')
175 | }
176 |
177 | return encode(key) + '=' + encode(val)
178 | }).filter(function (x) { return x.length > 0; }).join('&') : null
179 | return res ? ("?" + res) : ''
180 | }
181 |
182 | /* */
183 |
184 | function createRoute (
185 | record,
186 | location,
187 | redirectedFrom
188 | ) {
189 | var route = {
190 | name: location.name || (record && record.name),
191 | meta: (record && record.meta) || {},
192 | path: location.path || '/',
193 | hash: location.hash || '',
194 | query: location.query || {},
195 | params: location.params || {},
196 | fullPath: getFullPath(location),
197 | matched: record ? formatMatch(record) : []
198 | }
199 | if (redirectedFrom) {
200 | route.redirectedFrom = getFullPath(redirectedFrom)
201 | }
202 | return Object.freeze(route)
203 | }
204 |
205 | // the starting route that represents the initial state
206 | var START = createRoute(null, {
207 | path: '/'
208 | })
209 |
210 | function formatMatch (record) {
211 | var res = []
212 | while (record) {
213 | res.unshift(record)
214 | record = record.parent
215 | }
216 | return res
217 | }
218 |
219 | function getFullPath (ref) {
220 | var path = ref.path;
221 | var query = ref.query; if ( query === void 0 ) query = {};
222 | var hash = ref.hash; if ( hash === void 0 ) hash = '';
223 |
224 | return (path || '/') + stringifyQuery(query) + hash
225 | }
226 |
227 | var trailingSlashRE = /\/$/
228 | function isSameRoute (a, b) {
229 | if (b === START) {
230 | return a === b
231 | } else if (!b) {
232 | return false
233 | } else if (a.path && b.path) {
234 | return (
235 | a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
236 | a.hash === b.hash &&
237 | isObjectEqual(a.query, b.query)
238 | )
239 | } else if (a.name && b.name) {
240 | return (
241 | a.name === b.name &&
242 | a.hash === b.hash &&
243 | isObjectEqual(a.query, b.query) &&
244 | isObjectEqual(a.params, b.params)
245 | )
246 | } else {
247 | return false
248 | }
249 | }
250 |
251 | function isObjectEqual (a, b) {
252 | if ( a === void 0 ) a = {};
253 | if ( b === void 0 ) b = {};
254 |
255 | var aKeys = Object.keys(a)
256 | var bKeys = Object.keys(b)
257 | if (aKeys.length !== bKeys.length) {
258 | return false
259 | }
260 | return aKeys.every(function (key) { return String(a[key]) === String(b[key]); })
261 | }
262 |
263 | function isIncludedRoute (current, target) {
264 | return (
265 | current.path.indexOf(target.path.replace(/\/$/, '')) === 0 &&
266 | (!target.hash || current.hash === target.hash) &&
267 | queryIncludes(current.query, target.query)
268 | )
269 | }
270 |
271 | function queryIncludes (current, target) {
272 | for (var key in target) {
273 | if (!(key in current)) {
274 | return false
275 | }
276 | }
277 | return true
278 | }
279 |
280 | /* */
281 |
282 | // work around weird flow bug
283 | var toTypes = [String, Object]
284 |
285 | var Link = {
286 | name: 'router-link',
287 | props: {
288 | to: {
289 | type: toTypes,
290 | required: true
291 | },
292 | tag: {
293 | type: String,
294 | default: 'a'
295 | },
296 | exact: Boolean,
297 | append: Boolean,
298 | replace: Boolean,
299 | activeClass: String,
300 | event: {
301 | type: [String, Array],
302 | default: 'click'
303 | }
304 | },
305 | render: function render (h) {
306 | var this$1 = this;
307 |
308 | var router = this.$router
309 | var current = this.$route
310 | var ref = router.resolve(this.to, current, this.append);
311 | var normalizedTo = ref.normalizedTo;
312 | var resolved = ref.resolved;
313 | var href = ref.href;
314 | var classes = {}
315 | var activeClass = this.activeClass || router.options.linkActiveClass || 'router-link-active'
316 | var compareTarget = normalizedTo.path ? createRoute(null, normalizedTo) : resolved
317 | classes[activeClass] = this.exact
318 | ? isSameRoute(current, compareTarget)
319 | : isIncludedRoute(current, compareTarget)
320 |
321 | var handler = function (e) {
322 | if (guardEvent(e)) {
323 | if (this$1.replace) {
324 | router.replace(normalizedTo)
325 | } else {
326 | router.push(normalizedTo)
327 | }
328 | }
329 | }
330 |
331 | var on = { click: guardEvent }
332 | if (Array.isArray(this.event)) {
333 | this.event.forEach(function (e) { on[e] = handler })
334 | } else {
335 | on[this.event] = handler
336 | }
337 |
338 | var data = {
339 | class: classes
340 | }
341 |
342 | if (this.tag === 'a') {
343 | data.on = on
344 | data.attrs = { href: href }
345 | } else {
346 | // find the first child and apply listener and href
347 | var a = findAnchor(this.$slots.default)
348 | if (a) {
349 | // in case the is a static node
350 | a.isStatic = false
351 | var extend = _Vue.util.extend
352 | var aData = a.data = extend({}, a.data)
353 | aData.on = on
354 | var aAttrs = a.data.attrs = extend({}, a.data.attrs)
355 | aAttrs.href = href
356 | } else {
357 | // doesn't have child, apply listener to self
358 | data.on = on
359 | }
360 | }
361 |
362 | return h(this.tag, data, this.$slots.default)
363 | }
364 | }
365 |
366 | function guardEvent (e) {
367 | // don't redirect with control keys
368 | /* istanbul ignore if */
369 | if (e.metaKey || e.ctrlKey || e.shiftKey) { return }
370 | // don't redirect when preventDefault called
371 | /* istanbul ignore if */
372 | if (e.defaultPrevented) { return }
373 | // don't redirect on right click
374 | /* istanbul ignore if */
375 | if (e.button !== 0) { return }
376 | // don't redirect if `target="_blank"`
377 | /* istanbul ignore if */
378 | var target = e.target.getAttribute('target')
379 | if (/\b_blank\b/i.test(target)) { return }
380 |
381 | e.preventDefault()
382 | return true
383 | }
384 |
385 | function findAnchor (children) {
386 | if (children) {
387 | var child
388 | for (var i = 0; i < children.length; i++) {
389 | child = children[i]
390 | if (child.tag === 'a') {
391 | return child
392 | }
393 | if (child.children && (child = findAnchor(child.children))) {
394 | return child
395 | }
396 | }
397 | }
398 | }
399 |
400 | var _Vue
401 |
402 | function install (Vue) {
403 | if (install.installed) { return }
404 | install.installed = true
405 |
406 | _Vue = Vue
407 |
408 | Object.defineProperty(Vue.prototype, '$router', {
409 | get: function get () { return this.$root._router }
410 | })
411 |
412 | Object.defineProperty(Vue.prototype, '$route', {
413 | get: function get$1 () { return this.$root._route }
414 | })
415 |
416 | Vue.mixin({
417 | beforeCreate: function beforeCreate () {
418 | if (this.$options.router) {
419 | this._router = this.$options.router
420 | this._router.init(this)
421 | Vue.util.defineReactive(this, '_route', this._router.history.current)
422 | }
423 | }
424 | })
425 |
426 | Vue.component('router-view', resolve => resolveRouterView = resolve)
427 | Vue.component('router-link', Link)
428 |
429 | var strats = Vue.config.optionMergeStrategies
430 | // use the same hook merging strategy for route hooks
431 | strats.beforeRouteEnter = strats.beforeRouteLeave = strats.created
432 | }
433 |
434 | /* */
435 |
436 | function resolvePath (
437 | relative,
438 | base,
439 | append
440 | ) {
441 | if (relative.charAt(0) === '/') {
442 | return relative
443 | }
444 |
445 | if (relative.charAt(0) === '?' || relative.charAt(0) === '#') {
446 | return base + relative
447 | }
448 |
449 | var stack = base.split('/')
450 |
451 | // remove trailing segment if:
452 | // - not appending
453 | // - appending to trailing slash (last segment is empty)
454 | if (!append || !stack[stack.length - 1]) {
455 | stack.pop()
456 | }
457 |
458 | // resolve relative path
459 | var segments = relative.replace(/^\//, '').split('/')
460 | for (var i = 0; i < segments.length; i++) {
461 | var segment = segments[i]
462 | if (segment === '.') {
463 | continue
464 | } else if (segment === '..') {
465 | stack.pop()
466 | } else {
467 | stack.push(segment)
468 | }
469 | }
470 |
471 | // ensure leading slash
472 | if (stack[0] !== '') {
473 | stack.unshift('')
474 | }
475 |
476 | return stack.join('/')
477 | }
478 |
479 | function parsePath (path) {
480 | var hash = ''
481 | var query = ''
482 |
483 | var hashIndex = path.indexOf('#')
484 | if (hashIndex >= 0) {
485 | hash = path.slice(hashIndex)
486 | path = path.slice(0, hashIndex)
487 | }
488 |
489 | var queryIndex = path.indexOf('?')
490 | if (queryIndex >= 0) {
491 | query = path.slice(queryIndex + 1)
492 | path = path.slice(0, queryIndex)
493 | }
494 |
495 | return {
496 | path: path,
497 | query: query,
498 | hash: hash
499 | }
500 | }
501 |
502 | function cleanPath (path) {
503 | return path.replace(/\/\//g, '/')
504 | }
505 |
506 | /* */
507 |
508 | function createRouteMap (routes) {
509 | var pathMap = Object.create(null)
510 | var nameMap = Object.create(null)
511 |
512 | routes.forEach(function (route) {
513 | addRouteRecord(pathMap, nameMap, route)
514 | })
515 |
516 | return {
517 | pathMap: pathMap,
518 | nameMap: nameMap
519 | }
520 | }
521 |
522 | function addRouteRecord (
523 | pathMap,
524 | nameMap,
525 | route,
526 | parent,
527 | matchAs
528 | ) {
529 | var path = route.path;
530 | var name = route.name;
531 | if ("development" !== 'production') {
532 | assert(path != null, "\"path\" is required in a route configuration.")
533 | assert(
534 | typeof route.component !== 'string',
535 | "route config \"component\" for path: " + (String(path || name)) + " cannot be a " +
536 | "string id. Use an actual component instead."
537 | )
538 | }
539 |
540 | var record = {
541 | path: normalizePath(path, parent),
542 | components: route.components || { default: route.component },
543 | instances: {},
544 | name: name,
545 | parent: parent,
546 | matchAs: matchAs,
547 | redirect: route.redirect,
548 | beforeEnter: route.beforeEnter,
549 | meta: route.meta || {}
550 | }
551 |
552 | if (route.children) {
553 | // Warn if route is named and has a default child route.
554 | // If users navigate to this route by name, the default child will
555 | // not be rendered (GH Issue #629)
556 | if ("development" !== 'production') {
557 | if (route.name && route.children.some(function (child) { return /^\/?$/.test(child.path); })) {
558 | warn(false, ("Named Route '" + (route.name) + "' has a default child route.\n When navigating to this named route (:to=\"{name: '" + (route.name) + "'\"), the default child route will not be rendered.\n Remove the name from this route and use the name of the default child route for named links instead.")
559 | )
560 | }
561 | }
562 | route.children.forEach(function (child) {
563 | addRouteRecord(pathMap, nameMap, child, record)
564 | })
565 | }
566 |
567 | if (route.alias !== undefined) {
568 | if (Array.isArray(route.alias)) {
569 | route.alias.forEach(function (alias) {
570 | addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path)
571 | })
572 | } else {
573 | addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path)
574 | }
575 | }
576 |
577 | if (!pathMap[record.path]) {
578 | pathMap[record.path] = record
579 | }
580 | if (name) {
581 | if (!nameMap[name]) {
582 | nameMap[name] = record
583 | } else if ("development" !== 'production') {
584 | warn(false, ("Duplicate named routes definition: { name: \"" + name + "\", path: \"" + (record.path) + "\" }"))
585 | }
586 | }
587 | }
588 |
589 | function normalizePath (path, parent) {
590 | path = path.replace(/\/$/, '')
591 | if (path[0] === '/') { return path }
592 | if (parent == null) { return path }
593 | return cleanPath(((parent.path) + "/" + path))
594 | }
595 |
596 | var __moduleExports = Array.isArray || function (arr) {
597 | return Object.prototype.toString.call(arr) == '[object Array]';
598 | };
599 |
600 | var isarray = __moduleExports
601 |
602 | /**
603 | * Expose `pathToRegexp`.
604 | */
605 | var index = pathToRegexp
606 | var parse_1 = parse
607 | var compile_1 = compile
608 | var tokensToFunction_1 = tokensToFunction
609 | var tokensToRegExp_1 = tokensToRegExp
610 |
611 | /**
612 | * The main path matching regexp utility.
613 | *
614 | * @type {RegExp}
615 | */
616 | var PATH_REGEXP = new RegExp([
617 | // Match escaped characters that would otherwise appear in future matches.
618 | // This allows the user to escape special characters that won't transform.
619 | '(\\\\.)',
620 | // Match Express-style parameters and un-named parameters with a prefix
621 | // and optional suffixes. Matches appear as:
622 | //
623 | // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined]
624 | // "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined, undefined]
625 | // "/*" => ["/", undefined, undefined, undefined, undefined, "*"]
626 | '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))'
627 | ].join('|'), 'g')
628 |
629 | /**
630 | * Parse a string for the raw tokens.
631 | *
632 | * @param {string} str
633 | * @param {Object=} options
634 | * @return {!Array}
635 | */
636 | function parse (str, options) {
637 | var tokens = []
638 | var key = 0
639 | var index = 0
640 | var path = ''
641 | var defaultDelimiter = options && options.delimiter || '/'
642 | var res
643 |
644 | while ((res = PATH_REGEXP.exec(str)) != null) {
645 | var m = res[0]
646 | var escaped = res[1]
647 | var offset = res.index
648 | path += str.slice(index, offset)
649 | index = offset + m.length
650 |
651 | // Ignore already escaped sequences.
652 | if (escaped) {
653 | path += escaped[1]
654 | continue
655 | }
656 |
657 | var next = str[index]
658 | var prefix = res[2]
659 | var name = res[3]
660 | var capture = res[4]
661 | var group = res[5]
662 | var modifier = res[6]
663 | var asterisk = res[7]
664 |
665 | // Push the current path onto the tokens.
666 | if (path) {
667 | tokens.push(path)
668 | path = ''
669 | }
670 |
671 | var partial = prefix != null && next != null && next !== prefix
672 | var repeat = modifier === '+' || modifier === '*'
673 | var optional = modifier === '?' || modifier === '*'
674 | var delimiter = res[2] || defaultDelimiter
675 | var pattern = capture || group
676 |
677 | tokens.push({
678 | name: name || key++,
679 | prefix: prefix || '',
680 | delimiter: delimiter,
681 | optional: optional,
682 | repeat: repeat,
683 | partial: partial,
684 | asterisk: !!asterisk,
685 | pattern: pattern ? escapeGroup(pattern) : (asterisk ? '.*' : '[^' + escapeString(delimiter) + ']+?')
686 | })
687 | }
688 |
689 | // Match any characters still remaining.
690 | if (index < str.length) {
691 | path += str.substr(index)
692 | }
693 |
694 | // If the path exists, push it onto the end.
695 | if (path) {
696 | tokens.push(path)
697 | }
698 |
699 | return tokens
700 | }
701 |
702 | /**
703 | * Compile a string to a template function for the path.
704 | *
705 | * @param {string} str
706 | * @param {Object=} options
707 | * @return {!function(Object=, Object=)}
708 | */
709 | function compile (str, options) {
710 | return tokensToFunction(parse(str, options))
711 | }
712 |
713 | /**
714 | * Prettier encoding of URI path segments.
715 | *
716 | * @param {string}
717 | * @return {string}
718 | */
719 | function encodeURIComponentPretty (str) {
720 | return encodeURI(str).replace(/[\/?#]/g, function (c) {
721 | return '%' + c.charCodeAt(0).toString(16).toUpperCase()
722 | })
723 | }
724 |
725 | /**
726 | * Encode the asterisk parameter. Similar to `pretty`, but allows slashes.
727 | *
728 | * @param {string}
729 | * @return {string}
730 | */
731 | function encodeAsterisk (str) {
732 | return encodeURI(str).replace(/[?#]/g, function (c) {
733 | return '%' + c.charCodeAt(0).toString(16).toUpperCase()
734 | })
735 | }
736 |
737 | /**
738 | * Expose a method for transforming tokens into the path function.
739 | */
740 | function tokensToFunction (tokens) {
741 | // Compile all the tokens into regexps.
742 | var matches = new Array(tokens.length)
743 |
744 | // Compile all the patterns before compilation.
745 | for (var i = 0; i < tokens.length; i++) {
746 | if (typeof tokens[i] === 'object') {
747 | matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$')
748 | }
749 | }
750 |
751 | return function (obj, opts) {
752 | var path = ''
753 | var data = obj || {}
754 | var options = opts || {}
755 | var encode = options.pretty ? encodeURIComponentPretty : encodeURIComponent
756 |
757 | for (var i = 0; i < tokens.length; i++) {
758 | var token = tokens[i]
759 |
760 | if (typeof token === 'string') {
761 | path += token
762 |
763 | continue
764 | }
765 |
766 | var value = data[token.name]
767 | var segment
768 |
769 | if (value == null) {
770 | if (token.optional) {
771 | // Prepend partial segment prefixes.
772 | if (token.partial) {
773 | path += token.prefix
774 | }
775 |
776 | continue
777 | } else {
778 | throw new TypeError('Expected "' + token.name + '" to be defined')
779 | }
780 | }
781 |
782 | if (isarray(value)) {
783 | if (!token.repeat) {
784 | throw new TypeError('Expected "' + token.name + '" to not repeat, but received `' + JSON.stringify(value) + '`')
785 | }
786 |
787 | if (value.length === 0) {
788 | if (token.optional) {
789 | continue
790 | } else {
791 | throw new TypeError('Expected "' + token.name + '" to not be empty')
792 | }
793 | }
794 |
795 | for (var j = 0; j < value.length; j++) {
796 | segment = encode(value[j])
797 |
798 | if (!matches[i].test(segment)) {
799 | throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received `' + JSON.stringify(segment) + '`')
800 | }
801 |
802 | path += (j === 0 ? token.prefix : token.delimiter) + segment
803 | }
804 |
805 | continue
806 | }
807 |
808 | segment = token.asterisk ? encodeAsterisk(value) : encode(value)
809 |
810 | if (!matches[i].test(segment)) {
811 | throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"')
812 | }
813 |
814 | path += token.prefix + segment
815 | }
816 |
817 | return path
818 | }
819 | }
820 |
821 | /**
822 | * Escape a regular expression string.
823 | *
824 | * @param {string} str
825 | * @return {string}
826 | */
827 | function escapeString (str) {
828 | return str.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1')
829 | }
830 |
831 | /**
832 | * Escape the capturing group by escaping special characters and meaning.
833 | *
834 | * @param {string} group
835 | * @return {string}
836 | */
837 | function escapeGroup (group) {
838 | return group.replace(/([=!:$\/()])/g, '\\$1')
839 | }
840 |
841 | /**
842 | * Attach the keys as a property of the regexp.
843 | *
844 | * @param {!RegExp} re
845 | * @param {Array} keys
846 | * @return {!RegExp}
847 | */
848 | function attachKeys (re, keys) {
849 | re.keys = keys
850 | return re
851 | }
852 |
853 | /**
854 | * Get the flags for a regexp from the options.
855 | *
856 | * @param {Object} options
857 | * @return {string}
858 | */
859 | function flags (options) {
860 | return options.sensitive ? '' : 'i'
861 | }
862 |
863 | /**
864 | * Pull out keys from a regexp.
865 | *
866 | * @param {!RegExp} path
867 | * @param {!Array} keys
868 | * @return {!RegExp}
869 | */
870 | function regexpToRegexp (path, keys) {
871 | // Use a negative lookahead to match only capturing groups.
872 | var groups = path.source.match(/\((?!\?)/g)
873 |
874 | if (groups) {
875 | for (var i = 0; i < groups.length; i++) {
876 | keys.push({
877 | name: i,
878 | prefix: null,
879 | delimiter: null,
880 | optional: false,
881 | repeat: false,
882 | partial: false,
883 | asterisk: false,
884 | pattern: null
885 | })
886 | }
887 | }
888 |
889 | return attachKeys(path, keys)
890 | }
891 |
892 | /**
893 | * Transform an array into a regexp.
894 | *
895 | * @param {!Array} path
896 | * @param {Array} keys
897 | * @param {!Object} options
898 | * @return {!RegExp}
899 | */
900 | function arrayToRegexp (path, keys, options) {
901 | var parts = []
902 |
903 | for (var i = 0; i < path.length; i++) {
904 | parts.push(pathToRegexp(path[i], keys, options).source)
905 | }
906 |
907 | var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options))
908 |
909 | return attachKeys(regexp, keys)
910 | }
911 |
912 | /**
913 | * Create a path regexp from string input.
914 | *
915 | * @param {string} path
916 | * @param {!Array} keys
917 | * @param {!Object} options
918 | * @return {!RegExp}
919 | */
920 | function stringToRegexp (path, keys, options) {
921 | return tokensToRegExp(parse(path, options), keys, options)
922 | }
923 |
924 | /**
925 | * Expose a function for taking tokens and returning a RegExp.
926 | *
927 | * @param {!Array} tokens
928 | * @param {(Array|Object)=} keys
929 | * @param {Object=} options
930 | * @return {!RegExp}
931 | */
932 | function tokensToRegExp (tokens, keys, options) {
933 | if (!isarray(keys)) {
934 | options = /** @type {!Object} */ (keys || options)
935 | keys = []
936 | }
937 |
938 | options = options || {}
939 |
940 | var strict = options.strict
941 | var end = options.end !== false
942 | var route = ''
943 |
944 | // Iterate over the tokens and create our regexp string.
945 | for (var i = 0; i < tokens.length; i++) {
946 | var token = tokens[i]
947 |
948 | if (typeof token === 'string') {
949 | route += escapeString(token)
950 | } else {
951 | var prefix = escapeString(token.prefix)
952 | var capture = '(?:' + token.pattern + ')'
953 |
954 | keys.push(token)
955 |
956 | if (token.repeat) {
957 | capture += '(?:' + prefix + capture + ')*'
958 | }
959 |
960 | if (token.optional) {
961 | if (!token.partial) {
962 | capture = '(?:' + prefix + '(' + capture + '))?'
963 | } else {
964 | capture = prefix + '(' + capture + ')?'
965 | }
966 | } else {
967 | capture = prefix + '(' + capture + ')'
968 | }
969 |
970 | route += capture
971 | }
972 | }
973 |
974 | var delimiter = escapeString(options.delimiter || '/')
975 | var endsWithDelimiter = route.slice(-delimiter.length) === delimiter
976 |
977 | // In non-strict mode we allow a slash at the end of match. If the path to
978 | // match already ends with a slash, we remove it for consistency. The slash
979 | // is valid at the end of a path match, not in the middle. This is important
980 | // in non-ending mode, where "/test/" shouldn't match "/test//route".
981 | if (!strict) {
982 | route = (endsWithDelimiter ? route.slice(0, -delimiter.length) : route) + '(?:' + delimiter + '(?=$))?'
983 | }
984 |
985 | if (end) {
986 | route += '$'
987 | } else {
988 | // In non-ending mode, we need the capturing groups to match as much as
989 | // possible by using a positive lookahead to the end or next path segment.
990 | route += strict && endsWithDelimiter ? '' : '(?=' + delimiter + '|$)'
991 | }
992 |
993 | return attachKeys(new RegExp('^' + route, flags(options)), keys)
994 | }
995 |
996 | /**
997 | * Normalize the given path string, returning a regular expression.
998 | *
999 | * An empty array can be passed in for the keys, which will hold the
1000 | * placeholder key descriptions. For example, using `/user/:id`, `keys` will
1001 | * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
1002 | *
1003 | * @param {(string|RegExp|Array)} path
1004 | * @param {(Array|Object)=} keys
1005 | * @param {Object=} options
1006 | * @return {!RegExp}
1007 | */
1008 | function pathToRegexp (path, keys, options) {
1009 | if (!isarray(keys)) {
1010 | options = /** @type {!Object} */ (keys || options)
1011 | keys = []
1012 | }
1013 |
1014 | options = options || {}
1015 |
1016 | if (path instanceof RegExp) {
1017 | return regexpToRegexp(path, /** @type {!Array} */ (keys))
1018 | }
1019 |
1020 | if (isarray(path)) {
1021 | return arrayToRegexp(/** @type {!Array} */ (path), /** @type {!Array} */ (keys), options)
1022 | }
1023 |
1024 | return stringToRegexp(/** @type {string} */ (path), /** @type {!Array} */ (keys), options)
1025 | }
1026 |
1027 | index.parse = parse_1;
1028 | index.compile = compile_1;
1029 | index.tokensToFunction = tokensToFunction_1;
1030 | index.tokensToRegExp = tokensToRegExp_1;
1031 |
1032 | /* */
1033 |
1034 | var regexpCache = Object.create(null)
1035 |
1036 | function getRouteRegex (path) {
1037 | var hit = regexpCache[path]
1038 | var keys, regexp
1039 |
1040 | if (hit) {
1041 | keys = hit.keys
1042 | regexp = hit.regexp
1043 | } else {
1044 | keys = []
1045 | regexp = index(path, keys)
1046 | regexpCache[path] = { keys: keys, regexp: regexp }
1047 | }
1048 |
1049 | return { keys: keys, regexp: regexp }
1050 | }
1051 |
1052 | var regexpCompileCache = Object.create(null)
1053 |
1054 | function fillParams (
1055 | path,
1056 | params,
1057 | routeMsg
1058 | ) {
1059 | try {
1060 | var filler =
1061 | regexpCompileCache[path] ||
1062 | (regexpCompileCache[path] = index.compile(path))
1063 | return filler(params || {}, { pretty: true })
1064 | } catch (e) {
1065 | if ("development" !== 'production') {
1066 | warn(false, ("missing param for " + routeMsg + ": " + (e.message)))
1067 | }
1068 | return ''
1069 | }
1070 | }
1071 |
1072 | /* */
1073 |
1074 | function normalizeLocation (
1075 | raw,
1076 | current,
1077 | append
1078 | ) {
1079 | var next = typeof raw === 'string' ? { path: raw } : raw
1080 | // named target
1081 | if (next.name || next._normalized) {
1082 | return next
1083 | }
1084 |
1085 | // relative params
1086 | if (!next.path && next.params && current) {
1087 | next = assign({}, next)
1088 | next._normalized = true
1089 | var params = assign(assign({}, current.params), next.params)
1090 | if (current.name) {
1091 | next.name = current.name
1092 | next.params = params
1093 | } else if (current.matched) {
1094 | var rawPath = current.matched[current.matched.length - 1].path
1095 | next.path = fillParams(rawPath, params, ("path " + (current.path)))
1096 | } else if ("development" !== 'production') {
1097 | warn(false, "relative params navigation requires a current route.")
1098 | }
1099 | return next
1100 | }
1101 |
1102 | var parsedPath = parsePath(next.path || '')
1103 | var basePath = (current && current.path) || '/'
1104 | var path = parsedPath.path
1105 | ? resolvePath(parsedPath.path, basePath, append || next.append)
1106 | : (current && current.path) || '/'
1107 | var query = resolveQuery(parsedPath.query, next.query)
1108 | var hash = next.hash || parsedPath.hash
1109 | if (hash && hash.charAt(0) !== '#') {
1110 | hash = "#" + hash
1111 | }
1112 |
1113 | return {
1114 | _normalized: true,
1115 | path: path,
1116 | query: query,
1117 | hash: hash
1118 | }
1119 | }
1120 |
1121 | function assign (a, b) {
1122 | for (var key in b) {
1123 | a[key] = b[key]
1124 | }
1125 | return a
1126 | }
1127 |
1128 | /* */
1129 |
1130 | function createMatcher (routes) {
1131 | var ref = createRouteMap(routes);
1132 | var pathMap = ref.pathMap;
1133 | var nameMap = ref.nameMap;
1134 |
1135 | function match (
1136 | raw,
1137 | currentRoute,
1138 | redirectedFrom
1139 | ) {
1140 | var location = normalizeLocation(raw, currentRoute)
1141 | var name = location.name;
1142 |
1143 | if (name) {
1144 | var record = nameMap[name]
1145 | var paramNames = getRouteRegex(record.path).keys
1146 | .filter(function (key) { return !key.optional; })
1147 | .map(function (key) { return key.name; })
1148 |
1149 | if (typeof location.params !== 'object') {
1150 | location.params = {}
1151 | }
1152 |
1153 | if (currentRoute && typeof currentRoute.params === 'object') {
1154 | for (var key in currentRoute.params) {
1155 | if (!(key in location.params) && paramNames.indexOf(key) > -1) {
1156 | location.params[key] = currentRoute.params[key]
1157 | }
1158 | }
1159 | }
1160 |
1161 | if (record) {
1162 | location.path = fillParams(record.path, location.params, ("named route \"" + name + "\""))
1163 | return _createRoute(record, location, redirectedFrom)
1164 | }
1165 | } else if (location.path) {
1166 | location.params = {}
1167 | for (var path in pathMap) {
1168 | if (matchRoute(path, location.params, location.path)) {
1169 | return _createRoute(pathMap[path], location, redirectedFrom)
1170 | }
1171 | }
1172 | }
1173 | // no match
1174 | return _createRoute(null, location)
1175 | }
1176 |
1177 | function redirect (
1178 | record,
1179 | location
1180 | ) {
1181 | var originalRedirect = record.redirect
1182 | var redirect = typeof originalRedirect === 'function'
1183 | ? originalRedirect(createRoute(record, location))
1184 | : originalRedirect
1185 |
1186 | if (typeof redirect === 'string') {
1187 | redirect = { path: redirect }
1188 | }
1189 |
1190 | if (!redirect || typeof redirect !== 'object') {
1191 | "development" !== 'production' && warn(
1192 | false, ("invalid redirect option: " + (JSON.stringify(redirect)))
1193 | )
1194 | return _createRoute(null, location)
1195 | }
1196 |
1197 | var re = redirect
1198 | var name = re.name;
1199 | var path = re.path;
1200 | var query = location.query;
1201 | var hash = location.hash;
1202 | var params = location.params;
1203 | query = re.hasOwnProperty('query') ? re.query : query
1204 | hash = re.hasOwnProperty('hash') ? re.hash : hash
1205 | params = re.hasOwnProperty('params') ? re.params : params
1206 |
1207 | if (name) {
1208 | // resolved named direct
1209 | var targetRecord = nameMap[name]
1210 | if ("development" !== 'production') {
1211 | assert(targetRecord, ("redirect failed: named route \"" + name + "\" not found."))
1212 | }
1213 | return match({
1214 | _normalized: true,
1215 | name: name,
1216 | query: query,
1217 | hash: hash,
1218 | params: params
1219 | }, undefined, location)
1220 | } else if (path) {
1221 | // 1. resolve relative redirect
1222 | var rawPath = resolveRecordPath(path, record)
1223 | // 2. resolve params
1224 | var resolvedPath = fillParams(rawPath, params, ("redirect route with path \"" + rawPath + "\""))
1225 | // 3. rematch with existing query and hash
1226 | return match({
1227 | _normalized: true,
1228 | path: resolvedPath,
1229 | query: query,
1230 | hash: hash
1231 | }, undefined, location)
1232 | } else {
1233 | warn(false, ("invalid redirect option: " + (JSON.stringify(redirect))))
1234 | return _createRoute(null, location)
1235 | }
1236 | }
1237 |
1238 | function alias (
1239 | record,
1240 | location,
1241 | matchAs
1242 | ) {
1243 | var aliasedPath = fillParams(matchAs, location.params, ("aliased route with path \"" + matchAs + "\""))
1244 | var aliasedMatch = match({
1245 | _normalized: true,
1246 | path: aliasedPath
1247 | })
1248 | if (aliasedMatch) {
1249 | var matched = aliasedMatch.matched
1250 | var aliasedRecord = matched[matched.length - 1]
1251 | location.params = aliasedMatch.params
1252 | return _createRoute(aliasedRecord, location)
1253 | }
1254 | return _createRoute(null, location)
1255 | }
1256 |
1257 | function _createRoute (
1258 | record,
1259 | location,
1260 | redirectedFrom
1261 | ) {
1262 | if (record && record.redirect) {
1263 | return redirect(record, redirectedFrom || location)
1264 | }
1265 | if (record && record.matchAs) {
1266 | return alias(record, location, record.matchAs)
1267 | }
1268 | return createRoute(record, location, redirectedFrom)
1269 | }
1270 |
1271 | return match
1272 | }
1273 |
1274 | function matchRoute (
1275 | path,
1276 | params,
1277 | pathname
1278 | ) {
1279 | var ref = getRouteRegex(path);
1280 | var regexp = ref.regexp;
1281 | var keys = ref.keys;
1282 | var m = pathname.match(regexp)
1283 |
1284 | if (!m) {
1285 | return false
1286 | } else if (!params) {
1287 | return true
1288 | }
1289 |
1290 | for (var i = 1, len = m.length; i < len; ++i) {
1291 | var key = keys[i - 1]
1292 | var val = typeof m[i] === 'string' ? decodeURIComponent(m[i]) : m[i]
1293 | if (key) { params[key.name] = val }
1294 | }
1295 |
1296 | return true
1297 | }
1298 |
1299 | function resolveRecordPath (path, record) {
1300 | return resolvePath(path, record.parent ? record.parent.path : '/', true)
1301 | }
1302 |
1303 | /* */
1304 |
1305 | var inBrowser = typeof window !== 'undefined'
1306 |
1307 | var supportsHistory = inBrowser && (function () {
1308 | var ua = window.navigator.userAgent
1309 |
1310 | if (
1311 | (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
1312 | ua.indexOf('Mobile Safari') !== -1 &&
1313 | ua.indexOf('Chrome') === -1 &&
1314 | ua.indexOf('Windows Phone') === -1
1315 | ) {
1316 | return false
1317 | }
1318 |
1319 | return window.history && 'pushState' in window.history
1320 | })()
1321 |
1322 | /* */
1323 |
1324 | function runQueue (queue, fn, cb) {
1325 | var step = function (index) {
1326 | if (index >= queue.length) {
1327 | cb()
1328 | } else {
1329 | if (queue[index]) {
1330 | fn(queue[index], function () {
1331 | step(index + 1)
1332 | })
1333 | } else {
1334 | step(index + 1)
1335 | }
1336 | }
1337 | }
1338 | step(0)
1339 | }
1340 |
1341 | /* */
1342 |
1343 |
1344 | var History = function History (router, base) {
1345 | this.router = router
1346 | this.base = normalizeBase(base)
1347 | // start with a route object that stands for "nowhere"
1348 | this.current = START
1349 | this.pending = null
1350 | };
1351 |
1352 | History.prototype.listen = function listen (cb) {
1353 | this.cb = cb
1354 | };
1355 |
1356 | History.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) {
1357 | var this$1 = this;
1358 |
1359 | var route = this.router.match(location, this.current)
1360 | this.confirmTransition(route, function () {
1361 | this$1.updateRoute(route)
1362 | onComplete && onComplete(route)
1363 | this$1.ensureURL()
1364 | }, onAbort)
1365 | };
1366 |
1367 | History.prototype.confirmTransition = function confirmTransition (route, onComplete, onAbort) {
1368 | var this$1 = this;
1369 |
1370 | var current = this.current
1371 | var abort = function () { onAbort && onAbort() }
1372 | if (isSameRoute(route, current)) {
1373 | this.ensureURL()
1374 | return abort()
1375 | }
1376 |
1377 | var ref = resolveQueue(this.current.matched, route.matched);
1378 | var deactivated = ref.deactivated;
1379 | var activated = ref.activated;
1380 |
1381 | var queue = [].concat(
1382 | // in-component leave guards
1383 | extractLeaveGuards(deactivated),
1384 | // global before hooks
1385 | this.router.beforeHooks,
1386 | // enter guards
1387 | activated.map(function (m) { return m.beforeEnter; }),
1388 | // async components
1389 | resolveAsyncComponents(activated)
1390 | )
1391 |
1392 | this.pending = route
1393 | var iterator = function (hook, next) {
1394 | if (this$1.pending !== route) {
1395 | return abort()
1396 | }
1397 | hook(route, current, function (to) {
1398 | if (to === false) {
1399 | // next(false) -> abort navigation, ensure current URL
1400 | this$1.ensureURL(true)
1401 | abort()
1402 | } else if (typeof to === 'string' || typeof to === 'object') {
1403 | // next('/') or next({ path: '/' }) -> redirect
1404 | (typeof to === 'object' && to.replace) ? this$1.replace(to) : this$1.push(to)
1405 | abort()
1406 | } else {
1407 | // confirm transition and pass on the value
1408 | next(to)
1409 | }
1410 | })
1411 | }
1412 |
1413 | runQueue(queue, iterator, function () {
1414 | var postEnterCbs = []
1415 | var enterGuards = extractEnterGuards(activated, postEnterCbs, function () {
1416 | return this$1.current === route
1417 | })
1418 | // wait until async components are resolved before
1419 | // extracting in-component enter guards
1420 | runQueue(enterGuards, iterator, function () {
1421 | if (this$1.pending !== route) {
1422 | return abort()
1423 | }
1424 | this$1.pending = null
1425 | onComplete(route)
1426 | if (this$1.router.app) {
1427 | this$1.router.app.$nextTick(function () {
1428 | postEnterCbs.forEach(function (cb) { return cb(); })
1429 | })
1430 | }
1431 | })
1432 | })
1433 | };
1434 |
1435 | History.prototype.updateRoute = function updateRoute (route) {
1436 | var prev = this.current
1437 | this.current = route
1438 | this.cb && this.cb(route)
1439 | this.router.afterHooks.forEach(function (hook) {
1440 | hook && hook(route, prev)
1441 | })
1442 | };
1443 |
1444 | function normalizeBase (base) {
1445 | if (!base) {
1446 | if (inBrowser) {
1447 | // respect tag
1448 | var baseEl = document.querySelector('base')
1449 | base = baseEl ? baseEl.getAttribute('href') : '/'
1450 | } else {
1451 | base = '/'
1452 | }
1453 | }
1454 | // make sure there's the starting slash
1455 | if (base.charAt(0) !== '/') {
1456 | base = '/' + base
1457 | }
1458 | // remove trailing slash
1459 | return base.replace(/\/$/, '')
1460 | }
1461 |
1462 | function resolveQueue (
1463 | current,
1464 | next
1465 | ) {
1466 | var i
1467 | var max = Math.max(current.length, next.length)
1468 | for (i = 0; i < max; i++) {
1469 | if (current[i] !== next[i]) {
1470 | break
1471 | }
1472 | }
1473 | return {
1474 | activated: next.slice(i),
1475 | deactivated: current.slice(i)
1476 | }
1477 | }
1478 |
1479 | function extractGuard (
1480 | def,
1481 | key
1482 | ) {
1483 | if (typeof def !== 'function') {
1484 | // extend now so that global mixins are applied.
1485 | def = _Vue.extend(def)
1486 | }
1487 | return def.options[key]
1488 | }
1489 |
1490 | function extractLeaveGuards (matched) {
1491 | return flatten(flatMapComponents(matched, function (def, instance) {
1492 | var guard = extractGuard(def, 'beforeRouteLeave')
1493 | if (guard) {
1494 | return Array.isArray(guard)
1495 | ? guard.map(function (guard) { return wrapLeaveGuard(guard, instance); })
1496 | : wrapLeaveGuard(guard, instance)
1497 | }
1498 | }).reverse())
1499 | }
1500 |
1501 | function wrapLeaveGuard (
1502 | guard,
1503 | instance
1504 | ) {
1505 | return function routeLeaveGuard () {
1506 | return guard.apply(instance, arguments)
1507 | }
1508 | }
1509 |
1510 | function extractEnterGuards (
1511 | matched,
1512 | cbs,
1513 | isValid
1514 | ) {
1515 | return flatten(flatMapComponents(matched, function (def, _, match, key) {
1516 | var guard = extractGuard(def, 'beforeRouteEnter')
1517 | if (guard) {
1518 | return Array.isArray(guard)
1519 | ? guard.map(function (guard) { return wrapEnterGuard(guard, cbs, match, key, isValid); })
1520 | : wrapEnterGuard(guard, cbs, match, key, isValid)
1521 | }
1522 | }))
1523 | }
1524 |
1525 | function wrapEnterGuard (
1526 | guard,
1527 | cbs,
1528 | match,
1529 | key,
1530 | isValid
1531 | ) {
1532 | return function routeEnterGuard (to, from, next) {
1533 | return guard(to, from, function (cb) {
1534 | next(cb)
1535 | if (typeof cb === 'function') {
1536 | cbs.push(function () {
1537 | // #750
1538 | // if a router-view is wrapped with an out-in transition,
1539 | // the instance may not have been registered at this time.
1540 | // we will need to poll for registration until current route
1541 | // is no longer valid.
1542 | poll(cb, match.instances, key, isValid)
1543 | })
1544 | }
1545 | })
1546 | }
1547 | }
1548 |
1549 | function poll (
1550 | cb, // somehow flow cannot infer this is a function
1551 | instances,
1552 | key,
1553 | isValid
1554 | ) {
1555 | if (instances[key]) {
1556 | cb(instances[key])
1557 | } else if (isValid()) {
1558 | setTimeout(function () {
1559 | poll(cb, instances, key, isValid)
1560 | }, 16)
1561 | }
1562 | }
1563 |
1564 | function resolveAsyncComponents (matched) {
1565 | return flatMapComponents(matched, function (def, _, match, key) {
1566 | // if it's a function and doesn't have Vue options attached,
1567 | // assume it's an async component resolve function.
1568 | // we are not using Vue's default async resolving mechanism because
1569 | // we want to halt the navigation until the incoming component has been
1570 | // resolved.
1571 | if (typeof def === 'function' && !def.options) {
1572 | return function (to, from, next) {
1573 | var resolve = function (resolvedDef) {
1574 | match.components[key] = resolvedDef
1575 | next()
1576 | }
1577 |
1578 | var reject = function (reason) {
1579 | warn(false, ("Failed to resolve async component " + key + ": " + reason))
1580 | next(false)
1581 | }
1582 |
1583 | var res = def(resolve, reject)
1584 | if (res && typeof res.then === 'function') {
1585 | res.then(resolve, reject)
1586 | }
1587 | }
1588 | }
1589 | })
1590 | }
1591 |
1592 | function flatMapComponents (
1593 | matched,
1594 | fn
1595 | ) {
1596 | return flatten(matched.map(function (m) {
1597 | return Object.keys(m.components).map(function (key) { return fn(
1598 | m.components[key],
1599 | m.instances[key],
1600 | m, key
1601 | ); })
1602 | }))
1603 | }
1604 |
1605 | function flatten (arr) {
1606 | return Array.prototype.concat.apply([], arr)
1607 | }
1608 |
1609 | /* */
1610 |
1611 | var positionStore = Object.create(null)
1612 |
1613 | function saveScrollPosition (key) {
1614 | if (!key) { return }
1615 | positionStore[key] = {
1616 | x: window.pageXOffset,
1617 | y: window.pageYOffset
1618 | }
1619 | }
1620 |
1621 | function getScrollPosition (key) {
1622 | if (!key) { return }
1623 | return positionStore[key]
1624 | }
1625 |
1626 | function getElementPosition (el) {
1627 | var docRect = document.documentElement.getBoundingClientRect()
1628 | var elRect = el.getBoundingClientRect()
1629 | return {
1630 | x: elRect.left - docRect.left,
1631 | y: elRect.top - docRect.top
1632 | }
1633 | }
1634 |
1635 | function isValidPosition (obj) {
1636 | return isNumber(obj.x) || isNumber(obj.y)
1637 | }
1638 |
1639 | function normalizePosition (obj) {
1640 | return {
1641 | x: isNumber(obj.x) ? obj.x : window.pageXOffset,
1642 | y: isNumber(obj.y) ? obj.y : window.pageYOffset
1643 | }
1644 | }
1645 |
1646 | function isNumber (v) {
1647 | return typeof v === 'number'
1648 | }
1649 |
1650 | /* */
1651 |
1652 |
1653 | var genKey = function () { return String(Date.now()); }
1654 | var _key = genKey()
1655 |
1656 | var HTML5History = (function (History) {
1657 | function HTML5History (router, base) {
1658 | var this$1 = this;
1659 |
1660 | History.call(this, router, base)
1661 |
1662 | var expectScroll = router.options.scrollBehavior
1663 | window.addEventListener('popstate', function (e) {
1664 | _key = e.state && e.state.key
1665 | var current = this$1.current
1666 | this$1.transitionTo(getLocation(this$1.base), function (next) {
1667 | if (expectScroll) {
1668 | this$1.handleScroll(next, current, true)
1669 | }
1670 | })
1671 | })
1672 |
1673 | if (expectScroll) {
1674 | window.addEventListener('scroll', function () {
1675 | saveScrollPosition(_key)
1676 | })
1677 | }
1678 | }
1679 |
1680 | if ( History ) HTML5History.__proto__ = History;
1681 | HTML5History.prototype = Object.create( History && History.prototype );
1682 | HTML5History.prototype.constructor = HTML5History;
1683 |
1684 | HTML5History.prototype.go = function go (n) {
1685 | window.history.go(n)
1686 | };
1687 |
1688 | HTML5History.prototype.push = function push (location) {
1689 | var this$1 = this;
1690 |
1691 | var current = this.current
1692 | this.transitionTo(location, function (route) {
1693 | pushState(cleanPath(this$1.base + route.fullPath))
1694 | this$1.handleScroll(route, current, false)
1695 | })
1696 | };
1697 |
1698 | HTML5History.prototype.replace = function replace (location) {
1699 | var this$1 = this;
1700 |
1701 | var current = this.current
1702 | this.transitionTo(location, function (route) {
1703 | replaceState(cleanPath(this$1.base + route.fullPath))
1704 | this$1.handleScroll(route, current, false)
1705 | })
1706 | };
1707 |
1708 | HTML5History.prototype.ensureURL = function ensureURL (push) {
1709 | if (getLocation(this.base) !== this.current.fullPath) {
1710 | var current = cleanPath(this.base + this.current.fullPath)
1711 | push ? pushState(current) : replaceState(current)
1712 | }
1713 | };
1714 |
1715 | HTML5History.prototype.handleScroll = function handleScroll (to, from, isPop) {
1716 | var router = this.router
1717 | if (!router.app) {
1718 | return
1719 | }
1720 |
1721 | var behavior = router.options.scrollBehavior
1722 | if (!behavior) {
1723 | return
1724 | }
1725 | if ("development" !== 'production') {
1726 | assert(typeof behavior === 'function', "scrollBehavior must be a function")
1727 | }
1728 |
1729 | // wait until re-render finishes before scrolling
1730 | router.app.$nextTick(function () {
1731 | var position = getScrollPosition(_key)
1732 | var shouldScroll = behavior(to, from, isPop ? position : null)
1733 | if (!shouldScroll) {
1734 | return
1735 | }
1736 | var isObject = typeof shouldScroll === 'object'
1737 | if (isObject && typeof shouldScroll.selector === 'string') {
1738 | var el = document.querySelector(shouldScroll.selector)
1739 | if (el) {
1740 | position = getElementPosition(el)
1741 | } else if (isValidPosition(shouldScroll)) {
1742 | position = normalizePosition(shouldScroll)
1743 | }
1744 | } else if (isObject && isValidPosition(shouldScroll)) {
1745 | position = normalizePosition(shouldScroll)
1746 | }
1747 |
1748 | if (position) {
1749 | window.scrollTo(position.x, position.y)
1750 | }
1751 | })
1752 | };
1753 |
1754 | return HTML5History;
1755 | }(History));
1756 |
1757 | function getLocation (base) {
1758 | var path = window.location.pathname
1759 | if (base && path.indexOf(base) === 0) {
1760 | path = path.slice(base.length)
1761 | }
1762 | return (path || '/') + window.location.search + window.location.hash
1763 | }
1764 |
1765 | function pushState (url, replace) {
1766 | // try...catch the pushState call to get around Safari
1767 | // DOM Exception 18 where it limits to 100 pushState calls
1768 | var history = window.history
1769 | try {
1770 | if (replace) {
1771 | history.replaceState({ key: _key }, '', url)
1772 | } else {
1773 | _key = genKey()
1774 | history.pushState({ key: _key }, '', url)
1775 | }
1776 | saveScrollPosition(_key)
1777 | } catch (e) {
1778 | window.location[replace ? 'assign' : 'replace'](url)
1779 | }
1780 | }
1781 |
1782 | function replaceState (url) {
1783 | pushState(url, true)
1784 | }
1785 |
1786 | /* */
1787 |
1788 |
1789 | var HashHistory = (function (History) {
1790 | function HashHistory (router, base, fallback) {
1791 | History.call(this, router, base)
1792 | // check history fallback deeplinking
1793 | if (fallback && this.checkFallback()) {
1794 | return
1795 | }
1796 | ensureSlash()
1797 | }
1798 |
1799 | if ( History ) HashHistory.__proto__ = History;
1800 | HashHistory.prototype = Object.create( History && History.prototype );
1801 | HashHistory.prototype.constructor = HashHistory;
1802 |
1803 | HashHistory.prototype.checkFallback = function checkFallback () {
1804 | var location = getLocation(this.base)
1805 | if (!/^\/#/.test(location)) {
1806 | window.location.replace(
1807 | cleanPath(this.base + '/#' + location)
1808 | )
1809 | return true
1810 | }
1811 | };
1812 |
1813 | HashHistory.prototype.onHashChange = function onHashChange () {
1814 | if (!ensureSlash()) {
1815 | return
1816 | }
1817 | this.transitionTo(getHash(), function (route) {
1818 | replaceHash(route.fullPath)
1819 | })
1820 | };
1821 |
1822 | HashHistory.prototype.push = function push (location) {
1823 | this.transitionTo(location, function (route) {
1824 | pushHash(route.fullPath)
1825 | })
1826 | };
1827 |
1828 | HashHistory.prototype.replace = function replace (location) {
1829 | this.transitionTo(location, function (route) {
1830 | replaceHash(route.fullPath)
1831 | })
1832 | };
1833 |
1834 | HashHistory.prototype.go = function go (n) {
1835 | window.history.go(n)
1836 | };
1837 |
1838 | HashHistory.prototype.ensureURL = function ensureURL (push) {
1839 | var current = this.current.fullPath
1840 | if (getHash() !== current) {
1841 | push ? pushHash(current) : replaceHash(current)
1842 | }
1843 | };
1844 |
1845 | return HashHistory;
1846 | }(History));
1847 |
1848 | function ensureSlash () {
1849 | var path = getHash()
1850 | if (path.charAt(0) === '/') {
1851 | return true
1852 | }
1853 | replaceHash('/' + path)
1854 | return false
1855 | }
1856 |
1857 | function getHash () {
1858 | // We can't use window.location.hash here because it's not
1859 | // consistent across browsers - Firefox will pre-decode it!
1860 | var href = window.location.href
1861 | var index = href.indexOf('#')
1862 | return index === -1 ? '' : href.slice(index + 1)
1863 | }
1864 |
1865 | function pushHash (path) {
1866 | window.location.hash = path
1867 | }
1868 |
1869 | function replaceHash (path) {
1870 | var i = window.location.href.indexOf('#')
1871 | window.location.replace(
1872 | window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
1873 | )
1874 | }
1875 |
1876 | /* */
1877 |
1878 |
1879 | var AbstractHistory = (function (History) {
1880 | function AbstractHistory (router) {
1881 | History.call(this, router)
1882 | this.stack = []
1883 | this.index = -1
1884 | }
1885 |
1886 | if ( History ) AbstractHistory.__proto__ = History;
1887 | AbstractHistory.prototype = Object.create( History && History.prototype );
1888 | AbstractHistory.prototype.constructor = AbstractHistory;
1889 |
1890 | AbstractHistory.prototype.push = function push (location) {
1891 | var this$1 = this;
1892 |
1893 | this.transitionTo(location, function (route) {
1894 | this$1.stack = this$1.stack.slice(0, this$1.index + 1).concat(route)
1895 | this$1.index++
1896 | })
1897 | };
1898 |
1899 | AbstractHistory.prototype.replace = function replace (location) {
1900 | var this$1 = this;
1901 |
1902 | this.transitionTo(location, function (route) {
1903 | this$1.stack = this$1.stack.slice(0, this$1.index).concat(route)
1904 | })
1905 | };
1906 |
1907 | AbstractHistory.prototype.go = function go (n) {
1908 | var this$1 = this;
1909 |
1910 | var targetIndex = this.index + n
1911 | if (targetIndex < 0 || targetIndex >= this.stack.length) {
1912 | return
1913 | }
1914 | var route = this.stack[targetIndex]
1915 | this.confirmTransition(route, function () {
1916 | this$1.index = targetIndex
1917 | this$1.updateRoute(route)
1918 | })
1919 | };
1920 |
1921 | AbstractHistory.prototype.ensureURL = function ensureURL () {
1922 | // noop
1923 | };
1924 |
1925 | return AbstractHistory;
1926 | }(History));
1927 |
1928 | /* */
1929 |
1930 | var VueRouter = function VueRouter (options) {
1931 | if ( options === void 0 ) options = {};
1932 |
1933 | this.app = null
1934 | this.options = options
1935 | this.beforeHooks = []
1936 | this.afterHooks = []
1937 | this.match = createMatcher(options.routes || [])
1938 |
1939 | var mode = options.mode || 'hash'
1940 | this.fallback = mode === 'history' && !supportsHistory
1941 | if (this.fallback) {
1942 | mode = 'hash'
1943 | }
1944 | if (!inBrowser) {
1945 | mode = 'abstract'
1946 | }
1947 | this.mode = mode
1948 |
1949 | switch (mode) {
1950 | case 'history':
1951 | this.history = new HTML5History(this, options.base)
1952 | break
1953 | case 'hash':
1954 | this.history = new HashHistory(this, options.base, this.fallback)
1955 | break
1956 | case 'abstract':
1957 | this.history = new AbstractHistory(this)
1958 | break
1959 | default:
1960 | "development" !== 'production' && assert(false, ("invalid mode: " + mode))
1961 | }
1962 | };
1963 |
1964 | var prototypeAccessors = { currentRoute: {} };
1965 |
1966 | prototypeAccessors.currentRoute.get = function () {
1967 | return this.history && this.history.current
1968 | };
1969 |
1970 | VueRouter.prototype.init = function init (app /* Vue component instance */) {
1971 | var this$1 = this;
1972 |
1973 | "development" !== 'production' && assert(
1974 | install.installed,
1975 | "not installed. Make sure to call `Vue.use(VueRouter)` " +
1976 | "before creating root instance."
1977 | )
1978 |
1979 | this.app = app
1980 |
1981 | var history = this.history
1982 |
1983 | if (history instanceof HTML5History) {
1984 | history.transitionTo(getLocation(history.base), initialLoad, initialLoad)
1985 | } else if (history instanceof HashHistory) {
1986 | var setupHashListener = function () {
1987 | window.addEventListener('hashchange', function () {
1988 | history.onHashChange()
1989 | })
1990 | initialLoad()
1991 | }
1992 | history.transitionTo(getHash(), setupHashListener, setupHashListener)
1993 | }
1994 |
1995 | history.listen(function (route) {
1996 | this$1.app._route = route
1997 | })
1998 | };
1999 |
2000 | VueRouter.prototype.beforeEach = function beforeEach (fn) {
2001 | this.beforeHooks.push(fn)
2002 | };
2003 |
2004 | VueRouter.prototype.afterEach = function afterEach (fn) {
2005 | this.afterHooks.push(fn)
2006 | };
2007 |
2008 | VueRouter.prototype.push = function push (location) {
2009 | this.history.push(location)
2010 | };
2011 |
2012 | VueRouter.prototype.replace = function replace (location) {
2013 | this.history.replace(location)
2014 | };
2015 |
2016 | VueRouter.prototype.go = function go (n) {
2017 | this.history.go(n)
2018 | };
2019 |
2020 | VueRouter.prototype.back = function back () {
2021 | this.go(-1)
2022 | };
2023 |
2024 | VueRouter.prototype.forward = function forward () {
2025 | this.go(1)
2026 | };
2027 |
2028 | VueRouter.prototype.getMatchedComponents = function getMatchedComponents (to) {
2029 | var route = to
2030 | ? this.resolve(to).resolved
2031 | : this.currentRoute
2032 | if (!route) {
2033 | return []
2034 | }
2035 | return [].concat.apply([], route.matched.map(function (m) {
2036 | return Object.keys(m.components).map(function (key) {
2037 | return m.components[key]
2038 | })
2039 | }))
2040 | };
2041 |
2042 | VueRouter.prototype.resolve = function resolve (
2043 | to,
2044 | current,
2045 | append
2046 | ) {
2047 | var normalizedTo = normalizeLocation(to, current || this.history.current, append)
2048 | var resolved = this.match(normalizedTo, current)
2049 | var fullPath = resolved.redirectedFrom || resolved.fullPath
2050 | var base = this.history.base
2051 | var href = createHref(base, fullPath, this.mode)
2052 | return {
2053 | normalizedTo: normalizedTo,
2054 | resolved: resolved,
2055 | href: href
2056 | }
2057 | };
2058 |
2059 | Object.defineProperties( VueRouter.prototype, prototypeAccessors );
2060 |
2061 | function createHref (base, fullPath, mode) {
2062 | var path = mode === 'hash' ? '#' + fullPath : fullPath
2063 | return base ? cleanPath(base + '/' + path) : path
2064 | }
2065 |
2066 | VueRouter.install = install
2067 |
2068 | if (inBrowser && window.Vue) {
2069 | window.Vue.use(VueRouter)
2070 | }
2071 |
2072 | return VueRouter;
2073 |
2074 | })));
2075 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-advanced-programming",
3 | "version": "1.0.0",
4 | "description": "A collection of tricks in [Vue.js](https://github.com/vuejs/vue).",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "python3 -m http.server"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/HerringtonDarkholme/vue-advanced-programming.git"
12 | },
13 | "author": "",
14 | "license": "ISC",
15 | "bugs": {
16 | "url": "https://github.com/HerringtonDarkholme/vue-advanced-programming/issues"
17 | },
18 | "homepage": "https://github.com/HerringtonDarkholme/vue-advanced-programming#readme",
19 | "dependencies": {
20 | "vue": "^2.0.5"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/template-slot/helper.js:
--------------------------------------------------------------------------------
1 | Vue.component('v-template', {})
2 |
3 | Vue.component('v-outlet', {
4 | props: {
5 | source: {
6 | type: String,
7 | default: 'default',
8 | },
9 | bindTo: {
10 | type: Vue
11 | },
12 | $ctx: {}
13 | },
14 | created() {
15 | let $parent = this.bindTo || this.$parent
16 | let slots = $parent && $parent.$slots
17 | let vnodes = slots && slots[this.source]
18 | let vnode = vnodes && vnodes[0]
19 | let template = vnode && vnode.data && vnode.data.inlineTemplate
20 | if (!template) {
21 | this.$options.render = function(h) {
22 | let fallbacks = this.$slots.default
23 | return (fallbacks && fallbacks[0]) || h('')
24 | }
25 | return
26 | }
27 | this.$options.render = template.render
28 | this.$options.staticRenderFns = template.staticRenderFns
29 | }
30 | })
31 |
--------------------------------------------------------------------------------
/template-slot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | template slot demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/template-slot/index.js:
--------------------------------------------------------------------------------
1 | const mitm = {
2 | template: `MITM
`,
3 | name: 'mitm'
4 | }
5 |
6 | const repeat = {
7 | template: `
8 |
9 | {{repeat}}
10 |
11 | I'm default content!
12 |
13 |
14 | I'm default content!
15 |
16 |
17 |
18 | I wil not be shown!
19 |
20 |
21 |
`,
22 | data: () => ({repeat: 3}),
23 | components: {mitm},
24 | name: 'repeat'
25 | }
26 |
27 | new Vue({
28 | template: `
29 |
30 |
31 |
32 | I am default!
33 |
34 |
35 |
36 | I will not be repeted.
37 |
38 |
39 |
40 | I will be repeted for {{$ctx.i}} times
41 |
42 | `,
43 | components: { repeat },
44 | el: '#app'
45 | })
46 |
--------------------------------------------------------------------------------