module-tsx 0.0.0 → 0.0.1

package/README.md

@@ -0,0 +1,39 @@
+# module-tsx
+
+Run TypeScript (and React) module directly in the browser.
+
+# Usage
+
+```html
+<!-- Load This Library -->
+<script type="module" src="https://esm.sh/module-tsx"></script>
+
+<div id="root"></div>
+
+<!-- Write Your TypeScript Module -->
+<script type="module-tsx">
+  import React from "react"; // <- This will be converted to https://esm.sh/react
+  import { createRoot } from "react-dom/client"; // <- This will also be converted automatically
+  import App from "./src/App.tsx"; // <- Your TypeScript module will also be compiled on the fly
+  import lib from "https://my.cdn.domain"; // <- Direct http import will NOT be compiled
+
+  const root = document.getElementById("root") as HTMLDivElement; // <- You can write TypeScript directly
+  createRoot(root).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+    // ^ You can also write JSX/TSX directly
+  );
+</script>
+<!-- OR -->
+<script type="module-tsx" src="./main.tsx"></script>
+```
+
+You publish the **source code**, and users can run it directly in the browser **without any build step**.
+
+```tsx
+// src/App.tsx
+export default function App() {
+  return <div>Hello, module-tsx!</div>;
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+//#region src/importmap.d.ts
+interface ImportMapData {
+  imports?: Record<string, string>;
+  scopes?: Record<string, Record<string, string>>;
+}
+//#endregion
+//#region src/module-tsx.d.ts
+interface ModuleTSXConfig {
+  /**
+   * The base URL to resolve relative module specifiers.
+   * This is typically the URL of the main script or the HTML page.
+   */
+  baseUrl?: string;
+  fetch?: (fullURL: string) => Promise<Response>;
+  importMap?: ImportMapData;
+  /**
+   * Given a bare specifier, return a full URL to load the module.
+   * This can be used to convert for example import "react" to import "https://esm.sh/react".
+   * If not provided, it will default to using "https://esm.sh/" as the base URL for bare specifiers.
+   * @default "https://esm.sh/"
+   */
+  resolveBareSpecifier?: string | ((specifier: string) => string);
+}
+interface ModuleTSXEventMap {
+  import: CustomEvent<{
+    id: string;
+  }>;
+  "import:error": CustomEvent<{
+    id: string;
+    error: any;
+  }>;
+  transform: CustomEvent<{
+    sourceUrl: string;
+  }>;
+  "transform:error": CustomEvent<{
+    sourceUrl: string;
+    error: any;
+  }>;
+}
+interface IModuleTSX extends EventTarget {
+  addEventListener<T extends keyof ModuleTSXEventMap>(type: T, listener: (this: ModuleTSX, ev: ModuleTSXEventMap[T]) => any, options?: boolean | AddEventListenerOptions): void;
+}
+declare class ModuleTSX extends EventTarget implements IModuleTSX {
+  readonly baseUrl: string;
+  readonly importMap: ImportMapData;
+  readonly fetch: (url: string) => Promise<Response>;
+  readonly resolveBareSpecifier: (specifier: string) => string;
+  private readonly sourceTracker;
+  private readonly fetchText;
+  constructor(config?: ModuleTSXConfig);
+  private emit;
+  import(id: string, options?: any): Promise<any>;
+  importCode(sourceUrl: string, code: string, options?: any): Promise<any>;
+  /** Transform module source code and return a blob URL with the transformed content */
+  private transformSourceModule;
+  private getLoaderByResourceType;
+  private tsxLoader;
+  private resolveSpecifier;
+  private resolveSpecifiers;
+}
+//#endregion
+//#region src/error.d.ts
+/** Custom error class for module-tsx */
+declare class ModuleTSXError extends Error {
+  constructor(message?: string, options?: ErrorOptions);
+}
+//#endregion
+//#region src/index.d.ts
+/**
+ * The singleton global instance of ModuleTSX.
+ */
+declare const instance: ModuleTSX;
+//#endregion
+export { ModuleTSX, ModuleTSXError, instance };

package/dist/index.js

@@ -0,0 +1,447 @@
+import ts from "typescript";
+
+//#region src/error.ts
+/** Custom error class for module-tsx */
+var ModuleTSXError = class ModuleTSXError extends Error {
+	constructor(message, options) {
+		super(message, options);
+		this.name = "ModuleTSXError";
+		if ("captureStackTrace" in Error) Error.captureStackTrace(this, ModuleTSXError);
+	}
+};
+/** Log warnings with consistent formatting */
+function warn(message, ...args) {
+	console.warn(`[module-tsx] ${message}`, ...args);
+}
+
+//#endregion
+//#region src/importmap.ts
+function parseImportMaps() {
+	const result = {
+		imports: {},
+		scopes: {}
+	};
+	const mappedSpecifiers = /* @__PURE__ */ new Set();
+	const scripts = document.querySelectorAll("script[type=\"importmap\"]");
+	for (const script of scripts) try {
+		const data = JSON.parse(script.textContent || "{}");
+		if (data.imports) {
+			for (const [specifier, url] of Object.entries(data.imports)) if (!mappedSpecifiers.has(specifier)) {
+				result.imports[specifier] = url;
+				mappedSpecifiers.add(specifier);
+			}
+		}
+		if (data.scopes) for (const [scope, imports] of Object.entries(data.scopes)) {
+			if (!result.scopes[scope]) result.scopes[scope] = {};
+			for (const [specifier, url] of Object.entries(imports)) {
+				const scopedKey = `${scope}::${specifier}`;
+				if (!mappedSpecifiers.has(scopedKey)) {
+					result.scopes[scope][specifier] = url;
+					mappedSpecifiers.add(scopedKey);
+				}
+			}
+		}
+	} catch (error) {
+		warn(`Failed to parse importmap script:`, error);
+	}
+	return result;
+}
+/**
+* Resolve specifier from import maps, checking scopes by specificity then global imports
+*/
+function resolveFromImportMap(specifier, importMaps, sourceUrl) {
+	if (sourceUrl && importMaps.scopes) {
+		const matchingScopes = Object.keys(importMaps.scopes).filter((scope) => sourceUrl.startsWith(scope)).sort((a, b) => b.length - a.length);
+		for (const scope of matchingScopes) {
+			const scopedImports = importMaps.scopes[scope];
+			if (scopedImports && scopedImports[specifier]) return scopedImports[specifier];
+		}
+	}
+	if (importMaps.imports && importMaps.imports[specifier]) return importMaps.imports[specifier];
+}
+
+//#endregion
+//#region src/loader.ts
+const cssLoader = (sourceUrl, sourceCode) => {
+	return `\
+const style = document.createElement("style");
+style.dataset.href = ${JSON.stringify(sourceUrl)}; // for debugging purposes
+style.textContent = ${JSON.stringify(sourceCode)};
+document.head.appendChild(style);
+`;
+};
+const cssModuleLoader = (sourceUrl, sourceCode) => {
+	const pathname = new URL(sourceUrl).pathname;
+	const filename = pathname.substring(pathname.lastIndexOf("/") + 1) || "index.css";
+	const { map, css } = cssToModule(sourceCode, filename.slice(0, filename.indexOf(".")).replace(/[^a-zA-Z0-9]/g, "_"));
+	return `\
+const style = document.createElement("style");
+style.dataset.href = ${JSON.stringify(sourceUrl)}; // for debugging purposes
+style.textContent = ${JSON.stringify(css)};
+document.head.appendChild(style);
+export default ${JSON.stringify(map)};
+`;
+};
+function cssToModule(cssString, prefix) {
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(cssString);
+	const jsonMap = {};
+	const getHash = (name) => {
+		const p = prefix ? `${prefix}_` : "";
+		if (!jsonMap[name]) jsonMap[name] = `${p}${name}_${Math.random().toString(36).slice(2, 7)}`;
+		return jsonMap[name];
+	};
+	const processRules = (ruleList) => {
+		for (const rule of ruleList) if (rule instanceof CSSStyleRule) rule.selectorText = rule.selectorText.replace(/\.([a-zA-Z_][\w-]*)/g, (_match, className) => {
+			return `.${getHash(className)}`;
+		});
+		else if (rule instanceof CSSGroupingRule) processRules(rule.cssRules);
+	};
+	processRules(sheet.cssRules);
+	return {
+		css: Array.from(sheet.cssRules).map((rule) => rule.cssText).join("\n"),
+		map: jsonMap
+	};
+}
+
+//#endregion
+//#region src/network.ts
+async function fetchResponse(input, init) {
+	const res = await fetch(input, init);
+	if (!res.ok) throw new ModuleTSXError(`Failed to fetch resource ${res.url}: ${res.status}`);
+	return res;
+}
+
+//#endregion
+//#region src/specifier.ts
+function isBareSpecifier(specifier) {
+	if (specifier.match(/^\.*\//)) return false;
+	try {
+		new URL(specifier);
+		return false;
+	} catch {
+		return true;
+	}
+}
+function isRelativeSpecifier(specifier) {
+	return specifier.startsWith(".") || specifier.startsWith("/");
+}
+function collectSpecifiers(sourceFile) {
+	const set = /* @__PURE__ */ new Set();
+	const visit = (node) => {
+		const addSpecifier = (literal) => {
+			if (literal) set.add(literal.text);
+		};
+		if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) addSpecifier(node.moduleSpecifier);
+		if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
+			const arg = node.arguments[0];
+			if (arg && ts.isStringLiteral(arg)) addSpecifier(arg);
+		}
+		if (ts.isExportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) addSpecifier(node.moduleSpecifier);
+		ts.forEachChild(node, visit);
+	};
+	visit(sourceFile);
+	return set;
+}
+function createRewriteImportTransformer(specifierMap) {
+	const rewriteSpecifier = (specifier) => {
+		return specifierMap.get(specifier) ?? specifier;
+	};
+	const transformer = (context) => {
+		const visitNode = (node) => {
+			if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+				const next = rewriteSpecifier(node.moduleSpecifier.text);
+				if (next !== node.moduleSpecifier.text) return ts.factory.updateImportDeclaration(node, node.modifiers, node.importClause, ts.factory.createStringLiteral(next), node.assertClause);
+			}
+			if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
+				const arg = node.arguments[0];
+				if (arg && ts.isStringLiteral(arg)) {
+					const next = rewriteSpecifier(arg.text);
+					if (next !== arg.text) return ts.factory.updateCallExpression(node, node.expression, node.typeArguments, [ts.factory.createStringLiteral(next), ...node.arguments.slice(1)]);
+				}
+			}
+			if (ts.isExportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+				const next = rewriteSpecifier(node.moduleSpecifier.text);
+				if (next !== node.moduleSpecifier.text) return ts.factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, ts.factory.createStringLiteral(next), node.assertClause);
+			}
+			return ts.visitEachChild(node, visitNode, context);
+		};
+		return (sf) => ts.visitNode(sf, visitNode);
+	};
+	return transformer;
+}
+
+//#endregion
+//#region src/react.ts
+/** Check if code uses JSX without React import */
+function needsReactImport(sourceFile) {
+	let hasJSX = false;
+	let hasReactVariable = false;
+	function visitNode(node) {
+		if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)) hasJSX = true;
+		if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+			if (node.importClause) {
+				if (node.importClause.name?.text === "React") hasReactVariable = true;
+				if (node.importClause.namedBindings && ts.isNamespaceImport(node.importClause.namedBindings)) {
+					if (node.importClause.namedBindings.name.text === "React") hasReactVariable = true;
+				}
+			}
+		}
+		if (ts.isVariableDeclaration(node) && node.name && ts.isIdentifier(node.name)) {
+			if (node.name.text === "React") hasReactVariable = true;
+		}
+		ts.forEachChild(node, visitNode);
+	}
+	visitNode(sourceFile);
+	return hasJSX && !hasReactVariable;
+}
+/** Add React import statement to the top */
+function addReactImport(sourceFile) {
+	let reactSpecifier = "react";
+	function findReactSpecifier(node) {
+		if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+			const specifier = node.moduleSpecifier.text;
+			if (specifier === "react" || /^react@/.test(specifier) || specifier.endsWith("/react") || /\/react@/.test(specifier)) {
+				reactSpecifier = specifier;
+				return;
+			}
+		}
+		ts.forEachChild(node, findReactSpecifier);
+	}
+	findReactSpecifier(sourceFile);
+	const statements = [ts.factory.createImportDeclaration(void 0, ts.factory.createImportClause(false, ts.factory.createIdentifier("React"), void 0), ts.factory.createStringLiteral(reactSpecifier), void 0), ...sourceFile.statements];
+	return ts.factory.updateSourceFile(sourceFile, statements, sourceFile.isDeclarationFile, sourceFile.referencedFiles, sourceFile.typeReferenceDirectives, sourceFile.hasNoDefaultLib, sourceFile.libReferenceDirectives);
+}
+
+//#endregion
+//#region src/source-tracker.ts
+var SourceTransformTracker = class {
+	sourceMap = /* @__PURE__ */ new Map();
+	inFlightSourceMap = /* @__PURE__ */ new Map();
+	blobMap = /* @__PURE__ */ new Map();
+	get(sourceType, sourceUrl) {
+		return this.sourceMap.get(this.getSourceKey(sourceType, sourceUrl));
+	}
+	set(sourceType, sourceUrl, blobUrl) {
+		this.sourceMap.set(this.getSourceKey(sourceType, sourceUrl), blobUrl);
+		this.blobMap.set(blobUrl, sourceUrl);
+	}
+	isInFlight(sourceType, sourceUrl) {
+		return this.inFlightSourceMap.has(this.getSourceKey(sourceType, sourceUrl));
+	}
+	getSourceUrlByBlob(blobUrl) {
+		return this.blobMap.get(blobUrl);
+	}
+	/** Deduplicates concurrent transforms for the same URL. */
+	runWithDedup(sourceType, sourceUrl, run) {
+		const sourceKey = this.getSourceKey(sourceType, sourceUrl);
+		const inFlight = this.inFlightSourceMap.get(sourceKey);
+		if (inFlight) return inFlight;
+		const task = run();
+		this.inFlightSourceMap.set(sourceKey, task);
+		task.finally(() => {
+			this.inFlightSourceMap.delete(sourceKey);
+		});
+		return task;
+	}
+	getSourceKey(sourceType, sourceUrl) {
+		return `${sourceType}:${sourceUrl}`;
+	}
+};
+
+//#endregion
+//#region src/ts.ts
+function createSourceFile(code, fileName) {
+	try {
+		return ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+	} catch (cause) {
+		throw new ModuleTSXError(`Failed to create typescript source file ${fileName}`, { cause });
+	}
+}
+function printSourceFile(sourceFile) {
+	try {
+		const code = ts.createPrinter({
+			newLine: ts.NewLineKind.LineFeed,
+			removeComments: false
+		}).printFile(sourceFile);
+		return ts.transpile(code, {
+			target: ts.ScriptTarget.Latest,
+			module: ts.ModuleKind.ESNext,
+			noCheck: true,
+			declaration: false,
+			jsx: ts.JsxEmit.React
+		});
+	} catch (cause) {
+		throw new ModuleTSXError(`Failed to print typescript source file ${sourceFile.fileName}`, { cause });
+	}
+}
+function transform(sourceFile, transformers) {
+	try {
+		const result = ts.transform(sourceFile, transformers);
+		const transformedFile = result.transformed[0];
+		result.dispose();
+		return transformedFile;
+	} catch (cause) {
+		throw new ModuleTSXError(`Failed to transform typescript source file ${sourceFile.fileName}`, { cause });
+	}
+}
+
+//#endregion
+//#region src/module-tsx.ts
+var ModuleTSX = class extends EventTarget {
+	baseUrl;
+	importMap;
+	fetch;
+	resolveBareSpecifier;
+	sourceTracker = new SourceTransformTracker();
+	fetchText = async (url) => {
+		return this.fetch(url).then((res) => res.text());
+	};
+	constructor(config) {
+		super();
+		this.baseUrl = config?.baseUrl ?? location.href;
+		this.importMap = config?.importMap ?? parseImportMaps();
+		this.fetch = config?.fetch ?? fetchResponse;
+		this.resolveBareSpecifier = typeof config?.resolveBareSpecifier === "function" ? config?.resolveBareSpecifier : (specifier) => (config?.resolveBareSpecifier ?? "https://esm.sh/") + specifier;
+	}
+	emit(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, { detail }));
+		this.dispatchEvent(new CustomEvent("*", { detail: {
+			type,
+			payload: detail
+		} }));
+	}
+	async import(id, options) {
+		this.emit("import", { id });
+		try {
+			if (isBareSpecifier(id)) {
+				const mappedSpecifier = resolveFromImportMap(id, this.importMap, this.baseUrl);
+				if (mappedSpecifier) id = mappedSpecifier;
+				else id = this.resolveBareSpecifier(id);
+			}
+			const url = isRelativeSpecifier(id) ? new URL(id, this.baseUrl).href : id;
+			const code = await this.fetchText(url);
+			return this.importCode(url, code, options);
+		} catch (error) {
+			this.emit("import:error", {
+				id,
+				error
+			});
+			throw error;
+		}
+	}
+	async importCode(sourceUrl, code, options) {
+		return await import(await this.transformSourceModule("esm", sourceUrl, code), options);
+	}
+	/** Transform module source code and return a blob URL with the transformed content */
+	async transformSourceModule(sourceType, sourceUrl, sourceCode) {
+		const cachedBlobUrl = this.sourceTracker.get(sourceType, sourceUrl);
+		if (cachedBlobUrl) return cachedBlobUrl;
+		return this.sourceTracker.runWithDedup(sourceType, sourceUrl, async () => {
+			const loader = this.getLoaderByResourceType(sourceType);
+			const code = `import.meta.url=${JSON.stringify(sourceUrl)};\n` + await loader(sourceUrl, sourceCode);
+			const blob = new Blob([code], { type: "text/javascript" });
+			const blobUrl = URL.createObjectURL(blob);
+			this.sourceTracker.set(sourceType, sourceUrl, blobUrl);
+			return blobUrl;
+		});
+	}
+	getLoaderByResourceType(type) {
+		switch (type) {
+			case "css": return cssLoader;
+			case "css-module": return cssModuleLoader;
+			case "esm": return this.tsxLoader.bind(this);
+			default: throw new ModuleTSXError(`Unsupported resource type: ${type}`);
+		}
+	}
+	async tsxLoader(sourceUrl, sourceCode) {
+		this.emit("transform", { sourceUrl });
+		try {
+			const sourceFile = createSourceFile(sourceCode, getFileName(sourceUrl));
+			const specifiers = collectSpecifiers(sourceFile);
+			const rewrittenSpecifiers = await this.resolveSpecifiers(specifiers, sourceUrl);
+			let workingSourceFile = sourceFile;
+			if (needsReactImport(workingSourceFile)) workingSourceFile = addReactImport(workingSourceFile);
+			const transformers = [createRewriteImportTransformer(rewrittenSpecifiers)];
+			return printSourceFile(transform(workingSourceFile, transformers));
+		} catch (error) {
+			this.emit("transform:error", {
+				sourceUrl,
+				error
+			});
+			throw error;
+		}
+	}
+	async resolveSpecifier(specifier, sourceUrl) {
+		const mappedSpecifier = resolveFromImportMap(specifier, this.importMap, sourceUrl);
+		if (mappedSpecifier) return mappedSpecifier;
+		const getCssUrl = async (fullURL) => {
+			return await this.transformSourceModule("css", fullURL, await this.fetchText(fullURL));
+		};
+		const toCDNUrl = (specifier) => {
+			const subpath = specifier.startsWith("@") ? specifier.split("/").slice(2).join("/") : specifier.split("/").slice(1).join("/");
+			const url = this.resolveBareSpecifier(specifier);
+			if (subpath.endsWith(".css")) return getCssUrl(url);
+			return url;
+		};
+		if (isRelativeSpecifier(specifier)) {
+			const targetUrl = new URL(specifier, sourceUrl);
+			if (targetUrl.pathname.endsWith(".module.css")) return await this.transformSourceModule("css-module", targetUrl.href, await this.fetchText(targetUrl.href));
+			else if (targetUrl.pathname.endsWith(".css")) return getCssUrl(targetUrl.href);
+			else if (targetUrl.pathname.endsWith(".wasm")) return targetUrl.href;
+			else {
+				if (this.sourceTracker.isInFlight("esm", targetUrl.href)) return targetUrl.href;
+				//! ^ transformSourceModule is recursive ^
+				return await this.transformSourceModule("esm", targetUrl.href, await this.fetchText(targetUrl.href));
+			}
+		} else if (specifier.startsWith("node:")) return `https://raw.esm.sh/@jspm/core/nodelibs/browser/${specifier.slice(5)}.js`;
+		else if (specifier.startsWith("npm:")) return toCDNUrl(specifier.slice(4));
+		else if (isBareSpecifier(specifier)) return toCDNUrl(specifier);
+		else return specifier;
+	}
+	async resolveSpecifiers(specifiers, sourceUrl) {
+		const resolved = /* @__PURE__ */ new Map();
+		const tasks = Array.from(specifiers).map(async (specifier) => {
+			const specifier2 = await this.resolveSpecifier(specifier, sourceUrl);
+			if (specifier !== specifier2) resolved.set(specifier, specifier2);
+		});
+		await Promise.all(tasks);
+		return resolved;
+	}
+};
+function getFileName(sourceUrl) {
+	try {
+		return new URL(sourceUrl).pathname;
+	} catch {
+		return "temp.tsx";
+	}
+}
+
+//#endregion
+//#region src/index.ts
+/**
+* The singleton global instance of ModuleTSX.
+*/
+const instance = new ModuleTSX();
+const TYPE_ATTRIBUTE_VALUE = "module-tsx";
+async function sideEffect() {
+	const importScript = async (script) => {
+		const src = script.src;
+		if (src) return instance.import(src);
+		else {
+			const code = script.innerHTML || "";
+			return instance.importCode(document.location.href, code);
+		}
+	};
+	for (const s of Array.from(document.querySelectorAll(`script[type="${TYPE_ATTRIBUTE_VALUE}"]`))) {
+		const script = s;
+		if (!script.async && script.defer) warn(`script with type="${TYPE_ATTRIBUTE_VALUE}" does not support defer attribute. Use async or no attribute instead.`);
+		for (const key in ["integrity", "crossorigin"]) if (script[key]) warn(`script with type="${TYPE_ATTRIBUTE_VALUE}" does not support ${key} attribute.`);
+		if (script.async) importScript(script);
+		else await importScript(script);
+	}
+}
+document.addEventListener("DOMContentLoaded", sideEffect);
+
+//#endregion
+export { ModuleTSX, ModuleTSXError, instance };