BVB Source Codes

prettier Show index.html Source code

Return Download prettier: download index.html Source code - Download prettier Source code - Type:.html
  1. <meta charset="utf-8">
  2. <title>Prettier</title>
  3.  
  4. <script>
  5. // "Polyfills" in order for all the code to run
  6. global = window;
  7. Buffer = {isBuffer: function() { return false; }};
  8. fs = module$1 = module = path = os = crypto = {};
  9. process = {argv: [], env: {}}
  10. assert = {ok: function() {}, strictEqual: function() {}};
  11. function require(path) { return window[path.replace(/.+-/, '')]; }
  12. </script>
  13.  
  14. <script src="index.js"></script>
  15. <script>prettier = index;</script>
  16.  
  17. <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  18. <link rel="stylesheet" href="https://codemirror.net/theme/base16-dark.css">
  19. <script src="https://codemirror.net/lib/codemirror.js"></script>
  20. <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  21. <script src="https://codemirror.net/addon/display/rulers.js"></script>
  22. <script src="https://codemirror.net/addon/search/searchcursor.js"></script>
  23. <script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
  24. <script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
  25. <script src="https://codemirror.net/addon/comment/comment.js"></script>
  26. <script src="https://codemirror.net/addon/wrap/hardwrap.js"></script>
  27. <script src="https://codemirror.net/keymap/sublime.js"></script>
  28.  
  29. <style type="text/css">
  30.   html, body {
  31.     font-family: "Helvetica Neue", "Open Sans", sans-serif;
  32.     font-size: 11.7px;
  33.     margin: 0;
  34.     padding: 0;
  35.     background-color: #444444;
  36.     color: #e2e1e1;
  37.   }
  38.   .title {
  39.     font-style: italic;
  40.     line-height: 19px;
  41.     margin-right: 10px;
  42.   }
  43.   .container {
  44.     display: flex;
  45.     flex-direction: column;
  46.     height: 100%;
  47.   }
  48.   .editors {
  49.     display: flex;
  50.     flex-direction: row;
  51.     flex: 1;
  52.     margin: 5px;
  53.   }
  54.   .editor {
  55.     display: flex;
  56.     flex: 1;
  57.     position: relative;
  58.   }
  59.   .CodeMirror {
  60.     height: auto;
  61.     position: absolute;
  62.     top: 0;
  63.     left: 0;
  64.     right: 0;
  65.     bottom: 0;
  66.     font-family: Menlo, monospace;
  67.     font-size: 11.05px;
  68.     line-height: 17.68px;
  69.   }
  70.   .editor {
  71.     margin-left: 5px;
  72.   }
  73.   .editor:first-child {
  74.     margin-left: 0;
  75.   }
  76.   .options {
  77.     display: flex;
  78.     margin: 5px;
  79.     margin-bottom: 0;
  80.   }
  81.   .title a {
  82.     color: #e2e1e1;
  83.   }
  84.   .title a:hover {
  85.     color: #fdfcfc;
  86.   }
  87.   label {
  88.     margin-right: 5px;
  89.   }
  90.   input[type="number"] {
  91.     max-width: 40px;
  92.   }
  93. </style>
  94.  
  95. <div class="container">
  96.   <div class="options">
  97.     <label class="title"><a href="https://github.com/prettier/prettier">prettier v<span class="version"></span></a></label>
  98.     <label><input type="number" value="80" id="printWidth"></input> printWidth</label>
  99.     <label><input type="number" value="2" id="tabWidth"></input> tabWidth</label>
  100.     <label><input type="checkbox" id="useTabs"></input> useTabs</label>
  101.     <label><input type="checkbox" id="semi" checked></input> semi</label>
  102.     <label><input type="checkbox" id="singleQuote"></input> singleQuote</label>
  103.     <label><input type="checkbox" id="bracketSpacing" checked></input> bracketSpacing</label>
  104.     <label><input type="checkbox" id="jsxBracketSameLine"></input> jsxBracketSameLine</label>
  105.     <label>trailingComma <select id="trailingComma"><option value="none">none</option><option value="es5">es5</option><option value="all">all</option></select></label>
  106.     <label>parser <select id="parser"><option value="babylon">babylon</option><option value="flow">flow</option><option value="typescript">typescript</option><option value="postcss">postcss</option></select></label>
  107.     <span style="flex: 1"></span>
  108.     <label><input type="checkbox" id="doc"></input> doc</label>
  109.   </div>
  110.  
  111.   <div class="editors">
  112.     <div class="editor input">
  113.       <textarea id="input-editor"></textarea>
  114.     </div>
  115.     <div class="editor doc">
  116.       <textarea id="doc-editor"></textarea>
  117.     </div>
  118.     <div class="editor output">
  119.       <textarea id="output-editor"></textarea>
  120.     </div>
  121.   </div>
  122. </div>
  123.  
  124. <script id="code">
  125. (function () {
  126. var OPTIONS = ['printWidth', 'tabWidth', 'singleQuote', 'trailingComma', 'bracketSpacing', 'jsxBracketSameLine', 'parser', 'semi', 'useTabs', 'doc'];
  127. function setOptions(options) {
  128.   OPTIONS.forEach(function(option) {
  129.     var elem = document.getElementById(option);
  130.     if (elem.tagName === 'SELECT') {
  131.       elem.value = options[option];
  132.     } else if (elem.type === 'number') {
  133.       elem.value = options[option];
  134.     } else {
  135.       elem.checked = options[option];
  136.     }
  137.   });
  138. }
  139.  
  140. function getOptions() {
  141.   var options = {};
  142.   OPTIONS.forEach(function(option) {
  143.     var elem = document.getElementById(option);
  144.     if (elem.tagName === 'SELECT') {
  145.       options[option] = elem.value;
  146.     } else if (elem.type === 'number') {
  147.       options[option] = Number(elem.value);
  148.     } else {
  149.       options[option] = elem.checked;
  150.     }
  151.   });
  152.   return options;
  153. }
  154.  
  155. function omitNonFormatterOptions(options) {
  156.   var optionsClone = Object.assign({}, options);
  157.   delete optionsClone.doc;
  158.   return optionsClone;
  159. }
  160.  
  161. function replaceHash(hash) {
  162.   if (
  163.     typeof URL === "function" &&
  164.    typeof history === "object" &&
  165.    typeof history.replaceState === "function"
  166.  ) {
  167.    var url = new URL(location);
  168.     url.hash = hash;
  169.     history.replaceState(null, null, url);
  170.   } else {
  171.     location.hash = hash;
  172.   }
  173. }
  174.  
  175. function onceParserLoaded(parser, cb) {
  176.   if (window[parser]) {
  177.     cb();
  178.     return;
  179.   }
  180.  
  181.   // We can't synchronously insert a script, so we first make sure that the
  182.   // parser is loaded before calling format that will require it
  183.   var s = document.createElement('script');
  184.   s.src = 'parser-' + parser + '.js';
  185.   s.type = "text/javascript";
  186.   s.onload = cb;
  187.   document.getElementsByTagName('head')[0].appendChild(s);
  188. }
  189.  
  190. function format() {
  191.   var options = getOptions();
  192.   onceParserLoaded(options.parser || 'babylon', function() {
  193.     [docEditor, outputEditor].forEach(function(editor) {
  194.       editor.setOption(
  195.         'rulers',
  196.         [{column: options.printWidth, color: '#444444'}]
  197.       );
  198.     });
  199.     document.getElementsByClassName('doc')[0].style.display = options.doc ? 'flex' : 'none';
  200.  
  201.     var value = encodeURIComponent(
  202.       JSON.stringify(
  203.         Object.assign({content: inputEditor.getValue(), options: options})
  204.       )
  205.     );
  206.     replaceHash(value);
  207.     var formatterOptions = omitNonFormatterOptions(options);
  208.     var res;
  209.     try {
  210.       res = prettier.format(inputEditor.getValue(), formatterOptions);
  211.     } catch (e) {
  212.       res = e.toString();
  213.     }
  214.     outputEditor.setValue(res);
  215.  
  216.     if (options.doc) {
  217.       var debug;
  218.       try {
  219.         var doc = prettier.__debug.printToDoc(inputEditor.getValue(), formatterOptions);
  220.         debug = prettier.__debug.formatDoc(doc, formatterOptions);
  221.       } catch (e) {
  222.         debug = e.toString();
  223.       }
  224.       docEditor.setValue(debug);
  225.     }
  226.   });
  227. }
  228.  
  229. document.getElementsByClassName('options')[0].onchange = format;
  230.  
  231. var editorOptions = {
  232.   lineNumbers: true,
  233.   keyMap: "sublime",
  234.   autoCloseBrackets: true,
  235.   matchBrackets: true,
  236.   showCursorWhenSelecting: true,
  237.   theme: 'base16-dark',
  238.   tabWidth: 2
  239. };
  240. var inputEditor = CodeMirror.fromTextArea(
  241.   document.getElementById('input-editor'),
  242.   editorOptions
  243. );
  244. inputEditor.on('change', format);
  245.  
  246. var docEditor = CodeMirror.fromTextArea(
  247.   document.getElementById('doc-editor'),
  248.   {readOnly: true, lineNumbers: true, theme: 'base16-dark'}
  249. );
  250.  
  251. var outputEditor = CodeMirror.fromTextArea(
  252.   document.getElementById('output-editor'),
  253.   {readOnly: true, lineNumbers: true, theme: 'base16-dark'}
  254. );
  255.  
  256. document.getElementsByClassName('version')[0].innerText = prettier.version;
  257.  
  258. try {
  259.   var json = JSON.parse(decodeURIComponent(location.hash.slice(1)));
  260.   setOptions(json.options);
  261.   inputEditor.setValue(json.content);
  262. } catch (e) {
  263.   inputEditor.setValue('hello ( "world"\n)');
  264. }
  265. })();
  266. </script>
  267.  
downloadindex.html Source code - Download prettier Source code
Related Source Codes/Software:
storybook - 2017-06-07
ionicons - The premium icon font for Ionic ... 2017-06-07
AsyncDisplayKit - Smooth asynchronous user interfaces for iOS apps. ... 2017-06-07
lottie-android - Render After Effects animations natively on Androi... 2017-06-07
parse-server - Parse-compatible API server module for Node/Expres... 2017-06-07
inferno - An extremely fast, React-like JavaScript library f... 2017-06-08
guetzli - Perceptual JPEG encoder 2017-06-08
cs-video-courses - List of Computer Science courses with video lectur... 2017-06-08
interviews - Everything you need to know to get the job. 2017-06-08
prepack - Prepack is a partial evaluator for JavaScript. Pre... 2017-06-08
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top