Add basic testing page
Nathan Hunzaker committed
Dec 16, 2016 at 09:07 UTC
49f74f1d938869f14456d965fca2d5c157267e0d
3 files changed
+147
-2
examples/basic/index.html
+3
-2
@@ -23,8 +23,9 @@
23
Learn more about React at
24
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
- <script src="../../build/react.js"></script>
27
- <script src="../../build/react-dom.js"></script>
26
+
27
+ <script src="../react-loader.js"></script>
28
+
29
<script>
30
var ExampleApplication = React.createClass({
31
render: function() {
examples/react-loader.js
new
+38
@@ -0,0 +1,38 @@
1
+/**
2
+ * Take a version from the window query string and load a specific
3
+ * version of React.
4
+ *
5
+ * @example
6
+ * http://localhost:3000?version=15.4.1
7
+ * (Loads React 15.4.1)
8
+ */
9
+
10
+var REACT_PATH = '../../build/react.js';
11
+var DOM_PATH = '../../build/react-dom.js';
12
+
13
+function parseQuery(qstr) {
14
+ var query = {};
15
+
16
+ var a = qstr.substr(1).split('&');
17
+
18
+ for (var i = 0; i < a.length; i++) {
19
+ var b = a[i].split('=');
20
+
21
+ query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
22
+ }
23
+
24
+ return query;
25
+}
26
+
27
+var query = parseQuery(window.location.search);
28
+var version = query.version || 'local';
29
+
30
+if (version !== 'local') {
31
+ REACT_PATH = "https://unpkg.com/react@" + version + "/dist/react.min.js";
32
+ DOM_PATH = "https://unpkg.com/react-dom@" + version + "/dist/react-dom.min.js";
33
+}
34
+
35
+console.log('Loading', version);
36
+
37
+document.write("<script src='" + REACT_PATH + "'\>\</script\>");
38
+document.write("<script src='" + DOM_PATH + "'\>\</script\>");
examples/test.html
new
+106
@@ -0,0 +1,106 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>React Browser Sandbox</title>
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
10
+ }
11
+
12
+ .header {
13
+ background: #222;
14
+ box-shadow: inset 0 -1px 3px #000;
15
+ overflow: hidden;
16
+ padding: 8px 16px;
17
+ line-height: 32px;
18
+ }
19
+
20
+ .header__inner {
21
+ max-width: 1000px;
22
+ margin: 0 auto;
23
+ overflow: hidden;
24
+ }
25
+
26
+ .header__logo {
27
+ color: #efefef;
28
+ display: inline-block;
29
+ vertical-align: middle;
30
+ }
31
+
32
+ .header__logo img {
33
+ display: inline-block;
34
+ margin-right: 8px;
35
+ vertical-align: middle;
36
+ }
37
+
38
+ .header select {
39
+ display: inline-block;
40
+ float: right;
41
+ margin: 8px 0;
42
+ vertical-align: middle;
43
+ }
44
+
45
+ iframe {
46
+ display: block;
47
+ height: 98%;
48
+ height: calc(100vh - 52px);
49
+ margin: 0 auto;
50
+ max-width: 1000px;
51
+ width: 100%;
52
+ }
53
+
54
+ .sr-only {
55
+ clip: rect(0, 0, 0, 0);
56
+ height: 0;
57
+ margin: -1px;
58
+ position: absolute;
59
+ width: 0;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <header class="header">
65
+ <form method="GET" class="header__inner" id="form">
66
+ <span class="header__logo">
67
+ <img src="https://facebook.github.io/react/img/logo.svg" alt="React Browser Sandbox" width="32" height="32" />
68
+ React Sandbox
69
+ </span>
70
+
71
+ <label for="react_version">
72
+ <span class="sr-only">Select a version to test</span>
73
+ <select id="react_version" name="version">
74
+ <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>
82
+ </select>
83
+ </label>
84
+ </form>
85
+ </header>
86
+
87
+ <iframe id="frame" frameborder="0"></iframe>
88
+
89
+ <script>
90
+ var frame = document.querySelector('#frame');
91
+ var form = document.querySelector('#form');
92
+ var select = document.querySelector("#react_version");
93
+ var version = window.location.search.match(/version=(.+?)($|&)/);
94
+
95
+ if (version) {
96
+ select.value = version[1]
97
+ }
98
+
99
+ frame.src = "./basic/index.html?" + window.location.search;
100
+
101
+ form.addEventListener('change', function() {
102
+ form.submit();
103
+ });
104
+ </script>
105
+ </body>
106
+</html>