Static polyfill generator

README.md

Static polyfill generator

index.pug

doctype html
html
  head
    //- Modernizr
    script(src='javascripts/modernizr.js')
    
    //- Inject javascript
    - const files = polyfills.reduce((files, test) => `${files}\t'${test.name}': ${test.check},\n`, '');
    - const filesString = `{\n${files}}`;
    script.
      var tests = !{filesString};

      (function(d, f, s) {
        f = Object.keys(tests)
          .sort(function(a, b) { return a > b ? 1 : -1; })
          .filter(function(t) { return !tests[t]; });

        s = d.createElement('script');
        s.type = 'text/javascript';
        s.src = 'javascripts/app' + ( f.length > 0 ? '-' + f.join('-') : '' ) + '.js';

        d.getElementsByTagName('head')[0].appendChild(s);
      }(document));
      
  body
    h1 Hello World.

pollfills.js

import { src, dest } from 'gulp';
import combinatorics from 'js-combinatorics';
import concat from 'gulp-concat';
import es from 'event-stream';
import fs from 'fs';
import path from 'path';
import uglify from 'gulp-uglify';

export default function polyfills(done) {
  // Get all tests
  const tests = JSON.parse(
    fs.readFileSync('./polyfills.json')
  ).sort((testA, testB) => (testA.name > testB.name ? 1 : -1));

  // Get all combinations
  const combinations = combinatorics
    .power(tests.map(test => test.name))
    .toArray()
    .slice(1)
    .map((combination) => ({
      filename: combination.join('-'),
      files: tests
        .filter(test => combination.includes(test.name))
        .map(test => test.polyfills)
        .reduce((polyfillsA, polyfillaB) => polyfillsA.concat(polyfillaB), []),
    }));

  // Generate all files
  es.merge(combinations.map(combination =>
    src(combination.files.concat(['dest/javascripts/app.js']))
    .pipe(concat(`app-${combination.filename}.js`))
    .pipe(uglify())
    .pipe(dest('dest/javascripts'))
  )).on('end', done);
}

export function polyfillsMiddleware(req, res, next) {
  const matches = req.url.match(/^\/javascripts\/app-(.*).js$/);

  if (matches) {
    // 1. Get all tests
    // 2. Filter tests by requested tests
    // 3. Return only the test polyfills files
    // 4. Get File object
    // 5. Add dest/javascripts/app.js
    // 6. Combine all tests and app.js into one string
    const combinedFile = JSON.parse(fs.readFileSync('./polyfills.json'))
      .filter(test => matches[1].split('-').includes(test.name))
      .map(test => test.polyfills)
      .reduce((polyfillsA, polyfillaB) => polyfillsA.concat(polyfillaB), [])
      .map(file => fs.readFileSync(path.resolve(file)))
      .concat([fs.readFileSync(path.resolve('dest/javascripts/app.js'))])
      .reduce((string, file) => `${string}\n${file.toString()}`, '');

    res.setHeader('Content-Type', 'application/javascript');
    res.end(combinedFile);
  } else {
    next();
  }
}

polyfills.json

[
  {
    "name": "matchmedia",
    "check": "Modernizr.matchmedia",
    "polyfills": [
      "node_modules/matchmedia-polyfill/matchMedia.js",
      "node_modules/matchmedia-polyfill/matchMedia.addListener.js"
    ]
  },
  {
    "name": "placeholders",
    "check": "Modernizr.placeholder",
    "polyfills": [
      "node_modules/Placeholders.js/dist/placeholders.js"
    ]
  }
]