Fix building docs (#1838)

The hackiness continues! I'm now bundling an existing bundle again in order for it to get exported as a global variable :p There's likely a better solution, but it kind of works.

Because I have to regenerate the docs, I just tagged it as 1.4.0-beta and added typescript and postcss in there.

docs/index.html

@@ -1,9 +1,18 @@
 <meta charset="utf-8">
 <title>Prettier</title>
 
-<script>global = window;</script>
-<script>Buffer = {isBuffer: function() { return false; }};</script>
-<script src="prettier.min.js"></script>
+<script>
+// "Polyfills" in order for all the code to run
+global = window;
+Buffer = {isBuffer: function() { return false; }};
+fs = module$1 = module = path = os = crypto = {};
+process = {argv: [], env: {}}
+assert = {ok: function() {}};
+function require(path) { return window[path.replace(/.+-/, '')]; }
+</script>
+
+<script src="index.js"></script>
+<script>prettier = index;</script>
 
 <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
 <link rel="stylesheet" href="https://codemirror.net/theme/base16-dark.css">
@@ -94,7 +103,7 @@
     <label><input type="checkbox" id="bracketSpacing" checked></input> bracketSpacing</label>
     <label><input type="checkbox" id="jsxBracketSameLine"></input> jsxBracketSameLine</label>
     <label>trailingComma <select id="trailingComma"><option value="none">none</option><option value="es5">es5</option><option value="all">all</option></select></label>
-    <label>parser <select id="parser"><option value="babylon">babylon</option><option value="flow">flow</option></select></label>
+    <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>
     <span style="flex: 1"></span>
     <label><input type="checkbox" id="doc"></input> doc</label>
   </div>
@@ -113,6 +122,7 @@
 </div>
 
 <script id="code">
+(function () {
 var OPTIONS = ['printWidth', 'tabWidth', 'singleQuote', 'trailingComma', 'bracketSpacing', 'jsxBracketSameLine', 'parser', 'semi', 'useTabs', 'doc'];
 function setOptions(options) {
   OPTIONS.forEach(function(option) {
@@ -162,41 +172,58 @@ function replaceHash(hash) {
   }
 }
 
+function onceParserLoaded(parser, cb) {
+  if (window[parser]) {
+    cb();
+    return;
+  }
+
+  // We can't synchronously insert a script, so we first make sure that the
+  // parser is loaded before calling format that will require it
+  var s = document.createElement('script');
+  s.src = 'parser-' + parser + '.js';
+  s.type = "text/javascript";
+  s.onload = cb;
+  document.getElementsByTagName('head')[0].appendChild(s);
+}
+
 function format() {
   var options = getOptions();
-  [docEditor, outputEditor].forEach(function(editor) {
-    editor.setOption(
-      'rulers',
-      [{column: options.printWidth, color: '#444444'}]
+  onceParserLoaded(options.parser || 'babylon', function() {
+    [docEditor, outputEditor].forEach(function(editor) {
+      editor.setOption(
+        'rulers',
+        [{column: options.printWidth, color: '#444444'}]
+      );
+    });
+    document.getElementsByClassName('doc')[0].style.display = options.doc ? 'flex' : 'none';
+
+    var value = encodeURIComponent(
+      JSON.stringify(
+        Object.assign({content: inputEditor.getValue(), options: options})
+      )
     );
-  });
-  document.getElementsByClassName('doc')[0].style.display = options.doc ? 'flex' : 'none';
-
-  var value = encodeURIComponent(
-    JSON.stringify(
-      Object.assign({content: inputEditor.getValue(), options: options})
-    )
-  );
-  replaceHash(value);
-  var formatterOptions = omitNonFormatterOptions(options);
-  var res;
-  try {
-    res = prettier.format(inputEditor.getValue(), formatterOptions);
-  } catch (e) {
-    res = e.toString();
-  }
-  outputEditor.setValue(res);
-
-  if (options.doc) {
-    var debug;
+    replaceHash(value);
+    var formatterOptions = omitNonFormatterOptions(options);
+    var res;
     try {
-      var doc = prettier.__debug.printToDoc(inputEditor.getValue(), formatterOptions);
-      debug = prettier.__debug.formatDoc(doc, formatterOptions);
+      res = prettier.format(inputEditor.getValue(), formatterOptions);
     } catch (e) {
-      debug = e.toString();
+      res = e.toString();
     }
-    docEditor.setValue(debug);
-  }
+    outputEditor.setValue(res);
+
+    if (options.doc) {
+      var debug;
+      try {
+        var doc = prettier.__debug.printToDoc(inputEditor.getValue(), formatterOptions);
+        debug = prettier.__debug.formatDoc(doc, formatterOptions);
+      } catch (e) {
+        debug = e.toString();
+      }
+      docEditor.setValue(debug);
+    }
+  });
 }
 
 document.getElementsByClassName('options')[0].onchange = format;
@@ -227,14 +254,13 @@ var outputEditor = CodeMirror.fromTextArea(
 );
 
 document.getElementsByClassName('version')[0].innerText = prettier.version;
-</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());
+  inputEditor.setValue('hello ( "world"\n)');
 }
+})();
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "1.3.1",
+  "version": "1.4.0-beta",
   "description": "Prettier is an opinionated JavaScript formatter",
   "bin": {
     "prettier": "./bin/prettier.js"

scripts/build/build.sh

@@ -4,29 +4,49 @@ cd "$(dirname "$0")";
 cd ../..;
 
 rm -Rf dist/
+rm docs/*.js
 
 echo 'The warning about eval being strongly discouraged is normal.'
 
-echo 'Bundling index...';
+## --- Lib ---
+
+echo 'Bundling lib index...';
 node_modules/.bin/rollup -c scripts/build/rollup.index.config.js
 
-echo 'Bundling bin...';
+echo 'Bundling lib bin...';
 node_modules/.bin/rollup -c scripts/build/rollup.bin.config.js
 chmod +x ./dist/bin/prettier.js
 
-echo 'Bundling babylon...';
+echo 'Bundling lib babylon...';
 node_modules/.bin/rollup -c scripts/build/rollup.parser.config.js --environment parser:babylon
 
-echo 'Bundling flow...';
+echo 'Bundling lib flow...';
 node_modules/.bin/rollup -c scripts/build/rollup.parser.config.js --environment parser:flow
 
-echo 'Bundling typescript...';
+echo 'Bundling lib typescript...';
 node_modules/.bin/rollup -c scripts/build/rollup.parser.config.js --environment parser:typescript
 
-echo 'Bundling postcss...';
+echo 'Bundling lib postcss...';
 # PostCSS has dependency cycles and won't work correctly with rollup :(
 ./node_modules/.bin/webpack src/parser-postcss.js dist/src/parser-postcss.js
 # Prepend module.exports =
 echo "module.exports =" > dist/src/parser-postcss.js.tmp
 cat dist/src/parser-postcss.js >> dist/src/parser-postcss.js.tmp
 mv dist/src/parser-postcss.js.tmp dist/src/parser-postcss.js
+
+## --- Docs ---
+
+echo 'Bundling docs index...';
+cp dist/index.js docs/index.js
+
+echo 'Bundling docs babylon...';
+node_modules/.bin/rollup -c scripts/build/rollup.docs.config.js --environment filepath:src/parser-babylon.js
+
+echo 'Bundling docs flow...';
+node_modules/.bin/rollup -c scripts/build/rollup.docs.config.js --environment filepath:src/parser-flow.js
+
+echo 'Bundling docs typescript...';
+node_modules/.bin/rollup -c scripts/build/rollup.docs.config.js --environment filepath:src/parser-typescript.js
+
+echo 'Bundling docs postcss...';
+node_modules/.bin/rollup -c scripts/build/rollup.docs.config.js --environment filepath:src/parser-postcss.js

scripts/build/rollup.docs.config.js

@@ -4,17 +4,21 @@ import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
 import json from 'rollup-plugin-json';
 
+const filepath = process.env.filepath;
+const filename = filepath.replace(/.+\//, '');
+const basename = filename.replace(/\..+/, '');
+
 export default {
-  entry: 'index.js',
-  dest: 'docs/prettier.min.js',
+  entry: 'dist/' + filepath,
+  dest: 'docs/' + filename,
   format: 'iife',
   plugins: [
     json(),
     resolve(),
     commonjs(),
     globals(),
-    builtins(),
   ],
   useStrict: false,
-  moduleName: 'prettier',
+  moduleName: basename.replace(/.+-/, ''),
+  external: ['assert', 'fs', 'module']
 };