@codespark/framework 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TonyL1u
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @codespark/framework
+
+Core framework abstraction for the [Codespark](https://codesparkjs.com) ecosystem. Provides a unified API for analyzing and compiling code across different frameworks (React, HTML, Markdown).
+
+## Documentation
+
+Visit [https://codesparkjs.com/docs/framework](https://codesparkjs.com/docs/framework) to view the documentation.
+
+## Installation
+
+```bash
+npm install @codespark/framework
+# or
+pnpm add @codespark/framework
+```
+
+## Usage
+
+### Using Built-in Frameworks
+
+```ts
+import { react } from '@codespark/framework/react';
+import { html } from '@codespark/framework/html';
+import { markdown } from '@codespark/framework/markdown';
+
+// Analyze and compile React code
+const files = {
+  './App.tsx': `
+    export default function App() {
+      return <h1>Hello World</h1>;
+    }
+  `
+};
+
+react.analyze('./App.tsx', files);
+const compiled = react.compile();
+```
+
+### Registering Frameworks
+
+```ts
+import { registerFramework, registry } from '@codespark/framework';
+import { react } from '@codespark/framework/react';
+
+// Register a framework
+registerFramework(react);
+
+// Get a registered framework
+const framework = registry.get('react');
+
+// List all registered frameworks
+const frameworks = registry.list(); // ['react']
+```
+
+### Creating Custom Frameworks
+
+```ts
+import { Framework, type Outputs } from '@codespark/framework';
+
+class MyFramework extends Framework {
+  readonly name = 'my-framework';
+  readonly imports = {
+    'my-lib': 'https://esm.sh/my-lib'
+  };
+  outputs: Outputs = new Map();
+
+  analyze(entry: string, files: Record<string, string>) {
+    // Analyze dependencies and populate outputs
+  }
+
+  compile(): string {
+    const builder = this.createBuilder();
+    // Build runtime code
+    return builder.toString();
+  }
+}
+```
+
+## API
+
+### `Framework` (Abstract Class)
+
+Base class for all framework implementations.
+
+| Property/Method | Description |
+|-----------------|-------------|
+| `name` | Framework identifier |
+| `imports` | Import map for external dependencies |
+| `outputs` | Analyzed outputs by loader type |
+| `analyze(entry, files)` | Analyze entry file and its dependencies |
+| `compile()` | Compile analyzed code to executable string |
+| `getOutput(type)` | Get outputs for a specific loader type |
+
+### `registerFramework(framework, name?)`
+
+Register a framework instance to the global registry.
+
+### `registry`
+
+Global framework registry instance.
+
+| Method | Description |
+|--------|-------------|
+| `get(name)` | Get a framework by name |
+| `list()` | List all registered framework names |
+| `register(framework, name?)` | Register a framework |
+
+### Loader Types
+
+```ts
+enum LoaderType {
+  ESModule = 'esmodule',  // JavaScript/TypeScript modules
+  Style = 'style',        // CSS stylesheets
+  Script = 'script',      // Script tags
+  Asset = 'asset'         // HTML and other assets
+}
+```
+
+## Built-in Frameworks
+
+| Framework | Import Path | Description |
+|-----------|-------------|-------------|
+| React | `@codespark/framework/react` | React with JSX/TSX support |
+| HTML | `@codespark/framework/html` | HTML with inline scripts and styles |
+| Markdown | `@codespark/framework/markdown` | Markdown to HTML |
+
+## License
+
+MIT

package/dist/html.d.ts

@@ -6,7 +6,7 @@ declare enum LoaderType {
   ESModule = "esmodule",
   Style = "style",
   Script = "script",
-  Asset = "asset",
+  Asset = "asset"
 }
 interface BaseLoaderOutput<T extends LoaderType> {
   type: T;
@@ -18,6 +18,7 @@ interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
     name: string;
     imported: string[];
   }[];
+  raw: string;
 }
 interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
   imports: string[];
@@ -54,9 +55,12 @@ declare class Framework extends Framework$1 {
   readonly imports: {};
   outputs: Outputs;
   private blobUrlMap;
+  private LITE_DEFAULT_ENTRY;
+  private LITE_DEFAULT_SCRIPT;
+  private LITE_DEFAULT_STYLE;
   constructor(config?: FrameworkConfig | undefined);
-  analyze(entry: string, files: Record<string, string>): void;
-  compile(): string;
+  analyze(files: Record<string, string>): void;
+  compile(entry: string): string;
   private wrapInLiteModeTemplate;
   private transformModulesToBlob;
   private transformCodeWithBlobUrls;

package/dist/html.js

@@ -6,12 +6,12 @@ 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;
+let LoaderType = /* @__PURE__ */ function(LoaderType) {
+	LoaderType["ESModule"] = "esmodule";
+	LoaderType["Style"] = "style";
+	LoaderType["Script"] = "script";
+	LoaderType["Asset"] = "asset";
+	return LoaderType;
 }({});
 
 //#endregion
@@ -103,12 +103,8 @@ const buildExternalDeps = (imports, usedSources) => {
 var ESLoader = class {
 	name = "es-loader";
 	test = /\.(tsx?|jsx?)$/;
-	jsxPreset;
-	isTSX;
 	constructor(options) {
-		const { jsxPreset, isTSX = false } = options || {};
-		this.jsxPreset = jsxPreset;
-		this.isTSX = isTSX;
+		this.options = options;
 	}
 	transform(source, ctx) {
 		const { imports, usedSources } = analyzeImports(parseCode(source));
@@ -118,28 +114,30 @@ var ESLoader = class {
 			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;
+				const resolved = ctx.resolve(importPath);
+				if (resolved) dependencies[importPath] = resolved;
 				continue;
 			}
 			if (!usedSources.has(importPath)) continue;
 			const resolved = ctx.resolve(importPath);
 			if (resolved) dependencies[importPath] = resolved;
 		}
+		const { jsxPreset, isTSX = false } = this.options || {};
 		const { typescript } = availablePresets;
 		const defaultPresets = [typescript, {
-			isTSX: this.isTSX,
+			isTSX,
 			allExtensions: true
 		}];
 		const { code } = transform(source, {
 			filename: ctx.resourcePath,
-			presets: this.jsxPreset ? [this.jsxPreset, defaultPresets] : [defaultPresets]
+			presets: jsxPreset ? [jsxPreset, defaultPresets] : [defaultPresets]
 		});
 		return {
 			type: LoaderType.ESModule,
 			content: code || "",
 			dependencies,
-			externals
+			externals,
+			raw: source
 		};
 	}
 };
@@ -166,8 +164,8 @@ function createLoaderContext(files) {
 		resolve: (src) => files[src] !== void 0 ? src : null
 	};
 }
-function parseHTML(html$1) {
-	const doc = parseDocument(html$1);
+function parseHTML(html) {
+	const doc = parseDocument(html);
 	const elements = [];
 	const scripts = DomUtils.getElementsByTagName("script", doc);
 	for (const script of scripts) {
@@ -222,7 +220,8 @@ function processESModule(path, files, outputs, visited = /* @__PURE__ */ new Set
 		path,
 		content: output.content,
 		dependencies: output.dependencies,
-		externals: output.externals
+		externals: output.externals,
+		raw: source
 	});
 	for (const depPath of Object.values(output.dependencies)) processESModule(depPath, files, outputs, visited);
 }
@@ -284,7 +283,8 @@ function processModuleScript(el, entry, files, outputs, visited = /* @__PURE__ *
 		path: virtualPath,
 		content: output.content,
 		dependencies: output.dependencies,
-		externals: output.externals
+		externals: output.externals,
+		raw: el.content
 	});
 	for (const depPath of Object.values(output.dependencies)) processESModule(depPath, files, outputs, visited);
 }
@@ -332,18 +332,20 @@ function processLinkElement(el, files, outputs, visited = /* @__PURE__ */ new Se
 	});
 	else if (files[el.href] !== void 0) processStylesheet(el.href, files, outputs, visited);
 }
-function analyze(entry, files) {
+function analyze(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
-	});
+	for (const path of Object.keys(files)) {
+		if (!path.endsWith(".html")) continue;
+		const html = files[path];
+		const { elements, bodyContent } = parseHTML(html);
+		for (const el of elements) if (el.type === "script") processScriptElement(el, path, files, outputs);
+		else if (el.type === "style") processStyleElement(el, path, outputs);
+		else if (el.type === "link") processLinkElement(el, files, outputs);
+		if (bodyContent) getOutputArray(outputs, LoaderType.Asset).push({
+			path,
+			content: bodyContent
+		});
+	}
 	return outputs;
 }
 
@@ -358,25 +360,28 @@ var Framework = class extends Framework$1 {
 	imports = {};
 	outputs = /* @__PURE__ */ new Map();
 	blobUrlMap = /* @__PURE__ */ new Map();
+	LITE_DEFAULT_ENTRY = "./index.html";
+	LITE_DEFAULT_SCRIPT = "./index.js";
+	LITE_DEFAULT_STYLE = "./index.css";
 	constructor(config) {
 		super();
 		this.config = config;
 	}
-	analyze(entry, files) {
-		const { enabled, htmlEntry = entry } = this.config?.liteMode ?? {};
-		if (enabled) this.outputs = analyze(entry, {
+	analyze(files) {
+		const { enabled, htmlEntry = this.LITE_DEFAULT_ENTRY } = this.config?.liteMode ?? {};
+		if (enabled && htmlEntry) this.outputs = analyze({
 			...files,
 			[htmlEntry]: this.wrapInLiteModeTemplate(files[htmlEntry] ?? "")
 		});
-		else this.outputs = analyze(entry, files);
+		else this.outputs = analyze(files);
 	}
-	compile() {
+	compile(entry) {
 		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("");
+		let htmlContent = assets.find((a) => a.path === entry)?.content ?? "";
 		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>`;
@@ -393,7 +398,7 @@ var Framework = class extends Framework$1 {
 		}).done();
 	}
 	wrapInLiteModeTemplate(htmlFragment) {
-		const { scriptEntry = "./index.js", styleEntry = "./index.css" } = this.config?.liteMode ?? {};
+		const { scriptEntry = this.LITE_DEFAULT_SCRIPT, styleEntry = this.LITE_DEFAULT_STYLE } = this.config?.liteMode ?? {};
 		return `<!DOCTYPE html>
 <html>
 <head>

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare enum LoaderType {
   ESModule = "esmodule",
   Style = "style",
   Script = "script",
-  Asset = "asset",
+  Asset = "asset"
 }
 interface BaseLoaderOutput<T extends LoaderType> {
   type: T;
@@ -35,6 +35,7 @@ interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
     name: string;
     imported: string[];
   }[];
+  raw: string;
 }
 interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
   imports: string[];
@@ -59,8 +60,8 @@ 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;
+  abstract analyze(files: Record<string, string>): void;
+  abstract compile(entry: string): string;
   protected createBuilder(init?: string): RuntimeBuilder;
   getOutput<T extends LoaderType>(type: T): Output<T>[];
 }

package/dist/loaders.d.ts

@@ -3,7 +3,7 @@ declare enum LoaderType {
   ESModule = "esmodule",
   Style = "style",
   Script = "script",
-  Asset = "asset",
+  Asset = "asset"
 }
 interface BaseLoaderOutput<T extends LoaderType> {
   type: T;
@@ -15,6 +15,7 @@ interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
     name: string;
     imported: string[];
   }[];
+  raw: string;
 }
 interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
   imports: string[];
@@ -62,11 +63,10 @@ interface ESLoaderOptions {
   isTSX?: boolean;
 }
 declare class ESLoader implements Loader<LoaderType.ESModule> {
+  private options?;
   readonly name = "es-loader";
   readonly test: RegExp;
-  private jsxPreset;
-  private isTSX;
-  constructor(options?: ESLoaderOptions);
+  constructor(options?: ESLoaderOptions | undefined);
   transform(source: string, ctx: LoaderContext): ESModuleLoaderOutput;
 }
 //#endregion

package/dist/loaders.js

@@ -4,12 +4,12 @@ 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;
+let LoaderType = /* @__PURE__ */ function(LoaderType) {
+	LoaderType["ESModule"] = "esmodule";
+	LoaderType["Style"] = "style";
+	LoaderType["Script"] = "script";
+	LoaderType["Asset"] = "asset";
+	return LoaderType;
 }({});
 
 //#endregion
@@ -101,12 +101,8 @@ const buildExternalDeps = (imports, usedSources) => {
 var ESLoader = class {
 	name = "es-loader";
 	test = /\.(tsx?|jsx?)$/;
-	jsxPreset;
-	isTSX;
 	constructor(options) {
-		const { jsxPreset, isTSX = false } = options || {};
-		this.jsxPreset = jsxPreset;
-		this.isTSX = isTSX;
+		this.options = options;
 	}
 	transform(source, ctx) {
 		const { imports, usedSources } = analyzeImports(parseCode(source));
@@ -116,28 +112,30 @@ var ESLoader = class {
 			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;
+				const resolved = ctx.resolve(importPath);
+				if (resolved) dependencies[importPath] = resolved;
 				continue;
 			}
 			if (!usedSources.has(importPath)) continue;
 			const resolved = ctx.resolve(importPath);
 			if (resolved) dependencies[importPath] = resolved;
 		}
+		const { jsxPreset, isTSX = false } = this.options || {};
 		const { typescript } = availablePresets;
 		const defaultPresets = [typescript, {
-			isTSX: this.isTSX,
+			isTSX,
 			allExtensions: true
 		}];
 		const { code } = transform(source, {
 			filename: ctx.resourcePath,
-			presets: this.jsxPreset ? [this.jsxPreset, defaultPresets] : [defaultPresets]
+			presets: jsxPreset ? [jsxPreset, defaultPresets] : [defaultPresets]
 		});
 		return {
 			type: LoaderType.ESModule,
 			content: code || "",
 			dependencies,
-			externals
+			externals,
+			raw: source
 		};
 	}
 };
@@ -152,7 +150,8 @@ var JSONLoader = class {
 			type: LoaderType.ESModule,
 			content: `export default ${source};`,
 			dependencies: {},
-			externals: []
+			externals: [],
+			raw: source
 		};
 	}
 };

package/dist/markdown.d.ts

@@ -6,7 +6,7 @@ declare enum LoaderType {
   ESModule = "esmodule",
   Style = "style",
   Script = "script",
-  Asset = "asset",
+  Asset = "asset"
 }
 interface BaseLoaderOutput<T extends LoaderType> {
   type: T;
@@ -18,6 +18,7 @@ interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
     name: string;
     imported: string[];
   }[];
+  raw: string;
 }
 interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
   imports: string[];
@@ -44,8 +45,8 @@ declare class Framework extends Framework$1 {
   readonly name = "markdown";
   readonly imports: {};
   outputs: Outputs;
-  analyze(entry: string, files: Record<string, string>): void;
-  compile(): any;
+  analyze(files: Record<string, string>): void;
+  compile(entry: string): any;
 }
 declare const markdown: Framework;
 //#endregion

package/dist/markdown.js

@@ -3,12 +3,12 @@ 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;
+let LoaderType = /* @__PURE__ */ function(LoaderType) {
+	LoaderType["ESModule"] = "esmodule";
+	LoaderType["Style"] = "style";
+	LoaderType["Script"] = "script";
+	LoaderType["Asset"] = "asset";
+	return LoaderType;
 }({});
 
 //#endregion
@@ -45,13 +45,13 @@ function processFile(path, files, outputs = /* @__PURE__ */ new Map(), visited =
 	};
 	outputs.get(output.type).push(result);
 }
-function analyze(entry, files) {
+function analyze(files) {
 	const outputs = /* @__PURE__ */ new Map();
 	outputs.set(LoaderType.ESModule, []);
 	outputs.set(LoaderType.Style, []);
 	outputs.set(LoaderType.Script, []);
 	outputs.set(LoaderType.Asset, []);
-	processFile(entry, files, outputs);
+	for (const path of Object.keys(files)) processFile(path, files, outputs);
 	return outputs;
 }
 
@@ -61,12 +61,12 @@ var Framework = class extends Framework$1 {
 	name = "markdown";
 	imports = {};
 	outputs = /* @__PURE__ */ new Map();
-	analyze(entry, files) {
-		this.outputs = analyze(entry, files);
+	analyze(files) {
+		this.outputs = analyze(files);
 	}
-	compile() {
-		const assets = this.getOutput(LoaderType.Asset);
-		return this.createBuilder().setHTML(JSON.stringify(assets.map(({ content }) => content).join(""))).done();
+	compile(entry) {
+		const entryAsset = this.getOutput(LoaderType.Asset).find((a) => a.path === entry);
+		return this.createBuilder().setHTML(JSON.stringify(entryAsset?.content ?? "")).done();
 	}
 };
 const markdown = new Framework();

package/dist/react.d.ts

@@ -6,7 +6,7 @@ declare enum LoaderType {
   ESModule = "esmodule",
   Style = "style",
   Script = "script",
-  Asset = "asset",
+  Asset = "asset"
 }
 interface BaseLoaderOutput<T extends LoaderType> {
   type: T;
@@ -18,6 +18,7 @@ interface ESModuleLoaderOutput extends BaseLoaderOutput<LoaderType.ESModule> {
     name: string;
     imported: string[];
   }[];
+  raw: string;
 }
 interface StyleLoaderOutput extends BaseLoaderOutput<LoaderType.Style> {
   imports: string[];
@@ -49,8 +50,8 @@ declare class Framework extends Framework$1 {
   };
   outputs: Outputs;
   private blobUrlMap;
-  analyze(entry: string, files: Record<string, string>): void;
-  compile(): any;
+  analyze(files: Record<string, string>): void;
+  compile(entry: string): any;
   private transformModulesToBlob;
   private transformCodeWithBlobUrls;
 }

package/dist/react.js

@@ -6,12 +6,12 @@ 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;
+let LoaderType = /* @__PURE__ */ function(LoaderType) {
+	LoaderType["ESModule"] = "esmodule";
+	LoaderType["Style"] = "style";
+	LoaderType["Script"] = "script";
+	LoaderType["Asset"] = "asset";
+	return LoaderType;
 }({});
 
 //#endregion
@@ -103,12 +103,8 @@ const buildExternalDeps = (imports, usedSources) => {
 var ESLoader = class {
 	name = "es-loader";
 	test = /\.(tsx?|jsx?)$/;
-	jsxPreset;
-	isTSX;
 	constructor(options) {
-		const { jsxPreset, isTSX = false } = options || {};
-		this.jsxPreset = jsxPreset;
-		this.isTSX = isTSX;
+		this.options = options;
 	}
 	transform(source, ctx) {
 		const { imports, usedSources } = analyzeImports(parseCode(source));
@@ -118,28 +114,30 @@ var ESLoader = class {
 			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;
+				const resolved = ctx.resolve(importPath);
+				if (resolved) dependencies[importPath] = resolved;
 				continue;
 			}
 			if (!usedSources.has(importPath)) continue;
 			const resolved = ctx.resolve(importPath);
 			if (resolved) dependencies[importPath] = resolved;
 		}
+		const { jsxPreset, isTSX = false } = this.options || {};
 		const { typescript } = availablePresets;
 		const defaultPresets = [typescript, {
-			isTSX: this.isTSX,
+			isTSX,
 			allExtensions: true
 		}];
 		const { code } = transform(source, {
 			filename: ctx.resourcePath,
-			presets: this.jsxPreset ? [this.jsxPreset, defaultPresets] : [defaultPresets]
+			presets: jsxPreset ? [jsxPreset, defaultPresets] : [defaultPresets]
 		});
 		return {
 			type: LoaderType.ESModule,
 			content: code || "",
 			dependencies,
-			externals
+			externals,
+			raw: source
 		};
 	}
 };
@@ -154,7 +152,8 @@ var JSONLoader = class {
 			type: LoaderType.ESModule,
 			content: `export default ${source};`,
 			dependencies: {},
-			externals: []
+			externals: [],
+			raw: source
 		};
 	}
 };
@@ -233,13 +232,14 @@ function processFile(path, files, outputs, visited) {
 	switch (output.type) {
 		case LoaderType.ESModule: {
 			const { content, dependencies, externals } = output;
+			for (const depPath of Object.values(dependencies)) processFile(depPath, files, outputs, visited);
 			getOutputList(outputs, LoaderType.ESModule).push({
 				path,
 				content,
 				dependencies,
-				externals
+				externals,
+				raw: source
 			});
-			for (const depPath of Object.values(dependencies)) processFile(depPath, files, outputs, visited);
 			break;
 		}
 		case LoaderType.Style: {
@@ -262,14 +262,16 @@ export default function MarkdownContent() {
   return _jsx('div', { dangerouslySetInnerHTML: { __html: ${JSON.stringify(content)} } });
 }`,
 				dependencies: {},
-				externals: []
+				externals: [],
+				raw: content
 			});
 		}
 	}
 }
-function analyze(entry, files) {
+function analyze(files) {
 	const outputs = createOutputsMap();
-	processFile(entry, files, outputs, /* @__PURE__ */ new Set());
+	const visited = /* @__PURE__ */ new Set();
+	for (const path of Object.keys(files)) if (matchLoader(path)) processFile(path, files, outputs, visited);
 	return outputs;
 }
 
@@ -278,17 +280,19 @@ function analyze(entry, files) {
 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"
+		react: "https://esm.sh/react",
+		"react/jsx-runtime": "https://esm.sh/react/jsx-runtime",
+		"react-dom/client": "https://esm.sh/react-dom/client"
 	};
 	outputs = /* @__PURE__ */ new Map();
 	blobUrlMap = /* @__PURE__ */ new Map();
-	analyze(entry, files) {
-		this.outputs = analyze(entry, files);
+	analyze(files) {
+		this.outputs = analyze(files);
 	}
-	compile() {
-		const transformed = this.transformModulesToBlob([...this.getOutput(LoaderType.ESModule)].reverse());
+	compile(entry) {
+		const modules = this.getOutput(LoaderType.ESModule);
+		if (!modules.find((m) => m.path === entry)) throw new Error(`Entry module not found: ${entry}`);
+		const transformed = this.transformModulesToBlob(entry, modules);
 		const builder = this.createBuilder(transformed);
 		const ast = parse(transformed, {
 			sourceType: "module",
@@ -323,16 +327,29 @@ var Framework = class extends Framework$1 {
     window.__root__.render(${name ? `jsx(${name}, {})` : "null"});`);
 		return builder.toString();
 	}
-	transformModulesToBlob(modules) {
+	transformModulesToBlob(entry, modules) {
+		const moduleMap = new Map(modules.map((m) => [m.path, m]));
+		const orderedModules = [];
+		const visited = /* @__PURE__ */ new Set();
+		const visit = (path) => {
+			if (visited.has(path)) return;
+			visited.add(path);
+			const mod = moduleMap.get(path);
+			if (!mod) return;
+			for (const depPath of Object.values(mod.dependencies)) visit(depPath);
+			orderedModules.push(mod);
+		};
+		visit(entry);
 		let entryCode = "";
-		modules.forEach((mod, index) => {
+		for (let i = 0; i < orderedModules.length; i++) {
+			const mod = orderedModules[i];
 			const code = this.transformCodeWithBlobUrls(mod);
-			if (index === modules.length - 1) entryCode = code;
+			if (i === orderedModules.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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codespark/framework",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "Framework registration API for codespark ecosystem",
   "keywords": [
@@ -25,7 +25,8 @@
   ],
   "scripts": {
     "build": "tsdown",
-    "test": "vitest run"
+    "test": "vitest run",
+    "release": "pnpm build && npm publish --access public"
   },
   "author": "TonyL1u",
   "license": "MIT",
@@ -50,6 +51,6 @@
     "@types/babel__standalone": "^7.1.9",
     "@types/node": "^22.19.2",
     "domhandler": "^5.0.3",
-    "tsdown": "^0.17.3"
+    "tsdown": "^0.20.3"
   }
 }