babel-plugin-angularjs-annotate
Version:
Babel plugin to add angularjs dependency injection annotations
147 lines (123 loc) • 3.32 kB
HTML
<html>
<head>
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css">
<title>babel-plugin-angularjs-annotate</title>
</head>
<style>
body {
padding: 0 2rem;
}
h3 {
margin-top: 0;
}
.editors {
display: flex;
flex-wrap: nowrap;
margin-bottom: 1rem;
}
.editors > div {
flex-grow: 1;
flex-basis: 50%;
margin: 0 1em;
max-width: 50%;
}
.editors > div > div {
border: 1px solid #ccc;
margin-bottom: 1em;
}
#errors {
display: none;
color: red;
margin-left: 1rem;
}
#warnings {
display: none;
background-color: #fcf8e3;
margin-left: 1rem;
}
#errorMsg, #warnMsg {
font-family: monospace;
white-space: pre;
}
label input {
margin: 0 0.5em;
}
</style>
<body>
<h1>babel-plugin-angularjs-annotate</h1>
<h2>Get It</h2>
<a href="https://github.com/schmod/babel-plugin-angularjs-annotate">On Github</a>
<h2>Try It</h2>
<div class="editors">
<div>
<h3>Input</h3>
<div id="input"></div>
</div>
<div>
<h3>Output</h3>
<div id="output"></div>
<label for="es5">
<input type="checkbox" id="es5" checked />transform ES2015 to ES5
</label>
</div>
</div>
<div id="errors">
<h3>Errors</h3>
<div id="errorMsg"></div>
</div>
<div id="warnings">
<h3>Warnings</h3>
<div id="warnMsg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/javascript/javascript.js"></script>
<script src='https://unpkg.com/babel-standalone@6/babel.js' defer></script>
<script src='https://unpkg.com/babel-polyfill@6/dist/polyfill.min.js' defer></script>
<script src='https://unpkg.com/babel-preset-env-standalone@0.0.6/babel-preset-env.js' defer></script>
<script src="repl-browser.js"></script>
<script>
var inputOpts = {
mode: 'javascript',
lineNumbers: true,
matchBrackets: true,
continueComments: "Enter"
};
var outputOpts = {
mode: 'javascript',
lineNumbers: true,
matchBrackets: true,
continueComments: "Enter",
readOnly: true
};
var input = CodeMirror(document.getElementById('input'), inputOpts);
var output = CodeMirror(document.getElementById('output'), outputOpts);
var warnings = '';
var oldWarn = console.warn;
console.warn = function(){
warnings += arguments[0] + '\n';
oldWarn.apply(window, arguments);
}
var change = function(cm){
warnings = '';
var es2015 = document.getElementById('es5').checked;
try {
document.getElementById('errors').style.display = 'none';
document.getElementById('warnings').style.display = 'none';
var result = window.transform(cm.getValue(), es2015);
output.setValue(result.code);
if(warnings.length){
document.getElementById('warnings').style.display = 'block';
document.getElementById('warnMsg').innerText = warnings;
}
} catch(e){
console.error(e);
document.getElementById('errors').style.display = 'block';
document.getElementById('errorMsg').innerText = e.message;
}
};
input.on('change', change);
document.getElementById('es5').onchange = function(){ change(input) }
</script>
</body>
</html>