JSON stringify - transformation tip

JSON stringify

Well known JavaScript method for transforming objects or values into string. However, there is an optional second parameter to the call - a replacer. Once provided, alters the stringification process.

Method

If a method is provided, will be applied to each property of an object. Very handy tool if serialised form has to have for example different values. For example:

let data = {'one' : 1, 'two' : 'a string'};
JSON.stringify(data, (key, value) => key === 'one' ? 2 : value)
// "{"one":2,"two":"a string"}"

As the object being serialized is also available (as this reference), we may perform a wider range of transformations, for example:

data = {x : 1, y : 2, multiplier : 10};
function replacer(key, value) {return typeof value === 'number' ? value * this.multiplier : value}
JSON.stringify(data, replacer);
// "{"x":10,"y":20,"multiplier":100}"

Array

Simply put - a whitelist. Only selected properties will appear in the serialised form. For example:

let data = {'one' : 1, 'two' : 'a string', 'garbage' : 'some'};
JSON.stringify(data, ['one' ,'two']);
// "{"one":1,"two":"a string"}"

To sum up - a very handy tool for quick-and-dirty processing of a bare JSON / JS objects.

Full reference here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

How to fix: Webpack file-loader corrupting fonts

The problem

Recently I've been forking on a fairly simple React / Webpack application, built with newest CRA (https://facebook.github.io/create-react-app/).
Everything was fine in the development but when I built a production package, I started noticing strange warnings in dev tools console. All of them concerned fonts loading, for example:

Failed to decode downloaded font

OTS parsing error: incorrect entrySelector for table directory

OTS parsing error: incorrect file size in WOFF header

After short investigation it became apparent that file-loader is not able to handle WOFF or TTF fonts correctly, returning empty content.

The solution

Webpack allows for configuration of loaders per file name pattern. Therefore it's fairly easy to switch fonts loading to use URL loader instead of file loader. Just add following right before generic file loader kicks in (typically - last entry  in module/rules/oneOf):

{
 test: [/\.woff$/,/\.ttf$/],

  loader: require.resolve('url-loader'),
  options: {
    limit: 150000,
    mimetype : 'application/font-woff',
    name: 'file?name=static/media/[name].[hash:8].[ext]',
  },

},

Now all of your fonts will be served as embedded data URLs. This obviously will make resulting package bigger and will prevent separate caching of fonts - it's a tradeof. Also please make sure you set appropriate limit so that all "offending" fonts are captured!