[rollup-plugin-html] extractAssets from custom tagName

[gdbaldw]

Currently, extractAssets = boolean. But, sometimes we'd like to extract more assets, as has been identified at modernweb-dev/rocket#162 and at #1008

So, I wrote a pull request #1541 such that extractAssets = boolean | tagAndAttribute[]

Example Usage

const html = require('../../dist/index').default;

module.exports = {
  input: 'demo/spa/index.html',
  output: {
    dir: './demo/dist',
  },
  plugins: [html({
    absoluteBaseUrl: 'http://localhost:8000',
    extractAssets: [
      {tagName: 'my-first-el', attribute: 'my-src'},
      {tagName: 'my-second-el', attribute: 'my-src'},
    ]
  })],
};

[bennypowers]

adjacent: prefetching assets for non-standard script types, and finding assets in the fragment of <template> tags

[gdbaldw]

adjacent: prefetching assets for non-standard script types, and finding assets in the fragment of <template> tags

What would extractAssets interface look like? Add to the current pull request? (it's already kind of bloated, no?) I would appreciate guidance in moving this forward.

[bennypowers]

I don't think you have to change much here. If you really want, add a test case for assets in template fragments

it('extracts assets in template fragments', function() {
  const fixture = `
    <img src="a.png">
    <template>
      <img src="b.png">
      <template>
        <img src="c.png">
      </template>
    </template>
  `;
  // ...
  expect(assets.length).to.equal(3);
}); 

[gdbaldw]

I don't think you have to change much here. If you really want, add a test case for assets in template fragments

Correct! Template fragments are now included, with one recursive function, see ea62b50.

function findAllElements(
  nodes: Node | Node[],
  test: (node: Node) => boolean,
  elements: DefaultTreeElement[] = [],
): DefaultTreeElement[] {
  elements.push(...findElements(nodes, test));
  const templates = findNodes(
    nodes,
    (node: DefaultTreeNode) => node.nodeName === 'template',
  ) as Element[];
  for (const template of templates) {
    elements.push(...findAllElements(getChildNodes(getTemplateContent(template)), test));
  }
  return elements;
}

export function findAssets(document: Document, extractAssets?: boolean | TagAndAttribute[]) {
  function isAssetInjected(node: Node) {
    return isAsset(node, extractAssets);
  }
  return findAllElements(document, isAssetInjected);

Ready for code review?