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

package/dist/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createError = exports.NOOP_IMPORT = void 0;
+const PLUGIN = '[@web/rollup-plugin-html]';
+exports.NOOP_IMPORT = { importPath: '@web/rollup-plugin-html-noop' };
+function createError(msg) {
+    return new Error(`${PLUGIN} ${msg}`);
+}
+exports.createError = createError;
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAEA,MAAM,MAAM,GAAG,2BAA2B,CAAC;AAE9B,QAAA,WAAW,GAAoB,EAAE,UAAU,EAAE,8BAA8B,EAAE,CAAC;AAE3F,SAAgB,WAAW,CAAC,GAAW;IACrC,OAAO,IAAI,KAAK,CAAC,GAAG,MAAM,IAAI,GAAG,EAAE,CAAC,CAAC;AACvC,CAAC;AAFD,kCAEC"}

package/index.mjs

@@ -0,0 +1,6 @@
+// this file is autogenerated with the generate-mjs-dts-entrypoints script
+import cjsEntrypoint from './dist/index.js';
+
+const { rollupPluginHTML } = cjsEntrypoint;
+
+export { rollupPluginHTML };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@web/rollup-plugin-html",
+  "version": "0.0.0-canary-20230316175616",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Rollup plugin for bundling HTML files",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modernweb-dev/web.git",
+    "directory": "packages/rollup-plugin-html"
+  },
+  "author": "modern-web",
+  "homepage": "https://github.com/modernweb-dev/web/tree/master/packages/rollup-plugin-html",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "scripts": {
+    "demo:mpa": "rm -rf demo/dist && rollup -c demo/mpa/rollup.config.js --watch & yarn serve-demo",
+    "demo:spa": "rm -rf demo/dist && rollup -c demo/spa/rollup.config.js --watch & yarn serve-demo",
+    "serve-demo": "node ../dev-server/dist/bin.js --watch --root-dir demo/dist --app-index index.html --compatibility none --open",
+    "test": "mocha test/**/*.test.ts --require ts-node/register",
+    "test:watch": "mocha test/**/*.test.ts --require ts-node/register --watch --watch-files src,test"
+  },
+  "files": [
+    "*.js",
+    "*.mjs",
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "rollup",
+    "plugin",
+    "rollup-plugin",
+    "html"
+  ],
+  "dependencies": {
+    "@web/parse5-utils": "^1.3.0",
+    "glob": "^7.1.6",
+    "html-minifier-terser": "^6.0.0",
+    "parse5": "^6.0.1"
+  },
+  "devDependencies": {
+    "@types/html-minifier-terser": "^6.0.0",
+    "rollup": "^3.15.0"
+  }
+}

package/src/RollupPluginHTMLOptions.ts

@@ -0,0 +1,92 @@
+import { OutputChunk, OutputOptions, OutputBundle } from 'rollup';
+import { Attribute } from 'parse5';
+
+export interface InputHTMLOptions {
+  /** The html source code. If set, overwrites path. */
+  html?: string;
+  /** Name of the HTML files when using the html option. */
+  name?: string;
+  /** Path to the HTML file, or glob to multiple HTML files. */
+  path?: string;
+}
+
+export interface RollupPluginHTMLOptions {
+  /** HTML file(s) to use as input. If not set, uses rollup input option. */
+  input?: string | InputHTMLOptions | (string | InputHTMLOptions)[];
+  /** HTML file glob pattern or patterns to ignore */
+  exclude?: string | string[];
+  /** Whether to minify the output HTML. */
+  minify?: boolean;
+  /** Whether to preserve or flatten the directory structure of the HTML file. */
+  flattenOutput?: boolean;
+  /** Directory to resolve absolute paths relative to, and to use as base for non-flatted filename output. */
+  rootDir?: string;
+  /** Path to load modules and assets from at runtime. */
+  publicPath?: string;
+  /** Transform asset source before output. */
+  transformAsset?: TransformAssetFunction | TransformAssetFunction[];
+  /** Transform HTML file before output. */
+  transformHtml?: TransformHtmlFunction | TransformHtmlFunction[];
+  /** Whether to extract and bundle assets referenced in HTML. Defaults to true. */
+  extractAssets?: boolean;
+  /** Define a full absolute url to your site (e.g. https://domain.com) */
+  absoluteBaseUrl?: string;
+  /** Whether to set full absolute urls for ['meta[property=og:image]', 'link[rel=canonical]', 'meta[property=og:url]'] or not. Requires a absoluteBaseUrl to be set. Default to true. */
+  absoluteSocialMediaUrls?: boolean;
+  /** Should a service worker registration script be injected. Defaults to false. */
+  injectServiceWorker?: boolean;
+  /** File system path to the generated service worker file */
+  serviceWorkerPath?: string;
+  /** Prefix to strip from absolute paths when resolving assets and scripts, for example when using a base path that does not exist on disk. */
+  absolutePathPrefix?: string;
+  /** When set to true, will insert meta tags for CSP and add script-src values for inline scripts by sha256-hashing the contents */
+  strictCSPInlineScripts?: boolean;
+}
+
+export interface GeneratedBundle {
+  name: string;
+  options: OutputOptions;
+  bundle: OutputBundle;
+}
+
+export interface ScriptModuleTag {
+  importPath: string;
+  attributes?: Attribute[];
+  code?: string;
+}
+
+export interface EntrypointBundle extends GeneratedBundle {
+  entrypoints: {
+    // path to import the entrypoint, can be used in an import statement
+    // or script tag directly
+    importPath: string;
+    // associated rollup chunk, useful if you need to get more information
+    // about the chunk. See the rollup docs for type definitions
+    chunk: OutputChunk;
+    attributes?: Attribute[];
+  }[];
+}
+
+export interface TransformHtmlArgs {
+  // the rollup bundle to be injected on the page. if there are multiple
+  // rollup output options, this will reference the first bundle
+  //
+  // if one of the input options was set, only the bundled module script contained
+  // in the HTML input are available to be injected in both the bundle and bundles
+  // options
+  bundle: EntrypointBundle;
+  // the rollup bundles to be injected on the page. if there is only one
+  // build output options, this will be an array with one option
+  bundles: Record<string, EntrypointBundle>;
+  htmlFileName: string;
+}
+
+export type TransformHtmlFunction = (
+  html: string,
+  args: TransformHtmlArgs,
+) => string | Promise<string>;
+
+export type TransformAssetFunction = (
+  content: Buffer,
+  filePath: string,
+) => string | Buffer | Promise<string | Buffer>;

package/src/assets/utils.ts

@@ -0,0 +1,145 @@
+import { Document, Element } from 'parse5';
+import path from 'path';
+import { findElements, getTagName, getAttribute } from '@web/parse5-utils';
+import { createError } from '../utils';
+import { serialize } from 'v8';
+
+const hashedLinkRels = ['stylesheet'];
+const linkRels = [...hashedLinkRels, 'icon', 'manifest', 'apple-touch-icon', 'mask-icon'];
+
+function getSrcSetUrls(srcset: string) {
+  if (!srcset) {
+    return [];
+  }
+  const srcsetParts = srcset.includes(',') ? srcset.split(',') : [srcset];
+  const urls = srcsetParts
+    .map(url => url.trim())
+    .map(url => (url.includes(' ') ? url.split(' ')[0] : url));
+  return urls;
+}
+
+function extractFirstUrlOfSrcSet(node: Element) {
+  const srcset = getAttribute(node, 'srcset');
+  if (!srcset) {
+    return '';
+  }
+  const urls = getSrcSetUrls(srcset);
+  return urls[0];
+}
+
+function isAsset(node: Element) {
+  let path = '';
+  switch (getTagName(node)) {
+    case 'img':
+      path = getAttribute(node, 'src') ?? '';
+      break;
+    case 'source':
+      if (getAttribute(node, 'src')) {
+        path = getAttribute(node, 'src') ?? '';
+      } else {
+        path = extractFirstUrlOfSrcSet(node) ?? '';
+      }
+      break;
+    case 'link':
+      if (linkRels.includes(getAttribute(node, 'rel') ?? '')) {
+        path = getAttribute(node, 'href') ?? '';
+      }
+      break;
+    case 'meta':
+      if (getAttribute(node, 'property') === 'og:image' && getAttribute(node, 'content')) {
+        path = getAttribute(node, 'content') ?? '';
+      }
+      break;
+    case 'script':
+      if (getAttribute(node, 'type') !== 'module' && getAttribute(node, 'src')) {
+        path = getAttribute(node, 'src') ?? '';
+      }
+      break;
+    default:
+      return false;
+  }
+  if (!path) {
+    return false;
+  }
+  try {
+    new URL(path);
+    return false;
+  } catch (e) {
+    return true;
+  }
+}
+
+export function isHashedAsset(node: Element) {
+  switch (getTagName(node)) {
+    case 'img':
+      return true;
+    case 'source':
+      return true;
+    case 'script':
+      return true;
+    case 'link':
+      return hashedLinkRels.includes(getAttribute(node, 'rel')!);
+    case 'meta':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function resolveAssetFilePath(
+  browserPath: string,
+  htmlDir: string,
+  projectRootDir: string,
+  absolutePathPrefix?: string,
+) {
+  const _browserPath =
+    absolutePathPrefix && browserPath[0] === '/'
+      ? '/' + path.posix.relative(absolutePathPrefix, browserPath)
+      : browserPath;
+  return path.join(
+    _browserPath.startsWith('/') ? projectRootDir : htmlDir,
+    _browserPath.split('/').join(path.sep),
+  );
+}
+
+export function getSourceAttribute(node: Element) {
+  switch (getTagName(node)) {
+    case 'img': {
+      return 'src';
+    }
+    case 'source': {
+      return getAttribute(node, 'src') ? 'src' : 'srcset';
+    }
+    case 'link': {
+      return 'href';
+    }
+    case 'script': {
+      return 'src';
+    }
+    case 'meta': {
+      return 'content';
+    }
+    default:
+      throw new Error(`Unknown node with tagname ${getTagName(node)}`);
+  }
+}
+
+export function getSourcePaths(node: Element) {
+  const key = getSourceAttribute(node);
+
+  const src = getAttribute(node, key);
+  if (typeof key !== 'string' || src === '') {
+    throw createError(`Missing attribute ${key} in element ${serialize(node)}`);
+  }
+
+  let paths: string[] = [];
+  if (src) {
+    paths = key !== 'srcset' ? [src] : getSrcSetUrls(src);
+  }
+
+  return paths;
+}
+
+export function findAssets(document: Document) {
+  return findElements(document, isAsset);
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+import { rollupPluginHTML, RollupPluginHtml } from './rollupPluginHTML';
+
+export {
+  InputHTMLOptions,
+  RollupPluginHTMLOptions,
+  GeneratedBundle,
+  EntrypointBundle,
+  TransformHtmlArgs,
+  TransformHtmlFunction,
+  TransformAssetFunction,
+} from './RollupPluginHTMLOptions';
+
+export { rollupPluginHTML, RollupPluginHtml };
+export default rollupPluginHTML;

package/src/input/InputData.ts

@@ -0,0 +1,16 @@
+import { ScriptModuleTag } from '../RollupPluginHTMLOptions';
+
+export interface InputAsset {
+  filePath: string;
+  hashed: boolean;
+  content: Buffer;
+}
+
+export interface InputData {
+  html: string;
+  name: string;
+  moduleImports: ScriptModuleTag[];
+  inlineModules: ScriptModuleTag[];
+  assets: InputAsset[];
+  filePath?: string;
+}

package/src/input/addRollupInput.ts

@@ -0,0 +1,55 @@
+import { InputOptions } from 'rollup';
+import { ScriptModuleTag } from '../RollupPluginHTMLOptions';
+import { createError } from '../utils';
+
+function fromEntries<V>(entries: [string, V][]) {
+  const obj: Record<string, V> = {};
+  for (const [k, v] of entries) {
+    obj[k] = v;
+  }
+  return obj;
+}
+
+export function addRollupInput(
+  inputOptions: InputOptions,
+  inputModuleIds: ScriptModuleTag[],
+): InputOptions {
+  // Add input module ids to existing input option, whether it's a string, array or object
+  // this way you can use multiple html plugins all adding their own inputs
+  if (!inputOptions.input) {
+    return { ...inputOptions, input: inputModuleIds.map(mod => mod.importPath) };
+  }
+
+  if (typeof inputOptions.input === 'string') {
+    return {
+      ...inputOptions,
+      input: [
+        ...(inputOptions?.input?.endsWith('.html') ? [] : [inputOptions.input]),
+        ...inputModuleIds.map(mod => mod.importPath),
+      ],
+    };
+  }
+
+  if (Array.isArray(inputOptions.input)) {
+    return {
+      ...inputOptions,
+      input: [...inputOptions.input, ...inputModuleIds.map(mod => mod.importPath)],
+    };
+  }
+
+  if (typeof inputOptions.input === 'object') {
+    return {
+      ...inputOptions,
+      input: {
+        ...inputOptions.input,
+        ...fromEntries(
+          inputModuleIds
+            .map(mod => mod.importPath)
+            .map(i => [i.split('/').slice(-1)[0].split('.')[0], i]),
+        ),
+      },
+    };
+  }
+
+  throw createError(`Unknown rollup input type. Supported inputs are string, array and object.`);
+}

package/src/input/extract/extractAssets.ts

@@ -0,0 +1,53 @@
+import { Document, serialize } from 'parse5';
+import fs from 'fs';
+import path from 'path';
+import { InputAsset } from '../InputData';
+import {
+  findAssets,
+  getSourcePaths,
+  isHashedAsset,
+  resolveAssetFilePath,
+} from '../../assets/utils';
+
+export interface ExtractAssetsParams {
+  document: Document;
+  htmlFilePath: string;
+  htmlDir: string;
+  rootDir: string;
+  absolutePathPrefix?: string;
+}
+
+export function extractAssets(params: ExtractAssetsParams): InputAsset[] {
+  const assetNodes = findAssets(params.document);
+  const allAssets: InputAsset[] = [];
+
+  for (const node of assetNodes) {
+    const sourcePaths = getSourcePaths(node);
+    for (const sourcePath of sourcePaths) {
+      const filePath = resolveAssetFilePath(
+        sourcePath,
+        params.htmlDir,
+        params.rootDir,
+        params.absolutePathPrefix,
+      );
+      const hashed = isHashedAsset(node);
+      const alreadyHandled = allAssets.find(a => a.filePath === filePath && a.hashed === hashed);
+      if (!alreadyHandled) {
+        try {
+          fs.accessSync(filePath);
+        } catch (error) {
+          const elStr = serialize(node);
+          const htmlPath = path.relative(process.cwd(), params.htmlFilePath);
+          throw new Error(
+            `Could not find ${filePath} referenced from HTML file ${htmlPath} from element ${elStr}.`,
+          );
+        }
+
+        const content = fs.readFileSync(filePath);
+        allAssets.push({ filePath, hashed, content });
+      }
+    }
+  }
+
+  return allAssets;
+}

package/src/input/extract/extractModules.ts

@@ -0,0 +1,78 @@
+import { findElements, getAttribute, getTagName, getTextContent, remove } from '@web/parse5-utils';
+import { Document, Attribute } from 'parse5';
+import path from 'path';
+import crypto from 'crypto';
+import { resolveAssetFilePath } from '../../assets/utils';
+import { getAttributes } from '@web/parse5-utils';
+import { ScriptModuleTag } from '../../RollupPluginHTMLOptions';
+
+export interface ExtractModulesParams {
+  document: Document;
+  htmlDir: string;
+  rootDir: string;
+  absolutePathPrefix?: string;
+}
+
+function createContentHash(content: string) {
+  return crypto.createHash('md5').update(content).digest('hex');
+}
+
+function isAbsolute(src: string) {
+  try {
+    new URL(src);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function extractModules(params: ExtractModulesParams) {
+  const { document, htmlDir, rootDir, absolutePathPrefix } = params;
+  const scriptNodes = findElements(
+    document,
+    e => getTagName(e) === 'script' && getAttribute(e, 'type') === 'module',
+  );
+
+  const moduleImports: ScriptModuleTag[] = [];
+  const inlineModules: ScriptModuleTag[] = [];
+
+  for (const scriptNode of scriptNodes) {
+    const src = getAttribute(scriptNode, 'src');
+
+    const allAttributes = getAttributes(scriptNode);
+    const attributes: Attribute[] = [];
+    for (const attributeName of Object.keys(allAttributes)) {
+      if (attributeName !== 'src' && attributeName !== 'type') {
+        attributes.push({ name: attributeName, value: allAttributes[attributeName] });
+      }
+    }
+
+    if (!src) {
+      // turn inline module (<script type="module"> ...code ... </script>)
+      const code = getTextContent(scriptNode);
+      // inline modules should be relative to the HTML file to resolve relative imports
+      // we make it unique with a content hash, so that duplicate modules are deduplicated
+      const importPath = path.posix.join(htmlDir, `/inline-module-${createContentHash(code)}.js`);
+      if (!inlineModules.find(tag => tag.importPath === importPath)) {
+        inlineModules.push({
+          importPath,
+          attributes,
+          code,
+        });
+      }
+      remove(scriptNode);
+    } else {
+      if (!isAbsolute(src)) {
+        // external script <script type="module" src="./foo.js"></script>
+        const importPath = resolveAssetFilePath(src, htmlDir, rootDir, absolutePathPrefix);
+        moduleImports.push({
+          importPath,
+          attributes,
+        });
+        remove(scriptNode);
+      }
+    }
+  }
+
+  return { moduleImports, inlineModules };
+}

package/src/input/extract/extractModulesAndAssets.ts

@@ -0,0 +1,34 @@
+import path from 'path';
+import { parse, serialize } from 'parse5';
+import { extractModules } from './extractModules';
+import { extractAssets } from './extractAssets';
+
+export interface ExtractParams {
+  html: string;
+  htmlFilePath: string;
+  rootDir: string;
+  extractAssets: boolean;
+  absolutePathPrefix?: string;
+}
+
+export function extractModulesAndAssets(params: ExtractParams) {
+  const { html, htmlFilePath, rootDir, absolutePathPrefix } = params;
+  const htmlDir = path.dirname(htmlFilePath);
+  const document = parse(html);
+
+  // extract functions mutate the AST
+  const { moduleImports, inlineModules } = extractModules({
+    document,
+    htmlDir,
+    rootDir,
+    absolutePathPrefix,
+  });
+  const assets = params.extractAssets
+    ? extractAssets({ document, htmlDir, htmlFilePath, rootDir, absolutePathPrefix })
+    : [];
+
+  // turn mutated AST back to a string
+  const updatedHtmlString = serialize(document);
+
+  return { moduleImports, inlineModules, assets, htmlWithoutModules: updatedHtmlString };
+}

package/src/input/getInputData.ts

@@ -0,0 +1,120 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'glob';
+
+import { createError } from '../utils';
+import { RollupPluginHTMLOptions } from '../RollupPluginHTMLOptions';
+import { InputData } from './InputData';
+import { normalizeInputOptions } from './normalizeInputOptions';
+import { extractModulesAndAssets } from './extract/extractModulesAndAssets';
+import { InputOption } from 'rollup';
+
+function resolveGlob(fromGlob: string, opts: glob.IOptions) {
+  const files = glob.sync(fromGlob, { ...opts, absolute: true });
+  return (
+    files
+      // filter out directories
+      .filter(filePath => !fs.lstatSync(filePath).isDirectory())
+  );
+}
+
+function getName(filePath: string, rootDir: string, flattenOutput = true) {
+  if (flattenOutput) {
+    return path.basename(filePath);
+  }
+  return path.relative(rootDir, filePath);
+}
+
+export interface CreateInputDataParams {
+  name: string;
+  html: string;
+  rootDir: string;
+  filePath?: string;
+  extractAssets: boolean;
+  absolutePathPrefix?: string;
+}
+
+function createInputData(params: CreateInputDataParams): InputData {
+  const { name, html, rootDir, filePath, extractAssets, absolutePathPrefix } = params;
+  const htmlFilePath = filePath ? filePath : path.resolve(rootDir, name);
+  const result = extractModulesAndAssets({
+    html,
+    htmlFilePath,
+    rootDir,
+    extractAssets,
+    absolutePathPrefix,
+  });
+
+  return {
+    html: result.htmlWithoutModules,
+    name,
+    inlineModules: result.inlineModules,
+    moduleImports: [...result.moduleImports, ...result.inlineModules],
+    assets: result.assets,
+    filePath,
+  };
+}
+
+export function getInputData(
+  pluginOptions: RollupPluginHTMLOptions,
+  rollupInput?: InputOption,
+): InputData[] {
+  const {
+    rootDir = process.cwd(),
+    flattenOutput,
+    extractAssets = true,
+    absolutePathPrefix,
+    exclude: ignore,
+  } = pluginOptions;
+  const allInputs = normalizeInputOptions(pluginOptions, rollupInput);
+
+  const result: InputData[] = [];
+  for (const input of allInputs) {
+    if (typeof input.html === 'string') {
+      const name = input.name ?? 'index.html';
+      const data = createInputData({
+        name,
+        html: input.html,
+        rootDir,
+        extractAssets,
+        absolutePathPrefix,
+      });
+      result.push(data);
+    } else if (typeof input.path === 'string') {
+      const filePaths = resolveGlob(input.path, { cwd: rootDir, ignore });
+      if (filePaths.length === 0) {
+        throw new Error(
+          `Could not find any HTML files for pattern: ${input.path}, resolved relative to ${rootDir}`,
+        );
+      }
+
+      for (const filePath of filePaths) {
+        const name = input.name ?? getName(filePath, rootDir, flattenOutput);
+        const html = fs.readFileSync(filePath, 'utf-8');
+        const data = createInputData({
+          name,
+          html,
+          rootDir,
+          filePath,
+          extractAssets,
+          absolutePathPrefix,
+        });
+        result.push(data);
+      }
+    } else {
+      throw createError('An input must specify either a path or html.');
+    }
+  }
+
+  for (const input of result) {
+    if (result.filter(r => r.name === input.name).length !== 1) {
+      throw createError(
+        `Found multiple HTML inputs configured with the same name, ` +
+          'or with no name which defaults to index.html. Set a unique name on the' +
+          'input option.',
+      );
+    }
+  }
+
+  return result;
+}