Add prettier-browser
This is a very handy way of playing out with prettier without having to install it. People have already been using it actively in the issues. Putting it directly inside of the repo would be better than on mine.
This commit is contained in:
Christopher Chedeau committed
1 parent
0eda44405b
commit
4685164faf
4 files changed
+171
-2
No files matched your search
+144
@@ -0,0 +1,144 @@
|
||||
<script>global = window;</script>
|
||||
<script src="prettier.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
|
||||
<script src="https://codemirror.net/lib/codemirror.js"></script>
|
||||
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
|
||||
<script src="https://codemirror.net/addon/display/rulers.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: "Helvetica Neue", "Open Sans", sans-serif;
|
||||
font-size: 11.7px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #444444;
|
||||
color: #e2e1e1;
|
||||
}
|
||||
.title {
|
||||
font-style: italic;
|
||||
line-height: 19px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.editors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
margin: 5px;
|
||||
}
|
||||
.editor {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-family: Menlo, monospace;
|
||||
font-size: 11.05px;
|
||||
line-height: 17.68px;
|
||||
}
|
||||
.editor.output .CodeMirror {
|
||||
background-color: #fdfcfc;
|
||||
}
|
||||
.editor.input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.options {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
input[type="number"] {
|
||||
max-width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="options">
|
||||
<label class="title">prettier v0.0.5</label>
|
||||
<label><input type="number" value="80" id="printWidth"></input> printWidth</label>
|
||||
<label><input type="number" value="2" id="tabWidth"></input> tabWidth</label>
|
||||
<label><input type="checkbox" id="singleQuote"></input> singleQuote</label>
|
||||
<label><input type="checkbox" id="trailingComma"></input> trailingComma</label>
|
||||
<label><input type="checkbox" id="bracketSpacing" checked></input> bracketSpacing</label>
|
||||
</div>
|
||||
|
||||
<div class="editors">
|
||||
<div class="editor input">
|
||||
<textarea id="input"></textarea>
|
||||
</div>
|
||||
<div class="editor output">
|
||||
<textarea id="output"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="code">
|
||||
var OPTIONS = ['printWidth', 'tabWidth', 'singleQuote', 'trailingComma', 'bracketSpacing'];
|
||||
function setOptions(options) {
|
||||
OPTIONS.forEach(function(option) {
|
||||
var elem = document.getElementById(option);
|
||||
if (elem.type === 'number') {
|
||||
elem.value = options[option];
|
||||
} else {
|
||||
elem.checked = options[option];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getOptions() {
|
||||
var options = {};
|
||||
OPTIONS.forEach(function(option) {
|
||||
var elem = document.getElementById(option);
|
||||
options[option] = elem.type === 'number' ? +elem.value : elem.checked;
|
||||
});
|
||||
return options;
|
||||
}
|
||||
|
||||
function format() {
|
||||
var options = getOptions();
|
||||
outputEditor.setOption('rulers', [{column: options.printWidth, color: '#444444'}]);
|
||||
var value = encodeURIComponent(
|
||||
JSON.stringify(
|
||||
Object.assign({content: inputEditor.getValue(), options: options})
|
||||
)
|
||||
);
|
||||
location.hash = value;
|
||||
var res;
|
||||
try {
|
||||
res = prettier.format(inputEditor.getValue(), options);
|
||||
} catch (e) {
|
||||
res = e.toString();
|
||||
}
|
||||
outputEditor.setValue(res);
|
||||
}
|
||||
|
||||
document.getElementsByClassName('options')[0].onchange = format;
|
||||
|
||||
var inputEditor = CodeMirror.fromTextArea(input);
|
||||
inputEditor.on('change', format);
|
||||
var outputEditor = CodeMirror.fromTextArea(output, {readOnly: true});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
try {
|
||||
var json = JSON.parse(decodeURIComponent(location.hash.slice(1)));
|
||||
setOptions(json.options);
|
||||
inputEditor.setValue(json.content);
|
||||
} catch (e) {
|
||||
inputEditor.setValue(code.innerText.trim());
|
||||
}
|
||||
</script>
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
var prettier=function(){function Se(Qh,$h){return $h={exports:{}},Qh($h,$h.exports),$h.exports}function Te(){$l=!0;var Qh='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';for(var $h=0,Sg=Qh.length;$h<Sg;++$h)Zl[$h]=Qh[$h],Kl[Qh.charCodeAt($h)]=$h;Kl['-'.charCodeAt(0)]=62,Kl['_'.charCodeAt(0)]=63}function _e(Qh){$l||Te();var Lg=Qh.length,$h,Sg,Tg,_g,Pg,Ng;if(0<Lg%4)throw new Error('Invalid string. Length must be a multiple of 4');Pg='='===Qh[Lg-2]?2:'='===Qh[Lg-1]?1:0,Ng=new Ql(3*Lg/4-Pg),Tg=0<Pg?Lg-4:Lg;var Ig=0;for($h=0,Sg=0;$h<Tg;$h+=4,Sg+=3)_g=Kl[Qh.charCodeAt($h)]<<18|Kl[Qh.charCodeAt($h+1)]<<12|Kl[Qh.charCodeAt($h+2)]<<6|Kl[Qh.charCodeAt($h+3)],Ng[Ig++]=255&_g>>16,Ng[Ig++]=255&_g>>8,Ng[Ig++]=255&_g;return 2===Pg?(_g=Kl[Qh.charCodeAt($h)]<<2|Kl[Qh.charCodeAt($h+1)]>>4,Ng[Ig++]=255&_g):1==Pg&&(_g=Kl[Qh.charCodeAt($h)]<<10|Kl[Qh.charCodeAt($h+1)]<<4|Kl[Qh.charCodeAt($h+2)]>>2,Ng[Ig++]=255&_g>>8,Ng[Ig++]=255&_g),Ng}function Pe(Qh){return Zl[63&Qh>>18]+Zl[63&Qh>>12]+Zl[63&Qh>>6]+Zl[63&Qh]}function Ne(Qh,$h,Sg){var Tg,_g=[];for(var Pg=$h;Pg<Sg;Pg+=3)Tg=(Qh[Pg]<<16)+(Qh[Pg+1]<<8)+Qh[Pg+2],_g.push(Pe(Tg));return _g.join('')}function Le(Qh){$l||Te();var Sg=Qh.length,Tg=Sg%3,_g='',Pg=[],Ng=16383,$h;for(var Lg=0,Ig=Sg-Tg;Lg<Ig;Lg+=Ng)Pg.push(Ne(Qh,Lg,Lg+Ng>Ig?Ig:Lg+Ng));return 1==Tg?($h=Qh[Sg-1],_g+=Zl[$h>>2],_g+=Zl[63&$h<<4],_g+='=='):2==Tg&&($h=(Qh[Sg-2]<<8)+Qh[Sg-1],_g+=Zl[$h>>10],_g+=Zl[63&$h>>4],_g+=Zl[63&$h<<2],_g+='='),Pg.push(_g),Pg.join('')}function Re(Qh,$h,Sg,Tg,_g){var Pg,Ng,Lg=8*_g-Tg-1,Ig=(1<<Lg)-1,Rg=Ig>>1,Mg=-7,Og=Sg?_g-1:0,Yg=Sg?-1:1,Vg=Qh[$h+Og];for(Og+=Yg,Pg=Vg&(1<<-Mg)-1,Vg>>=-Mg,Mg+=Lg;0<Mg;Pg=256*Pg+Qh[$h+Og],Og+=Yg,Mg-=8);for(Ng=Pg&(1<<-Mg)-1,Pg>>=-Mg,Mg+=Tg;0<Mg;Ng=256*Ng+Qh[$h+Og],Og+=Yg,Mg-=8);if(0===Pg)Pg=1-Rg;else{if(Pg===Ig)return Ng?NaN:(Vg?-1:1)*Infinity;Ng+=Math.pow(2,Tg),Pg-=Rg}return(Vg?-1:1)*Ng*Math.pow(2,Pg-Tg)}function Me(Qh,$h,Sg,Tg,_g,Pg){var Ng,Lg,Ig,Rg=8*Pg-_g-1,Mg=(1<<Rg)-1,Og=Mg>>1,Yg=23===_g?Math.pow(2,-24)-Math.pow(2,-77):0,Vg=Tg?0:Pg-1,Ug=Tg?1:-1,Xg=0>$h||0===$h&&0>1/$h?1:0;for($h=Math.abs($h),isNaN($h)||$h===Infinity?(Lg=isNaN($h)?1:0,Ng=Mg):(Ng=Math.floor(Math.log($h)/Math.LN2),1>$h*(Ig=Math.pow(2,-Ng))&&(Ng--,Ig*=2),$h+=1<=Ng+Og?Yg/Ig:Yg*Math.pow(2,1-Og),2<=$h*Ig&&(Ng++,Ig/=2),Ng+Og>=Mg?(Lg=0,Ng=Mg):1<=Ng+Og?(Lg=($h*Ig-1)*Math.pow(2,_g),Ng+=Og):(Lg=$h*Math.pow(2,Og-1)*Math.pow(2,_g),Ng=0));8<=_g;Qh[Sg+Vg]=255&Lg,Vg+=Ug,Lg/=256,_g-=8);for(Ng=Ng<<_g|Lg,Rg+=_g;0<Rg;Qh[Sg+Vg]=255&Ng,Vg+=Ug,Ng/=256,Rg-=8);Qh[Sg+Vg-Ug]|=128*Xg}function Oe(){return Ve.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function Ye(Qh,$h){if(Oe()<$h)throw new RangeError('Invalid typed array length');return Ve.TYPED_ARRAY_SUPPORT?(Qh=new Uint8Array($h),Qh.__proto__=Ve.prototype):(null===Qh&&(Qh=new Ve($h)),Qh.length=$h),Qh}function Ve(Qh,$h,Sg){if(!Ve.TYPED_ARRAY_SUPPORT&&!(this instanceof Ve))return new Ve(Qh,$h,Sg);if('number'==typeof Qh){if('string'==typeof $h)throw new Error('If encoding is specified then the first argument must be a string');return Je(this,Qh)}return Ue(this,Qh,$h,Sg)}function Ue(Qh,$h,Sg,Tg){if('number'==typeof $h)throw new TypeError('"value" argument must not be a number');return'undefined'!=typeof ArrayBuffer&&$h instanceof ArrayBuffer?Qe(Qh,$h,Sg,Tg):'string'==typeof $h?Ze(Qh,$h,Sg):$e(Qh,$h)}function Xe(Qh){if('number'!=typeof Qh)throw new TypeError('"size" argument must be a number');else if(0>Qh)throw new RangeError('"size" argument must not be negative')}function We(Qh,$h,Sg,Tg){return Xe($h),0>=$h?Ye(Qh,$h):void 0===Sg?Ye(Qh,$h):'string'==typeof Tg?Ye(Qh,$h).fill(Sg,Tg):Ye(Qh,$h).fill(Sg)}function Je(Qh,$h){if(Xe($h),Qh=Ye(Qh,0>$h?0:0|St($h)),!Ve.TYPED_ARRAY_SUPPORT)for(var Sg=0;Sg<$h;++Sg)Qh[Sg]=0;return Qh}function Ze(Qh,$h,Sg){if(('string'!=typeof Sg||''===Sg)&&(Sg='utf8'),!Ve.isEncoding(Sg))throw new TypeError('"encoding" must be a valid string encoding');var Tg=0|_t($h,Sg);Qh=Ye(Qh,Tg);var _g=Qh.write($h,Sg);return _g!==Tg&&(Qh=Qh.slice(0,_g)),Qh}function Ke(Qh,$h){var Sg=0>$h.length?0:0|St($h.length);Qh=Ye(Qh,Sg);for(var Tg=0;Tg<Sg;Tg+=1)Qh[Tg]=255&$h[Tg];return Qh}function Qe(Qh,$h,Sg,Tg){if($h.byteLength,0>Sg||$h.byteLength<Sg)throw new RangeError('\'offset\' is out of bounds');if($h.byteLength<Sg+(Tg||0))throw new RangeError('\'length\' is out of bounds');return $h=void 0===Sg&&void 0===Tg?new Uint8Array($h):void 0===Tg?new Uint8Array($h,Sg):new Uint8Array($h,Sg,Tg),Ve.TYPED_ARRAY_SUPPORT?(Qh=$h,Qh.__proto__=Ve.prototype):Qh=Ke(Qh,$h),Qh}function $e(Qh,$h){if(Tt($h)){var Sg=0|St($h.length);return(Qh=Ye(Qh,Sg),0===Qh.length)?Qh:($h.copy(Qh,0,0,Sg),Qh)}if($h){if('undefined'!=typeof ArrayBuffer&&$h.buffer instanceof ArrayBuffer||'length'in $h)return'number'!=typeof $h.length||Za($h.length)?Ye(Qh,0):Ke(Qh,$h);if('Buffer'===$h.type&&_p($h.data))return Ke(Qh,$h.data)}throw new TypeError('First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.')}function St(Qh){if(Qh>=Oe())throw new RangeError('Attempt to allocate Buffer lLine truncated
|
||||
@@ -0,0 +1,18 @@
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import builtins from 'rollup-plugin-node-builtins';
|
||||
import babili from 'rollup-plugin-real-babili';
|
||||
|
||||
export default {
|
||||
entry: 'index.js',
|
||||
dest: 'docs/prettier.min.js',
|
||||
format: 'iife',
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
builtins(),
|
||||
babili({comments: false, sourceMap: false}),
|
||||
],
|
||||
useStrict: false,
|
||||
moduleName: 'prettier',
|
||||
};
|
||||
Reference in new issue
Block a user