redweb 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,6 +1,12 @@
-# Changelog
-
-## 0.11.0
+# Changelog
+
+## 0.12.0
+
+- Added `npx redweb init [directory]` to create a minimal TypeScript + TSX application without overwriting existing files.
+- Added the reusable `redweb/tsconfig.json` preset so TypeScript builds and editors resolve Redweb's JSX runtime consistently.
+- Updated the Live HTML examples to inherit the shared preset and added real-filesystem CLI, generated-project compilation, and packed-package verification.
+
+## 0.11.0
 
 - Added dependency-free server-side TSX rendering through `redweb/jsx-runtime` and `redweb/jsx-dev-runtime`, with fragments, function components, automatic text and attribute escaping, safe URL validation, boolean attributes, and direct interoperability with existing `HtmlFragment` values.
 - Added a compiled TSX Live HTML example plus real HTTP, WebSocket, type-checking, and packed-consumer verification.

package/README.md

@@ -7,8 +7,18 @@ Version 0.9 adds production-minded multiplayer building blocks while preserving
 ## Install
 
 ```bash
-npm install redweb
-```
+npm install redweb
+```
+
+Start a TypeScript + TSX project with Redweb's compiler preset and a small server-rendered page:
+
+```bash
+npx redweb init
+npm install
+npm run dev
+```
+
+Pass a directory to create a new project there: `npx redweb init my-app`. Existing files are never overwritten, so rerunning the command is safe.
 
 ## Exports
 
@@ -45,14 +55,18 @@ const {
 
 TSX is the concise default for new pages. It renders straight to Redweb's existing `HtmlFragment`; there is no React dependency, virtual DOM, hydration pass, or client component runtime:
 
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "redweb"
-  }
-}
-```
+Extend Redweb's TypeScript preset so builds and editors use the dependency-free JSX runtime consistently:
+
+```json
+{
+  "extends": "redweb/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
+```
 
 ```tsx
 import { LivePage, action, component, page, start, state } from 'redweb';

package/bin/redweb.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+'use strict';
+
+const path = require('path');
+const ProjectInitializer = require('../src/cli/ProjectInitializer');
+const { version } = require('../package.json');
+
+const [command, target = '.', ...extra] = process.argv.slice(2);
+
+if (command === 'init' && extra.length === 0) {
+    const result = new ProjectInitializer(version).initialize(path.resolve(process.cwd(), target));
+    console.log(`Redweb project ready in ${result.root}`);
+    if (result.created.length) console.log(`Created: ${result.created.join(', ')}`);
+    if (result.skipped.length) console.log(`Kept existing: ${result.skipped.join(', ')}`);
+    console.log('Next: npm install && npm run dev');
+} else {
+    const stream = command === undefined || command === '--help' || command === '-h' ? process.stdout : process.stderr;
+    stream.write('Usage: redweb init [directory]\n');
+    if (stream === process.stderr) process.exitCode = 1;
+}

package/config/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "redweb",
+    "strict": true,
+    "experimentalDecorators": false,
+    "useDefineForClassFields": true,
+    "skipLibCheck": false
+  }
+}

package/docs/LIVE_HTML.md

@@ -4,7 +4,20 @@ Live HTML is Redweb's decorator-first server-rendering layer. It uses the existi
 
 ## TSX rendering
 
-New pages can return TSX directly. Configure TypeScript with `"jsx": "react-jsx"` and `"jsxImportSource": "redweb"`; Redweb supplies its own dependency-free JSX runtimes and renders immediately to `HtmlFragment` values:
+New pages can return TSX directly. Run `npx redweb init` for a starter project, or extend `redweb/tsconfig.json` from an existing project's root `tsconfig.json`. The preset makes builds and editors use Redweb's dependency-free JSX runtime consistently:
+
+```json
+{
+  "extends": "redweb/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
+```
+
+Redweb renders TSX immediately to `HtmlFragment` values:
 
 ```tsx
 import { LivePage, action, component, page, state } from 'redweb';

package/examples/live-html/tsconfig.json

@@ -1,15 +1,9 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "CommonJS",
-    "moduleResolution": "Node",
-    "jsx": "react-jsx",
-    "jsxImportSource": "redweb",
-    "strict": true,
-    "experimentalDecorators": false,
-    "useDefineForClassFields": true,
-    "skipLibCheck": false,
-    "baseUrl": "../..",
+{
+  "extends": "../../config/tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "baseUrl": "../..",
     "paths": {
       "redweb": ["."],
       "redweb/*": ["*"]

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "redweb",
-  "version": "0.11.0",
-  "description": "A way to quickly set up an express server",
+  "version": "0.12.0",
+  "description": "A small Node.js foundation for HTTP, WebSockets, multiplayer services, and server-rendered HTML",
   "main": "index.js",
   "types": "index.d.ts",
+  "bin": {
+    "redweb": "bin/redweb.js"
+  },
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -29,6 +32,7 @@
       "require": "./jsx-dev-runtime.js",
       "default": "./jsx-dev-runtime.js"
     },
+    "./tsconfig.json": "./config/tsconfig.json",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -53,6 +57,8 @@
     "test": "npx jest"
   },
   "files": [
+    "bin",
+    "config",
     "src/*",
     "client.js",
     "client.d.ts",

package/src/cli/ProjectInitializer.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { projectFiles } = require('./templates');
+
+class ProjectInitializer {
+    constructor(version) {
+        this.files = projectFiles(version);
+    }
+
+    initialize(target) {
+        const root = path.resolve(target);
+        const created = [];
+        const skipped = [];
+        for (const file of this.files) {
+            const destination = path.join(root, file.path);
+            fs.mkdirSync(path.dirname(destination), { recursive: true });
+            if (fs.existsSync(destination)) {
+                skipped.push(file.path);
+                continue;
+            }
+            fs.writeFileSync(destination, file.content, { encoding: 'utf8', flag: 'wx' });
+            created.push(file.path);
+        }
+        return Object.freeze({ root, created: Object.freeze(created), skipped: Object.freeze(skipped) });
+    }
+}
+
+module.exports = ProjectInitializer;

package/src/cli/templates.js

@@ -0,0 +1,87 @@
+'use strict';
+
+const TYPESCRIPT_CONFIG = `${JSON.stringify({
+    extends: 'redweb/tsconfig.json',
+    compilerOptions: { rootDir: 'src', outDir: 'dist' },
+    include: ['src/**/*.ts', 'src/**/*.tsx'],
+}, null, 2)}\n`;
+
+const APP_SOURCE = `import path from 'node:path';
+import { page, start } from 'redweb';
+
+@page('/', { css: 'app.css', live: false })
+class HomePage {
+  render() {
+    return (
+      <main class="home">
+        <span class="eyebrow">Redweb</span>
+        <h1>Your server-rendered app is ready.</h1>
+        <p>Edit <code>src/app.tsx</code>, then build again.</p>
+      </main>
+    );
+  }
+}
+
+start(HomePage, {
+  port: Number(process.env.PORT ?? 8181),
+  templateRoot: path.resolve('src'),
+});
+`;
+
+const APP_STYLES = `:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  background: #08090d;
+  color: #fff;
+}
+
+body { margin: 0; }
+
+.home {
+  width: min(42rem, calc(100% - 2rem));
+  margin: 18vh auto 0;
+}
+
+.eyebrow {
+  color: #ff5064;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0.75rem 0;
+  font-size: clamp(2.5rem, 8vw, 5rem);
+  line-height: 0.98;
+}
+
+p { color: rgb(255 255 255 / 65%); }
+code { color: #ff8795; }
+`;
+
+function projectManifest(version) {
+    return `${JSON.stringify({
+        name: 'redweb-app',
+        private: true,
+        version: '0.0.0',
+        scripts: {
+            build: 'tsc',
+            start: 'node dist/app.js',
+            dev: 'npm run build && npm start',
+        },
+        dependencies: { redweb: `^${version}` },
+        devDependencies: { typescript: '^5.9.3' },
+    }, null, 2)}\n`;
+}
+
+function projectFiles(version) {
+    return Object.freeze([
+        Object.freeze({ path: 'package.json', content: projectManifest(version) }),
+        Object.freeze({ path: 'tsconfig.json', content: TYPESCRIPT_CONFIG }),
+        Object.freeze({ path: 'src/app.tsx', content: APP_SOURCE }),
+        Object.freeze({ path: 'src/app.css', content: APP_STYLES }),
+    ]);
+}
+
+module.exports = { projectFiles };