single-file-core 1.5.4 → 1.5.6

package/core/helper.js

@@ -195,7 +195,8 @@ function preProcessDoc(doc, win, options) {
 	}
 	return {
 		canvases: elementsInfo.canvases,
-		fonts: getFontsData(doc),
+		fonts: getFontsData(),
+		worklets: getWorkletsData(),
 		stylesheets: getStylesheetsData(doc),
 		images: elementsInfo.images,
 		posters: elementsInfo.posters,
@@ -577,6 +578,10 @@ function getFontsData() {
 	return hooksFrames.getFontsData();
 }
 
+function getWorkletsData() {
+	return hooksFrames.getWorkletsData();
+}
+
 function serialize(doc) {
 	const docType = doc.doctype;
 	let docTypeString = "";

package/core/index.js

@@ -141,7 +141,8 @@ const STAGES = [{
 		{ action: "processStylesheets" },
 		{ action: "processStyleAttributes" },
 		{ action: "processPageResources" },
-		{ action: "processScripts" }
+		{ action: "processScripts" },
+		{ action: "processWorklets" }
 	]
 }, {
 	sequential: [
@@ -188,6 +189,7 @@ class Runner {
 			const docData = util.preProcessDoc(this.options.doc, this.options.win, this.options);
 			this.options.canvases = docData.canvases;
 			this.options.fonts = docData.fonts;
+			this.options.worklets = docData.worklets;
 			this.options.stylesheets = docData.stylesheets;
 			this.options.images = docData.images;
 			this.options.posters = docData.posters;
@@ -428,6 +430,7 @@ class Processor {
 		this.resources = {
 			cssVariables: new Map(),
 			fonts: new Map(),
+			worklets: new Map(),
 			stylesheets: new Map(),
 			scripts: new Map(),
 			images: new Map(),
@@ -1239,6 +1242,7 @@ class Processor {
 				options.content = frameData.content;
 				options.canvases = frameData.canvases;
 				options.fonts = frameData.fonts;
+				options.worklets = frameData.worklets;
 				options.stylesheets = frameData.stylesheets;
 				options.images = frameData.images;
 				options.posters = frameData.posters;
@@ -1368,6 +1372,18 @@ class Processor {
 		}));
 	}
 
+	async processWorklets() {
+		if (this.options.worklets.length) {
+			const scriptElement = this.doc.createElement("script");
+			scriptElement.textContent = "if (CSS && CSS.paintWorklet && CSS.paintWorklet.addModule) {\n";
+			await Promise.all(this.options.worklets.map(async ({ moduleURL, options }) => {
+				await this.processorHelper.processWorklet(scriptElement, moduleURL, options, this.options, this.charset, this.batchRequest, this.resources);
+			}));
+			scriptElement.textContent += "}";
+			this.doc.head.appendChild(scriptElement);
+		}
+	}
+
 	removeAlternativeImages() {
 		util.removeAlternativeImages(this.doc);
 	}

package/core/lib/processor-helper-inline.js

@@ -475,6 +475,23 @@ function getProcessorHelperClass(utilInstance) {
 			element.setAttribute("src", content);
 		}
 
+		async processWorklet(scriptElement, resourceURL, workletOptions, options, charset, batchRequest) {
+			let { content } = await batchRequest.addURL(resourceURL, {
+				asBinary: true,
+				charset: charset != UTF8_CHARSET && charset,
+				maxResourceSize: options.maxResourceSize,
+				maxResourceSizeEnabled: options.maxResourceSizeEnabled,
+				frameId: options.windowId,
+				resourceReferrer: options.resourceReferrer,
+				baseURI: options.baseURI,
+				blockMixedContent: options.blockMixedContent,
+				expectedType: "script",
+				acceptHeaders: options.acceptHeaders,
+				networkTimeout: options.networkTimeout
+			});
+			scriptElement.textContent += `CSS.paintWorklet.addModule("${content}", ${JSON.stringify(workletOptions)});\n`;
+		}
+
 		setMetaCSP(metaElement) {
 			metaElement.content = "default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:; object-src 'self' data:; frame-src 'self' data:;";
 		}

package/core/lib/processor-helper.js

@@ -394,6 +394,25 @@ function getProcessorHelperClass(utilInstance) {
 			resources.scripts.set(indexResource, { name, content, extension, contentType, url: resourceURL });
 		}
 
+		async processWorklet(scriptElement, resourceURL, workletOptions, options, charset, batchRequest, resources) {
+			let { content, indexResource, extension, contentType } = await batchRequest.addURL(resourceURL, {
+				asBinary: true,
+				charset: charset != UTF8_CHARSET && charset,
+				maxResourceSize: options.maxResourceSize,
+				maxResourceSizeEnabled: options.maxResourceSizeEnabled,
+				frameId: options.windowId,
+				resourceReferrer: options.resourceReferrer,
+				baseURI: options.baseURI,
+				blockMixedContent: options.blockMixedContent,
+				expectedType: "script",
+				acceptHeaders: options.acceptHeaders,
+				networkTimeout: options.networkTimeout
+			});
+			const name = "scripts/" + indexResource + extension;
+			scriptElement.textContent += `CSS.paintWorklet.addModule("${name}", ${JSON.stringify(workletOptions)});\n`;
+			resources.worklets.set(indexResource, { name, workletOptions, content, extension, contentType, url: resourceURL });
+		}
+
 		setMetaCSP(metaElement) {
 			metaElement.content = "default-src 'none'; connect-src 'self' data: blob:; font-src 'self' data: blob:; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline' data: blob:; frame-src 'self' data: blob:; media-src 'self' data: blob:; script-src 'self' 'unsafe-inline' data: blob:; object-src 'self' data: blob:;";
 		}

package/modules/css-matched-rules.js

@@ -308,6 +308,11 @@ function processDeclarations(declarationsInfo, declarations, selectorInfo, proce
 					processedProperties.add(declarationData.property);
 				}
 			}
+		} else if (declarationData.type == "Rule") {
+			const declarationInfo = declarationsInfo.get(declarationData);
+			if (!declarationInfo) {
+				declarationsInfo.set(declarationData, { selectorInfo });
+			}
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "single-file-core",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",

package/processors/frame-tree/content/content-frame-tree.js

@@ -237,6 +237,7 @@ function initResponse(message) {
 				frameData.url = messageFrameData.url;
 				frameData.canvases = messageFrameData.canvases;
 				frameData.fonts = messageFrameData.fonts;
+				frameData.worklets = messageFrameData.worklets;
 				frameData.stylesheets = messageFrameData.stylesheets;
 				frameData.images = messageFrameData.images;
 				frameData.posters = messageFrameData.posters;
@@ -414,6 +415,7 @@ function getFrameData(document, globalThis, windowId, options, scrolling) {
 		title: document.title,
 		canvases: docData.canvases,
 		fonts: docData.fonts,
+		worklets: docData.worklets,
 		stylesheets: docData.stylesheets,
 		images: docData.images,
 		posters: docData.posters,

package/processors/hooks/content/content-hooks-frames-web.js

@@ -50,6 +50,7 @@
 	const NEW_FONT_FACE_EVENT = "single-file-new-font-face";
 	const DELETE_FONT_EVENT = "single-file-delete-font";
 	const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
+	const NEW_WORKLET_EVENT = "single-file-new-worklet";
 	const FONT_STYLE_PROPERTIES = {
 		family: "font-family",
 		style: "font-style",
@@ -71,6 +72,7 @@
 	const Blob = globalThis.Blob;
 	const JSON = globalThis.JSON;
 	const MutationObserver = globalThis.MutationObserver;
+	const URL = globalThis.URL;
 
 	const observers = new Map();
 	const observedElements = new Map();
@@ -307,7 +309,15 @@
 		delete screen.width;
 	}
 
-
+	if (globalThis.CSS && globalThis.CSS.paintWorklet && globalThis.CSS.paintWorklet.addModule) {
+		const addModule = globalThis.CSS.paintWorklet.addModule;
+		globalThis.CSS.paintWorklet.addModule = function (moduleURL, options) {
+			const result = addModule.apply(globalThis.CSS.paintWorklet, arguments);
+			moduleURL = new URL(moduleURL, document.baseURI).href;
+			document.dispatchEvent(new CustomEvent(NEW_WORKLET_EVENT, { detail: { moduleURL, options } }));
+			return result;
+		};
+	}
 
 	if (globalThis.FontFace) {
 		const FontFace = globalThis.FontFace;

package/processors/hooks/content/content-hooks-frames.js

@@ -40,7 +40,9 @@ const IMAGE_LOADED_EVENT = "single-file-image-loaded";
 const NEW_FONT_FACE_EVENT = "single-file-new-font-face";
 const DELETE_FONT_EVENT = "single-file-delete-font";
 const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
+const NEW_WORKLET_EVENT = "single-file-new-worklet";
 const FONT_FACE_PROPERTY_NAME = "_singleFile_fontFaces";
+const WORKLET_PROPERTY_NAME = "_singleFile_worklets";
 
 const CustomEvent = globalThis.CustomEvent;
 const document = globalThis.document;
@@ -48,12 +50,17 @@ const Document = globalThis.Document;
 const JSON = globalThis.JSON;
 const MutationObserver = globalThis.MutationObserver;
 
-let fontFaces;
+let fontFaces, worklets;
 if (window[FONT_FACE_PROPERTY_NAME]) {
 	fontFaces = window[FONT_FACE_PROPERTY_NAME];
 } else {
 	fontFaces = window[FONT_FACE_PROPERTY_NAME] = new Map();
 }
+if (window[WORKLET_PROPERTY_NAME]) {
+	worklets = window[WORKLET_PROPERTY_NAME];
+} else {
+	worklets = window[WORKLET_PROPERTY_NAME] = new Map();
+}
 
 init();
 new MutationObserver(init).observe(document, { childList: true });
@@ -73,11 +80,16 @@ function init() {
 			fontFaces.delete(JSON.stringify(key));
 		});
 		document.addEventListener(CLEAR_FONTS_EVENT, () => fontFaces = new Map());
+		document.addEventListener(NEW_WORKLET_EVENT, event => {
+			const detail = event.detail;
+			worklets.set(detail.moduleURL, detail);
+		});
 	}
 }
 
 export {
 	getFontsData,
+	getWorkletsData,
 	loadDeferredImagesStart,
 	loadDeferredImagesEnd,
 	loadDeferredImagesResetZoomLevel,
@@ -89,6 +101,10 @@ function getFontsData() {
 	return Array.from(fontFaces.values());
 }
 
+function getWorkletsData() {
+	return Array.from(worklets.values());
+}
+
 function loadDeferredImagesStart(options) {
 	if (options.loadDeferredImagesBlockCookies) {
 		document.dispatchEvent(new CustomEvent(BLOCK_COOKIES_START_EVENT));