npm - @flow-like/widget-bundler - Versions diffs - 0.1.1 - Mend

@flow-like/widget-bundler 0.1.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 (22) hide show

package/README.md +388 -0
package/package.json +40 -0
package/src/add.ts +109 -0
package/src/bundle-format.ts +104 -0
package/src/cli.ts +156 -0
package/src/contract-types.ts +759 -0
package/src/csp-reason.ts +307 -0
package/src/csp-source.ts +361 -0
package/src/csp.ts +54 -0
package/src/dev/contract-endpoint.ts +103 -0
package/src/dev/form-model.ts +63 -0
package/src/dev/harness-html.ts +864 -0
package/src/dev/server.ts +297 -0
package/src/extract.ts +1620 -0
package/src/generated/widget-source-data.ts +982 -0
package/src/html.ts +60 -0
package/src/index.ts +17 -0
package/src/inline.ts +247 -0
package/src/pack.ts +502 -0
package/src/psl.ts +145 -0
package/src/validate-cmd.ts +268 -0
package/src/vite.ts +109 -0

package/src/html.ts ADDED Viewed

@@ -0,0 +1,60 @@
+export function escapeHtmlAttr(value: string): string {
+	return value
+		.replace(/&/g, "&amp;")
+		.replace(/"/g, "&quot;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;");
+}
+const WORD_CHAR = /\w/;
+export interface TagSpan {
+	start: number;
+	/** Offset just past the tag's `>` */
+	end: number;
+}
+/**
+ * Linear-time equivalent of `/<name\b[^>]*>/i`: the next start tag for the
+ * (lowercase) `name` at or after `from`. The regex form is quadratic in the
+ * document length because every `<` is a candidate start for an `[^>]*` scan.
+ */
+export function findTag(html: string, name: string, from = 0): TagSpan | null {
+	let cursor = from;
+	for (;;) {
+		const start = html.indexOf("<", cursor);
+		if (start === -1) return null;
+		const nameEnd = start + 1 + name.length;
+		if (
+			html.slice(start + 1, nameEnd).toLowerCase() !== name ||
+			WORD_CHAR.test(html[nameEnd] ?? "")
+		) {
+			cursor = start + 1;
+			continue;
+		}
+		const close = html.indexOf(">", nameEnd);
+		return close === -1 ? null : { start, end: close + 1 };
+	}
+}
+/**
+ * Insert a fragment at the very start of `<head>`, creating the element when
+ * the document has none.
+ */
+export function insertAtHeadStart(html: string, fragment: string): string {
+	const head = findTag(html, "head");
+	if (head) {
+		return `${html.slice(0, head.end)}${fragment}${html.slice(head.end)}`;
+	}
+	const htmlTag = findTag(html, "html");
+	if (htmlTag) {
+		const { end } = htmlTag;
+		return `${html.slice(0, end)}<head>${fragment}</head>${html.slice(end)}`;
+	}
+	const doctype = /^\s*<!doctype\b[^>]*>/i.exec(html);
+	if (doctype) {
+		const end = doctype.index + doctype[0].length;
+		return `${html.slice(0, end)}<head>${fragment}</head>${html.slice(end)}`;
+	}
+	return `<head>${fragment}</head>${html}`;
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export * from "./contract-types";
+export * from "./bundle-format";
+export * from "./extract";
+export * from "./csp";
+export * from "./csp-source";
+export * from "./csp-reason";
+export * from "./psl";
+export * from "./html";
+export * from "./inline";
+export * from "./pack";
+export * from "./validate-cmd";
+export * from "./add";
+export * from "./vite";
+export * from "./dev/form-model";
+export * from "./dev/contract-endpoint";
+export * from "./dev/harness-html";
+export * from "./dev/server";

package/src/inline.ts ADDED Viewed

@@ -0,0 +1,247 @@
+import { type WidgetContract, canonicalizeContract } from "./contract-types";
+import { type TagSpan, findTag, insertAtHeadStart } from "./html";
+export type AssetResolver = (relPath: string) => Uint8Array | null;
+export interface InlineResult {
+	html: string;
+	/** Local asset paths that were inlined into the document */
+	inlined: string[];
+	/** Bundle-relative shared chunk paths (`shared/...`) the document references */
+	external: string[];
+}
+type RefKind =
+	| { kind: "url" }
+	| { kind: "shared"; file: string }
+	| { kind: "local"; path: string };
+const SHARED_REF = /^(?:\.\/|\/)?(?:\.\.\/)*shared\/(.+)$/;
+function classifyRef(ref: string): RefKind {
+	if (/^[a-z][a-z0-9+.-]*:/i.test(ref) || ref.startsWith("//")) {
+		return { kind: "url" };
+	}
+	const shared = SHARED_REF.exec(ref);
+	if (shared?.[1]) {
+		return { kind: "shared", file: shared[1] };
+	}
+	return { kind: "local", path: ref.replace(/^(?:\.\/|\/)+/, "") };
+}
+function attrValue(tag: string, name: string): string | null {
+	const match = new RegExp(
+		`\\b${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`,
+		"i",
+	).exec(tag);
+	if (!match) return null;
+	return match[1] ?? match[2] ?? match[3] ?? null;
+}
+function replaceAttrValue(tag: string, name: string, value: string): string {
+	return tag.replace(
+		new RegExp(`(\\b${name}\\s*=\\s*)(?:"[^"]*"|'[^']*'|[^\\s>]+)`, "i"),
+		`$1"${value}"`,
+	);
+}
+function escapeScriptContent(js: string): string {
+	return js.replace(/<\/script/gi, "<\\/script");
+}
+function escapeStyleContent(css: string): string {
+	return css.replace(/<\/style/gi, "<\\/style");
+}
+const DECODER = new TextDecoder();
+const WHITESPACE = /\s/;
+interface ScriptElement extends TagSpan {
+	attrs: string;
+	body: string;
+}
+/** `String.replace` over hand-scanned spans; replacements are never rescanned. */
+function rewriteSpans<T extends TagSpan>(
+	html: string,
+	find: (from: number) => T | null,
+	replace: (span: T) => string,
+): string {
+	let out = "";
+	let cursor = 0;
+	for (;;) {
+		const span = find(cursor);
+		if (span === null) break;
+		out += html.slice(cursor, span.start) + replace(span);
+		cursor = span.end;
+	}
+	return out + html.slice(cursor);
+}
+function findScriptClose(
+	html: string,
+	from: number,
+): { start: number; end: number } | null {
+	let cursor = from;
+	for (;;) {
+		const start = html.indexOf("<", cursor);
+		if (start === -1) return null;
+		if (html.slice(start + 1, start + 8).toLowerCase() !== "/script") {
+			cursor = start + 1;
+			continue;
+		}
+		const tail = start + 8;
+		const next = html[tail];
+		if (next === ">") return { start, end: tail + 1 };
+		if (next !== undefined && WHITESPACE.test(next)) {
+			const gt = html.indexOf(">", tail + 1);
+			return gt === -1 ? null : { start, end: gt + 1 };
+		}
+		cursor = start + 1;
+	}
+}
+/** Linear-time scan for `<script …>…</script …>`; a regex here is quadratic. */
+function findScriptElement(html: string, from: number): ScriptElement | null {
+	const open = findTag(html, "script", from);
+	if (open === null) return null;
+	const close = findScriptClose(html, open.end);
+	if (close === null) return null;
+	return {
+		start: open.start,
+		end: close.end,
+		attrs: html.slice(open.start + 7, open.end - 1),
+		body: html.slice(open.end, close.start),
+	};
+}
+/**
+ * Inline local `<script src>` and stylesheet `<link>` references into the
+ * document; rewrite references into `shared/` to bundle-relative
+ * `../../shared/<file>` (the widget document lives at
+ * `widgets/{id}/index.html`).
+ */
+export function inlineHtml(
+	html: string,
+	resolveAsset: AssetResolver,
+): InlineResult {
+	const inlined: string[] = [];
+	const external = new Set<string>();
+	const replaceScript = (element: ScriptElement): string => {
+		const { attrs, body } = element;
+		const full = html.slice(element.start, element.end);
+		const src = attrValue(`<script${attrs}>`, "src");
+		if (src === null) return full;
+		const ref = classifyRef(src);
+		if (ref.kind === "url") return full;
+		if (ref.kind === "shared") {
+			external.add(`shared/${ref.file}`);
+			const openTag = replaceAttrValue(
+				`<script${attrs}>`,
+				"src",
+				`../../shared/${ref.file}`,
+			);
+			return `${openTag}${body}</script>`;
+		}
+		const asset = resolveAsset(ref.path);
+		if (asset === null) {
+			throw new Error(
+				`Cannot inline script '${src}': file not found next to the built document`,
+			);
+		}
+		inlined.push(ref.path);
+		const type = attrValue(`<script${attrs}>`, "type");
+		const typeAttr = type ? ` type="${type}"` : "";
+		return `<script${typeAttr}>${escapeScriptContent(DECODER.decode(asset))}</script>`;
+	};
+	const replaceLink = (full: string): string => {
+		const rel = attrValue(full, "rel")?.toLowerCase();
+		const href = attrValue(full, "href");
+		if (!href || (rel !== "stylesheet" && rel !== "modulepreload")) {
+			return full;
+		}
+		const ref = classifyRef(href);
+		if (ref.kind === "url") return full;
+		if (ref.kind === "shared") {
+			external.add(`shared/${ref.file}`);
+			return replaceAttrValue(full, "href", `../../shared/${ref.file}`);
+		}
+		if (rel === "modulepreload") {
+			return "";
+		}
+		const asset = resolveAsset(ref.path);
+		if (asset === null) {
+			throw new Error(
+				`Cannot inline stylesheet '${href}': file not found next to the built document`,
+			);
+		}
+		inlined.push(ref.path);
+		return `<style>${escapeStyleContent(DECODER.decode(asset))}</style>`;
+	};
+	const withScripts = rewriteSpans(
+		html,
+		(from) => findScriptElement(html, from),
+		replaceScript,
+	);
+	const out = rewriteSpans(
+		withScripts,
+		(from) => findTag(withScripts, "link", from),
+		(tag) => replaceLink(withScripts.slice(tag.start, tag.end)),
+	);
+	return { html: out, inlined, external: [...external].sort() };
+}
+export function contractScriptContent(contract: WidgetContract): string {
+	const json = JSON.stringify(canonicalizeContract(contract)).replace(
+		/</g,
+		"\\u003c",
+	);
+	return `globalThis.__FLW_CONTRACT__ = ${json};`;
+}
+const CONTRACT_OPEN = "<script>";
+const CONTRACT_CLOSE = "</script>";
+const CONTRACT_MARKER = "globalThis.__FLW_CONTRACT__";
+/** Linear-time removal of a previously injected contract script. */
+function stripContractScript(html: string): string {
+	const leadingWhitespace = /\s*/y;
+	let from = 0;
+	for (;;) {
+		const open = html.indexOf(CONTRACT_OPEN, from);
+		if (open === -1) return html;
+		leadingWhitespace.lastIndex = open + CONTRACT_OPEN.length;
+		leadingWhitespace.exec(html);
+		const marker = leadingWhitespace.lastIndex;
+		if (html.startsWith(CONTRACT_MARKER, marker)) {
+			const close = html.indexOf(
+				CONTRACT_CLOSE,
+				marker + CONTRACT_MARKER.length,
+			);
+			if (close === -1) return html;
+			return html.slice(0, open) + html.slice(close + CONTRACT_CLOSE.length);
+		}
+		from = open + 1;
+	}
+}
+/**
+ * Add `globalThis.__FLW_CONTRACT__` as the first script in `<head>`,
+ * replacing a previously injected one (dev builds inject it via the Vite
+ * plugin; pack is authoritative).
+ */
+export function injectContractScript(
+	html: string,
+	contract: WidgetContract,
+): string {
+	const stripped = stripContractScript(html);
+	return insertAtHeadStart(
+		stripped,
+		`<script>${contractScriptContent(contract)}</script>`,
+	);
+}