@codespark/framework 1.0.0

package/dist/react.js

@@ -0,0 +1,358 @@
+import { parse } from "@babel/parser";
+import { Framework as Framework$1 } from "@codespark/framework";
+import MagicString from "magic-string";
+import { availablePresets, transform } from "@babel/standalone";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+
+//#region src/loaders/types.ts
+let LoaderType = /* @__PURE__ */ function(LoaderType$1) {
+	LoaderType$1["ESModule"] = "esmodule";
+	LoaderType$1["Style"] = "style";
+	LoaderType$1["Script"] = "script";
+	LoaderType$1["Asset"] = "asset";
+	return LoaderType$1;
+}({});
+
+//#endregion
+//#region src/loaders/css-loader.ts
+var CSSLoader = class {
+	name = "css-loader";
+	test = /\.css$/;
+	constructor(config) {
+		this.config = config;
+	}
+	transform(source, ctx) {
+		const { enabled = true, match } = this.config?.tailwind || {};
+		const isTailwind = match ? match.test(ctx.resourcePath) : ctx.resourcePath.endsWith(".tw.css");
+		const imports = [];
+		const content = source.replace(/@import\s+(?:url\()?['"]?([^'")]+)['"]?\)?\s*;?/g, (_, importPath) => {
+			const resolved = ctx.resolve(importPath);
+			if (resolved) imports.push(resolved);
+			return "";
+		});
+		return {
+			type: LoaderType.Style,
+			content,
+			imports,
+			attributes: enabled && isTailwind ? { type: "text/tailwindcss" } : {}
+		};
+	}
+};
+
+//#endregion
+//#region src/loaders/es-loader.ts
+const parseCode = (code) => parse(code, {
+	sourceType: "module",
+	plugins: ["jsx", "typescript"]
+}).program.body;
+const collectIdentifiers = (ast) => {
+	const ids = /* @__PURE__ */ new Set();
+	const walk = (node) => {
+		if (!node || typeof node !== "object") return;
+		if (node.type === "Identifier" || node.type === "JSXIdentifier") ids.add(node.name);
+		for (const k of Object.keys(node)) {
+			if (k === "loc" || k === "range") continue;
+			const val = node[k];
+			if (Array.isArray(val)) val.forEach(walk);
+			else if (val && typeof val === "object") walk(val);
+		}
+	};
+	ast.forEach(walk);
+	return ids;
+};
+const analyzeImports = (ast) => {
+	const imports = ast.filter((node) => node.type === "ImportDeclaration");
+	const usedIds = collectIdentifiers(ast.filter((node) => node.type !== "ImportDeclaration"));
+	const importMap = /* @__PURE__ */ new Map();
+	imports.forEach((imp) => {
+		if (imp.importKind === "type") return;
+		imp.specifiers.forEach((spec) => {
+			if (spec.type === "ImportSpecifier" && spec.importKind === "type") return;
+			importMap.set(spec.local.name, imp.source.value);
+		});
+	});
+	const usedSources = /* @__PURE__ */ new Set();
+	usedIds.forEach((id) => {
+		if (importMap.has(id)) usedSources.add(importMap.get(id));
+	});
+	return {
+		imports,
+		usedSources
+	};
+};
+const buildExternalDeps = (imports, usedSources) => {
+	const externals = /* @__PURE__ */ new Map();
+	imports.forEach((imp) => {
+		if (imp.importKind === "type") return;
+		const source = imp.source.value;
+		if (!usedSources.has(source) || source.startsWith(".") || source.startsWith("/")) return;
+		const namedImports = imp.specifiers.filter((spec) => spec.type === "ImportSpecifier" && spec.importKind !== "type").map((spec) => spec.imported.name);
+		const existing = externals.get(source);
+		if (existing) namedImports.forEach((name) => existing.imported.add(name));
+		else externals.set(source, {
+			name: source,
+			imported: new Set(namedImports)
+		});
+	});
+	return [...externals.values()].map((dep) => ({
+		...dep,
+		imported: [...dep.imported]
+	}));
+};
+var ESLoader = class {
+	name = "es-loader";
+	test = /\.(tsx?|jsx?)$/;
+	jsxPreset;
+	isTSX;
+	constructor(options) {
+		const { jsxPreset, isTSX = false } = options || {};
+		this.jsxPreset = jsxPreset;
+		this.isTSX = isTSX;
+	}
+	transform(source, ctx) {
+		const { imports, usedSources } = analyzeImports(parseCode(source));
+		const externals = buildExternalDeps(imports, usedSources);
+		const dependencies = {};
+		for (const imp of imports) {
+			if (imp.importKind === "type") continue;
+			const importPath = imp.source.value;
+			if (imp.specifiers.length === 0) {
+				const resolved$1 = ctx.resolve(importPath);
+				if (resolved$1) dependencies[importPath] = resolved$1;
+				continue;
+			}
+			if (!usedSources.has(importPath)) continue;
+			const resolved = ctx.resolve(importPath);
+			if (resolved) dependencies[importPath] = resolved;
+		}
+		const { typescript } = availablePresets;
+		const defaultPresets = [typescript, {
+			isTSX: this.isTSX,
+			allExtensions: true
+		}];
+		const { code } = transform(source, {
+			filename: ctx.resourcePath,
+			presets: this.jsxPreset ? [this.jsxPreset, defaultPresets] : [defaultPresets]
+		});
+		return {
+			type: LoaderType.ESModule,
+			content: code || "",
+			dependencies,
+			externals
+		};
+	}
+};
+
+//#endregion
+//#region src/loaders/json-loader.ts
+var JSONLoader = class {
+	name = "json-loader";
+	test = /\.json$/;
+	transform(source) {
+		return {
+			type: LoaderType.ESModule,
+			content: `export default ${source};`,
+			dependencies: {},
+			externals: []
+		};
+	}
+};
+
+//#endregion
+//#region src/loaders/markdown-loader.ts
+var MarkdownLoader = class {
+	name = "markdown-loader";
+	test = /\.md$/;
+	transform(source) {
+		const html = DOMPurify.sanitize(marked.parse(source, { async: false }));
+		return {
+			type: LoaderType.Asset,
+			content: html
+		};
+	}
+};
+
+//#endregion
+//#region src/react/analyze.ts
+const EXTENSIONS = [
+	".tsx",
+	".ts",
+	".jsx",
+	".js"
+];
+const LOADERS = [
+	new ESLoader({
+		jsxPreset: [availablePresets.react, { runtime: "automatic" }],
+		isTSX: true
+	}),
+	new CSSLoader(),
+	new JSONLoader(),
+	new MarkdownLoader()
+];
+function matchLoader(path) {
+	return LOADERS.find((loader) => loader.test.test(path)) ?? null;
+}
+function getOutputList(outputs, type) {
+	return outputs.get(type);
+}
+function createOutputsMap() {
+	const outputs = /* @__PURE__ */ new Map();
+	outputs.set(LoaderType.ESModule, []);
+	outputs.set(LoaderType.Style, []);
+	outputs.set(LoaderType.Script, []);
+	outputs.set(LoaderType.Asset, []);
+	return outputs;
+}
+function resolve(source, from, files) {
+	if (!source.startsWith(".") && !source.startsWith("/")) return null;
+	const fromDir = from.split("/").slice(0, -1);
+	for (const part of source.split("/")) if (part === "..") fromDir.pop();
+	else if (part !== ".") fromDir.push(part);
+	const resolved = fromDir.join("/") || ".";
+	if (files[resolved] !== void 0) return resolved;
+	for (const ext of EXTENSIONS) if (files[resolved + ext] !== void 0) return resolved + ext;
+	for (const ext of EXTENSIONS) {
+		const indexPath = `${resolved}/index${ext}`;
+		if (files[indexPath] !== void 0) return indexPath;
+	}
+	return null;
+}
+function processFile(path, files, outputs, visited) {
+	if (visited.has(path)) return;
+	visited.add(path);
+	const source = files[path];
+	if (source === void 0) return;
+	const loader = matchLoader(path);
+	if (!loader) return;
+	const output = loader.transform(source, {
+		resourcePath: path,
+		getSource: (p) => files[p],
+		resolve: (src) => resolve(src, path, files)
+	});
+	switch (output.type) {
+		case LoaderType.ESModule: {
+			const { content, dependencies, externals } = output;
+			getOutputList(outputs, LoaderType.ESModule).push({
+				path,
+				content,
+				dependencies,
+				externals
+			});
+			for (const depPath of Object.values(dependencies)) processFile(depPath, files, outputs, visited);
+			break;
+		}
+		case LoaderType.Style: {
+			const { content, imports, attributes } = output;
+			getOutputList(outputs, LoaderType.Style).push({
+				path,
+				content,
+				imports,
+				attributes
+			});
+			for (const depPath of imports) processFile(depPath, files, outputs, visited);
+			break;
+		}
+		default: {
+			const { content } = output;
+			getOutputList(outputs, LoaderType.ESModule).push({
+				path,
+				content: `import { jsx as _jsx } from 'react/jsx-runtime';
+export default function MarkdownContent() {
+  return _jsx('div', { dangerouslySetInnerHTML: { __html: ${JSON.stringify(content)} } });
+}`,
+				dependencies: {},
+				externals: []
+			});
+		}
+	}
+}
+function analyze(entry, files) {
+	const outputs = createOutputsMap();
+	processFile(entry, files, outputs, /* @__PURE__ */ new Set());
+	return outputs;
+}
+
+//#endregion
+//#region src/react/index.ts
+var Framework = class extends Framework$1 {
+	name = "react";
+	imports = {
+		react: "https://esm.sh/react@18.2.0",
+		"react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
+		"react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
+	};
+	outputs = /* @__PURE__ */ new Map();
+	blobUrlMap = /* @__PURE__ */ new Map();
+	analyze(entry, files) {
+		this.outputs = analyze(entry, files);
+	}
+	compile() {
+		const transformed = this.transformModulesToBlob([...this.getOutput(LoaderType.ESModule)].reverse());
+		const builder = this.createBuilder(transformed);
+		const ast = parse(transformed, {
+			sourceType: "module",
+			plugins: ["jsx", "typescript"]
+		}).program.body;
+		let name;
+		for (const node of ast) if (node.type === "ExportNamedDeclaration" && node.declaration?.type === "FunctionDeclaration") name = node.declaration?.id?.name;
+		else if (node.type === "ExportDefaultDeclaration") {
+			const declaration = node.declaration;
+			switch (declaration.type) {
+				case "Identifier":
+					name = declaration.name;
+					break;
+				case "ArrowFunctionExpression":
+					if (declaration.async) throw new Error("Export an async function");
+					name = "App";
+					builder.update(declaration.start, declaration.body.start - 1, "function App() ");
+					break;
+				case "FunctionDeclaration":
+					if (declaration.async) throw new Error("Export an async function");
+					if (declaration.id) name = declaration.id.name;
+					else {
+						name = "App";
+						builder.update(declaration.start, declaration.body.start - 1, "function App() ");
+					}
+					break;
+				default: throw new Error(`Default export type is invalid: expect a FunctionExpression but got ${declaration.type}`);
+			}
+		}
+		builder.async(`const [{ createRoot }, { jsx }] = await Promise.all([import('react-dom/client'), import('react/jsx-runtime')]);
+    window.__root__ = window.__root__ || createRoot(${builder.root});
+    window.__root__.render(${name ? `jsx(${name}, {})` : "null"});`);
+		return builder.toString();
+	}
+	transformModulesToBlob(modules) {
+		let entryCode = "";
+		modules.forEach((mod, index) => {
+			const code = this.transformCodeWithBlobUrls(mod);
+			if (index === modules.length - 1) entryCode = code;
+			else {
+				const blob = new Blob([code], { type: "application/javascript" });
+				this.blobUrlMap.set(mod.path, URL.createObjectURL(blob));
+			}
+		});
+		return entryCode;
+	}
+	transformCodeWithBlobUrls(mod) {
+		const s = new MagicString(mod.content);
+		const ast = parse(mod.content, {
+			sourceType: "module",
+			plugins: ["jsx", "typescript"]
+		}).program.body;
+		for (const node of ast) {
+			if (node.type !== "ImportDeclaration") continue;
+			const resolved = mod.dependencies[node.source.value];
+			if (!resolved) continue;
+			const blobUrl = this.blobUrlMap.get(resolved);
+			if (blobUrl) s.update(node.source.start + 1, node.source.end - 1, blobUrl);
+			else s.remove(node.start, node.end);
+		}
+		return s.toString();
+	}
+};
+const react = new Framework();
+
+//#endregion
+export { Framework, react };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@codespark/framework",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Framework registration API for codespark ecosystem",
+  "keywords": [
+    "framework-system",
+    "react",
+    "markdown",
+    "html",
+    "codespark"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run"
+  },
+  "author": "TonyL1u",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codesparkjs/codespark.git",
+    "directory": "packages/framework"
+  },
+  "homepage": "https://codesparkjs.com",
+  "dependencies": {
+    "@babel/parser": "^7.28.5",
+    "@babel/standalone": "^7.28.5",
+    "@mdx-js/mdx": "^3.1.1",
+    "dom-serializer": "^2.0.0",
+    "dompurify": "^3.3.1",
+    "htmlparser2": "^10.1.0",
+    "magic-string": "^0.30.21",
+    "marked": "^17.0.1"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.28.5",
+    "@types/babel__standalone": "^7.1.9",
+    "@types/node": "^22.19.2",
+    "domhandler": "^5.0.3",
+    "tsdown": "^0.17.3"
+  }
+}