Website: speed up load time, enable service worker (#2172)

* feat(website): speed up website load 💥

* chore(package): fix bad merge
master
Lucas Azzola 2017-06-18 20:25:27 +10:00 committed by GitHub
parent 4106a69b6d
commit eccb17495a
12 changed files with 261 additions and 67 deletions

BIN
docs/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -2,21 +2,39 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Prettier</title>
<!-- CodeMirror -->
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/theme/neat.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>
<script src="https://codemirror.net/addon/search/searchcursor.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
<script src="https://codemirror.net/addon/comment/comment.js"></script>
<script src="https://codemirror.net/addon/wrap/hardwrap.js"></script>
<script src="https://codemirror.net/keymap/sublime.js"></script>
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Prettier">
<meta name="apple-mobile-web-app-title" content="Prettier">
<meta name="theme-color" content="#1A2B34">
<meta name="msapplication-navbutton-color" content="#1A2B34">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/prettier/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="icon.png">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neat.css">
<script src="lib/prettier-version.js"></script>
<script src="playground.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/closebrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js"></script>
<style type="text/css">
html,
@ -36,7 +54,7 @@
}
.options-summary {
font-size: 1.2em;
font-size: 1.4em;
margin-top: 8px;
text-align: center;
}
@ -68,7 +86,9 @@
}
.logo {
height: 100px;
height: 45px;
margin-left: 10px;
margin-right: 20px;
}
.tagline {
@ -81,6 +101,10 @@
margin-right: 30px;
}
textarea.loading {
opacity: 0;
}
.editors-container {
display: flex;
flex-grow: 1;
@ -93,13 +117,27 @@
}
.editor {
min-width: 400px;
display: flex;
flex: 1;
flex-basis: 100%;
position: relative;
border-top: 1px solid #1A2B34;
}
/* display as 2x2 grid */
@media (min-width: 800px) {
.editor {
flex-basis: 50%;
}
}
/* display as four columns */
@media (min-width: 1200px) {
.editor {
flex-basis: 25%;
}
}
.arrow {
align-self: center;
font-size: 1.2em;
@ -139,10 +177,16 @@
margin: 0 10px;
}
@media (max-width: 400px) {
@media (max-width: 408px) {
label {
padding: 8px;
}
.options-container {
flex-direction: column-reverse;
}
.options.last {
flex-direction: column-reverse;
}
}
input[type="number"] {
@ -158,7 +202,7 @@
<body>
<header>
<a href=".">
<img class="logo" src="https://cloud.githubusercontent.com/assets/311752/24730511/e6690c38-1a18-11e7-95a9-2af91bb60440.png">
<img class="logo" src="prettier.png">
</a>
<h2 class="tagline"><em>Opinionated</em> code formatter</h2>
<span class="links">
@ -175,13 +219,16 @@
<section class="editors-container">
<div class="editors">
<div class="editor input">
<textarea id="input-editor"></textarea>
<textarea class="loading" id="input-editor"></textarea>
</div>
<div class="editor ast">
<textarea class="loading" id="ast-editor"></textarea>
</div>
<div class="editor doc">
<textarea id="doc-editor"></textarea>
<textarea class="loading" id="doc-editor"></textarea>
</div>
<div class="editor output">
<textarea id="output-editor"></textarea>
<textarea class="loading" id="output-editor"></textarea>
</div>
</div>
</section>
@ -202,10 +249,11 @@
<label><input type="checkbox" data-inverted id="bracketSpacing"></input> --no-bracket-spacing</label>
<label><input type="checkbox" id="jsxBracketSameLine"></input> --jsx-bracket-same-line</label>
</div>
<div class="options">
<div class="options last">
<label>--trailing-comma <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><option value="typescript">typescript</option><option value="postcss">postcss</option></select></label>
<span style="flex: 0.3"></span>
<label><input type="checkbox" id="ast"></input> show AST (debug)</label>
<label><input type="checkbox" id="doc"></input> show doc (debug)</label>
</div>
</div>
@ -222,8 +270,7 @@
</p>
</footer>
<script src="lib/prettier-version.js"></script>
<script src="playground.js"></script>
<script src="lib/sw-toolbox-companion.js" data-service-worker="service-worker.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>

View File

@ -0,0 +1,23 @@
/*
Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
(function() {
'use strict';
var workerScript = document.currentScript && document.currentScript.dataset.serviceWorker;
if (workerScript && 'serviceWorker' in navigator) {
navigator.serviceWorker.register(workerScript);
}
})();

16
docs/lib/sw-toolbox.js Normal file

File diff suppressed because one or more lines are too long

15
docs/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "Prettier",
"short_name": "Prettier",
"description": "Opinionated code formatter",
"lang": "en-US",
"start_url": ".",
"scope": ".",
"display": "browser",
"theme_color": "#1A2B34",
"icons": [
{
"src": "icon.png"
}
]
}

View File

@ -2,7 +2,28 @@
/* eslint no-var: off, strict: off, prefer-arrow-callback: off */
/* global CodeMirror prettierVersion */
(function() {
var state = (function loadState(hash) {
try {
return JSON.parse(hash);
} catch (error) {
return {
options: undefined,
content:
'hello ( "world"\n);\n\n' +
'[ "lorem", "ipsum", \'dolor\', sit("amet"), consectetur[ \'adipiscing\' ] + "elit" ].reduce(\n (first, second) => first + second,\n "")\n\n' +
"const Foo = ({ bar, baz, things }) => {\n" +
' return <div style={{\ncolor: "papayawhip"}}>\n' +
" <br/>{things.map(thing => reallyLongPleaseDontPutOnOneLine(thing) ? <p>{ok}</p> : <Quax bar={bar} baz={ baz } {...thing}></Quax>)\n" +
" }</div>}"
};
}
})(decodeURIComponent(location.hash.slice(1)));
var worker = new Worker("./worker.js");
// Warm up the worker (load the current parser while CodeMirror loads)
worker.postMessage({ text: "", options: state.options });
window.onload = function() {
var OPTIONS = [
"printWidth",
"tabWidth",
@ -13,8 +34,11 @@
"parser",
"semi",
"useTabs",
"doc"
"doc",
"ast"
];
state.options && setOptions(state.options);
function setOptions(options) {
OPTIONS.forEach(function(option) {
var elem = document.getElementById(option);
@ -45,12 +69,6 @@
return options;
}
function omitNonFormatterOptions(options) {
var optionsClone = Object.assign({}, options);
delete optionsClone.doc;
return optionsClone;
}
function replaceHash(hash) {
if (
typeof URL === "function" &&
@ -68,12 +86,13 @@
function formatAsync() {
var options = getOptions();
[docEditor, outputEditor].forEach(function(editor) {
editor.setOption("rulers", [
{ column: options.printWidth, color: "#444444" }
]);
});
document.getElementsByClassName("doc")[0].style.display = options.doc
outputEditor.setOption("rulers", [
{ column: options.printWidth, color: "#444444" }
]);
document.querySelector(".ast").style.display = options.ast
? "flex"
: "none";
document.querySelector(".doc").style.display = options.doc
? "flex"
: "none";
@ -83,16 +102,14 @@
)
);
replaceHash(value);
var formatterOptions = omitNonFormatterOptions(options);
worker.postMessage({
text: inputEditor.getValue(),
options: formatterOptions,
options: options,
ast: options.ast,
doc: options.doc
});
}
document.querySelector(".options-container").onchange = formatAsync;
var editorOptions = {
lineNumbers: true,
keyMap: "sublime",
@ -112,32 +129,26 @@
document.getElementById("doc-editor"),
{ readOnly: true, lineNumbers: false, theme: "neat" }
);
var astEditor = CodeMirror.fromTextArea(
document.getElementById("ast-editor"),
{ readOnly: true, lineNumbers: false, theme: "neat" }
);
var outputEditor = CodeMirror.fromTextArea(
document.getElementById("output-editor"),
{ readOnly: true, lineNumbers: true, theme: "neat" }
);
var worker = new Worker("./worker.js");
Array.from(document.querySelectorAll("textarea")).forEach(function(element) {
element.classList.remove("loading");
});
worker.onmessage = function(message) {
outputEditor.setValue(message.data.formatted);
docEditor.setValue(message.data.doc || "");
astEditor.setValue(message.data.ast || "");
};
document.getElementsByClassName("version")[0].innerText = prettierVersion;
try {
var json = JSON.parse(decodeURIComponent(location.hash.slice(1)));
setOptions(json.options);
inputEditor.setValue(json.content);
} catch (e) {
inputEditor.setValue(
'hello ( "world"\n);\n\n' +
'[ "lorem", "ipsum", \'dolor\', sit("amet"), consectetur[ \'adipiscing\' ] + "elit" ].reduce(\n (first, second) => first + second,\n "")\n\n' +
"const Foo = ({ bar, baz, things }) => {\n" +
' return <div style={{\ncolor: "papayawhip"}}>\n' +
" <br/>{things.map(thing => reallyLongPleaseDontPutOnOneLine(thing) ? <p>{ok}</p> : <Quax bar={bar} baz={ baz } {...thing}></Quax>)\n" +
" }</div>}"
);
}
})();
inputEditor.setValue(state.content);
document.querySelector(".options-container").onchange = formatAsync;
document.querySelector(".version").innerText = prettierVersion;
};

BIN
docs/prettier.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

36
docs/service-worker.js Normal file
View File

@ -0,0 +1,36 @@
/* eslint-env serviceworker */
/* global toolbox */
"use strict";
importScripts("lib/sw-toolbox.js");
toolbox.precache([
// Scripts
"lib/prettier-version.js",
"lib/index.js",
"lib/parser-babylon.js",
"lib/parser-typescript.js",
"lib/parser-flow.js",
"playground.js",
"lib/sw-toolbox.js",
"lib/sw-toolbox-companion.js",
// CodeMirror
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neat.css",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/closebrackets.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js",
// Images
"prettier.png"
]);
toolbox.router.default = toolbox.fastest;

View File

@ -22,27 +22,47 @@ var prettier = index; // eslint-disable-line
var parsersLoaded = {};
self.onmessage = function(message) {
lazyLoadParser(message.data.options.parser);
const options = message.data.options || {
parser: "babylon"
};
var formatted, doc;
delete options.ast;
delete options.doc;
lazyLoadParser(options.parser);
var formatted, doc, ast;
try {
formatted = prettier.format(message.data.text, message.data.options);
formatted = prettier.format(message.data.text, options);
} catch (e) {
formatted = e.toString();
}
if (message.data.ast) {
try {
ast = JSON.stringify(
prettier.__debug.parse(message.data.text, options),
null,
2
);
} catch (e) {
ast = e.toString();
}
}
if (message.data.doc) {
lazyLoadParser("babylon");
try {
doc = prettier.__debug.formatDoc(
prettier.__debug.printToDoc(message.data.text, message.data.options),
{}
prettier.__debug.printToDoc(message.data.text, options),
{ parser: "babylon" }
);
} catch (e) {
doc = e.toString();
}
}
self.postMessage({ formatted: formatted, doc: doc });
self.postMessage({ formatted: formatted, doc: doc, ast: ast });
};
function lazyLoadParser(parser) {

View File

@ -49,6 +49,7 @@
"rollup-plugin-node-globals": "1.1.0",
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-replace": "1.1.1",
"sw-toolbox": "3.6.0",
"uglify-es": "3.0.15",
"webpack": "2.6.1"
},

View File

@ -55,6 +55,10 @@ sed --in-place='' -e 's/eval("require")/require/g' dist/index.js dist/bin/pretti
echo 'Create prettier-version.js'
node -p '`prettierVersion = "${require(".").version}";`' > docs/lib/prettier-version.js
echo 'Copy sw-toolbox.js to docs'
cp node_modules/sw-toolbox/sw-toolbox.js docs/lib/sw-toolbox.js
cp node_modules/sw-toolbox/companion.js docs/lib/sw-toolbox-companion.js
echo 'Copy package.json'
node -p "pkg = require('./package.json'), delete pkg.dependencies, JSON.stringify(pkg, null, 2)" > dist/package.json

View File

@ -1951,6 +1951,10 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
isarray@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@ -2792,6 +2796,12 @@ path-parse@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
path-to-regexp@^1.0.1:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies:
isarray "0.0.1"
path-type@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@ -3273,6 +3283,10 @@ sax@^1.2.1:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
serviceworker-cache-polyfill@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
set-blocking@^2.0.0, set-blocking@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@ -3471,6 +3485,13 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
dependencies:
has-flag "^1.0.0"
sw-toolbox@3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/sw-toolbox/-/sw-toolbox-3.6.0.tgz#26df1d1c70348658e4dea2884319149b7b3183b5"
dependencies:
path-to-regexp "^1.0.1"
serviceworker-cache-polyfill "^4.0.0"
symbol-tree@^3.2.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"