Ember-auto-import v2 chunk insertion enhancements (ember in-repo addon)

index.js

'use strict';

/*
 * Ember-auto-import v2 chunk insertion enhancements.
 *
 * This addon gives you more control over ember-auto-import v2 chunk insertion:
 *   - custom html files to process;
 *   - custom `<script>` transforms when using `insertScriptsAt` slots;
 *
 * HACK: Please note, this addon monkey patches some private ember-auto-import APIs.
 * Tested on the following versions of ember-auto-import: "2.2.4".
 *
 * Inspired by
 * https://github.com/peopledoc/ember-auto-import-chunks-json-generator/blob/7402c7a0331e5f031b25860741dec096027a3c87/index.js
 * https://gist.github.com/lifeart/f493b48f227cf9566b1f41221296f1bb
 */

// Custom html files to process.
// It can't be configured in ember-auto-import out of the box.
// Default value: `[this.outputPaths.app.html, 'tests/index.html']`.
const CUSTOM_HTML_ENTRYPOINTS = defaultEntrypoints => [
  ...defaultEntrypoints,
  'custom-index.djhtml', 
  'custom-index.html',
];

// Additional `<script>` transforms when using `insertScriptsAt` slots.
const CUSTOM_CHUNK_TRANSFORMS = [
  (element, chunk, tag) => {
    // -->   <auto-import-script entrypoint="app" custom-transform></auto-import-script>
    // <--   <script src="{% cdn_static "chunk.app.6456fa87aff1bb53ca43.js" %}"></script>
    //
    // Skip 'fastboot-script' tag.
    const attr = (tag === 'script') && element.attrs.find(x => x.name === 'custom-transform');
    if (attr) {
      chunk = chunk.replace(/^assets\/([\w\-.]+)/, '{% cdn_static "$1" %}');
      element = { ...element, attrs: element.attrs.filter(x => x !== attr) };
    }

    return [element, chunk];
  }
];

module.exports = {
  name: require('./package').name,

  isDevelopingAddon() {
    return true;
  },

  postprocessTree(type, tree) {
    if (type !== 'all') {
      return tree;
    }

    if (!tree.inputNodes) {
      throw new Error(
        'Unknown build tree configuration, this addon should follow exactly after ember-auto-import'
      );
    }

    const inserter = tree.inputNodes.find((node) => node._name === 'Inserter');
    if (!inserter) {
      throw new Error('Inserter not found');
    }

    const inserterOrigRefs = {
      htmlEntrypoints: inserter.config.htmlEntrypoints,
      scriptFromCustomElement: inserter.scriptFromCustomElement,
    };

    inserter.config.htmlEntrypoints = function() {
      const defaultEntrypoints = inserterOrigRefs.htmlEntrypoints.apply(this, arguments);
      return CUSTOM_HTML_ENTRYPOINTS(defaultEntrypoints);
    };

    inserter.scriptFromCustomElement = function(element, chunk, tag = 'script') {
      CUSTOM_CHUNK_TRANSFORMS.forEach(fn => [element, chunk] = fn(element, chunk, tag));
      return inserterOrigRefs.scriptFromCustomElement.call(this, element, chunk, tag);
    };

    return tree;
  },
};

package.json

{
  "name": "ember-auto-import-chunk-insertion-enhancements",
  "keywords": [
    "ember-addon"
  ],
  "ember-addon": {
    "after": "ember-auto-import",
    "before": [
      "broccoli-asset-rev",
      "ember-cli-autoprefixer",
      "ember-cli-terser"
    ]
  }
}