Added support for data-urls, text-scheme and inline SFCs

README.md

@@ -1,6 +1,8 @@
 # http-vue-loader
 Load .vue files directly from your html/js. No node.js environment, no build step.
 
+Supports loading SFC files via XMLHttpRequest (http or data scheme) and text via text scheme or inline script elements.
+
 ## examples
 
 `my-component.vue`
@@ -66,6 +68,60 @@ using `httpVueLoader()`
         ...
 ```
 
+or, using `httpVueLoader()` with data url
+
+```html
+...
+<script type="text/javascript">
+
+    new Vue({
+        components: {
+            'my-component': httpVueLoader('data:text/vue;base64,PHRlbXBsYXRlPg0KCTxkaXY+DQoJCUkgYW...')
+        },
+        ...
+```
+
+or, using `httpVueLoader()` with text scheme (keep attention to the escaped closing script tag)
+
+```html
+...
+<script type="text/javascript">
+
+    new Vue({
+        components: {
+            'my-component': httpVueLoader(`text:<template>...</template><script><\/script><style></style>`)
+        },
+        ...
+```
+
+or, using `httpVueLoader()` with text scheme via inline script (keep attention to the escaped closing script tag)
+
+```html
+...
+<script type="text/vue" id="my-component">
+    <template>
+        ...
+    </template>
+
+    <script>
+        module.exports = {
+            ...
+        }
+    <\/script>
+
+    <style scoped>
+        ...
+    </style>
+</script>
+<script type="text/javascript">
+
+    new Vue({
+        components: {
+            'my-component': httpVueLoader('#my-component')
+        },
+        ...
+```
+
 or, using `httpVueLoader.register()`
 
 ```html
@@ -156,14 +212,14 @@ This is the default httpLoader.
 Use axios instead of the default http loader:
 ```Javascript
 httpVueLoader.httpRequest = function(url) {
-    
+
     return axios.get(url)
     .then(function(res) {
-        
+
         return res.data;
     })
     .catch(function(err) {
-        
+
         return Promise.reject(err.status);
     });
 }
@@ -220,7 +276,7 @@ Example - Stylus:
 httpVueLoader.langProcessor.stylus = function(stylusText) {
 
     return new Promise(function(resolve, reject) {
-        
+
         stylus.render(stylusText.trim(), {}, function(err, css) {
 
             if (err) reject(err);
@@ -295,7 +351,7 @@ body {
 ## Notes
 
 The aim of http-vue-loader is to quickly test .vue components without any compilation step.  
-However, for production, I recommend to use [webpack module bundler](https://webpack.github.io/docs/) with [vue-loader](https://github.com/vuejs/vue-loader), 
+However, for production, I recommend to use [webpack module bundler](https://webpack.github.io/docs/) with [vue-loader](https://github.com/vuejs/vue-loader),
 [webpack-simple](https://github.com/vuejs-templates/webpack-simple) is a good minimalist webpack config you should look at.  
 BTW, see also [why Vue.js doesn't support templateURL](https://vuejs.org/2015/10/28/why-no-template-url/).  
 

src/httpVueLoader.js

@@ -9,6 +9,7 @@
 	'use strict';
 
 	var scopeIndex = 0;
+	var textComponentIndex = 0;
 
 	StyleContext.prototype = {
 
@@ -246,10 +247,9 @@
 
 		load: function(componentURL) {
 
-			return httpVueLoader.httpRequest(componentURL)
-			.then(function(responseText) {
+			let interpretFunction = function(responseText) {
 
-				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
+				this.baseURI = (componentURL.substr(0, 5) === 'data:' || componentURL.substr(0, 5) === 'text:' ? '' : componentURL.substr(0, componentURL.lastIndexOf('/')+1));
 				var doc = document.implementation.createHTMLDocument('');
 
 				// IE requires the <base> to come with <style>
@@ -271,7 +271,14 @@
 				}
 
 				return this;
-			}.bind(this));
+			}.bind(this);
+
+			if (componentURL.substr(0, 5) === 'text:') {
+				return httpVueLoader.textPromise(componentURL).then(interpretFunction);
+			}
+			else {
+				return httpVueLoader.httpRequest(componentURL).then(interpretFunction);
+			}
 		},
 
 		_normalizeSection: function(eltCx) {
@@ -352,11 +359,25 @@
 
 	function parseComponentURL(url) {
 
-		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
-		return {
-			name: comp[2],
-			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
-		};
+		if (url.substr(0, 5) === 'text:') {
+			return {
+				name: 'textComponent' + (textComponentIndex++),
+				url: url
+			};
+		}
+		else if (url.substr(0, 1) === '#') {
+			return {
+				name: url.substr(1),
+				url: 'text:' + document.getElementById(url.substr(1)).innerHTML.replace('<\\/script>', '</script>').trim()
+			};
+		}
+		else {
+			var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
+			return {
+				name: comp[2],
+				url: comp[1] + comp[2] + (comp[3] === undefined ? (comp[1].substr(0, 5) !== 'data:' ? '/index.vue' : '') : comp[3]) + comp[4]
+			};
+		}
 	}
 
 	function resolveURL(baseURL, url) {
@@ -460,6 +481,13 @@
 		});
 	};
 
+	httpVueLoader.textPromise = function(url) {
+
+		return new Promise(function(resolve, reject) {
+			resolve(url.substr(5));
+		});
+	};
+
 	httpVueLoader.langProcessor = {
 		html: identity,
 		js: identity,