From f44b2128eaab7739051e22fb98498743e5d38e83 Mon Sep 17 00:00:00 2001
From: terraloader <github@tlprod.de>
Date: Fri, 8 May 2020 15:02:15 +0200
Subject: [PATCH 1/5] added support for data-urls
---
src/httpVueLoader.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/httpVueLoader.js b/src/httpVueLoader.js
index 9bb2d9f..08f324d 100644
--- a/src/httpVueLoader.js
+++ b/src/httpVueLoader.js
@@ -249,7 +249,7 @@
return httpVueLoader.httpRequest(componentURL)
.then(function(responseText) {
- this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
+ this.baseURI = (componentURL.substr(0, 5) === 'data:' ? '' : componentURL.substr(0, componentURL.lastIndexOf('/')+1));
var doc = document.implementation.createHTMLDocument('');
// IE requires the <base> to come with <style>
@@ -355,7 +355,7 @@
var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
return {
name: comp[2],
- url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
+ url: comp[1] + comp[2] + (comp[3] === undefined ? (comp[1].substr(0, 5) !== 'data:' ? '/index.vue' : '') : comp[3]) + comp[4]
};
}
From 4d6b5a18780ede33544a3c2963cb39deb4280bf4 Mon Sep 17 00:00:00 2001
From: terraloader <github@tlprod.de>
Date: Fri, 8 May 2020 16:49:09 +0200
Subject: [PATCH 2/5] added support for text via text-scheme and hash id name
for inline sfc
---
src/httpVueLoader.js | 46 +++++++++++++++++++++++++++++++++++---------
1 file changed, 37 insertions(+), 9 deletions(-)
diff --git a/src/httpVueLoader.js b/src/httpVueLoader.js
index 08f324d..230dca0 100644
--- a/src/httpVueLoader.js
+++ b/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, 5) === 'data:' ? '' : 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 ? (comp[1].substr(0, 5) !== 'data:' ? '/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,
From 2a74737ffdc5f8becdf2ee281514b74cb86f56aa Mon Sep 17 00:00:00 2001
From: terraloader <github@tlprod.de>
Date: Fri, 8 May 2020 17:04:04 +0200
Subject: [PATCH 3/5] added readme for support for text
---
README.md | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 file changed, 60 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 587b0d5..5d9f614 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# 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
@@ -66,6 +67,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="testcomponent">
+ <template>
+ ...
+ </template>
+
+ <script>
+ module.exports = {
+ ...
+ }
+ <\/script>
+
+ <style scoped>
+ ...
+ </style>
+</script>
+<script type="text/javascript">
+
+ new Vue({
+ components: {
+ 'my-component': httpVueLoader('#testcomponent')
+ },
+ ...
+```
+
or, using `httpVueLoader.register()`
```html
@@ -156,14 +211,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 +275,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 +350,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/).
From f6ba2ed0dc1e0038c3bf473c9728d129ff61d223 Mon Sep 17 00:00:00 2001
From: terraloader <github@tlprod.de>
Date: Fri, 8 May 2020 17:11:25 +0200
Subject: [PATCH 4/5] readme for support for text improved
---
README.md | 36 ++++++++++++++++++------------------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index 5d9f614..f59119f 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ or, using `httpVueLoader()` with data url
<script type="text/javascript">
new Vue({
- components: {
+ components: {
'my-component': httpVueLoader('data:text/vue;base64,PHRlbXBsYXRlPg0KCTxkaXY+DQoJCUkgYW...')
},
...
@@ -87,7 +87,7 @@ or, using `httpVueLoader()` with text scheme (keep attention to the escaped clos
<script type="text/javascript">
new Vue({
- components: {
+ components: {
'my-component': httpVueLoader(`text:<template>...</template><script><\/script><style></style>`)
},
...
@@ -97,26 +97,26 @@ or, using `httpVueLoader()` with text scheme via inline script (keep attention t
```html
...
-<script type="text/vue" id="testcomponent">
- <template>
- ...
- </template>
-
- <script>
- module.exports = {
- ...
- }
- <\/script>
-
- <style scoped>
- ...
- </style>
+<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('#testcomponent')
+ components: {
+ 'my-component': httpVueLoader('#my-component')
},
...
```
From 164cc9d5876b6f6fc8b59451d0835bbc5da0d4a0 Mon Sep 17 00:00:00 2001
From: terraloader <github@tlprod.de>
Date: Fri, 8 May 2020 17:13:54 +0200
Subject: [PATCH 5/5] readme for support for text improved 2
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index f59119f..9cef294 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# 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