Add regexpu demo

https://github.com/mathiasbynens/regexpu https://mathiasbynens.be/notes/es6-unicode-regex
mathiasbynens · Aug 31, 2014 · f5359fc · f5359fc
1 parent 20c6829
commit f5359fc
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 0 deletions.
diff --git a/regexpu/README.md b/regexpu/README.md
@@ -0,0 +1,5 @@
+# [ES6 Unicode regular expression transpiler](https://mothereff.in/regexpu)
+
+This tool uses [_regexpu_](http://mths.be/regexpu) to transpile [ES6 Unicode regular expressions (with a `u` flag)](https://mathiasbynens.be/notes/es6-unicode-regex) to equivalent ES5.
+
+Made by [Mathias Bynens](https://mathiasbynens.be/).
diff --git a/regexpu/eff.css b/regexpu/eff.css
@@ -0,0 +1,87 @@
+html, textarea {
+	font: .8em/1.6 sans-serif;
+}
+
+body {
+	max-width: 40em;
+	padding: 0 1em;
+}
+
+h1 {
+	text-align: center;
+	font-size: 1.3em;
+	margin: 0 0 .5em;
+	padding-top: 1em;
+}
+
+h2 {
+	font-size: 1em;
+}
+
+a {
+	color: #333;
+	text-decoration: none;
+	border-bottom: 1px solid #aaa;
+	padding: .1em .2em;
+}
+
+a:hover, a:focus {
+	color: #fff;
+	border-color: #036;
+	background: #36c;
+}
+
+textarea {
+	font-family: Monaco, Consolas, monospace;
+}
+
+#footer {
+	margin-top: 2em;
+	text-align: center;
+}
+
+textarea {
+	border: 3px double green;
+	background: #90ee90;
+	width: 100%;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	display: block;
+	margin: 1em 0 .5em;
+	padding: .7em;
+	resize: vertical;
+	min-height: 14.5em;
+}
+
+code {
+	font-family: Monaco, Consolas, monospace;
+	font-size: .9em;
+	white-space: pre;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+.invalid, :invalid {
+	border-color: red;
+	background: #ffb6c1;
+}
+
+@media (min-width: 42em) {
+
+	html {
+		font-size: 1.2em;
+		background: #c4c4c4;
+		height: 100%;
+	}
+
+	body {
+		margin: 0 auto;
+		padding: 0 2em;
+		min-height: 100%;
+		background: #fff;
+		border: solid #aaa;
+		border-width: 0 1px;
+	}
+
+}
diff --git a/regexpu/eff.js b/regexpu/eff.js
@@ -0,0 +1,79 @@
+(function(window, document) {
+
+	var textareas = document.getElementsByTagName('textarea');
+	var es6 = textareas[0];
+	var es5 = textareas[1];
+	var regexpu = require('regexpu');
+	var run = document.getElementById('run');
+	var permalink = document.getElementById('permalink');
+	// https://mathiasbynens.be/notes/localstorage-pattern
+	var storage = (function() {
+		var uid = new Date;
+		var storage;
+		var result;
+		try {
+			(storage = window.localStorage).setItem(uid, uid);
+			result = storage.getItem(uid) == uid;
+			storage.removeItem(uid);
+			return result && storage;
+		} catch (exception) {}
+	}());
+
+	function encode(string) {
+		// URL-encode some more characters to avoid issues when using permalink URLs in Markdown
+		return encodeURIComponent(string).replace(/['()_*]/g, function(character) {
+			return '%' + character.charCodeAt().toString(16);
+		});
+	}
+
+	function update() {
+		var value = es6.value;
+		var transpiled;
+		var isError = false;
+		try {
+			transpiled = regexpu.transpileCode(value);
+		} catch (exception) {
+			isError = true;
+		}
+		if (isError) {
+			es6.className = es5.className = 'invalid';
+			es5.value = '// Error during transpilation.';
+		} else {
+			es6.className = es5.className = '';
+			es5.value = transpiled;
+		}
+		permalink.hash = encode(value);
+		storage && (storage.regexpu = value);
+	};
+
+	run.onclick = function(event) {
+		event.preventDefault();
+		eval(es5.value);
+	};
+
+	es6.oninput = update;
+
+	if (storage) {
+		storage.regexpu && (es6.value = storage.regexpu);
+		update();
+	}
+
+	window.onhashchange = function() {
+		es6.value = decodeURIComponent(location.hash.slice(1));
+		update();
+	};
+
+	if (location.hash) {
+		window.onhashchange();
+	}
+
+}(this, document));
+
+// Google Analytics
+window._gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
+(function(d) {
+	var g = d.createElement('script');
+	var s = d.scripts[0];
+	g.src = '//www.google-analytics.com/ga.js';
+	s.parentNode.insertBefore(g, s);
+}(document));
diff --git a/regexpu/index.html b/regexpu/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset=utf-8>
+<title>regexpu demo</title>
+<meta name=viewport content="width=device-width,initial-scale=1">
+<link rel=stylesheet href=eff.css>
+<meta name=description content="An online, on-the-fly transpiler for ES6 Unicode regular expressions.">
+<h1>ES6 Unicode regular expression transpiler</h1>
+<noscript><strong>To use this tool, please <a href=http://enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
+<h2>ES6:</h2>
+<textarea autofocus>var string = 'foo&#x1D306;bar';
+var match = string.match(/foo(.)bar/u);
+console.log(match[1]);
+// → '&#x1D306;'</textarea>
+<h2>Transpiled to ES5: (<a href=#run-code id=run>run code</a>, <a href=#var%20string%20%3D%20%27foo%F0%9D%8C%86bar%27%3B%0Avar%20match%20%3D%20string.match%28%2Ffoo%28.%29bar%2Fu%29%3B%0Aconsole.log%28match%5B1%5D%29%3B%0A%2F%2F%20%E2%86%92%20%27%F0%9D%8C%86%27 id=permalink>permalink</a>)</h2>
+<textarea readonly>var string = 'foo&#x1D306;bar';
+var match = string.match(/foo((?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uDC00-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF]))bar/);
+console.log(match[1]);
+// → '&#x1D306;'</textarea>
+<h2>About this tool</h2>
+<p>This tool uses <a href=http://mths.be/regexpu><i>regexpu</i></a> to transpile <a href=https://mathiasbynens.be/notes/es6-unicode-regex>ES6 Unicode regular expressions (with a <code>u</code> flag)</a> to equivalent ES5.
+<p id=footer>Made by <a href=https://mathiasbynens.be/>@mathias</a> — <a href=https://github.com/mathiasbynens/mothereff.in/tree/master/regexpu>fork this on GitHub!</a></p>
+<script src=vendor/regexpu-bundle.min.js></script>
+<script src=eff.js></script>