From 1c8dd0c1e7536091f4cc0285f1f9536afbb58415 Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Thu, 12 Apr 2018 13:27:34 -0300
Subject: [PATCH] more stuff

---
 scripts/build/build.js              |   2 +-
 website/package.json                |   1 +
 website/pages/playground/index.html | 101 +---------------------------
 website/playground/Button.js        |   5 --
 website/playground/Playground.js    |  41 +++++++----
 website/playground/buttons.js       |   9 +++
 website/playground/markdown.js      |  68 +++++++++++++++++++
 website/playground/urlHash.js       |  31 +++++++++
 website/static/markdown.js          |  85 -----------------------
 website/static/service-worker.js    |   1 -
 website/yarn.lock                   |  26 +++++++
 11 files changed, 164 insertions(+), 206 deletions(-)
 delete mode 100644 website/playground/Button.js
 create mode 100644 website/playground/buttons.js
 create mode 100644 website/playground/markdown.js
 create mode 100644 website/playground/urlHash.js
 delete mode 100644 website/static/markdown.js

diff --git a/scripts/build/build.js b/scripts/build/build.js
index 5d009cac9..4243976e7 100755
--- a/scripts/build/build.js
+++ b/scripts/build/build.js
@@ -4,7 +4,7 @@
 
 const path = require("path");
 const pkg = require("../../package.json");
-const formatMarkdown = require("../../website/static/markdown");
+const formatMarkdown = require("../../website/playground/markdown");
 const parsers = require("./parsers");
 const shell = require("shelljs");
 
diff --git a/website/package.json b/website/package.json
index ae1d328b2..f86045932 100644
--- a/website/package.json
+++ b/website/package.json
@@ -8,6 +8,7 @@
     "svgo-all": "find static | grep '\\.svg$' | xargs -Iz -n 1 yarn svgo z"
   },
   "dependencies": {
+    "clipboard": "2.0.0",
     "codemirror": "5.36.0",
     "codemirror-graphql": "0.6.12",
     "lz-string": "1.4.4",
diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
index 8f074341c..4e9055ac8 100644
--- a/website/pages/playground/index.html
+++ b/website/pages/playground/index.html
@@ -22,8 +22,6 @@
 
   <link rel="stylesheet" crossorigin  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css">
 
-  <script src="/markdown.js"></script>
-
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.js"></script>
@@ -38,7 +36,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/comment/comment.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/wrap/hardwrap.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/keymap/sublime.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
@@ -77,103 +75,6 @@
 
   <script src="/playground.js"></script>
 
-  <!-- <div class="editors-container">
-    <div id="options-details" class="options-container">
-      <div class="options">
-        <details class="sub-options" open>
-          <summary>Global</summary>
-
-          <label>--parser
-            <select id="parser">
-              <option value="babylon">babylon</option>
-              <option value="flow">flow</option>
-              <option value="typescript">typescript</option>
-              <option value="css">css</option>
-              <option value="less">less</option>
-              <option value="scss">scss</option>
-              <option value="json">json</option>
-              <option value="graphql">graphql</option>
-              <option value="markdown">markdown</option>
-              <option value="vue">vue</option>
-            </select>
-          </label>
-          <label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
-          <label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
-          <label><input type="checkbox" id="useTabs"> --use-tabs</label>
-        </details>
-        <details class="sub-options" open>
-          <summary>JavaScript</summary>
-
-          <label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
-          <label><input type="checkbox" id="singleQuote"> --single-quote</label>
-          <label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
-          <label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
-          <label>--arrow-parens
-            <select id="arrowParens">
-              <option value="avoid">avoid</option>
-              <option value="always">always</option>
-            </select>
-          </label>
-          <label>--trailing-comma
-            <select id="trailingComma">
-              <option value="none">none</option>
-              <option value="es5">es5</option>
-              <option value="all">all</option>
-            </select>
-          </label>
-        </details>
-        <details class="sub-options">
-          <summary>Markdown</summary>
-
-          <label>--prose-wrap
-            <select id="proseWrap">
-              <option value="preserve">preserve</option>
-              <option value="always">always</option>
-              <option value="never">never</option>
-            </select>
-          </label>
-        </details>
-        <details class="sub-options">
-          <summary>Special</summary>
-
-          <label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
-          <label><input type="checkbox" id="requirePragma"> --require-pragma</label>
-        </details>
-        <details class="sub-options">
-          <summary>Range</summary>
-          <label>The selected range will be highlighted in yellow in the input editor</label>
-          <label>--range-start <input type="number" value="" min="0" id="rangeStart"></label>
-          <label>--range-end <input type="number" value="" min="0" id="rangeEnd"></label>
-        </details>
-        <details class="sub-options">
-          <summary>Debug</summary>
-
-          <label><input type="checkbox" id="ast"> show AST</label>
-          <label><input type="checkbox" id="doc"> show doc</label>
-          <label><input type="checkbox" id="output2"> show second format</label>
-        </details>
-      </div>
-    </div>
-
-    <div class="editors">
-      <div class="editor loading input">
-        <textarea id="input-editor"></textarea>
-      </div>
-      <div class="editor loading ast">
-        <textarea id="ast-editor"></textarea>
-      </div>
-      <div class="editor loading doc">
-        <textarea id="doc-editor"></textarea>
-      </div>
-      <div class="editor loading output">
-        <textarea id="output-editor"></textarea>
-      </div>
-      <div class="editor loading output2">
-        <textarea id="output2-editor"></textarea>
-      </div>
-    </div>
-  </div> -->
-
   <script src="/install-service-worker.js"></script>
 
   <script async defer src="https://buttons.github.io/buttons.js"></script>
diff --git a/website/playground/Button.js b/website/playground/Button.js
deleted file mode 100644
index dbc1d56e9..000000000
--- a/website/playground/Button.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function(props) {
-  return <button type="button" className="btn" {...props} />;
-}
diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index 67d163942..0732cea16 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -1,9 +1,12 @@
 import React from "react";
 
-import Button from "./Button";
+import { Button, LinkButton } from "./buttons";
 import EditorState from "./EditorState";
 import { DebugPanel, InputPanel, OutputPanel } from "./panels";
 import PrettierFormat from "./PrettierFormat";
+import { shallowEqual } from "./helpers";
+import * as urlHash from "./urlHash";
+import formatMarkdown from "./markdown";
 
 import { Sidebar, SidebarCategory } from "./sidebar/components";
 import Option from "./sidebar/options";
@@ -32,11 +35,15 @@ const ENABLED_OPTIONS = [
 class Playground extends React.Component {
   constructor() {
     super();
-    this.state = {
-      content: "",
-      loaded: false,
-      options: null
-    };
+
+    this.state = Object.assign(
+      {
+        content: "",
+        loaded: false,
+        options: null
+      },
+      urlHash.read()
+    );
     this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
 
     this.setContent = content => this.setState({ content });
@@ -63,6 +70,16 @@ class Playground extends React.Component {
       });
   }
 
+  componentDidUpdate(_, prevState) {
+    const { content, options } = this.state;
+    if (
+      !shallowEqual(prevState.options, this.state.options) ||
+      prevState.content !== content
+    ) {
+      urlHash.replace({ content, options });
+    }
+  }
+
   handleOptionValueChange(option, value) {
     this.setState(state => ({
       options: Object.assign({}, state.options, { [option.name]: value })
@@ -70,13 +87,7 @@ class Playground extends React.Component {
   }
 
   render() {
-    const {
-      availableOptions,
-      content,
-      loaded,
-      options,
-      showSidebar
-    } = this.state;
+    const { availableOptions, content, loaded, options } = this.state;
 
     if (!loaded) return "Loading...";
 
@@ -157,7 +168,9 @@ class Playground extends React.Component {
               <div className="bottom-bar-buttons bottom-bar-buttons-right">
                 <Button>Copy link</Button>
                 <Button>Copy markdown</Button>
-                <Button>Report issue</Button>
+                <LinkButton href="#" target="_blank" rel="noopener">
+                  Report issue
+                </LinkButton>
               </div>
             </div>
           </div>
diff --git a/website/playground/buttons.js b/website/playground/buttons.js
new file mode 100644
index 000000000..422aea7de
--- /dev/null
+++ b/website/playground/buttons.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Button(props) {
+  return <button type="button" className="btn" {...props} />;
+}
+
+export function LinkButton(props) {
+  return <a className="btn" $ {...props} />;
+}
diff --git a/website/playground/markdown.js b/website/playground/markdown.js
new file mode 100644
index 000000000..366aff9a6
--- /dev/null
+++ b/website/playground/markdown.js
@@ -0,0 +1,68 @@
+function formatMarkdown(
+  input,
+  output,
+  output2,
+  version,
+  url,
+  options,
+  cliOptions,
+  full
+) {
+  const syntax = getMarkdownSyntax(options);
+  const optionsString = formatCLIOptions(cliOptions);
+  const isIdempotent = output2 === "" || output === output2;
+
+  return [
+    `**Prettier ${version}**`,
+    `[Playground link](${url})`,
+    optionsString === "" ? null : codeBlock(optionsString, "sh"),
+    "",
+    "**Input:**",
+    codeBlock(input, syntax),
+    "",
+    "**Output:**",
+    codeBlock(output, syntax)
+  ]
+    .concat(
+      isIdempotent ? [] : ["", "**Second Output:**", codeBlock(output2, syntax)]
+    )
+    .concat(full ? ["", "**Expected behavior:**", ""] : [])
+    .filter(part => {
+      return part != null;
+    })
+    .join("\n");
+}
+
+function getMarkdownSyntax(options) {
+  switch (options.parser) {
+    case "babylon":
+    case "flow":
+      return "jsx";
+    case "typescript":
+      return "tsx";
+    default:
+      return options.parser;
+  }
+}
+
+function formatCLIOptions(cliOptions) {
+  return cliOptions
+    .map(option => {
+      const [name, value] = option;
+      return value === true ? name : `${name} ${value}`;
+    })
+    .join("\n");
+}
+
+function codeBlock(content, syntax) {
+  var backtickSequences = content.match(/`+/g) || [];
+  var longestBacktickSequenceLength = Math.max.apply(
+    null,
+    backtickSequences.map(backticks => backticks.length)
+  );
+  var fenceLength = Math.max(3, longestBacktickSequenceLength + 1);
+  var fence = Array(fenceLength + 1).join("`");
+  return [fence + (syntax || ""), content, fence].join("\n");
+}
+
+module.exports = formatMarkdown;
diff --git a/website/playground/urlHash.js b/website/playground/urlHash.js
new file mode 100644
index 000000000..24e2ebc84
--- /dev/null
+++ b/website/playground/urlHash.js
@@ -0,0 +1,31 @@
+import LZString from "lz-string";
+
+export function read() {
+  const hash = document.location.hash.slice(1);
+  // backwards support for old json encoded URIComponent
+  const decode =
+    hash.indexOf("%7B%22") !== -1
+      ? decodeURIComponent
+      : LZString.decompressFromEncodedURIComponent;
+
+  try {
+    return JSON.parse(decode(hash));
+  } catch (_) {
+    return {};
+  }
+}
+
+export function replace(state) {
+  const hash = LZString.compressToEncodedURIComponent(JSON.stringify(state));
+  if (
+    typeof URL === "function" &&
+    typeof history === "object" &&
+    typeof history.replaceState === "function"
+  ) {
+    const url = new URL(location);
+    url.hash = hash;
+    history.replaceState(null, null, url);
+  } else {
+    location.hash = hash;
+  }
+}
diff --git a/website/static/markdown.js b/website/static/markdown.js
deleted file mode 100644
index c07af1cdb..000000000
--- a/website/static/markdown.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-env browser */
-/* eslint no-var: off, strict: off, prefer-arrow-callback: off */
-
-// NOTE: This file must work both in the playground, and in the build scripts to
-// generate the issue template.
-
-(function() {
-  function formatMarkdown(
-    input,
-    output,
-    output2,
-    version,
-    url,
-    options,
-    cliOptions,
-    full
-  ) {
-    var syntax = getMarkdownSyntax(options);
-    var optionsString = formatCLIOptions(cliOptions);
-    var isIdempotent = output2 === "" || output === output2;
-
-    return [
-      "**Prettier " + version + "**",
-      "[Playground link](" + url + ")",
-      optionsString === "" ? null : codeBlock(optionsString, "sh"),
-      "",
-      "**Input:**",
-      codeBlock(input, syntax),
-      "",
-      "**Output:**",
-      codeBlock(output, syntax)
-    ]
-      .concat(
-        isIdempotent
-          ? []
-          : ["", "**Second Output:**", codeBlock(output2, syntax)]
-      )
-      .concat(full ? ["", "**Expected behavior:**", ""] : [])
-      .filter(function(part) {
-        return part != null;
-      })
-      .join("\n");
-  }
-
-  function getMarkdownSyntax(options) {
-    switch (options.parser) {
-      case "babylon":
-      case "flow":
-        return "jsx";
-      case "typescript":
-        return "tsx";
-      default:
-        return options.parser;
-    }
-  }
-
-  function formatCLIOptions(cliOptions) {
-    return cliOptions
-      .map(function(option) {
-        var name = option[0];
-        var value = option[1];
-        return value === true ? name : name + " " + value;
-      })
-      .join("\n");
-  }
-
-  function codeBlock(content, syntax) {
-    var backtickSequences = content.match(/`+/g) || [];
-    var longestBacktickSequenceLength = Math.max.apply(
-      null,
-      backtickSequences.map(function(backticks) {
-        return backticks.length;
-      })
-    );
-    var fenceLength = Math.max(3, longestBacktickSequenceLength + 1);
-    var fence = Array(fenceLength + 1).join("`");
-    return [fence + (syntax || ""), content, fence].join("\n");
-  }
-
-  if (typeof module !== "undefined" && module.exports) {
-    module.exports = formatMarkdown;
-  } else {
-    window.formatMarkdown = formatMarkdown;
-  }
-})();
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index 484562543..8a6436dd1 100644
--- a/website/static/service-worker.js
+++ b/website/static/service-worker.js
@@ -15,7 +15,6 @@ toolbox.precache([
   "lib/parser-glimmer.js",
   "lib/parser-graphql.js",
   "lib/parser-markdown.js",
-  "markdown.js",
   "playground.js",
   "lib/sw-toolbox.js",
 
diff --git a/website/yarn.lock b/website/yarn.lock
index b2d5d30c3..5a838e6a5 100644
--- a/website/yarn.lock
+++ b/website/yarn.lock
@@ -1388,6 +1388,14 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.0.tgz#4661dc972fb72a4c4770b8db78aa9b1caef52b50"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
@@ -1840,6 +1848,10 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2566,6 +2578,12 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 got@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
@@ -4776,6 +4794,10 @@ scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
@@ -5290,6 +5312,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"