mini-tsx 1.0.0 → 1.0.2

package/README.md

@@ -17,36 +17,32 @@ npm install mini-tsx
 
 ## CLI (Scaffolding)
 
-Initialize a new project with default `tsconfig.json` and `src/index.tsx`:
+Create a new project interactively:
 
 ```bash
 npx mini-tsx
+# or
+npx create-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"
-    }
-    ```
+The CLI handles project naming, template selection (**basic** or **blog**), and Git initialization.
+
+## Manual Setup
+
+1. **Install**: `npm install mini-tsx`
+2. **Configure `tsconfig.json`**:
+   ```json
+   {
+     "compilerOptions": {
+       "jsx": "react",
+       "jsxFactory": "jsx",
+       "module": "ESNext",
+       "moduleResolution": "node",
+       "outDir": "dist"
+     }
+   }
+   ```
+3. **Add `"type": "module"`** to your `package.json`.
 
 ## Usage
 

package/create-mini-tsx/index.js

@@ -3,21 +3,52 @@
 import { writeFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import { execSync } from "node:child_process";
+import { createInterface } from "node:readline/promises";
 
-const cwd = process.cwd();
+const rl = createInterface({
+	input: process.stdin,
+	output: process.stdout
+});
+
+const projectName = await rl.question("What is your project named? (mini-tsx-app) ") || "mini-tsx-app";
+const template = await rl.question("Which template would you like to use? (basic/blog) ") || "basic";
+const useGit = (await rl.question("Initialize a git repository? (y/n) ")).toLowerCase().startsWith("y");
+rl.close();
+
+const targetDir = join(process.cwd(), projectName);
 
-// 1. Initialize package.json if missing
-if (!existsSync(join(cwd, "package.json"))) {
-	console.log("Initializing package.json...");
-	execSync("npm init -y", { stdio: "inherit" });
+if (existsSync(targetDir)) {
+	console.error(`Directory ${projectName} already exists.`);
+	process.exit(1);
 }
 
-// 2. Install mini-tsx
-console.log("Installing mini-tsx...");
+mkdirSync(targetDir);
+process.chdir(targetDir);
+
+const cwd = process.cwd();
+
+// 1. Initialize package.json
+console.log(`Initializing ${projectName}...`);
+const packageJson = {
+	name: projectName,
+	version: "1.0.0",
+	type: "module",
+	main: "dist/index.js",
+	scripts: {
+		"build": "tsc",
+		"start": "node dist/index.js",
+		"dev": "tsc -w & node --watch dist/index.js"
+	}
+};
+writeFileSync(join(cwd, "package.json"), JSON.stringify(packageJson, null, 2));
+
+// 2. Install mini-tsx and typescript
+console.log("Installing dependencies...");
 try {
-    execSync("npm install mini-tsx", { stdio: "inherit" });
+	execSync("npm install mini-tsx", { stdio: "inherit" });
+	execSync("npm install -D typescript @types/node", { stdio: "inherit" });
 } catch (e) {
-    console.log("Skipping install (might be local test)");
+	console.log("Skipping install (might be local test)");
 }
 
 // 3. Setup tsconfig.json
@@ -32,25 +63,12 @@ const requiredOptions = {
 	"outDir": "dist"
 };
 
-let tsconfig = {
+const 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");
-}
-
+console.log("Created tsconfig.json");
 writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
 
 // 4. Create src/index.tsx
@@ -58,8 +76,57 @@ 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";
+let indexTsx = "";
+
+if (template === "blog") {
+	indexTsx = `import { jsx, render } from "mini-tsx";
+
+const Layout = ({ title, children }: { title: string, children: any }) => (
+	<html lang="en">
+		<head>
+			<title>{title}</title>
+			<style>{\`
+				body { font-family: system-ui; max-width: 800px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
+				header { border-bottom: 1px solid #eee; margin-bottom: 2rem; }
+				article { margin-bottom: 3rem; }
+			\`}</style>
+		</head>
+		<body>
+			<header>
+				<h1>My Mini TSX Blog</h1>
+			</header>
+			<main>{children}</main>
+		</body>
+	</html>
+);
+
+const Post = ({ title, date, content }: { title: string, date: string, content: string }) => (
+	<article>
+		<h2>{title}</h2>
+		<small>{date}</small>
+		<div>{content}</div>
+	</article>
+);
+
+const App = () => (
+	<Layout title="Welcome to my Blog">
+		<Post 
+			title="First Post" 
+			date="2024-03-20" 
+			content="This is my first post using Mini TSX! It's so small and fast." 
+		/>
+		<Post 
+			title="Why Mini TSX?" 
+			date="2024-03-21" 
+			content="Because sometimes you just need to render some HTML with JSX without the weight of a full framework." 
+		/>
+	</Layout>
+);
+
+render(App());
+`;
+} else {
+	indexTsx = `import { jsx, render } from "mini-tsx";
 
 const App = () => (
 	<div>
@@ -70,10 +137,30 @@ const App = () => (
 
 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.");
+writeFileSync(indexTsxPath, indexTsx);
+console.log(`Created src/index.tsx (template: ${template})`);
+
+// 5. Git initialization
+if (useGit) {
+	try {
+		execSync("git init", { stdio: "ignore" });
+		writeFileSync(join(cwd, ".gitignore"), "node_modules/\ndist/\n");
+		console.log("Initialized git repository");
+	} catch (e) {
+		console.log("Could not initialize git repository");
+	}
+}
+
+console.log(`\nSuccess! Created ${projectName} at ${targetDir}`);
+console.log("Inside that directory, you can run several commands:");
+console.log("\n  npm run build");
+console.log("    Builds the project to dist/");
+console.log("\n  npm start");
+console.log("    Runs the built project");
+console.log("\n  npm run dev");
+console.log("    Runs the project in development mode (watch)");
+console.log("\nWe suggest that you begin by typing:");
+console.log(`\n  cd ${projectName}`);
+console.log("  npm run dev\n");

package/create-mini-tsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mini-tsx",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "type": "module",

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    namespace JSX {
+        interface ElementChildrenAttribute {
+            children: {};
+        }
+        interface IntrinsicElements {
+            [k: string]: any;
+        }
+    }
+}
+export declare const jsx: (t: any, p: any, ...c: any[]) => any;
+export declare const render: (b: string, f?: string) => void;

package/dist/index.js

@@ -0,0 +1,21 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { basename, extname, dirname, join } from "node:path";
+import { createHash } from "node:crypto";
+export const jsx = (t, p, ...c) => {
+    if (typeof t == "function")
+        return t({ ...p, children: c });
+    let s = "";
+    for (let k in (p || (p = {})))
+        s += ` ${k}="${p[k]}"`;
+    return `<${t}${s}>${c.flat().join("")}</${t}>`;
+};
+export const render = (b, f) => {
+    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/package.json

@@ -1,9 +1,16 @@
 {
 	"name": "mini-tsx",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"create-mini-tsx"
+	],
+	"bin": {
+		"mini-tsx": "create-mini-tsx/index.js"
+	},
 	"scripts": {
 		"build": "tsc"
 	},

package/src/index.ts

@@ -1,22 +0,0 @@
-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

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