@web/rollup-plugin-html 0.0.0-canary-20230316175616

package/src/input/normalizeInputOptions.ts

@@ -0,0 +1,47 @@
+import { InputOption } from 'rollup';
+import { InputHTMLOptions, RollupPluginHTMLOptions } from '../RollupPluginHTMLOptions';
+import { createError } from '../utils';
+
+export function normalizeInputOptions(
+  pluginOptions: RollupPluginHTMLOptions,
+  rollupInput?: InputOption,
+): InputHTMLOptions[] {
+  if (pluginOptions.input == null) {
+    if (rollupInput == null) {
+      throw createError('Missing input option in rollup or in HTML plugin options.');
+    }
+
+    if (typeof rollupInput === 'string') {
+      return [{ path: rollupInput }];
+    }
+
+    if (Array.isArray(rollupInput)) {
+      return rollupInput.map(path => ({ path }));
+    }
+
+    if (typeof rollupInput === 'object') {
+      return Object.entries(rollupInput).map(([name, path]) => ({ name, path }));
+    }
+
+    throw createError('Unable to parse rollup input option');
+  }
+
+  if (Array.isArray(pluginOptions.input)) {
+    return pluginOptions.input.map(input => {
+      if (typeof input === 'string') {
+        return { path: input };
+      }
+      return input;
+    });
+  }
+
+  if (typeof pluginOptions.input === 'object') {
+    return [pluginOptions.input];
+  }
+
+  if (typeof pluginOptions.input === 'string') {
+    return [{ path: pluginOptions.input }];
+  }
+
+  throw createError('Unable to parse html plugin input option');
+}

package/src/output/createHTMLOutput.ts

@@ -0,0 +1,87 @@
+import { getEntrypointBundles } from './getEntrypointBundles';
+import { getOutputHTML } from './getOutputHTML';
+import { createError } from '../utils';
+import {
+  GeneratedBundle,
+  RollupPluginHTMLOptions,
+  TransformHtmlFunction,
+} from '../RollupPluginHTMLOptions';
+import { EmittedFile } from 'rollup';
+import { InputData } from '../input/InputData';
+import { EmittedAssets } from './emitAssets';
+
+export interface CreateHTMLAssetParams {
+  outputDir: string;
+  input: InputData;
+  emittedAssets: EmittedAssets;
+  generatedBundles: GeneratedBundle[];
+  externalTransformHtmlFns: TransformHtmlFunction[];
+  pluginOptions: RollupPluginHTMLOptions;
+  defaultInjectDisabled: boolean;
+  serviceWorkerPath: string;
+  injectServiceWorker: boolean;
+  absolutePathPrefix?: string;
+  strictCSPInlineScripts: boolean;
+}
+
+export async function createHTMLAsset(params: CreateHTMLAssetParams): Promise<EmittedFile> {
+  const {
+    outputDir,
+    input,
+    emittedAssets,
+    generatedBundles,
+    externalTransformHtmlFns,
+    pluginOptions,
+    defaultInjectDisabled,
+    serviceWorkerPath,
+    injectServiceWorker,
+    absolutePathPrefix,
+    strictCSPInlineScripts,
+  } = params;
+
+  if (generatedBundles.length === 0) {
+    throw createError('Cannot output HTML when no bundles have been generated');
+  }
+
+  const entrypointBundles = getEntrypointBundles({
+    pluginOptions,
+    generatedBundles,
+    inputModuleIds: input.moduleImports,
+    outputDir,
+    htmlFileName: input.name,
+  });
+
+  const outputHtml = await getOutputHTML({
+    pluginOptions,
+    entrypointBundles,
+    input,
+    outputDir,
+    emittedAssets,
+    externalTransformHtmlFns,
+    defaultInjectDisabled,
+    serviceWorkerPath,
+    injectServiceWorker,
+    absolutePathPrefix,
+    strictCSPInlineScripts,
+  });
+
+  return { fileName: input.name, name: input.name, source: outputHtml, type: 'asset' };
+}
+
+export interface CreateHTMLAssetsParams {
+  outputDir: string;
+  inputs: InputData[];
+  emittedAssets: EmittedAssets;
+  generatedBundles: GeneratedBundle[];
+  externalTransformHtmlFns: TransformHtmlFunction[];
+  pluginOptions: RollupPluginHTMLOptions;
+  defaultInjectDisabled: boolean;
+  serviceWorkerPath: string;
+  injectServiceWorker: boolean;
+  absolutePathPrefix?: string;
+  strictCSPInlineScripts: boolean;
+}
+
+export async function createHTMLOutput(params: CreateHTMLAssetsParams): Promise<EmittedFile[]> {
+  return Promise.all(params.inputs.map(input => createHTMLAsset({ ...params, input })));
+}

package/src/output/emitAssets.ts

@@ -0,0 +1,80 @@
+import { PluginContext } from 'rollup';
+import path from 'path';
+
+import { InputAsset, InputData } from '../input/InputData';
+import { RollupPluginHTMLOptions, TransformAssetFunction } from '../RollupPluginHTMLOptions';
+
+export interface EmittedAssets {
+  static: Map<string, string>;
+  hashed: Map<string, string>;
+}
+
+export async function emitAssets(
+  this: PluginContext,
+  inputs: InputData[],
+  options: RollupPluginHTMLOptions,
+) {
+  const emittedStaticAssets = new Map<string, string>();
+  const emittedHashedAssets = new Map<string, string>();
+  const emittedStaticAssetNames = new Set();
+
+  const transforms: TransformAssetFunction[] = [];
+  if (options.transformAsset) {
+    if (Array.isArray(options.transformAsset)) {
+      transforms.push(...options.transformAsset);
+    } else {
+      transforms.push(options.transformAsset);
+    }
+  }
+  const staticAssets: InputAsset[] = [];
+  const hashedAssets: InputAsset[] = [];
+
+  for (const input of inputs) {
+    for (const asset of input.assets) {
+      if (asset.hashed) {
+        hashedAssets.push(asset);
+      } else {
+        staticAssets.push(asset);
+      }
+    }
+  }
+
+  // ensure static assets are last because of https://github.com/rollup/rollup/issues/3853
+  const allAssets = [...hashedAssets, ...staticAssets];
+
+  for (const asset of allAssets) {
+    const map = asset.hashed ? emittedHashedAssets : emittedStaticAssets;
+    if (!map.has(asset.filePath)) {
+      let source: Buffer = asset.content;
+
+      // run user's transform functions
+      for (const transform of transforms) {
+        const result = await transform(asset.content, asset.filePath);
+        if (result != null) {
+          source = typeof result === 'string' ? Buffer.from(result, 'utf-8') : result;
+        }
+      }
+
+      let ref: string;
+      let basename = path.basename(asset.filePath);
+      if (asset.hashed) {
+        ref = this.emitFile({ type: 'asset', name: basename, source });
+      } else {
+        // ensure the output filename is unique
+        let i = 1;
+        while (emittedStaticAssetNames.has(basename)) {
+          const ext = path.extname(basename);
+          basename = `${basename.replace(ext, '')}${i}${ext}`;
+          i += 1;
+        }
+        emittedStaticAssetNames.add(basename);
+        const fileName = `assets/${basename}`;
+        ref = this.emitFile({ type: 'asset', name: basename, fileName, source });
+      }
+
+      map.set(asset.filePath, this.getFileName(ref));
+    }
+  }
+
+  return { static: emittedStaticAssets, hashed: emittedHashedAssets };
+}

package/src/output/getEntrypointBundles.ts

@@ -0,0 +1,88 @@
+import { Attribute } from 'parse5';
+import path from 'path';
+import { OutputChunk } from 'rollup';
+
+import {
+  EntrypointBundle,
+  GeneratedBundle,
+  RollupPluginHTMLOptions,
+  ScriptModuleTag,
+} from '../RollupPluginHTMLOptions';
+import { createError, NOOP_IMPORT } from '../utils';
+import { toBrowserPath } from './utils';
+
+export interface CreateImportPathParams {
+  publicPath?: string;
+  outputDir: string;
+  fileOutputDir: string;
+  htmlFileName: string;
+  fileName: string;
+}
+
+export function createImportPath(params: CreateImportPathParams) {
+  const { publicPath, outputDir, fileOutputDir, htmlFileName, fileName } = params;
+  const pathFromMainToFileDir = path.relative(outputDir, fileOutputDir);
+  let importPath;
+  if (publicPath) {
+    importPath = toBrowserPath(path.join(publicPath, pathFromMainToFileDir, fileName));
+  } else {
+    const pathFromHtmlToOutputDir = path.relative(
+      path.dirname(htmlFileName),
+      pathFromMainToFileDir,
+    );
+    importPath = toBrowserPath(path.join(pathFromHtmlToOutputDir, fileName));
+  }
+
+  if (importPath.startsWith('http') || importPath.startsWith('/') || importPath.startsWith('.')) {
+    return importPath;
+  }
+  return `./${importPath}`;
+}
+
+export interface GetEntrypointBundlesParams {
+  pluginOptions: RollupPluginHTMLOptions;
+  generatedBundles: GeneratedBundle[];
+  outputDir: string;
+  inputModuleIds: ScriptModuleTag[];
+  htmlFileName: string;
+}
+
+interface Entrypoint {
+  importPath: string;
+  chunk: OutputChunk;
+  attributes?: Attribute[];
+}
+
+export function getEntrypointBundles(params: GetEntrypointBundlesParams) {
+  const { pluginOptions, generatedBundles, inputModuleIds, outputDir, htmlFileName } = params;
+  const entrypointBundles: Record<string, EntrypointBundle> = {};
+
+  for (const { name, options, bundle } of generatedBundles) {
+    if (!options.format) {
+      throw createError('Missing module format');
+    }
+
+    const entrypoints: Entrypoint[] = [];
+    for (const chunkOrAsset of Object.values(bundle)) {
+      if (chunkOrAsset.type === 'chunk') {
+        const chunk = chunkOrAsset;
+        if (chunk.isEntry && chunk.facadeModuleId !== NOOP_IMPORT.importPath) {
+          const found = inputModuleIds.find(mod => mod.importPath === chunk.facadeModuleId);
+          if (chunk.facadeModuleId && found) {
+            const importPath = createImportPath({
+              publicPath: pluginOptions.publicPath,
+              outputDir,
+              fileOutputDir: options.dir ?? '',
+              htmlFileName,
+              fileName: chunkOrAsset.fileName,
+            });
+            entrypoints.push({ importPath, chunk: chunkOrAsset, attributes: found.attributes });
+          }
+        }
+      }
+    }
+    entrypointBundles[name] = { name, options, bundle, entrypoints };
+  }
+
+  return entrypointBundles;
+}

package/src/output/getOutputHTML.ts

@@ -0,0 +1,115 @@
+import { injectBundles } from './injectBundles';
+import { InputData } from '../input/InputData';
+import {
+  EntrypointBundle,
+  RollupPluginHTMLOptions,
+  TransformHtmlFunction,
+} from '../RollupPluginHTMLOptions';
+import { parse, serialize } from 'parse5';
+import { minify as minifyHTMLFunc } from 'html-minifier-terser';
+import { injectedUpdatedAssetPaths } from './injectedUpdatedAssetPaths';
+import { EmittedAssets } from './emitAssets';
+import { injectAbsoluteBaseUrl } from './injectAbsoluteBaseUrl';
+import { hashInlineScripts } from './hashInlineScripts';
+import { injectServiceWorkerRegistration } from './injectServiceWorkerRegistration';
+
+export interface GetOutputHTMLParams {
+  input: InputData;
+  outputDir: string;
+  emittedAssets: EmittedAssets;
+  pluginOptions: RollupPluginHTMLOptions;
+  entrypointBundles: Record<string, EntrypointBundle>;
+  externalTransformHtmlFns?: TransformHtmlFunction[];
+  defaultInjectDisabled: boolean;
+  serviceWorkerPath: string;
+  injectServiceWorker: boolean;
+  absolutePathPrefix?: string;
+  strictCSPInlineScripts: boolean;
+}
+
+export async function getOutputHTML(params: GetOutputHTMLParams) {
+  const {
+    pluginOptions,
+    entrypointBundles,
+    externalTransformHtmlFns,
+    input,
+    outputDir,
+    emittedAssets,
+    defaultInjectDisabled,
+    serviceWorkerPath,
+    injectServiceWorker,
+    absolutePathPrefix,
+    strictCSPInlineScripts,
+  } = params;
+  const { default: defaultBundle, ...multiBundles } = entrypointBundles;
+  const { absoluteSocialMediaUrls = true, rootDir = process.cwd() } = pluginOptions;
+
+  // inject rollup output into HTML
+  let document = parse(input.html);
+  if (pluginOptions.extractAssets !== false) {
+    injectedUpdatedAssetPaths({
+      document,
+      input,
+      outputDir,
+      rootDir,
+      emittedAssets,
+      absolutePathPrefix,
+      publicPath: pluginOptions.publicPath,
+    });
+  }
+  if (!defaultInjectDisabled) {
+    injectBundles(document, entrypointBundles);
+  }
+  if (absoluteSocialMediaUrls && pluginOptions.absoluteBaseUrl) {
+    injectAbsoluteBaseUrl(document, pluginOptions.absoluteBaseUrl);
+  }
+  if (injectServiceWorker && serviceWorkerPath) {
+    injectServiceWorkerRegistration({
+      document,
+      outputDir,
+      serviceWorkerPath,
+      htmlFileName: input.name,
+    });
+  }
+
+  let outputHtml = serialize(document);
+
+  const transforms = [...(externalTransformHtmlFns ?? [])];
+  if (pluginOptions.transformHtml) {
+    if (Array.isArray(pluginOptions.transformHtml)) {
+      transforms.push(...pluginOptions.transformHtml);
+    } else {
+      transforms.push(pluginOptions.transformHtml);
+    }
+  }
+
+  // run transform functions on output HTML
+  for (const transform of transforms) {
+    outputHtml = await transform(outputHtml, {
+      bundle: defaultBundle,
+      bundles: multiBundles,
+      htmlFileName: input.name,
+    });
+  }
+
+  if (pluginOptions.minify) {
+    outputHtml = await minifyHTMLFunc(outputHtml, {
+      collapseWhitespace: true,
+      removeComments: true,
+      removeRedundantAttributes: true,
+      removeScriptTypeAttributes: true,
+      removeStyleLinkTypeAttributes: true,
+      useShortDoctype: true,
+      minifyCSS: true,
+      minifyJS: true,
+    });
+  }
+
+  if (strictCSPInlineScripts) {
+    document = parse(outputHtml);
+    hashInlineScripts(document);
+    outputHtml = serialize(document);
+  }
+
+  return outputHtml;
+}

package/src/output/hashInlineScripts.ts

@@ -0,0 +1,153 @@
+import { Document, Element, ParentNode } from 'parse5';
+import {
+  findElement,
+  findElements,
+  getTagName,
+  hasAttribute,
+  getAttribute,
+  getTextContent,
+  createElement,
+  findNode,
+  prepend,
+  setAttribute,
+} from '@web/parse5-utils';
+import crypto from 'crypto';
+
+function isMetaCSPTag(node: Element) {
+  if (
+    getTagName(node) === 'meta' &&
+    getAttribute(node, 'http-equiv') === 'Content-Security-Policy'
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function isInlineScript(node: Element) {
+  if (getTagName(node) === 'script' && !hasAttribute(node, 'src')) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Parses Meta CSP Content string as an object so we can easily mutate it in JS
+ * E.g.:
+ *
+ * "default-src 'self'; prefetch-src 'self'; upgrade-insecure-requests; style-src 'self' 'unsafe-inline';"
+ *
+ * becomes
+ *
+ * {
+ *   'default-src': ["'self'"],
+ *   'prefetch-src': ["'self'"],
+ *   'upgrade-insecure-requests': [],
+ *   'style-src': ["'self'", "'unsafe-inline'"]
+ * }
+ *
+ */
+function parseMetaCSPContent(content: string): { [key: string]: string[] } {
+  return content.split(';').reduce((acc, curr) => {
+    const trimmed = curr.trim();
+    if (!trimmed) {
+      return acc;
+    }
+    const splitItem = trimmed.split(' ');
+    const [, ...values] = splitItem;
+    return {
+      ...acc,
+      [splitItem[0]]: values,
+    };
+  }, {});
+}
+
+/**
+ * Serializes
+ *
+ * {
+ *   'default-src': ["'self'"],
+ *   'prefetch-src': ["'self'"],
+ *   'upgrade-insecure-requests': [],
+ *   'style-src': ["'self'", "'unsafe-inline'"]
+ * }
+ *
+ * back to
+ *
+ * "default-src 'self'; prefetch-src 'self'; upgrade-insecure-requests; style-src 'self' 'unsafe-inline';"
+ */
+function serializeMetaCSPContent(data: { [key: string]: string[] }): string {
+  const dataEntries = Object.entries(data);
+  return dataEntries.reduce((accOuter, currOuter, indexOuter) => {
+    let suffixOuter = ' ';
+    let sep = ' ';
+
+    // If there are no items for this key
+    if (currOuter[1].length === 0) {
+      suffixOuter = '; ';
+      sep = '';
+    }
+
+    // Don't insert space suffix when it is the last item
+    if (indexOuter === dataEntries.length - 1) {
+      suffixOuter = '';
+    }
+
+    return `${accOuter}${currOuter[0]}${sep}${currOuter[1].reduce(
+      (accInner, currInner, indexInner) => {
+        let suffixInner = ' ';
+        if (indexInner === currOuter[1].length - 1) {
+          suffixInner = ';';
+        }
+        return `${accInner}${currInner}${suffixInner}`;
+      },
+      '',
+    )}${suffixOuter}`;
+  }, '');
+}
+
+function injectCSPScriptRules(metaCSPEl: Element, hashes: string[]) {
+  const content = getAttribute(metaCSPEl, 'content');
+  if (content) {
+    const data = parseMetaCSPContent(content);
+
+    if (Array.isArray(data['script-src'])) {
+      data['script-src'].push(...hashes);
+    } else {
+      data['script-src'] = ["'self'", ...hashes];
+    }
+
+    const newContent = serializeMetaCSPContent(data);
+    setAttribute(metaCSPEl, 'content', newContent);
+  }
+}
+
+function injectCSPMetaTag(document: Document, hashes: string[]) {
+  const metaTag = createElement('meta', {
+    'http-equiv': 'Content-Security-Policy',
+    content: `script-src 'self' ${hashes.join(' ')};`,
+  });
+  const head = findNode(document, node => node.nodeName === 'head');
+  if (head) {
+    prepend(head as ParentNode, metaTag);
+  }
+}
+
+export function hashInlineScripts(document: Document) {
+  const metaCSPEl = findElement(document, isMetaCSPTag);
+  const inlineScripts = findElements(document, isInlineScript);
+  const hashes: string[] = [];
+  inlineScripts.forEach(node => {
+    if (node.childNodes[0]) {
+      const scriptContent = getTextContent(node.childNodes[0]);
+      const hash = crypto.createHash('sha256').update(scriptContent).digest('base64');
+      hashes.push(`'sha256-${hash}'`);
+    }
+  });
+  if (hashes.length > 0) {
+    if (metaCSPEl) {
+      injectCSPScriptRules(metaCSPEl, hashes);
+    } else {
+      injectCSPMetaTag(document, hashes);
+    }
+  }
+}

package/src/output/injectAbsoluteBaseUrl.ts

@@ -0,0 +1,41 @@
+import { Document, Element } from 'parse5';
+import { findElements, getTagName, getAttribute, setAttribute } from '@web/parse5-utils';
+
+function isAbsoluteableNode(node: Element) {
+  const metaAttributes = ['og:url', 'og:image'];
+  switch (getTagName(node)) {
+    case 'link':
+      if (getAttribute(node, 'rel') === 'canonical' && getAttribute(node, 'href')) {
+        return true;
+      }
+      return false;
+    case 'meta':
+      if (
+        metaAttributes.includes(getAttribute(node, 'property')!) &&
+        getAttribute(node, 'content')
+      ) {
+        return true;
+      }
+      return false;
+    default:
+      return false;
+  }
+}
+
+export function injectAbsoluteBaseUrl(document: Document, absoluteBaseUrl: string) {
+  const nodes = findElements(document, isAbsoluteableNode);
+  for (const node of nodes) {
+    switch (getTagName(node)) {
+      case 'link':
+        setAttribute(node, 'href', new URL(getAttribute(node, 'href')!, absoluteBaseUrl).href);
+        break;
+      case 'meta':
+        setAttribute(
+          node,
+          'content',
+          new URL(getAttribute(node, 'content')!, absoluteBaseUrl).href,
+        );
+        break;
+    }
+  }
+}

package/src/output/injectBundles.ts

@@ -0,0 +1,44 @@
+import { Document, Attribute } from 'parse5';
+import { createScript, findElement, getTagName, appendChild } from '@web/parse5-utils';
+
+import { EntrypointBundle } from '../RollupPluginHTMLOptions';
+import { createError } from '../utils';
+
+export function createLoadScript(src: string, format: string, attributes?: Attribute[]) {
+  const attributesObject: Record<string, string> = {};
+  if (attributes) {
+    for (const attribute of attributes) {
+      attributesObject[attribute.name] = attribute.value;
+    }
+  }
+  if (['es', 'esm', 'module'].includes(format)) {
+    return createScript({ type: 'module', src, ...attributesObject });
+  }
+
+  if (['system', 'systemjs'].includes(format)) {
+    return createScript({}, `System.import(${JSON.stringify(src)});`);
+  }
+
+  return createScript({ src, defer: '' });
+}
+
+export function injectBundles(
+  document: Document,
+  entrypointBundles: Record<string, EntrypointBundle>,
+) {
+  const body = findElement(document, e => getTagName(e) === 'body');
+  if (!body) {
+    throw new Error('Missing body in HTML document.');
+  }
+
+  for (const { options, entrypoints } of Object.values(entrypointBundles)) {
+    if (!options.format) throw createError('Missing output format.');
+
+    for (const entrypoint of entrypoints) {
+      appendChild(
+        body,
+        createLoadScript(entrypoint.importPath, options.format, entrypoint.attributes),
+      );
+    }
+  }
+}