mini-tsx 1.0.0

package/README.md

@@ -0,0 +1,87 @@
+# Mini TSX
+
+A tiny, zero-dependency TSX-to-HTML compiler library.
+
+## Features
+
+- **Zero dependencies** (uses native Node.js modules).
+- **Lightweight** (~1KB).
+- **Standard JSX** support (TypeScript).
+- **Automatic HTML generation** with hashing.
+
+## Installation
+
+```bash
+npm install mini-tsx
+```
+
+## CLI (Scaffolding)
+
+Initialize a new project with default `tsconfig.json` and `src/index.tsx`:
+
+```bash
+npx mini-tsx
+```
+
+## Setup (Manual)
+
+1.  **Configure `tsconfig.json`**:
+
+    Ensure your `tsconfig.json` has the following compiler options to enable JSX:
+
+    ```json
+    {
+      "compilerOptions": {
+        "jsx": "react",
+        "jsxFactory": "jsx",
+        "module": "ESNext",
+        "moduleResolution": "node"
+      }
+    }
+    ```
+
+2.  **Add `type: "module"` to `package.json`**:
+
+    ```json
+    {
+      "type": "module"
+    }
+    ```
+
+## Usage
+
+Create a `.tsx` file (e.g., `src/index.tsx`):
+
+```tsx
+import { jsx, render } from "mini-tsx";
+
+const Button = ({ color, children }: { color: string; children: any }) => (
+  <button style={`color: ${color}`}>
+    {children}
+  </button>
+);
+
+const App = () => (
+  <div>
+    <h1>Hello World</h1>
+    <Button color="blue">Click me</Button>
+  </div>
+);
+
+// Renders to dist/index.<hash>.html by default
+render(App());
+```
+
+## Build & Run
+
+Compile your TypeScript code and run it with Node.js:
+
+```bash
+# Compile
+npx tsc
+
+# Run (generates HTML)
+node dist/index.js
+```
+
+The output HTML file will be generated in the `dist/` folder.

package/create-mini-tsx/index.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+import { writeFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { execSync } from "node:child_process";
+
+const cwd = process.cwd();
+
+// 1. Initialize package.json if missing
+if (!existsSync(join(cwd, "package.json"))) {
+	console.log("Initializing package.json...");
+	execSync("npm init -y", { stdio: "inherit" });
+}
+
+// 2. Install mini-tsx
+console.log("Installing mini-tsx...");
+try {
+    execSync("npm install mini-tsx", { stdio: "inherit" });
+} catch (e) {
+    console.log("Skipping install (might be local test)");
+}
+
+// 3. Setup tsconfig.json
+const tsconfigPath = join(cwd, "tsconfig.json");
+const requiredOptions = {
+	"jsx": "react",
+	"jsxFactory": "jsx",
+	"module": "ESNext",
+	"moduleResolution": "node",
+	"strict": true,
+	"esModuleInterop": true,
+	"outDir": "dist"
+};
+
+let tsconfig = {
+	"compilerOptions": { ...requiredOptions },
+	"include": ["src/**/*"]
+};
+
+if (existsSync(tsconfigPath)) {
+	try {
+		const existing = JSON.parse(readFileSync(tsconfigPath, "utf-8"));
+		tsconfig = existing;
+		tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+		Object.assign(tsconfig.compilerOptions, requiredOptions);
+		console.log("Updated tsconfig.json");
+	} catch (e) {
+		console.log("Error reading tsconfig.json, overwriting...");
+	}
+} else {
+	console.log("Created tsconfig.json");
+}
+
+writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+
+// 4. Create src/index.tsx
+const srcDir = join(cwd, "src");
+if (!existsSync(srcDir)) mkdirSync(srcDir);
+
+const indexTsxPath = join(srcDir, "index.tsx");
+if (!existsSync(indexTsxPath)) {
+	const indexTsx = `import { jsx, render } from "mini-tsx";
+
+const App = () => (
+	<div>
+		<h1>Hello World</h1>
+		<p>Welcome to your new Mini TSX project!</p>
+	</div>
+);
+
+render(App());
+`;
+	writeFileSync(indexTsxPath, indexTsx);
+	console.log("Created src/index.tsx");
+} else {
+	console.log("src/index.tsx already exists");
+}
+
+console.log("\nDone! Run 'npx tsc && node dist/index.js' to build and run.");

package/create-mini-tsx/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "create-mini-tsx",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "create-mini-tsx": "index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "mini-tsx",
+	"version": "1.0.0",
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"build": "tsc"
+	},
+	"devDependencies": {
+		"@types/node": "^25.2.3",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.2.2"
+	}
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { basename, extname, dirname, join } from "node:path";
+import { createHash } from "node:crypto";
+
+declare global { namespace JSX { interface ElementChildrenAttribute { children: {} } interface IntrinsicElements { [k: string]: any } } }
+
+export const jsx = (t: any, p: any, ...c: any[]) => {
+	if (typeof t == "function") return t({ ...p, children: c });
+	let s = ""; for (let k in (p ||= {})) s += ` ${k}="${p[k]}"`;
+	return `<${t}${s}>${c.flat().join("")}</${t}>`;
+};
+
+export const render = (b: string, f?: string) => {
+	const h = `<!DOCTYPE html><meta charset="utf-8"><meta name="viewport" content="width=device-width">${b}`;
+	if (!f) {
+		const hash = createHash("md5").update(h).digest("hex").slice(0, 8);
+		f = join("dist", basename(process.argv[1], extname(process.argv[1])) + "." + hash + ".html");
+	}
+	mkdirSync(dirname(f), { recursive: true });
+	writeFileSync(f, h);
+	console.log(`Rendered: ${f}`);
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"jsx": "react",
+		"jsxFactory": "jsx",
+		"strict": true,
+		"esModuleInterop": true,
+		"moduleResolution": "node",
+		"outDir": "dist",
+		"declaration": true
+	},
+	"include": [
+		"src/**/*"
+	]
+}