Add React options loader.
Nathan Hunzaker committed
Dec 16, 2016 at 14:19 UTC
bbb643fd8d7b727c1a3c21468cb31f5df8a7318a
2 files changed
+64
-15
examples/react-loader.js
+10
-3
@@ -32,7 +32,14 @@ if (version !== 'local') {
32
DOM_PATH = "https://unpkg.com/react-dom@" + version + "/dist/react-dom.min.js";
33
}
34
35
-console.log('Loading', version);
35
+console.log('Loading ' + version);
36
37
-document.write("<script src='" + REACT_PATH + "'\>\</script\>");
38
-document.write("<script src='" + DOM_PATH + "'\>\</script\>");
37
+document.write("\<script src='" + REACT_PATH + "'\>\</script\>");
38
+
39
+// Versions earlier than 14 do not use ReactDOM
40
+if (version === 'local' || parseFloat(version, 10) > 0.13) {
41
+ document.write("\<script src='" + DOM_PATH + "'\>\</script\>");
42
+} else {
43
+ console.log('Aliasing React to ReactDOM for compatability.');
44
+ document.write('\<script\>ReactDOM = React\</script\>');
45
+}
examples/test.html
+54
-12
@@ -2,7 +2,10 @@
2
<html lang="en">
3
<head>
4
<meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+
7
<title>React Browser Sandbox</title>
8
+
9
<style>
10
body {
11
margin: 0;
@@ -72,13 +75,6 @@
75
<span class="sr-only">Select a version to test</span>
76
<select id="react_version" name="version">
77
<option value="local">Local</option>
75
- <option value="15.4.1">15.4.1</option>
76
- <option value="15.4.0">15.4.0</option>
77
- <option value="15.3.2">15.3.2</option>
78
- <option value="15.3.1">15.3.1</option>
79
- <option value="15.3.0">15.3.0</option>
80
- <option value="15.2.1">15.2.1</option>
81
- <option value="15.1.0">15.1.0</option>
78
</select>
79
</label>
80
</form>
@@ -90,17 +86,63 @@
86
var frame = document.querySelector('#frame');
87
var form = document.querySelector('#form');
88
var select = document.querySelector("#react_version");
93
- var version = window.location.search.match(/version=(.+?)($|&)/);
94
-
95
- if (version) {
96
- select.value = version[1]
97
- }
89
90
frame.src = "./basic/index.html?" + window.location.search;
91
92
form.addEventListener('change', function() {
93
form.submit();
94
});
95
+
96
+ function getVersion () {
97
+ var match = window.location.search.match(/version\=(.*?)($|&)/);
98
+
99
+ return match ? match[1] : select.value;
100
+ }
101
+
102
+ /**
103
+ * Populate the dropdown
104
+ */
105
+ function addOptions (data) {
106
+ var version = getVersion();
107
+
108
+ JSON.parse(data).forEach(function(row) {
109
+ var option = document.createElement("option");
110
+
111
+ option.value = row.name.slice(1);
112
+ option.text = row.name;
113
+
114
+ select.options.add(option);
115
+ });
116
+
117
+ select.value = getVersion();
118
+ }
119
+
120
+ /**
121
+ * Fetch version information from Github
122
+ */
123
+ function fetchOptions (callback) {
124
+ var request = new XMLHttpRequest();
125
+
126
+ request.onload = function () {
127
+ if (request.readyState == 4){
128
+ if (request.status >= 400) {
129
+ return console.error('Error ' + request.status + ': Something went wrong fetching React versions from Github.')
130
+ }
131
+
132
+ callback(request.responseText);
133
+ sessionStorage.options = request.responseText;
134
+ }
135
+ }
136
+
137
+ request.open('GET', "http://api.github.com/repos/facebook/react/tags");
138
+ request.send();
139
+ }
140
+
141
+ if ('options' in sessionStorage) {
142
+ addOptions(sessionStorage.options);
143
+ } else {
144
+ fetchOptions(addOptions);
145
+ }
146
</script>
147
</body>
148
</html>