npm - @ariel-salgado/vite-plugin-shadow-dom - Versions diffs - 0.0.1 - Mend

@ariel-salgado/vite-plugin-shadow-dom 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/dom.d.mts ADDED Viewed

@@ -0,0 +1,12 @@
+//#region src/dom/shadow.d.ts
+/**
+ * Client-side helper for apps running inside a shadow DOM.
+ *
+ * When the shadow root mode is 'closed', element.shadowRoot returns null
+ * and document.getElementById / querySelector cannot find shadow DOM elements.
+ * Use getShadowRoot() as your document substitute to query the shadow tree.
+ */
+declare function getShadowRoot(globalName?: string): ShadowRoot | Document;
+//#endregion
+export { getShadowRoot };
+//# sourceMappingURL=dom.d.mts.map

package/dist/dom.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"dom.d.mts","names":[],"sources":["../src/dom/shadow.ts"],"mappings":";;AAOA;;;;;;iBAAgB,aAAA,CAAc,UAAA,YAA8B,UAAA,GAAa,QAAA"}

package/dist/dom.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+//#region src/dom/shadow.ts
+/**
+* Client-side helper for apps running inside a shadow DOM.
+*
+* When the shadow root mode is 'closed', element.shadowRoot returns null
+* and document.getElementById / querySelector cannot find shadow DOM elements.
+* Use getShadowRoot() as your document substitute to query the shadow tree.
+*/
+function getShadowRoot(globalName = "__shadowRoot") {
+	if (typeof window === "undefined") return {};
+	return window[globalName] ?? document;
+}
+//#endregion
+export { getShadowRoot };
+//# sourceMappingURL=dom.mjs.map

package/dist/dom.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dom.mjs","names":[],"sources":["../src/dom/shadow.ts"],"sourcesContent":["/**\n * Client-side helper for apps running inside a shadow DOM.\n *\n * When the shadow root mode is 'closed', element.shadowRoot returns null\n * and document.getElementById / querySelector cannot find shadow DOM elements.\n * Use getShadowRoot() as your document substitute to query the shadow tree.\n */\nexport function getShadowRoot(globalName = '__shadowRoot'): ShadowRoot | Document {\n\tif (typeof window === 'undefined')\n\t\treturn {} as Document;\n\n\treturn ((window as unknown as Record<string, unknown>)[globalName] as ShadowRoot | undefined) ?? document;\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,cAAc,aAAa,gBAAuC;AACjF,KAAI,OAAO,WAAW,YACrB,QAAO,EAAE;AAEV,QAAS,OAA8C,eAA0C"}

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,75 @@
+import { Plugin } from "vite";
+//#region src/types.d.ts
+type ShadowMode = 'open' | 'closed';
+type CSSStrategy = 'link' | 'constructable';
+interface ShadowDOMOptions {
+  /**
+   * Shadow root mode.
+   * 'closed' prevents external JS from accessing internals via element.shadowRoot.
+   * Your app should use getShadowRoot() from the client entry instead.
+   * @default 'open'
+   */
+  mode?: ShadowMode;
+  /**
+   * How Vite-built CSS is injected into the shadow root.
+   * 'constructable' avoids FOUC but requires an async fetch.
+   * @default 'link'
+   */
+  cssStrategy?: CSSStrategy;
+  /**
+   * id of the generated shadow host element.
+   * @default 'shadow-host'
+   */
+  hostId?: string;
+  /**
+   * id of the <template> holding original content.
+   * @default 'shadow-template'
+   */
+  templateId?: string;
+  /**
+   * Forwards focus events across the shadow boundary.
+   * Set true if the shadow content has inputs, buttons, or other focusable elements.
+   * @default true
+   */
+  delegatesFocus?: boolean;
+  /**
+   * Allows the shadow root to be serialized via getHTML() and inspected in DevTools.
+   * Disable only if you need strict serialization prevention.
+   * @default true
+   */
+  serializable?: boolean;
+  /**
+   * The id of the element inside <body> to isolate into the shadow DOM.
+   * Everything else in <body> stays in the regular document.
+   * @default 'app'
+   */
+  appId?: string;
+  /**
+   * HTML files to skip. Matched against the absolute file path.
+   * - string[]: skips files whose path includes any of the strings
+   * - function: skips files where the predicate returns true
+   */
+  exclude?: string[] | ((filename: string) => boolean);
+  /**
+   * Window property name used to expose the shadow root before JS is imported.
+   * Lets your app call getShadowRoot() to access shadow DOM elements,
+   * which is required when mode is 'closed'.
+   * @default '__shadowRoot'
+   */
+  shadowRootGlobal?: string;
+  /**
+   * Patches document.getElementById, document.querySelector, and
+   * document.querySelectorAll to search the shadow root first.
+   * This lets app code like document.querySelector('#app') work
+   * without any modification regardless of shadow mode.
+   * @default true
+   */
+  patchDocument?: boolean;
+}
+//#endregion
+//#region src/plugin.d.ts
+declare function shadowDOM(options?: ShadowDOMOptions): Plugin;
+//#endregion
+export { type CSSStrategy, type ShadowDOMOptions, type ShadowMode, shadowDOM };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/plugin.ts"],"mappings":";;;KAAY,UAAA;AAAA,KACA,WAAA;AAAA,UAEK,gBAAA;EAHL;;;;;AACZ;EASC,IAAA,GAAO,UAAA;;;;AAPR;;EAcC,WAAA,GAAc,WAAA;EAAW;;;;EAMzB,MAAA;EAAA;;;;EAMA,UAAA;EA4BA;;;;;EArBA,cAAA;;;;ACXD;;EDkBC,YAAA;EClBgE;;;;;EDyBhE,KAAA;;;;;;EAOA,OAAA,gBAAuB,QAAA;;;;;;;EAQvB,gBAAA;;;;;;;;EASA,aAAA;AAAA;;;iBCjDe,SAAA,CAAU,OAAA,GAAS,gBAAA,GAAwB,MAAA"}

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,280 @@
+//#region src/constants.ts
+const VOID_TAGS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const DEFAULT_PLUGIN_OPTIONS = {
+	mode: "open",
+	cssStrategy: "link",
+	hostId: "shadow-host",
+	templateId: "shadow-template",
+	delegatesFocus: true,
+	serializable: true,
+	appId: "app",
+	shadowRootGlobal: "__shadowRoot",
+	patchDocument: true
+};
+const DOCUMENT_METHODS_TO_PATCH = [
+	"getElementById",
+	"querySelector",
+	"querySelectorAll"
+];
+//#endregion
+//#region src/process/html.ts
+/**
+* Strips all Vite-injected <link rel="stylesheet"> and <script type="module" src="...">
+* tags from HTML, collecting their URLs for manual injection into the shadow root.
+* Non-stylesheet links (favicon, preload, etc.) and inline module scripts are preserved.
+*/
+function extract_assets(html) {
+	const css_hrefs = [];
+	const js_srcs = [];
+	html = html.replace(/<link\b[^>]*>/g, (tag) => {
+		if (get_attr(tag, "rel") === "stylesheet") {
+			const href = get_attr(tag, "href");
+			if (href) css_hrefs.push(href);
+			return "";
+		}
+		return tag;
+	});
+	html = html.replace(/<script\b[^>]*><\/script>/g, (tag) => {
+		if (get_attr(tag, "type") === "module") {
+			const src = get_attr(tag, "src");
+			if (src) js_srcs.push(src);
+			return "";
+		}
+		return tag;
+	});
+	return {
+		html,
+		css_hrefs,
+		js_srcs
+	};
+}
+/**
+* Splits HTML around the <body> element using index-based slicing.
+* Immune to </body> strings inside scripts or templates.
+*/
+function slice_body(html) {
+	const body_open = html.indexOf("<body");
+	if (body_open === -1) return null;
+	const tag_end = html.indexOf(">", body_open);
+	if (tag_end === -1) return null;
+	const body_start = tag_end + 1;
+	const body_end = html.lastIndexOf("</body>");
+	if (body_end === -1) return null;
+	return {
+		before: html.slice(0, body_start),
+		content: html.slice(body_start, body_end),
+		after: html.slice(body_end)
+	};
+}
+/**
+* Finds and extracts an element by id from an HTML string using nesting-aware scanning.
+* Supports any depth of same-tag nesting. Only supports id= attribute selectors.
+* Returns null if the element is not found or the HTML is malformed.
+*/
+function find_element_by_id(html, id) {
+	const match = new RegExp(`<(\\w+)\\b[^>]*\\bid="${id}"[^>]*>`, "i").exec(html);
+	if (!match) return null;
+	const tag_name = match[1].toLowerCase();
+	const tag_start = match.index;
+	const opening_end = tag_start + match[0].length;
+	if (VOID_TAGS.has(tag_name) || match[0].endsWith("/>")) return {
+		before: html.slice(0, tag_start),
+		element: match[0],
+		after: html.slice(opening_end)
+	};
+	const open_seq = `<${tag_name}`;
+	const close_seq = `</${tag_name}`;
+	let pos = opening_end;
+	let depth = 1;
+	while (depth > 0 && pos < html.length) {
+		const next_open = html.indexOf(open_seq, pos);
+		let next_close = html.indexOf(close_seq, pos);
+		while (next_close !== -1) {
+			const c = html[next_close + close_seq.length];
+			if (c === ">" || c === " " || c === "\n" || c === "	" || c === "\r") break;
+			next_close = html.indexOf(close_seq, next_close + 1);
+		}
+		if (next_close === -1) return null;
+		if (next_open !== -1 && next_open < next_close) {
+			const char_after = html[next_open + open_seq.length];
+			if (char_after === ">" || char_after === " " || char_after === "\n" || char_after === "	" || char_after === "\r" || char_after === "/") {
+				depth++;
+				pos = next_open + open_seq.length;
+			} else pos = next_open + 1;
+		} else {
+			depth--;
+			const close_end = html.indexOf(">", next_close) + 1;
+			if (close_end === 0) return null;
+			if (depth === 0) return {
+				before: html.slice(0, tag_start),
+				element: html.slice(tag_start, close_end),
+				after: html.slice(close_end)
+			};
+			pos = close_end;
+		}
+	}
+	return null;
+}
+/**
+* Extracts the value of a named attribute from an HTML opening tag string.
+* Order-independent — works regardless of attribute position in the tag.
+*/
+function get_attr(tag, attr) {
+	return tag.match(new RegExp(`\\b${attr}="([^"]+)"`))?.[1];
+}
+//#endregion
+//#region src/dom/patch.ts
+/**
+* Generates the document-patching snippet injected into the bootstrap script.
+*
+* Iterates over the query methods that ShadowRoot implements, replacing each
+* on `document` with a version that searches the shadow root first and falls
+* back to the original document method when nothing is found in the shadow.
+*
+* Adding support for a new method is a one-line change to PATCHED_METHODS.
+*/
+function build_document_patch(global_name) {
+	return `
+		const __shadow = window['${global_name}'];
+		for (const m of ${JSON.stringify(DOCUMENT_METHODS_TO_PATCH)}) {
+			const orig = document[m].bind(document);
+			document[m] = (...args) => {
+				const r = __shadow[m](...args);
+				return r != null && (!('length' in r) || r.length > 0)
+				? r
+				: orig(...args);
+			};
+		}
+  `.trim();
+}
+//#endregion
+//#region src/process/inject.ts
+function build_bootstrap_script(css_hrefs, js_srcs, opts) {
+	const css_block = css_hrefs.length > 0 ? opts.cssStrategy === "constructable" ? build_constructable_css(css_hrefs) : build_link_css(css_hrefs) : "";
+	const js_block = js_srcs.map((src) => `  import('${src}');`).join("\n");
+	const patch_block = opts.patchDocument ? build_document_patch(opts.shadowRootGlobal) : "";
+	return `
+		<script type="module">
+			const host = document.getElementById('${opts.hostId}');
+			const shadow = host.attachShadow({
+				mode: '${opts.mode}',
+				delegatesFocus: ${opts.delegatesFocus},
+				serializable: ${opts.serializable},
+			});
+			const tpl = document.getElementById('${opts.templateId}');
+			shadow.appendChild(tpl.content.cloneNode(true));
+			window['${opts.shadowRootGlobal}'] = shadow;
+			${patch_block}
+			${css_block}
+			${js_block}
+		<\/script>
+	`;
+}
+function build_link_css(hrefs) {
+	return hrefs.map((href) => `
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = '${href}';
+		shadow.appendChild(link);
+	`).join("\n");
+}
+function build_constructable_css(hrefs) {
+	return `
+		(async () => {
+			${hrefs.map((href, i) => `
+		const res_${i} = await fetch('${href}');
+		const sheet_${i} = new CSSStyleSheet();
+		await sheet_${i}.replace(await res_${i}.text());
+	`).join("\n")}
+			shadow.adoptedStyleSheets = [${hrefs.map((_, i) => `sheet_${i}`).join(", ")}];
+		})();
+	`;
+}
+//#endregion
+//#region src/process/transform.ts
+/**
+* Full HTML transformation pipeline.
+*
+* When appId is set (default: 'app'):
+*   - Finds the element with that id in the body
+*   - Replaces it in-place with the shadow host div
+*   - Appends the template and bootstrap script at the end of body
+*   - Everything else in the body remains untouched
+*
+* Returns the original HTML unchanged if the target element cannot be found.
+*/
+function transform_html(html, opts) {
+	const { html: stripped, css_hrefs, js_srcs } = extract_assets(html);
+	const slice = find_element_by_id(stripped, opts.appId);
+	if (!slice) return html;
+	const body_slice = slice_body(`${slice.before}PLACEHOLDER${slice.after}`);
+	if (!body_slice) return html;
+	const script = build_bootstrap_script(css_hrefs, js_srcs, opts);
+	const injection = `
+		<div id="${opts.hostId}"></div>
+		<template id="${opts.templateId}">
+			${slice.element.trim()}
+		</template>
+		${script}
+  	`;
+	const body_with_host = body_slice.content.replace("PLACEHOLDER", injection);
+	return body_slice.before + body_with_host + body_slice.after;
+}
+//#endregion
+//#region src/plugin.ts
+function build_exclude_predicate(exclude) {
+	if (!exclude) return () => false;
+	if (typeof exclude === "function") return exclude;
+	return (filename) => exclude.some((pattern) => filename.includes(pattern));
+}
+function resolve_options(options) {
+	return {
+		...DEFAULT_PLUGIN_OPTIONS,
+		...options,
+		exclude: build_exclude_predicate(options.exclude)
+	};
+}
+function shadowDOM(options = {}) {
+	const resolved = resolve_options(options);
+	return {
+		name: "@ariel-salgado/vite-plugin-shadow-dom",
+		enforce: "post",
+		transformIndexHtml: {
+			order: "post",
+			handler(html, ctx) {
+				if (resolved.exclude(ctx.filename)) return html;
+				return transform_html(html, resolved);
+			}
+		}
+	};
+}
+//#endregion
+export { shadowDOM };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/constants.ts","../src/process/html.ts","../src/dom/patch.ts","../src/process/inject.ts","../src/process/transform.ts","../src/plugin.ts"],"sourcesContent":["import type { ResolvedOptions } from './types';\n\nexport const VOID_TAGS = new Set([\n\t'area',\n\t'base',\n\t'br',\n\t'col',\n\t'embed',\n\t'hr',\n\t'img',\n\t'input',\n\t'link',\n\t'meta',\n\t'param',\n\t'source',\n\t'track',\n\t'wbr',\n]);\n\nexport const DEFAULT_PLUGIN_OPTIONS: Partial<ResolvedOptions> = {\n\tmode: 'open',\n\tcssStrategy: 'link',\n\thostId: 'shadow-host',\n\ttemplateId: 'shadow-template',\n\tdelegatesFocus: true,\n\tserializable: true,\n\tappId: 'app',\n\tshadowRootGlobal: '__shadowRoot',\n\tpatchDocument: true,\n};\n\nexport const DOCUMENT_METHODS_TO_PATCH = [\n\t'getElementById',\n\t'querySelector',\n\t'querySelectorAll',\n];\n","import type { BodySlice, ElementSlice, ExtractedAssets } from '../types';\n\nimport { VOID_TAGS } from '../constants';\n\n/**\n * Strips all Vite-injected <link rel=\"stylesheet\"> and <script type=\"module\" src=\"...\">\n * tags from HTML, collecting their URLs for manual injection into the shadow root.\n * Non-stylesheet links (favicon, preload, etc.) and inline module scripts are preserved.\n */\nexport function extract_assets(html: string): ExtractedAssets {\n\tconst css_hrefs: string[] = [];\n\tconst js_srcs: string[] = [];\n\n\thtml = html.replace(/<link\\b[^>]*>/g, (tag) => {\n\t\tif (get_attr(tag, 'rel') === 'stylesheet') {\n\t\t\tconst href = get_attr(tag, 'href');\n\t\t\tif (href)\n\t\t\t\tcss_hrefs.push(href);\n\t\t\treturn '';\n\t\t}\n\t\treturn tag;\n\t});\n\n\thtml = html.replace(/<script\\b[^>]*><\\/script>/g, (tag) => {\n\t\tif (get_attr(tag, 'type') === 'module') {\n\t\t\tconst src = get_attr(tag, 'src');\n\t\t\tif (src)\n\t\t\t\tjs_srcs.push(src);\n\t\t\treturn '';\n\t\t}\n\t\treturn tag;\n\t});\n\n\treturn { html, css_hrefs, js_srcs };\n}\n\n/**\n * Splits HTML around the <body> element using index-based slicing.\n * Immune to </body> strings inside scripts or templates.\n */\nexport function slice_body(html: string): BodySlice | null {\n\tconst body_open = html.indexOf('<body');\n\tif (body_open === -1)\n\t\treturn null;\n\n\tconst tag_end = html.indexOf('>', body_open);\n\tif (tag_end === -1)\n\t\treturn null;\n\n\tconst body_start = tag_end + 1;\n\tconst body_end = html.lastIndexOf('</body>');\n\tif (body_end === -1)\n\t\treturn null;\n\n\treturn {\n\t\tbefore: html.slice(0, body_start),\n\t\tcontent: html.slice(body_start, body_end),\n\t\tafter: html.slice(body_end),\n\t};\n}\n\n/**\n * Finds and extracts an element by id from an HTML string using nesting-aware scanning.\n * Supports any depth of same-tag nesting. Only supports id= attribute selectors.\n * Returns null if the element is not found or the HTML is malformed.\n */\nexport function find_element_by_id(html: string, id: string): ElementSlice | null {\n\tconst id_re = new RegExp(`<(\\\\w+)\\\\b[^>]*\\\\bid=\"${id}\"[^>]*>`, 'i');\n\tconst match = id_re.exec(html);\n\tif (!match)\n\t\treturn null;\n\n\tconst tag_name = match[1].toLowerCase();\n\tconst tag_start = match.index;\n\tconst opening_end = tag_start + match[0].length;\n\n\tif (VOID_TAGS.has(tag_name) || match[0].endsWith('/>')) {\n\t\treturn {\n\t\t\tbefore: html.slice(0, tag_start),\n\t\t\telement: match[0],\n\t\t\tafter: html.slice(opening_end),\n\t\t};\n\t}\n\n\tconst open_seq = `<${tag_name}`;\n\tconst close_seq = `</${tag_name}`;\n\n\tlet pos = opening_end;\n\tlet depth = 1;\n\n\twhile (depth > 0 && pos < html.length) {\n\t\tconst next_open = html.indexOf(open_seq, pos);\n\n\t\tlet next_close = html.indexOf(close_seq, pos);\n\t\twhile (next_close !== -1) {\n\t\t\tconst c = html[next_close + close_seq.length];\n\t\t\tif (c === '>' || c === ' ' || c === '\\n' || c === '\\t' || c === '\\r')\n\t\t\t\tbreak;\n\t\t\tnext_close = html.indexOf(close_seq, next_close + 1);\n\t\t}\n\n\t\tif (next_close === -1)\n\t\t\treturn null; // malformed HTML\n\n\t\tif (next_open !== -1 && next_open < next_close) {\n\t\t\tconst char_after = html[next_open + open_seq.length];\n\t\t\tif (\n\t\t\t\tchar_after === '>'\n\t\t\t\t|| char_after === ' '\n\t\t\t\t|| char_after === '\\n'\n\t\t\t\t|| char_after === '\\t'\n\t\t\t\t|| char_after === '\\r'\n\t\t\t\t|| char_after === '/'\n\t\t\t) {\n\t\t\t\tdepth++;\n\t\t\t\tpos = next_open + open_seq.length;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tpos = next_open + 1;\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tdepth--;\n\t\t\tconst close_end = html.indexOf('>', next_close) + 1;\n\t\t\tif (close_end === 0)\n\t\t\t\treturn null;\n\t\t\tif (depth === 0) {\n\t\t\t\treturn {\n\t\t\t\t\tbefore: html.slice(0, tag_start),\n\t\t\t\t\telement: html.slice(tag_start, close_end),\n\t\t\t\t\tafter: html.slice(close_end),\n\t\t\t\t};\n\t\t\t}\n\t\t\tpos = close_end;\n\t\t}\n\t}\n\n\treturn null;\n}\n\n/**\n * Extracts the value of a named attribute from an HTML opening tag string.\n * Order-independent — works regardless of attribute position in the tag.\n */\nexport function get_attr(tag: string, attr: string): string | undefined {\n\treturn tag.match(new RegExp(`\\\\b${attr}=\"([^\"]+)\"`))?.[1];\n}\n","import { DOCUMENT_METHODS_TO_PATCH } from '../constants';\n\n/**\n * Generates the document-patching snippet injected into the bootstrap script.\n *\n * Iterates over the query methods that ShadowRoot implements, replacing each\n * on `document` with a version that searches the shadow root first and falls\n * back to the original document method when nothing is found in the shadow.\n *\n * Adding support for a new method is a one-line change to PATCHED_METHODS.\n */\nexport function build_document_patch(global_name: string): string {\n\treturn `\n\t\tconst __shadow = window['${global_name}'];\n\n\t\tfor (const m of ${JSON.stringify(DOCUMENT_METHODS_TO_PATCH)}) {\n\t\t\tconst orig = document[m].bind(document);\n\t\t\tdocument[m] = (...args) => {\n\t\t\t\tconst r = __shadow[m](...args);\n\t\t\t\treturn r != null && (!('length' in r) || r.length > 0)\n\t\t\t\t? r\n\t\t\t\t: orig(...args);\n\t\t\t};\n\t\t}\n `.trim();\n}\n","import type { ResolvedOptions } from '../types.js';\n\nimport { build_document_patch } from '../dom/patch.js';\n\nexport function build_bootstrap_script(\n\tcss_hrefs: string[],\n\tjs_srcs: string[],\n\topts: ResolvedOptions,\n): string {\n\tconst css_block\n\t\t= css_hrefs.length > 0\n\t\t\t? opts.cssStrategy === 'constructable'\n\t\t\t\t? build_constructable_css(css_hrefs)\n\t\t\t\t: build_link_css(css_hrefs)\n\t\t\t: '';\n\n\tconst js_block = js_srcs.map(src => ` import('${src}');`).join('\\n');\n\n\tconst patch_block = opts.patchDocument\n\t\t? build_document_patch(opts.shadowRootGlobal)\n\t\t: '';\n\n\treturn `\n\t\t<script type=\"module\">\n\t\t\tconst host = document.getElementById('${opts.hostId}');\n\t\t\tconst shadow = host.attachShadow({\n\t\t\t\tmode: '${opts.mode}',\n\t\t\t\tdelegatesFocus: ${opts.delegatesFocus},\n\t\t\t\tserializable: ${opts.serializable},\n\t\t\t});\n\n\t\t\tconst tpl = document.getElementById('${opts.templateId}');\n\t\t\tshadow.appendChild(tpl.content.cloneNode(true));\n\n\t\t\twindow['${opts.shadowRootGlobal}'] = shadow;\n\n\t\t\t${patch_block}\n\t\t\t${css_block}\n\t\t\t${js_block}\n\t\t</script>\n\t`;\n}\n\nfunction build_link_css(hrefs: string[]): string {\n\treturn hrefs.map(href => `\n\t\tconst link = document.createElement('link');\n\t\tlink.rel = 'stylesheet';\n\t\tlink.href = '${href}';\n\t\tshadow.appendChild(link);\n\t`).join('\\n');\n}\n\nfunction build_constructable_css(hrefs: string[]): string {\n\tconst fetches = hrefs.map((href, i) => `\n\t\tconst res_${i} = await fetch('${href}');\n\t\tconst sheet_${i} = new CSSStyleSheet();\n\t\tawait sheet_${i}.replace(await res_${i}.text());\n\t`).join('\\n');\n\n\tconst sheet_refs = hrefs.map((_, i) => `sheet_${i}`).join(', ');\n\n\treturn `\n\t\t(async () => {\n\t\t\t${fetches}\n\t\t\tshadow.adoptedStyleSheets = [${sheet_refs}];\n\t\t})();\n\t`;\n}\n","import type { ResolvedOptions } from '../types.js';\n\nimport { extract_assets, find_element_by_id, slice_body } from './html.js';\nimport { build_bootstrap_script } from './inject.js';\n\n/**\n * Full HTML transformation pipeline.\n *\n * When appId is set (default: 'app'):\n * - Finds the element with that id in the body\n * - Replaces it in-place with the shadow host div\n * - Appends the template and bootstrap script at the end of body\n * - Everything else in the body remains untouched\n *\n * Returns the original HTML unchanged if the target element cannot be found.\n */\nexport function transform_html(html: string, opts: ResolvedOptions): string {\n\tconst { html: stripped, css_hrefs, js_srcs } = extract_assets(html);\n\n\tconst slice = find_element_by_id(stripped, opts.appId);\n\tif (!slice)\n\t\treturn html;\n\n\tconst body_slice = slice_body(`${slice.before}PLACEHOLDER${slice.after}`);\n\tif (!body_slice)\n\t\treturn html;\n\n\tconst script = build_bootstrap_script(css_hrefs, js_srcs, opts);\n\n\tconst injection = `\n\t\t<div id=\"${opts.hostId}\"></div>\n\n\t\t<template id=\"${opts.templateId}\">\n\t\t\t${slice.element.trim()}\n\t\t</template>\n\n\t\t${script}\n \t`;\n\n\tconst body_with_host = body_slice.content.replace('PLACEHOLDER', injection);\n\n\treturn body_slice.before + body_with_host + body_slice.after;\n}\n","import type { ResolvedOptions, ShadowDOMOptions } from './types.js';\nimport type { Plugin } from 'vite';\n\nimport { DEFAULT_PLUGIN_OPTIONS } from './constants.js';\nimport { transform_html } from './process/transform.js';\n\nfunction build_exclude_predicate(\n\texclude: ShadowDOMOptions['exclude'],\n): (filename: string) => boolean {\n\tif (!exclude)\n\t\treturn () => false;\n\tif (typeof exclude === 'function')\n\t\treturn exclude;\n\treturn (filename: string) => exclude.some(pattern => filename.includes(pattern));\n}\n\nfunction resolve_options(options: ShadowDOMOptions): ResolvedOptions {\n\tconst merged = { ...DEFAULT_PLUGIN_OPTIONS, ...options } as ResolvedOptions;\n\n\treturn {\n\t\t...merged,\n\t\texclude: build_exclude_predicate(options.exclude),\n\t};\n}\n\nexport function shadowDOM(options: ShadowDOMOptions = {}): Plugin {\n\tconst resolved = resolve_options(options);\n\n\treturn {\n\t\tname: '@ariel-salgado/vite-plugin-shadow-dom',\n\t\tenforce: 'post',\n\t\ttransformIndexHtml: {\n\t\t\torder: 'post',\n\t\t\thandler(html, ctx) {\n\t\t\t\tif ((resolved.exclude as ((filename: string) => boolean))(ctx.filename))\n\t\t\t\t\treturn html;\n\t\t\t\treturn transform_html(html, resolved);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":"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"}

package/package.json ADDED Viewed

@@ -0,0 +1,46 @@
+{
+  "name": "@ariel-salgado/vite-plugin-shadow-dom",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Vite plugin that isolates page content into a Shadow DOM",
+  "author": "Ariel Salgado <ariel.salgado.acevedo@gmail.com> (https://github.com/ariel-salgado/)",
+  "license": "MIT",
+  "homepage": "https://github.com/ariel-salgado/vite-plugins/packages/vite-plugin-shadow-dom#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ariel-salgado/vite-plugins.git"
+  },
+  "keywords": [
+    "vite"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "release": "sh ../../scripts/release.sh",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "vite": "^7.0.0 || ^8.0.0-0"
+  },
+  "devDependencies": {
+    "@vitest/browser-playwright": "^4.0.18",
+    "tsdown": "^0.21.0-beta.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0-beta.15",
+    "vitest": "^4.0.18"
+  }
+}