@codespark/framework 1.0.0

package/dist/html.d.ts

@@ -0,0 +1,66 @@
+import { Framework as Framework$1 } from "@codespark/framework";
+import MagicString from "magic-string";
+
+//#region src/loaders/types.d.ts
+declare enum LoaderType {
+  ESModule = "esmodule",
+  Style = "style",
+  Script = "script",
+  Asset = "asset",
+}
+interface BaseLoaderOutput<T extends LoaderType> {
+  type: T;
+  content: string;
+}
+interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
+  dependencies: Record<string, string>;
+  externals: {
+    name: string;
+    imported: string[];
+  }[];
+}
+interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
+  imports: string[];
+  href?: string;
+  attributes?: Record<string, string>;
+}
+interface ScriptLoaderOutput extends BaseLoaderOutput<LoaderType.Script> {
+  src?: string;
+  attributes?: Record<string, string>;
+}
+type AssetLoaderOutput = BaseLoaderOutput<LoaderType.Asset>;
+type LoaderOutput<T extends LoaderType> = Extract<ESModuleLoaderOutput | StyleLoaderOutput | ScriptLoaderOutput | AssetLoaderOutput, {
+  type: T;
+}>;
+//#endregion
+//#region src/registry.d.ts
+type Output<T extends LoaderType = LoaderType> = Omit<LoaderOutput<T>, 'type'> & {
+  path: string;
+};
+type Outputs = Map<LoaderType, Output[]>;
+//#endregion
+//#region src/html/index.d.ts
+interface FrameworkConfig {
+  liteMode?: {
+    enabled?: boolean;
+    htmlEntry?: string;
+    scriptEntry?: string;
+    styleEntry?: string;
+  };
+}
+declare class Framework extends Framework$1 {
+  private config?;
+  readonly name = "html";
+  readonly imports: {};
+  outputs: Outputs;
+  private blobUrlMap;
+  constructor(config?: FrameworkConfig | undefined);
+  analyze(entry: string, files: Record<string, string>): void;
+  compile(): string;
+  private wrapInLiteModeTemplate;
+  private transformModulesToBlob;
+  private transformCodeWithBlobUrls;
+}
+declare const html: Framework;
+//#endregion
+export { Framework, FrameworkConfig, html };

package/dist/html.js

@@ -0,0 +1,442 @@
+import { parse } from "@babel/parser";
+import { Framework as Framework$1 } from "@codespark/framework";
+import MagicString from "magic-string";
+import { render } from "dom-serializer";
+import { DomUtils, parseDocument } from "htmlparser2";
+import { availablePresets, transform } from "@babel/standalone";
+
+//#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/html/analyze.ts
+const LOADERS = {
+	es: new ESLoader(),
+	css: new CSSLoader()
+};
+function isExternalUrl(url) {
+	return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//");
+}
+function getTextContent(element) {
+	return element.children.filter((child) => child.type === "text").map((child) => child.data).join("").trim();
+}
+function extractAttributes(attribs, excludeKeys) {
+	const filtered = Object.fromEntries(Object.entries(attribs).filter(([key]) => !excludeKeys.includes(key)));
+	return Object.keys(filtered).length > 0 ? filtered : void 0;
+}
+function createLoaderContext(files) {
+	return {
+		getSource: (path) => files[path],
+		resolve: (src) => files[src] !== void 0 ? src : null
+	};
+}
+function parseHTML(html$1) {
+	const doc = parseDocument(html$1);
+	const elements = [];
+	const scripts = DomUtils.getElementsByTagName("script", doc);
+	for (const script of scripts) {
+		const src = script.attribs.src;
+		elements.push({
+			type: "script",
+			isModule: script.attribs.type === "module",
+			src,
+			content: src ? void 0 : getTextContent(script),
+			attributes: extractAttributes(script.attribs, ["src", "type"])
+		});
+	}
+	const styles = DomUtils.getElementsByTagName("style", doc);
+	for (const style of styles) elements.push({
+		type: "style",
+		content: getTextContent(style),
+		attributes: extractAttributes(style.attribs, [])
+	});
+	const links = DomUtils.getElementsByTagName("link", doc);
+	for (const link of links) {
+		if (link.attribs.rel !== "stylesheet" || !link.attribs.href) continue;
+		elements.push({
+			type: "link",
+			href: link.attribs.href,
+			attributes: extractAttributes(link.attribs, ["href", "rel"])
+		});
+	}
+	const bodies = DomUtils.getElementsByTagName("body", doc);
+	const container = bodies.length > 0 ? bodies[0] : doc;
+	const tagsToRemove = [
+		...DomUtils.getElementsByTagName("script", container),
+		...DomUtils.getElementsByTagName("style", container),
+		...DomUtils.getElementsByTagName("link", container)
+	];
+	for (const tag of tagsToRemove) DomUtils.removeElement(tag);
+	return {
+		elements,
+		bodyContent: render(DomUtils.getChildren(container)).trim()
+	};
+}
+function processESModule(path, files, outputs, visited = /* @__PURE__ */ new Set()) {
+	if (visited.has(path)) return;
+	visited.add(path);
+	const source = files[path];
+	if (source === void 0) return;
+	const ctx = createLoaderContext(files);
+	const output = LOADERS.es.transform(source, {
+		resourcePath: path,
+		...ctx
+	});
+	getOutputArray(outputs, LoaderType.ESModule).push({
+		path,
+		content: output.content,
+		dependencies: output.dependencies,
+		externals: output.externals
+	});
+	for (const depPath of Object.values(output.dependencies)) processESModule(depPath, files, outputs, visited);
+}
+function processStylesheet(path, files, outputs, visited = /* @__PURE__ */ new Set()) {
+	if (visited.has(path)) return;
+	visited.add(path);
+	const source = files[path];
+	if (source === void 0) return;
+	const ctx = createLoaderContext(files);
+	const output = LOADERS.css.transform(source, {
+		resourcePath: path,
+		...ctx
+	});
+	getOutputArray(outputs, LoaderType.Style).push({
+		path,
+		content: output.content,
+		imports: output.imports,
+		attributes: output.attributes
+	});
+	for (const depPath of output.imports) processStylesheet(depPath, files, outputs, visited);
+}
+function getOutputArray(outputs, type) {
+	return outputs.get(type);
+}
+function createOutputs() {
+	const outputs = /* @__PURE__ */ new Map();
+	outputs.set(LoaderType.ESModule, []);
+	outputs.set(LoaderType.Style, []);
+	outputs.set(LoaderType.Script, []);
+	outputs.set(LoaderType.Asset, []);
+	return outputs;
+}
+function processScriptElement(el, entry, files, outputs, visited = /* @__PURE__ */ new Set()) {
+	if (el.isModule) processModuleScript(el, entry, files, outputs, visited);
+	else processRegularScript(el, entry, files, outputs);
+}
+function processModuleScript(el, entry, files, outputs, visited = /* @__PURE__ */ new Set()) {
+	if (el.src) {
+		if (isExternalUrl(el.src)) getOutputArray(outputs, LoaderType.Script).push({
+			path: el.src,
+			content: "",
+			src: el.src,
+			attributes: {
+				...el.attributes,
+				type: "module"
+			}
+		});
+		else if (files[el.src] !== void 0) processESModule(el.src, files, outputs, visited);
+		return;
+	}
+	if (!el.content) return;
+	const virtualPath = `${entry}#inline-module-${getOutputArray(outputs, LoaderType.ESModule).length}`;
+	const ctx = createLoaderContext(files);
+	const output = LOADERS.es.transform(el.content, {
+		resourcePath: virtualPath,
+		...ctx
+	});
+	getOutputArray(outputs, LoaderType.ESModule).push({
+		path: virtualPath,
+		content: output.content,
+		dependencies: output.dependencies,
+		externals: output.externals
+	});
+	for (const depPath of Object.values(output.dependencies)) processESModule(depPath, files, outputs, visited);
+}
+function processRegularScript(el, entry, files, outputs) {
+	if (el.src) {
+		if (isExternalUrl(el.src)) getOutputArray(outputs, LoaderType.Script).push({
+			path: el.src,
+			content: "",
+			src: el.src,
+			attributes: el.attributes
+		});
+		else if (files[el.src] !== void 0) getOutputArray(outputs, LoaderType.Script).push({
+			path: el.src,
+			content: files[el.src],
+			attributes: el.attributes
+		});
+		return;
+	}
+	if (!el.content) return;
+	const virtualPath = `${entry}#inline-script-${getOutputArray(outputs, LoaderType.Script).length}`;
+	getOutputArray(outputs, LoaderType.Script).push({
+		path: virtualPath,
+		content: el.content,
+		attributes: el.attributes
+	});
+}
+function processStyleElement(el, entry, outputs) {
+	if (!el.content) return;
+	const virtualPath = `${entry}#inline-style-${getOutputArray(outputs, LoaderType.Style).length}`;
+	getOutputArray(outputs, LoaderType.Style).push({
+		path: virtualPath,
+		content: el.content,
+		imports: [],
+		attributes: el.attributes
+	});
+}
+function processLinkElement(el, files, outputs, visited = /* @__PURE__ */ new Set()) {
+	if (!el.href) return;
+	if (isExternalUrl(el.href)) getOutputArray(outputs, LoaderType.Style).push({
+		path: el.href,
+		content: "",
+		imports: [],
+		href: el.href,
+		attributes: el.attributes
+	});
+	else if (files[el.href] !== void 0) processStylesheet(el.href, files, outputs, visited);
+}
+function analyze(entry, files) {
+	const outputs = createOutputs();
+	const html$1 = files[entry];
+	if (!html$1) return outputs;
+	const { elements, bodyContent } = parseHTML(html$1);
+	for (const el of elements) if (el.type === "script") processScriptElement(el, entry, files, outputs);
+	else if (el.type === "style") processStyleElement(el, entry, outputs);
+	else if (el.type === "link") processLinkElement(el, files, outputs);
+	if (bodyContent) getOutputArray(outputs, LoaderType.Asset).push({
+		path: entry,
+		content: bodyContent
+	});
+	return outputs;
+}
+
+//#endregion
+//#region src/html/index.ts
+function serializeAttributes(attrs) {
+	if (!attrs || Object.keys(attrs).length === 0) return "";
+	return Object.entries(attrs).map(([key, value]) => value === "" ? ` ${key}` : ` ${key}="${value}"`).join("");
+}
+var Framework = class extends Framework$1 {
+	name = "html";
+	imports = {};
+	outputs = /* @__PURE__ */ new Map();
+	blobUrlMap = /* @__PURE__ */ new Map();
+	constructor(config) {
+		super();
+		this.config = config;
+	}
+	analyze(entry, files) {
+		const { enabled, htmlEntry = entry } = this.config?.liteMode ?? {};
+		if (enabled) this.outputs = analyze(entry, {
+			...files,
+			[htmlEntry]: this.wrapInLiteModeTemplate(files[htmlEntry] ?? "")
+		});
+		else this.outputs = analyze(entry, files);
+	}
+	compile() {
+		const builder = this.createBuilder();
+		const assets = this.getOutput(LoaderType.Asset);
+		const styles = this.getOutput(LoaderType.Style);
+		const scripts = this.getOutput(LoaderType.Script);
+		const modules = this.getOutput(LoaderType.ESModule);
+		let htmlContent = assets.map((a) => a.content).join("");
+		for (const style of styles) if (style.href) htmlContent += `<link${serializeAttributes(style.attributes)} rel="stylesheet" href="${style.href}">`;
+		else htmlContent += `<style${serializeAttributes(style.attributes)}>${style.content}</style>`;
+		for (const script of scripts) if (script.src) htmlContent += `<script${serializeAttributes(script.attributes)} src="${script.src}"><\/script>`;
+		else htmlContent += `<script${serializeAttributes(script.attributes)}>${script.content}<\/script>`;
+		if (modules.length > 0) {
+			const entryCode = this.transformModulesToBlob([...modules].reverse());
+			if (entryCode) htmlContent += `<script type="module">${entryCode}<\/script>`;
+		}
+		this.outputs.set(LoaderType.Style, []);
+		this.outputs.set(LoaderType.Script, []);
+		return builder.setHTML(JSON.stringify(htmlContent), {
+			target: "body",
+			activateScripts: scripts.length > 0 || modules.length > 0
+		}).done();
+	}
+	wrapInLiteModeTemplate(htmlFragment) {
+		const { scriptEntry = "./index.js", styleEntry = "./index.css" } = this.config?.liteMode ?? {};
+		return `<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="${styleEntry}">
+  <script type="module" src="${scriptEntry}"><\/script>
+</head>
+<body>
+${htmlFragment}
+</body>
+</html>`;
+	}
+	transformModulesToBlob(modules) {
+		let entryCode = "";
+		for (let index = 0; index < modules.length; index++) {
+			const mod = modules[index];
+			const isEntry = index === modules.length - 1;
+			const code = this.transformCodeWithBlobUrls(mod);
+			if (isEntry) 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 html = new Framework();
+
+//#endregion
+export { Framework, html };

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import MagicString from "magic-string";
+
+//#region src/builder.d.ts
+declare class RuntimeBuilder {
+  private s;
+  root: string;
+  constructor(code?: string | MagicString);
+  toString(): string;
+  update(start: number, end: number, content: string): this;
+  remove(start: number, end: number): this;
+  setHTML(content: string, options?: {
+    target?: 'root' | 'body';
+    activateScripts?: boolean;
+  }): this;
+  append(code: string): this;
+  prepend(code: string): this;
+  done(): string;
+  async(code: string): this;
+}
+//#endregion
+//#region src/loaders/types.d.ts
+declare enum LoaderType {
+  ESModule = "esmodule",
+  Style = "style",
+  Script = "script",
+  Asset = "asset",
+}
+interface BaseLoaderOutput<T extends LoaderType> {
+  type: T;
+  content: string;
+}
+interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
+  dependencies: Record<string, string>;
+  externals: {
+    name: string;
+    imported: string[];
+  }[];
+}
+interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
+  imports: string[];
+  href?: string;
+  attributes?: Record<string, string>;
+}
+interface ScriptLoaderOutput extends BaseLoaderOutput<LoaderType.Script> {
+  src?: string;
+  attributes?: Record<string, string>;
+}
+type AssetLoaderOutput = BaseLoaderOutput<LoaderType.Asset>;
+type LoaderOutput<T extends LoaderType> = Extract<ESModuleLoaderOutput | StyleLoaderOutput | ScriptLoaderOutput | AssetLoaderOutput, {
+  type: T;
+}>;
+//#endregion
+//#region src/registry.d.ts
+type Output<T extends LoaderType = LoaderType> = Omit<LoaderOutput<T>, 'type'> & {
+  path: string;
+};
+type Outputs = Map<LoaderType, Output[]>;
+declare abstract class Framework {
+  abstract readonly name: string;
+  abstract readonly imports: Record<string, string>;
+  abstract outputs: Outputs;
+  abstract analyze(entry: string, files: Record<string, string>): void;
+  abstract compile(): string;
+  protected createBuilder(init?: string): RuntimeBuilder;
+  getOutput<T extends LoaderType>(type: T): Output<T>[];
+}
+declare class FrameworkRegistry {
+  private frameworks;
+  register(framework: Framework, name?: string): void;
+  get(name: string): Framework | undefined;
+  list(): string[];
+}
+declare const registry: FrameworkRegistry;
+declare function registerFramework(framework: Framework, name?: string): void;
+//#endregion
+export { Framework, type Output, type Outputs, registerFramework, registry };

package/dist/index.js

@@ -0,0 +1,87 @@
+import MagicString from "magic-string";
+
+//#region src/builder.ts
+var RuntimeBuilder = class {
+	s;
+	root = `document.getElementById('root')`;
+	constructor(code = "") {
+		this.s = typeof code === "string" ? new MagicString(code) : code;
+	}
+	toString() {
+		return this.s.toString();
+	}
+	update(start, end, content) {
+		this.s.update(start, end, content);
+		return this;
+	}
+	remove(start, end) {
+		this.s.remove(start, end);
+		return this;
+	}
+	setHTML(content, options) {
+		const container = options?.target === "body" ? "document.body" : `document.getElementById('root')`;
+		this.s.append(`${container}.innerHTML = ${content};`);
+		if (options?.activateScripts) this.s.append(`
+${container}.querySelectorAll('script').forEach(old => {
+  const el = document.createElement('script');
+  [...old.attributes].forEach(a => el.setAttribute(a.name, a.value));
+  el.textContent = old.textContent;
+  old.replaceWith(el);
+});`);
+		return this;
+	}
+	append(code) {
+		this.s.append(code);
+		return this;
+	}
+	prepend(code) {
+		this.s.prepend(code);
+		return this;
+	}
+	done() {
+		this.s.append("window.__render_complete__?.();\nwindow.__next__?.();");
+		return this.s.toString();
+	}
+	async(code) {
+		this.s.append(`
+;(async () => {
+  try {
+    ${code}
+    window.__render_complete__?.();
+  } finally {
+    window.__next__?.();
+  }
+})();`);
+		return this;
+	}
+};
+
+//#endregion
+//#region src/registry.ts
+var Framework = class {
+	createBuilder(init) {
+		return new RuntimeBuilder(init);
+	}
+	getOutput(type) {
+		return this.outputs.get(type) ?? [];
+	}
+};
+var FrameworkRegistry = class {
+	frameworks = /* @__PURE__ */ new Map();
+	register(framework, name) {
+		this.frameworks.set(name ?? framework.name, framework);
+	}
+	get(name) {
+		return this.frameworks.get(name);
+	}
+	list() {
+		return Array.from(this.frameworks.keys());
+	}
+};
+const registry = new FrameworkRegistry();
+function registerFramework(framework, name) {
+	registry.register(framework, name);
+}
+
+//#endregion
+export { Framework, registerFramework, registry };