NoTimeForHero · July 2, 2019 14:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>IE10 Compatibility Vue SFC Loader</title>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script>
 </head>

 <body>
  <div id="app">
    <test></test>
  </div>

  <script type="text/javascript">

    (function(){

      function VueLoaderError(type, old_error) {
        old_error.name = 'VueLoaderError[' + type + ']: ' + old_error.name;
        throw old_error;             
      }

      function isIE9orLower() {
        var div = document.createElement("div");
        div.innerHTML = "<!--[if lt IE 10]><i></i><![endif]-->";
        var isIeLessThan9 = (div.getElementsByTagName("i").length == 1);
        return isIeLessThan9;
      }

      var getXmlHttpRequest = function(url) {
        return new Promise(function (resolve, reject){
          var req = new XMLHttpRequest();
          req.open('GET', url, true);
          if (req.overrideMimeType) req.overrideMimeType('text/plain');
          req.onreadystatechange = function(aEvt) {
            if (req.readyState !== 4) return;
            if (req.status >= 400) reject('Status code: ' + req.status);
            resolve(req.responseText);
          }
          req.send(null);
        });
      }

      var loadComponent = function(httpClient, url, resolve, reject) {
        httpClient(url).then(function(data){
          try {
            var dom = new DOMParser().parseFromString(data, "text/html");
          } catch (err) {
            throw new VueLoaderError('DOMParser',err);
          }
          var module = { exports: {} };
          try {
            var script = eval(dom.querySelector('script').innerText);                    
          } catch (err) {
            throw new VueLoaderError('eval',err);
          }
          var template = dom.querySelector('template').innerHTML;
          var style = dom.querySelector('style');
          document.body.appendChild(style);
          module.exports.template = template;
          resolve(module.exports);          
        }).catch(reject);
      }

      window.vueHttpLoader = {
        httpClient: getXmlHttpRequest,
        load: function(url) {
          return function(resolve, reject) {
            loadComponent.call(null, vueHttpLoader.httpClient, url, resolve, reject);
          }
        }     
      }   

      if (isIE9orLower()) {
        console.warn('vueHttpLoader', 'This library works only in IE10 and above!');
      }
      return vueHttpLoader;

    })();

    new Vue({
      el: '#app',
      components: {
        'test': vueHttpLoader.load('/vue/test.vue')
      }
    })      
  </script>  
 </body>
 </html>
diff --git a/test.vue b/test.vue
 <template>
    <div :class="'test-' + id" v-if="showed">
        <div class="lamp" :class="'color-' + color">
        </div>        
        Color[{{id}}]: {{color}}
        <button @click="nextColor">Next color</button>
    </div>
 </template>

 <script>
 module.exports = {
    data: function() {
        return {
            id: 0,
            showed: true,
            color: 'red',
            colors: ['red','green','blue']
        }
    },
    methods: {
        nextColor: function() {
            this.id++;
            this.color = this.colors[this.id % this.colors.length];
        }
    }
 }
 </script>

 <style>
    .lamp {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        margin-right: 4px;
        float: left;
    }

    .color-red { background: red; }
    .color-green { background: green; }
    .color-blue { background: blue; }
 </style>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>IE10 Compatibility Vue SFC Loader</title>
	<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script>
	</head>

	<body>
	<div id="app">
	<test></test>
	</div>

	<script type="text/javascript">

	(function(){

	function VueLoaderError(type, old_error) {
	old_error.name = 'VueLoaderError[' + type + ']: ' + old_error.name;
	throw old_error;
	}

	function isIE9orLower() {
	var div = document.createElement("div");
	div.innerHTML = "<!--[if lt IE 10]><i></i><![endif]-->";
	var isIeLessThan9 = (div.getElementsByTagName("i").length == 1);
	return isIeLessThan9;
	}

	var getXmlHttpRequest = function(url) {
	return new Promise(function (resolve, reject){
	var req = new XMLHttpRequest();
	req.open('GET', url, true);
	if (req.overrideMimeType) req.overrideMimeType('text/plain');
	req.onreadystatechange = function(aEvt) {
	if (req.readyState !== 4) return;
	if (req.status >= 400) reject('Status code: ' + req.status);
	resolve(req.responseText);
	}
	req.send(null);
	});
	}

	var loadComponent = function(httpClient, url, resolve, reject) {
	httpClient(url).then(function(data){
	try {
	var dom = new DOMParser().parseFromString(data, "text/html");
	} catch (err) {
	throw new VueLoaderError('DOMParser',err);
	}
	var module = { exports: {} };
	try {
	var script = eval(dom.querySelector('script').innerText);
	} catch (err) {
	throw new VueLoaderError('eval',err);
	}
	var template = dom.querySelector('template').innerHTML;
	var style = dom.querySelector('style');
	document.body.appendChild(style);
	module.exports.template = template;
	resolve(module.exports);
	}).catch(reject);
	}

	window.vueHttpLoader = {
	httpClient: getXmlHttpRequest,
	load: function(url) {
	return function(resolve, reject) {
	loadComponent.call(null, vueHttpLoader.httpClient, url, resolve, reject);
	}
	}
	}

	if (isIE9orLower()) {
	console.warn('vueHttpLoader', 'This library works only in IE10 and above!');
	}
	return vueHttpLoader;

	})();

	new Vue({
	el: '#app',
	components: {
	'test': vueHttpLoader.load('/vue/test.vue')
	}
	})
	</script>
	</body>
	</html>
	<template>
	<div :class="'test-' + id" v-if="showed">
	<div class="lamp" :class="'color-' + color">
	</div>
	Color[{{id}}]: {{color}}
	<button @click="nextColor">Next color</button>
	</div>
	</template>

	<script>
	module.exports = {
	data: function() {
	return {
	id: 0,
	showed: true,
	color: 'red',
	colors: ['red','green','blue']
	}
	},
	methods: {
	nextColor: function() {
	this.id++;
	this.color = this.colors[this.id % this.colors.length];
	}
	}
	}
	</script>

	<style>
	.lamp {
	height: 20px;
	width: 20px;
	border: 1px solid black;
	margin-right: 4px;
	float: left;
	}

	.color-red { background: red; }
	.color-green { background: green; }
	.color-blue { background: blue; }
	</style>