@rollup-extras/plugin-html 1.4.4 → 2.0.0

package/README.md

@@ -4,8 +4,8 @@ Rollup plugin to inject assets names into html template.
 
 Points:
 
-- Inject file names with hashes
-- Watch on a template file and trigger rebuild if it is changed
+- Injects file names with hashes
+- Watches the template file and triggers a rebuild if it changes
 - Provides a minimalistic template by default, so you are ready to start without configuration
 - Supports multiple rollup configs (will trigger only when last output generated)
 - Extensible through API so you can plug in something for HTML processing or generate new types of HTML elements

package/{dist/asset-factories.mjs → asset-factories.js}

@@ -1,33 +1,39 @@
-import { createLogger } from '@niceties/logger';
-import { a as getNonModuleScriptElement, b as getModuleScriptElement, t as toAssetPredicate } from './shared.mjs';
+import { createLogger, LogLevel } from '@niceties/logger';
+
+import { getModuleScriptElement, getNonModuleScriptElement, toAssetPredicate } from './shared.js';
 
 const noopPredicate = () => false;
+
 let logger;
-function simpleES5Script(predicateSource) {
+
+export function simpleES5Script(predicateSource) {
     const predicate = getPredicate(predicateSource);
-    return (fileName) => {
+    return fileName => {
         if (predicate(fileName)) {
             return getNonModuleScriptElement(fileName, false);
         }
     };
 }
-function simpleES5FallbackScript(predicateSource) {
+
+export function simpleES5FallbackScript(predicateSource) {
     const predicate = getPredicate(predicateSource);
-    return (fileName) => {
+    return fileName => {
         if (predicate(fileName)) {
             return getNonModuleScriptElement(fileName, true);
         }
     };
 }
-function simpleModuleScript(predicateSource) {
+
+export function simpleModuleScript(predicateSource) {
     const predicate = getPredicate(predicateSource);
-    return (fileName) => {
+    return fileName => {
         if (predicate(fileName)) {
             return getModuleScriptElement(fileName);
         }
     };
 }
-function combineAssetFactories(...factories) {
+
+export function combineAssetFactories(...factories) {
     return (fileName, content, type) => {
         for (const factory of factories) {
             const result = factory(fileName, content, type);
@@ -37,20 +43,20 @@ function combineAssetFactories(...factories) {
         }
     };
 }
+
 function getPredicate(predicateSource) {
     let predicate = toAssetPredicate(predicateSource);
     if (!predicate) {
         const logger = getLogger();
-        logger(`${predicateSource} is not valid, using noopPredicate`, 2 /* LogLevel.warn */);
+        logger(`${predicateSource} is not valid, using noopPredicate`, LogLevel.warn);
         predicate = noopPredicate;
     }
     return predicate;
 }
+
 function getLogger() {
     if (!logger) {
         logger = createLogger('@rollup-extras/plugin-html/asset-factories');
     }
     return logger;
 }
-
-export { combineAssetFactories, simpleES5FallbackScript, simpleES5Script, simpleModuleScript };

package/index.d.ts

@@ -0,0 +1,67 @@
+declare module '@rollup-extras/plugin-html' {
+	import type { Plugin, InternalModuleFormat } from 'rollup';
+	import type { createLogger } from '@niceties/logger';
+	export default function _default(options?: HtmlPluginOptions): Plugin & {
+		api: {
+			addInstance(): Plugin;
+		};
+	};
+	export type PredicateSource = boolean | AssetPredicate | RegExp | string;
+	export type AssetType = "asset" | InternalModuleFormat;
+	export type Assets = { [key in AssetType]?: AssetDescriptor[]; };
+	export type AssetPredicate = (fileName: string) => boolean;
+	export type AssetDescriptor = {
+		html: string | ((assets: Assets, context?: unknown) => string | unknown);
+		head: boolean;
+		type: "asset" | InternalModuleFormat;
+	};
+	export type SimpleAssetDescriptor = {
+		html: string;
+		head: boolean;
+		type: "asset" | InternalModuleFormat;
+	};
+	export type AssetFactory = (fileName: string, content: string | Uint8Array, type: "asset" | InternalModuleFormat) => AssetDescriptor | string | undefined | Promise<AssetDescriptor | string | undefined>;
+	export type DefaultTemplateFactory = (initialTemplate: string, assets: Assets) => string;
+	export type TemplateFactory = (initialTemplate: string, assets: Assets, defaultTemplateFactory: DefaultTemplateFactory) => string | Uint8Array | Promise<string | Uint8Array>;
+	export type HtmlPluginOptions = {
+		pluginName?: string;
+		outputFile?: string;
+		template?: string;
+		watch?: boolean;
+		emitFile?: boolean | "auto";
+		verbose?: boolean;
+		useWriteBundle?: boolean;
+		useEmittedTemplate?: boolean;
+		conditionalLoading?: boolean;
+		injectIntoHead?: PredicateSource;
+		ignore?: PredicateSource;
+		assetsFactory?: AssetFactory;
+		templateFactory?: TemplateFactory;
+	};
+	export type Logger = ReturnType<typeof createLogger>;
+
+	export {};
+}
+
+declare module '@rollup-extras/plugin-html/asset-factories' {
+	import type { InternalModuleFormat } from 'rollup';
+	export function simpleES5Script(predicateSource: PredicateSource): AssetFactory;
+
+	export function simpleES5FallbackScript(predicateSource: PredicateSource): AssetFactory;
+
+	export function simpleModuleScript(predicateSource: PredicateSource): AssetFactory;
+
+	export function combineAssetFactories(...factories: AssetFactory[]): AssetFactory;
+	export type PredicateSource = boolean | AssetPredicate | RegExp | string;
+	export type AssetPredicate = (fileName: string) => boolean;
+	export type AssetDescriptor = {
+		html: string | ((assets: any, context?: unknown) => string | unknown);
+		head: boolean;
+		type: "asset" | InternalModuleFormat;
+	};
+	export type AssetFactory = (fileName: string, content: string | Uint8Array, type: "asset" | InternalModuleFormat) => AssetDescriptor | string | undefined | Promise<AssetDescriptor | string | undefined>;
+
+	export {};
+}
+
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1,31 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"PredicateSource",
+		"AssetType",
+		"Assets",
+		"AssetPredicate",
+		"AssetDescriptor",
+		"SimpleAssetDescriptor",
+		"AssetFactory",
+		"DefaultTemplateFactory",
+		"TemplateFactory",
+		"HtmlPluginOptions",
+		"Logger",
+		"simpleES5Script",
+		"simpleES5FallbackScript",
+		"simpleModuleScript",
+		"combineAssetFactories"
+	],
+	"sources": [
+		"index.js",
+		"asset-factories.js"
+	],
+	"sourcesContent": [
+		null,
+		null
+	],
+	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCQgBW,eAAeA;;iBASfC,uBAAuBA;;iBASvBC,kBAAkBA;;iBASlBC,qBAAqBA;;;;;;;;",
+	"ignoreList": []
+}

package/index.js

@@ -0,0 +1,346 @@
+import { readFileSync } from 'node:fs';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, join, relative } from 'node:path';
+
+import { createLogger, LogLevel } from '@niceties/logger';
+import logger from '@rollup-extras/utils/logger';
+import { multiConfigPluginBase } from '@rollup-extras/utils/multi-config-plugin-base';
+import { getOptionsObject } from '@rollup-extras/utils/options';
+
+import { getLinkElement, getModuleScriptElement, getNonModuleScriptElement, toAssetPredicate } from './shared.js';
+
+const defaultTemplate = '<!DOCTYPE html><html><head></head><body></body></html>';
+const headClosingElement = '</head>';
+const bodyClosingElement = '</body>';
+const cssExtention = '.css';
+
+const defaults = {
+    pluginName: '@rollup-extras/plugin-html',
+    outputFile: 'index.html',
+    watch: true,
+    useWriteBundle: false,
+    emitFile: 'auto',
+    injectIntoHead:  (( fileName) => fileName.endsWith(cssExtention)),
+    ignore:  (toAssetPredicate(false)),
+    templateFactory:  (
+        ( template,  assets,  defaultTemplateFactory) =>
+            defaultTemplateFactory(template, assets)
+    ),
+};
+
+const factories = {
+    logger,
+    injectIntoHead:  (predicateFactory),
+    ignore:  (predicateFactory),
+};
+
+export default function (options = {}) {
+    const {
+            pluginName,
+            outputFile,
+            template,
+            watch,
+            emitFile,
+            conditionalLoading,
+            logger,
+            useWriteBundle,
+            logLevel,
+            useEmittedTemplate,
+            injectIntoHead,
+            ignore,
+            assetsFactory,
+            templateFactory,
+        } = getOptionsObject(
+            options,
+            {
+                ...defaults,
+                useEmittedTemplate: !('template' in options),
+                logLevel: options.verbose ? LogLevel.info : LogLevel.verbose,
+            },
+            factories
+        ),
+        hasCustomTemplateFactory = 'templateFactory' in options;
+
+    let templateString = defaultTemplate;
+    let hasTemplateFile = false;
+
+    if (template) {
+        if (isUsableByDefaultTemplateFactory(template)) {
+            templateString = template;
+        } else {
+            if (watch) {
+                try {
+
+                    useNewTemplate(readFileSync(template, { encoding: 'utf8' }));
+                    hasTemplateFile = true;
+                } catch (e) {
+                    handleTemplateReadError(e);
+                }
+            } else {
+                templateString = new Promise(resolve => {
+                    readFile(template, { encoding: 'utf8' })
+                        .then(newTemplateString => {
+                            if (!isUsableByDefaultTemplateFactory(newTemplateString) && !hasCustomTemplateFactory) {
+                                warnAboutUsingDefaultTemplate();
+                                resolve(defaultTemplate);
+                            } else {
+                                resolve(newTemplateString);
+                            }
+                        })
+                        .catch(handleTemplateReadError);
+                });
+            }
+        }
+    }
+
+    let initialDir = '',
+         fileNameInInitialDir,
+         assets = freshAssets();
+
+    const processedFiles = new Set();
+
+    const instance = multiConfigPluginBase(useWriteBundle, pluginName, generateBundle, updateAssets);
+
+    const baseRenderStart =  (instance).renderStart;
+    const baseAddInstance =  (instance.api.addInstance);
+
+    instance.renderStart = function (
+         outputOptions,
+         inputOptions
+    ) {
+        logger('started collecting information', LogLevel.verbose);
+        initialDir = outputOptions.dir ?? '';
+        fileNameInInitialDir = join(initialDir, outputFile);
+        return  (
+            baseRenderStart
+        ).call(this, outputOptions, inputOptions);
+    };
+
+    instance.api.addInstance = () => {
+        const instance = baseAddInstance();
+
+        if (hasTemplateFile && watch) {
+             ( (instance)).buildStart = buildStart;
+        }
+
+        return instance;
+    };
+
+    if (hasTemplateFile && watch) {
+
+        instance.buildStart = async function () {
+            try {
+                useNewTemplate(await readFile( (template), { encoding: 'utf8' }));
+            } catch (e) {
+                handleTemplateReadError(e);
+            }
+            await buildStart.apply(this);
+        };
+    }
+
+    return instance;
+
+    async function updateAssets(
+         options,
+         bundle,
+         remainingConfigsCount,
+         remainingOutputsCount
+    ) {
+        await getAssets(options, bundle);
+        const statistics = Object.keys(assets)
+            .map(key => ({ key, count:  (assets[ (key)]).length }))
+            .filter(item => item.count)
+            .map(({ key, count }) => `${key}: ${count}`)
+            .join(', ');
+        logger(
+            `assets collected: [${statistics}], remaining: ${remainingOutputsCount} outputs, ${remainingConfigsCount} configs`,
+            LogLevel.verbose
+        );
+        const dir = options.dir ?? '',
+            fileName = relative(dir, fileNameInInitialDir);
+        if (fileName in bundle) {
+            if (useEmittedTemplate) {
+                logger(`using existing emitted ${fileName} as an input for our templateFactory`, LogLevel.verbose);
+                const source =
+                     (bundle[fileName]).type === 'asset'
+                        ?  (bundle[fileName]).source.toString()
+                        :  (bundle[fileName]).code;
+                useNewTemplate(source);
+            } else {
+                logger(`removing existing emitted ${fileName}`, LogLevel.verbose);
+            }
+            if (remainingConfigsCount === 0 && emitFile && !useWriteBundle) {
+                delete bundle[fileName];
+            }
+        }
+    }
+
+    function freshAssets() {
+        return {
+            asset: [],
+            es: [],
+            iife: [],
+            umd: [],
+        };
+    }
+
+    function useNewTemplate(newTemplateString) {
+        if (!isUsableByDefaultTemplateFactory(newTemplateString) && !hasCustomTemplateFactory) {
+            warnAboutUsingDefaultTemplate();
+        } else {
+            templateString = newTemplateString;
+        }
+    }
+
+    function handleTemplateReadError(e) {
+        if ( (e)?.code === 'ENOENT') {
+            logger('template is neither a file nor a string', LogLevel.warn, e);
+        } else {
+            logger('error reading template', LogLevel.warn, e);
+        }
+    }
+
+    function warnAboutUsingDefaultTemplate() {
+        logger('template is unusable by default template factory, using default one', LogLevel.warn);
+    }
+
+    async function buildStart() {
+        this.addWatchFile( (template));
+    }
+
+    async function generateBundle( options) {
+        logger.start('generating html', logLevel);
+        try {
+            const dir = options.dir ?? '',
+                fileName = relative(dir, fileNameInInitialDir);
+            const depromisifiedTemplateString = await templateString,
+                source = await templateFactory(depromisifiedTemplateString, assets, defaultTemplateFactory);
+
+            if (!emitFile || fileName.startsWith('..') || useWriteBundle) {
+                if (emitFile && emitFile !== 'auto') {
+                    logger('cannot emitFile because it is outside of current output.dir, using writeFile instead', LogLevel.verbose);
+                }
+                await mkdir(dirname(fileNameInInitialDir), { recursive: true });
+                await writeFile(fileNameInInitialDir, source);
+            } else {
+                this.emitFile({
+                    type: 'asset',
+                    fileName,
+                    source,
+                });
+            }
+
+            assets = freshAssets();
+            processedFiles.clear();
+            logger.finish('html file generated');
+        } catch (e) {
+            logger.finish('html generation failed', LogLevel.error, e);
+        }
+    }
+
+    async function getAssets(options, bundle) {
+        const dir = options.dir ?? '';
+        for (const fileName of Object.keys(bundle)) {
+            const relativeToRootAssetPath = join(dir, fileName);
+            const assetPath = relative(initialDir, relativeToRootAssetPath);
+            if (ignore(relativeToRootAssetPath) || processedFiles.has(relativeToRootAssetPath)) {
+                continue;
+            }
+            processedFiles.add(relativeToRootAssetPath);
+            if ( (bundle[fileName]).type === 'asset') {
+                if (
+                    await useAssetFactory(assetPath, relativeToRootAssetPath,  (bundle[fileName]).source, 'asset')
+                ) {
+                    continue;
+                }
+                if (fileName.endsWith(cssExtention)) {
+                     (assets.asset).push({
+                        html: getLinkElement(assetPath),
+                        head: injectIntoHead(relativeToRootAssetPath),
+                        type: 'asset',
+                    });
+                }
+            } else if ( (bundle[fileName]).type === 'chunk') {
+                const chunk =  (bundle[fileName]);
+                if (chunk.isEntry) {
+                    if (await useAssetFactory(assetPath, relativeToRootAssetPath, chunk.code, options.format)) {
+                        continue;
+                    }
+                    if (options.format === 'es' || options.format === 'iife' || options.format === 'umd') {
+                         (assets[options.format]).push({
+                            html: ( assets) => {
+                                let useConditionalLoading = conditionalLoading;
+                                useConditionalLoading ??= !!((assets.iife?.length || assets.umd?.length) && assets.es?.length);
+                                return options.format === 'iife' || options.format === 'umd'
+                                    ? getNonModuleScriptElement(assetPath, !!useConditionalLoading)
+                                    : getModuleScriptElement(assetPath);
+                            },
+                            head: injectIntoHead(relativeToRootAssetPath),
+                            type: 'asset',
+                        });
+                    }
+                }
+            }
+        }
+    }
+
+    async function useAssetFactory(fileName, relativeToRootAssetPath, source, format) {
+        if (assetsFactory) {
+            try {
+                let asset = await assetsFactory(fileName, source, format);
+                if (asset) {
+                    if (typeof asset === 'string') {
+                        asset = {
+                            html: asset,
+                            head: injectIntoHead(relativeToRootAssetPath),
+                            type: format,
+                        };
+                    }
+                    if (!assets[asset.type]) {
+                        assets[asset.type] = [];
+                    }
+                     (assets[asset.type]).push(asset);
+                    return true;
+                }
+            } catch (e) {
+                logger('exception in assetFactory', LogLevel.warn, e);
+            }
+        }
+        return false;
+    }
+}
+
+function isUsableByDefaultTemplateFactory(template) {
+    return template.indexOf(headClosingElement) >= 0 && template.indexOf(bodyClosingElement) >= 0;
+}
+
+function predicateFactory(options, field) {
+    if (options[field] != null) {
+        const predicate = toAssetPredicate( (options[field]));
+        if (predicate) {
+            return predicate;
+        } else {
+            options.logger?.(`${field} option ignored because it is not a function, RegExp, string or boolean`, LogLevel.warn);
+        }
+    }
+    return defaults[field];
+}
+
+function defaultTemplateFactory(template, assets) {
+
+    const assetsAsArray =  (assets.asset)
+        .concat( ( (assets.iife).length ? assets.iife : assets.umd))
+        .concat( (assets.es))
+        .map(( asset) => {
+            if (typeof asset.html === 'function') {
+                asset.html =  (asset.html(assets));
+            }
+            return  (asset);
+        });
+    const headElements = assetsAsArray.filter(asset => asset.head).map(asset => asset.html);
+    const bodyElements = assetsAsArray.filter(asset => !asset.head).map(asset => asset.html);
+    const headIndex = template.toLowerCase().indexOf(headClosingElement);
+    template = `${template.substring(0, headIndex)}${headElements.join('')}${template.substring(headIndex)}`;
+    const bodyIndex = template.toLowerCase().indexOf(bodyClosingElement);
+    return `${template.substring(0, bodyIndex)}${bodyElements.join('')}${template.substring(bodyIndex)}`;
+}

package/package.json

@@ -1,28 +1,23 @@
 {
-  "type": "module",
-  "version": "1.4.4",
-  "name": "@rollup-extras/plugin-html",
-  "description": "Rollup plugin to inject assets names into html template.",
+  "version": "2.0.0",
   "license": "MIT",
+  "name": "@rollup-extras/plugin-html",
   "author": "Konstantin Shutkin",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.mjs"
+      "types": "./index.d.ts",
+      "default": "./index.js"
     },
     "./asset-factories": {
-      "require": "./dist/asset-factories.cjs",
-      "default": "./dist/asset-factories.mjs"
+      "types": "./index.d.ts",
+      "default": "./asset-factories.js"
     },
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "LICENSE",
-    "asset-factories"
-  ],
+  "main": "./index.js",
+  "module": "./index.js",
   "engines": {
     "node": ">=15"
   },
@@ -34,27 +29,22 @@
   "bugs": "https://github.com/kshutkin/rollup-extras/issues",
   "homepage": "https://github.com/kshutkin/rollup-extras/blob/main/plugin-html/README.md",
   "readme": "README.md",
+  "description": "Rollup plugin to inject assets names into html template.",
   "keywords": [
     "rollup-plugin",
     "html",
     "bundle"
   ],
   "dependencies": {
-    "@niceties/logger": "^1.1.4",
-    "@rollup-extras/utils": "^1.4.4"
+    "@niceties/logger": "^2.1.0",
+    "@rollup-extras/utils": "^2.0.0"
   },
   "peerDependencies": {
-    "rollup": "^2.60.1 || ^3.0.0 || ^4.0.0"
+    "rollup": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "rollup": {
       "optional": true
     }
-  },
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "pkgbld-internal",
-    "test": "jest --collectCoverage",
-    "lint": "eslint ./src"
   }
 }

package/shared.js

@@ -0,0 +1,24 @@
+export function getLinkElement(fileName) {
+    return `<link rel="stylesheet" href="${fileName}" type="text/css">`;
+}
+
+export function getNonModuleScriptElement(fileName, conditionalLoading) {
+    return `<script src="${fileName}" type="text/javascript"${conditionalLoading ? ' nomodule' : ''}></script>`;
+}
+
+export function getModuleScriptElement(fileName) {
+    return `<script src="${fileName}" type="module"></script>`;
+}
+
+export function toAssetPredicate(sourceOption) {
+    if (typeof sourceOption === 'boolean') {
+        return () => sourceOption;
+    } else if (typeof sourceOption === 'function') {
+        return sourceOption;
+    } else if (sourceOption instanceof RegExp) {
+        return ( fileName) => sourceOption.test(fileName);
+    } else if (typeof sourceOption === 'string') {
+        return ( fileName) => fileName.endsWith(sourceOption);
+    }
+    return undefined;
+}

package/asset-factories/package.json

@@ -1,5 +0,0 @@
-{
-  "type": "module",
-  "types": "../dist/asset-factories.d.ts",
-  "main": "../dist/asset-factories.mjs"
-}