...
 
Commits (7)
  • wincent's avatar
    Fix <When> display · 8656eb51
    wincent authored
    I was obviously a bit tired when I rolled out the "N minute read" stuff
    and didn't sufficiently test this. There were pages using <When> without
    <Metadata> which lost their formatting, and the spacing looked off.
    Also, we had an unwanted trailing mid-dot, and an orphan CSS class that
    did nothing.
    8656eb51
  • wincent's avatar
    Create pipeline string up front before mutating invocations array · 3fa7aae7
    wincent authored
    Because we mutate the array as we go, this code was not necessarily
    producing full error messages.
    3fa7aae7
  • wincent's avatar
    Work around @babel/polyfill accessing non-existent `global` · aa401def
    wincent authored
    Seeing as I am using useBuiltins = 'usage' in my @babel/preset-env
    config, in theory I could just remove the polyfill from the entry
    section, but I am a bit wary of doing that due to its experimental
    status. Also, the docs (https://babeljs.io/docs/en/babel-preset-env)
    don't make it clear whether items like 'regenerator-runtime/runtime' get
    handled adequately or not, so I might just wait this one out.
    
    It seems certainly true that much of what is in the polyfill could be
    skipped as I am pretty sure I am not using all of it:
    
      require("core-js/es6");
      require("core-js/fn/array/includes");
      require("core-js/fn/string/pad-start");
      require("core-js/fn/string/pad-end");
      require("core-js/fn/symbol/async-iterator");
      require("core-js/fn/object/get-own-property-descriptors");
      require("core-js/fn/object/values");
      require("core-js/fn/object/entries");
      require("core-js/fn/promise/finally");
      require("core-js/web");
      require("regenerator-runtime/runtime");
    
    All of this prompted because of this check in the polyfill:
    
      if (global._babelPolyfill && typeof console !== "undefined" && console.warn) {
        console.warn("@babel/polyfill is loaded more than once...");
      }
    
      global._babelPolyfill = true;
    
    Which is causing this in prod (only, for some reason):
    
      Uncaught ReferenceError: global is not defined
    aa401def
  • wincent's avatar
    Switch from useBuiltIns "usage" -> "entry" · 38f49dd4
    wincent authored
    Prior to this change:
    
    - Bundle size 490626 bytes (124504 bytes gzipped)
    
    After:
    
    - Bundle size 487306 bytes (122293 bytes gzipped)
    
    A little surprised it isn't more, to be honest. When I double-check
    this in source-map-explorer I don't see much difference in the core-js
    size.
    
    Incidentally, I think this *should* obviate the need for the workaround
    implemented in aa401def, but when I look at the build
    dist/client/polyfill.js it looks untransformed to me... May have to do
    some further digging.
    38f49dd4
  • wincent's avatar
    Try to force useBuiltIns transform to work · 5d9210b3
    wincent authored
    Inspecting the dist/ folder shows no transform happening at all, so I
    wondered if it was being skipped on entry files and moved the `import`
    into the main app file instead. Of course, that's pointless because the
    main app file is also an entry point... As an experiment, I moved it
    into a non-entry file, with the same result. My next step is going to be
    to try tweaking the @babel/preset-env targets to see if I can force a
    transform.
    5d9210b3
  • wincent's avatar
    Don't use "defaults" as browserslist target for @babel/preset-env · 883dab00
    wincent authored
    Despite what the docs (https://babeljs.io/docs/en/babel-preset-env) say,
    it appears that not all the target queries supported by browserslist
    (https://github.com/browserslist/browserslist) can be used here.
    
    "default" is supposedly equivalent to "> 0.5%, last 2 versions, Firefox
    ESR, not dead", but when I add a `debug: true` flag, I see that it
    treats `targets` as `{}` and ends up producing a bundle which is a few
    KB larger (pre-gzip, I don't know about post-gzip). It looks to be the
    whole kaboodle. Disappointing that the list of included polyfills ends
    up being so large; a nice chunk gets trimmed off if you use a more
    aggressive target like "last 2 Chrome versions" (that's obviously not
    viable though). Over time, the bundle should get smaller though as more
    browsers drop off the list.
    
    Closes: https://github.com/wincent/masochist/issues/127
    883dab00
  • wincent's avatar
    Add @Flow to main app entry point · 35008a88
    wincent authored
    35008a88
/**
* @flow
*/
/**
* Via `useBuiltIns: 'entry'` in our @babel/preset-env settings in the
* webpack configs, the following `import` should get transformed into
* individual requires into core-js, reducing our bundle size.
*
* See: https://babeljs.io/docs/en/babel-preset-env
*/
import "@babel/polyfill";
import 'isomorphic-fetch';
import {
......@@ -19,6 +32,7 @@ import NotFoundError from '../common/NotFoundError';
import RenderTextError from '../common/RenderTextError';
import createRouter from '../common/createRouter';
import getRequestBody from '../common/getRequestBody';
import nullthrows from '../common/nullthrows';
import App from './components/App';
import HTTPError from './components/HTTPError';
......@@ -31,7 +45,7 @@ const history = createHistory();
// First render comes from the server, subsequent renders happen on client.
let render = function(element, container) {
ReactDOM.hydrate(element, container);
ReactDOM.hydrate(element, nullthrows(container));
render = ReactDOM.render;
};
......@@ -83,7 +97,7 @@ const api = {
const router = createRouter(history, api);
const root = document.getElementById('relay-root');
const root = nullthrows(document.getElementById('relay-root'));
const scrollStorage = {};
......
.metadata {
color: #bbb;
font-style: italic;
margin-bottom: 1rem;
}
.metadata > *:after {
content: '\00b7'; /* middot */
margin: 0 1rem 0 1rem;
margin: 0 .5rem;
}
.metadata:last-child:after {
.metadata > *:last-child:after {
content: none;
}
.metadata .separator {
margin: 0 .75rem;
}
.when {
color: #bbb;
display: inline-block;
font-style: italic;
margin-bottom: 1rem;
}
/* Hack. Margin is usually what we want, but looks terrible in a table cell. */
td .when {
margin: 0;
}
.when:before {
background-image: url(../../../vendor/icons/calendar.svg);
background-size: cover;
......
......@@ -11,9 +11,8 @@ type History = {
replace: (target: string) => void,
};
export type MasochistRouter = {
export type MasochistRouter = Router & {
history: History,
api: mixed,
};
export default function createRouter(
......
......@@ -2,17 +2,11 @@
* @flow strict
*/
import nullthrows from './nullthrows';
import stableStringify from './stableStringify';
const functions = new Map();
function nullthrows(object) {
if (object == null) {
throw new Error('Unexpected null-ish object');
}
return object;
}
export default function memoize<TArgs: Iterable<mixed>, TReturn>(
fn: (...TArgs) => TReturn,
): (...TArgs) => TReturn {
......
/**
* @flow strict
*/
export default function nullthrows<T: mixed>(object: T): $NonMaybeType<T> {
if (object == null) {
throw new Error('Unexpected null-ish object');
}
return object;
}
......@@ -15,10 +15,7 @@ export class RunError extends Error {
}
}
function getError(invocations: Array<Invocation>, code: number): RunError {
const pipeline = invocations
.map(({command, args}) => `${command} ${args.join(' ')}`)
.join(' | ');
function getError(pipeline: string, code: number): RunError {
return new RunError(`${pipeline}: exit ${code}`, code);
}
......@@ -35,6 +32,9 @@ function getError(invocations: Array<Invocation>, code: number): RunError {
export default function pipe(
...invocations: Array<Invocation>
): Promise<string> {
const pipeline = invocations
.map(({command, args}) => `${command} ${args.join(' ')}`)
.join(' | ');
let isPending = true;
return new Promise((resolve, reject) => {
let invocation = invocations.pop();
......@@ -49,7 +49,7 @@ export default function pipe(
if (isPending) {
isPending = false;
if (code) {
reject(getError(invocations, code));
reject(getError(pipeline, code));
} else {
resolve(stdout);
}
......@@ -68,7 +68,7 @@ export default function pipe(
});
child.on('close', code => {
if (isPending && code) {
reject(getError(invocations, code));
reject(getError(pipeline, code));
}
next.stdin.end();
});
......
......@@ -5,7 +5,6 @@ var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'@babel/polyfill',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3001/',
path.resolve(__dirname, 'src', 'client', 'app.js'),
......@@ -24,8 +23,8 @@ module.exports = {
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
targets: 'defaults',
targets: '> 0.5%, last 2 versions, Firefox ESR, not dead',
useBuiltIns: 'entry',
},
],
'@babel/preset-react',
......
......@@ -9,7 +9,6 @@ const webpack = require('webpack');
module.exports = {
entry: [
'@babel/polyfill',
path.resolve(__dirname, 'src', 'client', 'app.js'),
],
devtool: 'source-map',
......@@ -81,8 +80,9 @@ module.exports = {
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
targets: 'defaults',
debug: false,
targets: '> 0.5%, last 2 versions, Firefox ESR, not dead',
useBuiltIns: 'entry',
},
],
'@babel/preset-react',
......