module-tsx 0.0.0

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+//#region src/op.d.ts
+/**
+ * Given a source URL and source code, transform the module and return a blob URL,
+ * where the blob URL's content is the transformed module code.
+ */
+declare function transformSourceModule(sourceUrl: string, sourceCode: string): Promise<string>;
+//#endregion
+export { transformSourceModule };

package/dist/index.mjs

@@ -0,0 +1,282 @@
+import ts from "typescript";
+
+//#region \0@oxc-project+runtime@0.110.0/helpers/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n) {
+		e(n);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+			}
+			function _throw(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+			}
+			_next(void 0);
+		});
+	};
+}
+
+//#endregion
+//#region src/network.ts
+function fetchModule(_x, _x2) {
+	return _fetchModule.apply(this, arguments);
+}
+function _fetchModule() {
+	_fetchModule = _asyncToGenerator(function* (input, init) {
+		const res = yield fetch(input, init);
+		if (!res.ok) throw new Error(`Failed to fetch module ${res.url}: ${res.status}`);
+		return res.text();
+	});
+	return _fetchModule.apply(this, arguments);
+}
+
+//#endregion
+//#region src/ts.ts
+const FILE_NAME = "temp.tsx";
+function createSourceFile(code, fileName = FILE_NAME) {
+	return ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+}
+function printSourceFile(sourceFile) {
+	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
+	});
+}
+function transform(sourceFile, transformers) {
+	const result = ts.transform(sourceFile, transformers);
+	const transformedFile = result.transformed[0];
+	result.dispose();
+	return transformedFile;
+}
+
+//#endregion
+//#region src/react.ts
+/**
+* Check if code uses JSX but missing 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) {
+				var _node$importClause$na;
+				if (((_node$importClause$na = node.importClause.name) === null || _node$importClause$na === void 0 ? void 0 : _node$importClause$na.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 at the top if missing
+*/
+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/op.ts
+/**
+* track blob URLs to their original source URLs
+*/
+const blobMap = /* @__PURE__ */ new Map();
+/**
+* track original source URLs to their transformed blob URLs
+*/
+const sourceMap = /* @__PURE__ */ new Map();
+function track(sourceUrl, blobUrl) {
+	sourceMap.set(sourceUrl, blobUrl);
+	blobMap.set(blobUrl, sourceUrl);
+}
+/**
+* Given a source URL and source code, transform the module and return a blob URL,
+* where the blob URL's content is the transformed module code.
+*/
+function transformSourceModule(_x, _x2) {
+	return _transformSourceModule.apply(this, arguments);
+}
+function _transformSourceModule() {
+	_transformSourceModule = _asyncToGenerator(function* (sourceUrl, sourceCode) {
+		if (sourceMap.has(sourceUrl)) return sourceMap.get(sourceUrl);
+		const code = `import.meta.url=${JSON.stringify(sourceUrl)};\n` + (yield rewriteModuleImport(sourceUrl, sourceCode));
+		const blob = new Blob([code], { type: "text/javascript" });
+		const blobUrl = URL.createObjectURL(blob);
+		track(sourceUrl, blobUrl);
+		return blobUrl;
+	});
+	return _transformSourceModule.apply(this, arguments);
+}
+function getFileName(sourceUrl) {
+	try {
+		return new URL(sourceUrl).pathname;
+	} catch (_unused) {
+		return "temp.tsx";
+	}
+}
+function rewriteModuleImport(_x3, _x4) {
+	return _rewriteModuleImport.apply(this, arguments);
+}
+function _rewriteModuleImport() {
+	_rewriteModuleImport = _asyncToGenerator(function* (sourceUrl, sourceCode) {
+		const sourceFile = createSourceFile(sourceCode, getFileName(sourceUrl));
+		const rewrittenSpecifiers = yield resolveRelativeSpecifiers(collectRelativeSpecifiers(sourceFile), sourceUrl);
+		let workingSourceFile = sourceFile;
+		if (needsReactImport(workingSourceFile)) workingSourceFile = addReactImport(workingSourceFile);
+		const transformers = [createRewriteImportTransformer(rewrittenSpecifiers)];
+		return printSourceFile(transform(workingSourceFile, transformers));
+	});
+	return _rewriteModuleImport.apply(this, arguments);
+}
+function isBareSpecifier(specifier) {
+	if (specifier.match(/^\.*\//)) return false;
+	try {
+		new URL(specifier);
+		return false;
+	} catch (_unused2) {
+		return true;
+	}
+}
+function isRelativeSpecifier(specifier) {
+	return specifier.startsWith(".") || specifier.startsWith("/");
+}
+function collectRelativeSpecifiers(sourceFile) {
+	const set = /* @__PURE__ */ new Set();
+	const visit = (node) => {
+		const addIfRelative = (literal) => {
+			if (literal && isRelativeSpecifier(literal.text)) set.add(literal.text);
+		};
+		if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) addIfRelative(node.moduleSpecifier);
+		if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
+			const arg = node.arguments[0];
+			if (arg && ts.isStringLiteral(arg)) addIfRelative(arg);
+		}
+		if (ts.isExportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) addIfRelative(node.moduleSpecifier);
+		ts.forEachChild(node, visit);
+	};
+	visit(sourceFile);
+	return set;
+}
+function resolveRelativeSpecifiers(_x6, _x7) {
+	return _resolveRelativeSpecifiers.apply(this, arguments);
+}
+function _resolveRelativeSpecifiers() {
+	_resolveRelativeSpecifiers = _asyncToGenerator(function* (specifiers, sourceUrl) {
+		const resolved = /* @__PURE__ */ new Map();
+		const tasks = Array.from(specifiers).map(function() {
+			var _ref = _asyncToGenerator(function* (specifier) {
+				const targetUrl = new URL(specifier, sourceUrl).toString();
+				const blobUrl = yield transformSourceModule(targetUrl, yield fetchModule(targetUrl));
+				resolved.set(specifier, blobUrl);
+			});
+			return function(_x5) {
+				return _ref.apply(this, arguments);
+			};
+		}());
+		yield Promise.all(tasks);
+		return resolved;
+	});
+	return _resolveRelativeSpecifiers.apply(this, arguments);
+}
+function createRewriteImportTransformer(replacements) {
+	const rewriteSpecifier = (specifier) => {
+		if (replacements.has(specifier)) return replacements.get(specifier);
+		if (specifier.startsWith("npm:")) return specifier.replace(/^npm:/, "https://esm.sh/");
+		if (specifier.startsWith("node:")) return `https://raw.esm.sh/@jspm/core/nodelibs/browser/${specifier.slice(5)}.js`;
+		if (isBareSpecifier(specifier)) return new URL(specifier, "https://esm.sh/").toString();
+		if (isRelativeSpecifier(specifier)) throw new Error("Unreachable");
+		return 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/index.ts
+const TYPE_ATTRIBUTE_VALUE = "module-tsx";
+function runScript(_x) {
+	return _runScript.apply(this, arguments);
+}
+function _runScript() {
+	_runScript = _asyncToGenerator(function* (script) {
+		return script.src ? import(yield transformSourceModule(script.src, yield fetchModule(script.src, { priority: script.fetchPriority }))) : import(yield transformSourceModule(location.href, script.innerHTML));
+	});
+	return _runScript.apply(this, arguments);
+}
+function sideEffect() {
+	return _sideEffect.apply(this, arguments);
+}
+function _sideEffect() {
+	_sideEffect = _asyncToGenerator(function* () {
+		for (const s of Array.from(document.querySelectorAll(`script[type="${TYPE_ATTRIBUTE_VALUE}"]`))) {
+			const script = s;
+			if (!script.async && script.defer) console.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]) console.warn(`script with type="${TYPE_ATTRIBUTE_VALUE}" does not support ${key} attribute.`);
+			if (script.async) runScript(script);
+			else yield runScript(script);
+		}
+	});
+	return _sideEffect.apply(this, arguments);
+}
+document.addEventListener("DOMContentLoaded", sideEffect);
+
+//#endregion
+export { transformSourceModule };