https://ponctual.com/src/assets/js/http-vue-loader.js

1(function umd(root,factory){
2	if(typeof module==='object' && typeof exports === 'object' )
3		module.exports=factory()
4	else if(typeof define==='function' && define.amd)
5		define([],factory)
6	else
7		root.httpVueLoader=factory()
8})(this,function factory() {
9	'use strict';
10
11	var scopeIndex = 0;
12
13	StyleContext.prototype = {
14
15		withBase: function(callback) {
16
17			var tmpBaseElt;
18			if ( this.component.baseURI ) {
19
20				// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
21				tmpBaseElt = document.createElement('base');
22				tmpBaseElt.href = this.component.baseURI;
23
24				var headElt = this.component.getHead();
25				headElt.insertBefore(tmpBaseElt, headElt.firstChild);
26			}
27
28			callback.call(this);
29
30			if ( tmpBaseElt )
31				this.component.getHead().removeChild(tmpBaseElt);
32		},
33
34		scopeStyles: function(styleElt, scopeName) {
35
36			function process() {
37
38				var sheet = styleElt.sheet;
39				var rules = sheet.cssRules;
40
41				for ( var i = 0; i < rules.length; ++i ) {
42
43					var rule = rules[i];
44					if ( rule.type !== 1 )
45						continue;
46
47					var scopedSelectors = [];
48
49					rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
50
51						scopedSelectors.push(scopeName+' '+sel);
52						var segments = sel.match(/([^ :]+)(.+)?/);
53						scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
54					});
55
56					var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
57					sheet.deleteRule(i);
58					sheet.insertRule(scopedRule, i);
59				}
60			}
61
62			try {
63				// firefox may fail sheet.cssRules with InvalidAccessError
64				process();
65			} catch (ex) {
66
67				if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
68
69					styleElt.sheet.disabled = true;
70					styleElt.addEventListener('load', function onStyleLoaded() {
71
72						styleElt.removeEventListener('load', onStyleLoaded);
73
74						// firefox need this timeout otherwise we have to use document.importNode(style, true)
75						setTimeout(function() {
76
77							process();
78							styleElt.sheet.disabled = false;
79						});
80					});
81					return;
82				}
83
84				throw ex;
85			}
86		},
87
88		compile: function() {
89
90			var hasTemplate = this.template !== null;
91
92			var scoped = this.elt.hasAttribute('scoped');
93
94			if ( scoped ) {
95
96				// no template, no scopable style needed
97				if ( !hasTemplate )
98					return;
99
100				// firefox does not tolerate this attribute
101				this.elt.removeAttribute('scoped');
102			}
103
104			this.withBase(function() {
105
106				this.component.getHead().appendChild(this.elt);
107			});
108
109			if ( scoped )
110				this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
111
112			return Promise.resolve();
113		},
114
115		getContent: function() {
116
117			return this.elt.textContent;
118		},
119
120		setContent: function(content) {
121
122			this.withBase(function() {
123
124				this.elt.textContent = content;
125			});
126		}
127	};
128
129	function StyleContext(component, elt) {
130
131		this.component = component;
132		this.elt = elt;
133	}
134
135
136	ScriptContext.prototype = {
137
138		getContent: function() {
139
140			return this.elt.textContent;
141		},
142
143		setContent: function(content) {
144
145			this.elt.textContent = content;
146		},
147
148		compile: function(module) {
149
150			var childModuleRequire = function(childURL) {
151
152				return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
153			}.bind(this);
154
155			var childLoader = function(childURL, childName) {
156
157				return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
158			}.bind(this);
159
160			try {
161				Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
162			} catch(ex) {
163
164				if ( !('lineNumber' in ex) ) {
165
166					return Promise.reject(ex);
167				}
168				var vueFileData = responseText.replace(/\r?\n/g, '\n');
169				var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
170				throw new (ex.constructor)(ex.message, url, lineNumber);
171			}
172
173			return Promise.resolve(this.module.exports)
174			.then(httpVueLoader.scriptExportsHandler.bind(this))
175			.then(function(exports) {
176
177				this.module.exports = exports;
178			}.bind(this));
179		}
180	};
181
182	function ScriptContext(component, elt) {
183
184		this.component = component;
185		this.elt = elt;
186		this.module = { exports:{} };
187	}
188
189
190	TemplateContext.prototype = {
191
192		getContent: function() {
193
194			return this.elt.innerHTML;
195		},
196
197		setContent: function(content) {
198
199			this.elt.innerHTML = content;
200		},
201
202		getRootElt: function() {
203
204			var tplElt = this.elt.content || this.elt;
205

206			if ( 'firstElementChild' in tplElt )
207				return tplElt.firstElementChild;
208
209			for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
210				if ( tplElt.nodeType === Node.ELEMENT_NODE )
211					return tplElt;
212
213			return null;
214		},
215
216		compile: function() {
217
218			return Promise.resolve();
219		}
220	};
221
222	function TemplateContext(component, elt) {
223
224		this.component = component;
225		this.elt = elt;
226	}
227
228
229
230	Component.prototype = {
231
232		getHead: function() {
233
234			return document.head || document.getElementsByTagName('head')[0];
235		},
236
237		getScopeId: function() {
238
239			if ( this._scopeId === '' ) {
240
241				this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
242				this.template.getRootElt().setAttribute(this._scopeId, '');
243			}
244			return this._scopeId;
245		},
246
247		load: function(componentURL) {
248
249			return httpVueLoader.httpRequest(componentURL)
250			.then(function(responseText) {
251
252				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
253				var doc = document.implementation.createHTMLDocument('');
254
255				// IE requires the <base> to come with <style>
256				doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
257
258				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
259
260					switch ( it.nodeName ) {
261						case 'TEMPLATE':
262							this.template = new TemplateContext(this, it);
263							break;
264						case 'SCRIPT':
265							this.script = new ScriptContext(this, it);
266							break;
267						case 'STYLE':
268							this.styles.push(new StyleContext(this, it));
269							break;
270					}
271				}
272
273				return this;
274			}.bind(this));
275		},
276        
277        loadFromSourcecode: function(sourcecode) {
278
279			return httpVueLoader.textRequest(sourcecode)
280			.then(function(responseText) {
281				var doc = document.implementation.createHTMLDocument('');
282
283				// IE requires the <base> to come with <style>
284				doc.body.innerHTML = responseText;
285                
286				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
287
288					switch ( it.nodeName ) {
289						case 'TEMPLATE':
290							this.template = new TemplateContext(this, it);
291							break;
292						case 'SCRIPT':
293							this.script = new ScriptContext(this, it);
294							break;
295						case 'STYLE':
296							this.styles.push(new StyleContext(this, it));
297							break;
298					}
299				}
300
301				return this;
302			}.bind(this));
303		},
304
305		_normalizeSection: function(eltCx) {
306
307			var p;
308
309			if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
310
311				p = Promise.resolve(null);
312			} else {
313
314				p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
315				.then(function(content) {
316
317					eltCx.elt.removeAttribute('src');
318					return content;
319				});
320			}
321
322			return p
323			.then(function(content) {
324
325				if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
326
327					var lang = eltCx.elt.getAttribute('lang');
328					eltCx.elt.removeAttribute('lang');
329					return httpVueLoader.langProcessor[lang.toLowerCase()].call(this, content === null ? eltCx.getContent() : content);
330				}
331				return content;
332			}.bind(this))
333			.then(function(content) {
334
335				if ( content !== null )
336					eltCx.setContent(content);
337			});
338		},
339
340		normalize: function() {
341
342			return Promise.all(Array.prototype.concat(
343				this._normalizeSection(this.template),
344				this._normalizeSection(this.script),
345				this.styles.map(this._normalizeSection)
346			))
347			.then(function() {
348
349				return this;
350			}.bind(this));
351		},
352
353		compile: function() {
354
355			return Promise.all(Array.prototype.concat(
356				this.template && this.template.compile(),
357				this.script && this.script.compile(),
358				this.styles.map(function(style) { return style.compile(); })
359			))
360			.then(function() {
361
362				return this;
363			}.bind(this));
364		}
365	};
366
367	function Component(name) {
368
369		this.name = name;
370		this.template = null;
371		this.script = null;
372		this.styles = [];
373		this._scopeId = '';
374	}
375
376	function identity(value) {
377
378		return value;
379	}
380
381	function parseComponentURL(url) {
382
383		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
384		return {
385			name: comp[2],
386			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
387		};
388	}
389
390	function resolveURL(baseURL, url) {
391
392		if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
393			return baseURL + url;
394		}
395		return url;
396	}
397
398
399	httpVueLoader.load = function(url, name) {
400
401		return function() {
402
403			return new Component(name).load(url)
404			.then(function(component) {
405
406				return component.normalize();
407			})
408			.then(function(component) {
409
410				return component.compile();
411			})
412			.then(function(component) {
413
414				var exports = component.script !== null ? component.script.module.exports : {};
415
416				if ( component.template !== null )
417					exports.template = component.template.getContent();
418
419				if ( exports.name === undefined )
420					if ( component.name !== undefined )
421						exports.name = component.name;
422
423				exports._baseURI = component.baseURI;
424
425				return exports;
426			});
427		};
428	};
429    
430    httpVueLoader.loadFromSourcecode = function(sourcecode, name) {
431
432		return function() {
433
434			return new Component(name).loadFromSourcecode(sourcecode)
435			.then(function(component) {
436
437				return component.normalize();
438			})
439			.then(function(component) {
440
441				return component.compile();
442			})
443			.then(function(component) {
444
445				var exports = component.script !== null ? component.script.module.exports : {};
446
447				if ( component.template !== null )
448					exports.template = component.template.getContent();
449
450				if ( exports.name === undefined )
451					if ( component.name !== undefined )
452						exports.name = component.name;
453
454				exports._baseURI = component.baseURI;
455
456				return exports;
457			});
458		};
459	};
460
461
462	httpVueLoader.register = function(Vue, url) {
463
464		var comp = parseComponentURL(url);
465		Vue.component(comp.name, httpVueLoader.load(comp.url));
466	};
467
468	httpVueLoader.install = function(Vue) {
469
470		Vue.mixin({
471
472			beforeCreate: function () {
473
474				var components = this.$options.components;
475
476				for ( var componentName in components ) {
477
478					if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
479
480						var comp = parseComponentURL(components[componentName].substr(4));
481
482						var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
483
484						if ( isNaN(componentName) )
485							components[componentName] = httpVueLoader.load(componentURL, componentName);
486						else
487							components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
488					}
489				}
490			}
491		});
492	};
493
494	httpVueLoader.require = function(moduleName) {
495
496		return window[moduleName];
497	};
498
499	httpVueLoader.httpRequest = function(url) {
500
501		return new Promise(function(resolve, reject) {
502
503			var xhr = new XMLHttpRequest();
504			xhr.open('GET', url);
505            		xhr.responseType = 'text';
506
507			xhr.onreadystatechange = function() {
508
509				if ( xhr.readyState === 4 ) {
510
511					if ( xhr.status >= 200 && xhr.status < 300 )
512						resolve(xhr.responseText);
513					else
514						reject(xhr.status);
515				}
516			};
517
518			xhr.send(null);
519		});
520	};
521    
522    httpVueLoader.textRequest = function(text) {
523
524		return new Promise(function(resolve, reject) {
525            if ( text )
526                resolve(text);
527            else
528                reject(null);
529		});
530	};
531
532	httpVueLoader.langProcessor = {
533		html: identity,
534		js: identity,
535		css: identity
536	};
537
538	httpVueLoader.scriptExportsHandler = identity;
539
540	function httpVueLoader(url, name) {
541      var comp = parseComponentURL(url);
542      return httpVueLoader.load(comp.url, name);
543	}
544
545	return httpVueLoader;
546});