create-satset-react 0.0.1-beta.0

package/README.md

@@ -0,0 +1,5 @@
+# create-satset-app
+
+Scaffold package to implement the `create-satset-app` CLI.
+
+This workspace is intentionally minimal — add generator logic (prompting, templating, installers) under `src/` and publish the CLI in `bin/` when ready.

package/dist/index.js

@@ -0,0 +1,538 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/create-app.ts
+var import_fs3 = __toESM(require("fs"));
+var import_path3 = __toESM(require("path"));
+var import_child_process = require("child_process");
+var import_readline = __toESM(require("readline"));
+
+// src/assets/favicon.ts
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_https = __toESM(require("https"));
+async function generateFavicon(root) {
+  const publicPath = import_path.default.join(root, "public");
+  const faviconPath = import_path.default.join(publicPath, "favicon.png");
+  if (import_fs.default.existsSync(faviconPath)) {
+    console.log("\u2705 Favicon already exists, skipping...");
+    return;
+  }
+  console.log("\u{1F3A8} Generating favicon...");
+  const faviconUrl = "https://raw.githubusercontent.com/IndokuDev/IndokuDev-all-Logo/refs/heads/main/satset.png";
+  try {
+    await downloadImage(faviconUrl, faviconPath);
+    console.log(`\u2705 Favicon generated`);
+  } catch (error) {
+    console.error("\u274C Failed to generate favicon:", error);
+    createDefaultFavicon(faviconPath);
+  }
+}
+function downloadImage(url, dest) {
+  return new Promise((resolve, reject) => {
+    const file = import_fs.default.createWriteStream(dest);
+    import_https.default.get(url, (response) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Failed to download: ${response.statusCode}`));
+        return;
+      }
+      response.pipe(file);
+      file.on("finish", () => {
+        file.close();
+        resolve();
+      });
+    }).on("error", (err) => {
+      import_fs.default.unlink(dest, () => {
+      });
+      reject(err);
+    });
+  });
+}
+function createDefaultFavicon(dest) {
+  const svg = `
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" fill="url(#grad)" rx="32"/>
+  <text x="128" y="180" font-family="Arial, sans-serif" font-size="140" font-weight="bold" fill="white" text-anchor="middle">S</text>
+</svg>
+  `.trim();
+  import_fs.default.writeFileSync(dest.replace(".png", ".svg"), svg);
+  console.log("\u2705 Default SVG favicon created");
+}
+
+// src/assets/robots.ts
+var import_fs2 = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+function generateRobotsTxt(options = {}) {
+  const {
+    allow = ["/"],
+    disallow = [],
+    sitemap,
+    crawlDelay,
+    userAgent = "*"
+  } = options;
+  let content = `User-agent: ${userAgent}
+`;
+  allow.forEach((path4) => {
+    content += `Allow: ${path4}
+`;
+  });
+  disallow.forEach((path4) => {
+    content += `Disallow: ${path4}
+`;
+  });
+  if (crawlDelay) {
+    content += `Crawl-delay: ${crawlDelay}
+`;
+  }
+  if (sitemap) {
+    content += `
+Sitemap: ${sitemap}
+`;
+  }
+  return content;
+}
+function saveRobotsTxt(root, robots) {
+  const publicPath = import_path2.default.join(root, "public");
+  const robotsPath = import_path2.default.join(publicPath, "robots.txt");
+  import_fs2.default.mkdirSync(publicPath, { recursive: true });
+  import_fs2.default.writeFileSync(robotsPath, robots);
+  console.log("\u2705 Robots.txt generated: public/robots.txt");
+}
+async function generateAndSaveRobots(root, baseUrl, options = {}) {
+  const publicPath = import_path2.default.join(root, "public");
+  const robotsPath = import_path2.default.join(publicPath, "robots.txt");
+  if (import_fs2.default.existsSync(robotsPath)) {
+    console.log("\u2139\uFE0F Robots.txt exists \u2014 overwriting with generated content...");
+  }
+  let url = baseUrl || "http://localhost:3000";
+  const pkgPath = import_path2.default.join(root, "package.json");
+  if (import_fs2.default.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(import_fs2.default.readFileSync(pkgPath, "utf-8"));
+      if (pkg.homepage) {
+        url = pkg.homepage;
+      }
+    } catch (e) {
+    }
+  }
+  if (process.env.SATSET_PUBLIC_URL) {
+    url = process.env.SATSET_PUBLIC_URL;
+  }
+  const robots = generateRobotsTxt({
+    ...options,
+    sitemap: `${url}/sitemap.xml`
+  });
+  saveRobotsTxt(root, robots);
+}
+
+// src/create-app.ts
+async function createApp(projectName) {
+  console.log("\u{1F680} Create Satset App\n");
+  const config = {
+    name: projectName,
+    typescript: true,
+    packageManager: "npm",
+    template: "default",
+    git: true
+  };
+  const useTypeScript = await prompt("Would you like to use TypeScript?", "Y/n");
+  config.typescript = useTypeScript.toLowerCase() !== "n";
+  const template = await prompt("Which template would you like to use?", "1) Default  2) Minimal  3) Fullstack");
+  if (template === "2") config.template = "minimal";
+  else if (template === "3") config.template = "fullstack";
+  const pkgMgr = await prompt("Which package manager?", "1) npm  2) yarn  3) pnpm");
+  if (pkgMgr === "2") config.packageManager = "yarn";
+  else if (pkgMgr === "3") config.packageManager = "pnpm";
+  const useGit = await prompt("Initialize a git repository?", "Y/n");
+  config.git = useGit.toLowerCase() !== "n";
+  console.log("\n\u{1F4E6} Creating project...\n");
+  const projectPath = import_path3.default.join(process.cwd(), projectName);
+  if (import_fs3.default.existsSync(projectPath)) {
+    console.error(`\u274C Directory ${projectName} already exists`);
+    process.exit(1);
+  }
+  await createProjectStructure(projectPath, config);
+  if (config.git) {
+    try {
+      (0, import_child_process.execSync)("git init", { cwd: projectPath, stdio: "ignore" });
+      console.log("\u2705 Git initialized");
+    } catch (e) {
+      console.log("\u26A0\uFE0F  Git initialization failed (optional)");
+    }
+  }
+  console.log("\n\u{1F4E6} Installing dependencies...\n");
+  try {
+    const installCmd = {
+      npm: "npm install",
+      yarn: "yarn",
+      pnpm: "pnpm install"
+    }[config.packageManager];
+    (0, import_child_process.execSync)(installCmd, { cwd: projectPath, stdio: "inherit" });
+    console.log("\n\u2705 Dependencies installed");
+  } catch (e) {
+    console.log("\n\u26A0\uFE0F  Failed to install dependencies. Please run manually.");
+  }
+  console.log("\n\u2705 Project created successfully!\n");
+  console.log("Next steps:");
+  console.log(`  cd ${projectName}`);
+  console.log(`  ${config.packageManager} run dev`);
+  console.log("");
+}
+function prompt(question, hint) {
+  const rl = import_readline.default.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    const promptText = hint ? `${question} (${hint}): ` : `${question}: `;
+    rl.question(promptText, (answer) => {
+      rl.close();
+      resolve(answer.trim() || "");
+    });
+  });
+}
+async function createProjectStructure(projectPath, config) {
+  const ext = config.typescript ? "tsx" : "jsx";
+  const configExt = config.typescript ? "ts" : "js";
+  const dirs = [
+    "src/app",
+    "src/app/api",
+    "src/components",
+    "src/styles",
+    "public"
+  ];
+  if (config.template === "fullstack") {
+    dirs.push("src/lib", "src/utils");
+  }
+  dirs.forEach((dir) => {
+    import_fs3.default.mkdirSync(import_path3.default.join(projectPath, dir), { recursive: true });
+  });
+  createPackageJson(projectPath, config);
+  createSatsetConfig(projectPath, configExt);
+  if (config.typescript) {
+    createTsConfig(projectPath);
+  }
+  createLayoutFile(projectPath, ext, config);
+  createPageFile(projectPath, ext, config);
+  createApiRoute(projectPath, configExt);
+  createGlobalCSS(projectPath);
+  createGitignore(projectPath);
+  createReadme(projectPath, config);
+  createEnvExample(projectPath);
+  console.log("\n\u{1F3A8} Generating assets...");
+  try {
+    await generateFavicon(projectPath);
+  } catch (e) {
+    console.log("\u26A0\uFE0F  Favicon generation skipped");
+  }
+  try {
+    await generateAndSaveRobots(projectPath);
+  } catch (e) {
+    console.log("\u26A0\uFE0F  Robots.txt generation skipped");
+  }
+  console.log("\u2705 Assets generated");
+}
+function createPackageJson(projectPath, config) {
+  const packageJson = {
+    name: config.name,
+    version: "0.1.0",
+    private: true,
+    scripts: {
+      dev: "satset dev",
+      build: "satset build",
+      start: "satset start",
+      lint: config.typescript ? "tsc --noEmit" : 'echo "No linting configured"'
+    },
+    dependencies: {
+      "@satset/core": "^0.0.1",
+      react: "^18.2.0",
+      "react-dom": "^18.2.0"
+    },
+    devDependencies: config.typescript ? {
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0",
+      "@types/node": "^20.0.0",
+      typescript: "^5.3.0"
+    } : {}
+  };
+  import_fs3.default.writeFileSync(
+    import_path3.default.join(projectPath, "package.json"),
+    JSON.stringify(packageJson, null, 2)
+  );
+}
+function createSatsetConfig(projectPath, ext) {
+  const config = `module.exports = {
+  port: 3000,
+  host: 'localhost',
+  favicon: '/favicon.png',
+};
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, `satset.config.${ext}`), config);
+}
+function createTsConfig(projectPath) {
+  const tsConfig = {
+    compilerOptions: {
+      target: "ES2020",
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      jsx: "react-jsx",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      resolveJsonModule: true,
+      allowJs: true,
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      forceConsistentCasingInFileNames: true,
+      paths: {
+        "@/*": ["./src/*"]
+      }
+    },
+    include: ["src"],
+    exclude: ["node_modules", "dist", ".satset"]
+  };
+  import_fs3.default.writeFileSync(
+    import_path3.default.join(projectPath, "tsconfig.json"),
+    JSON.stringify(tsConfig, null, 2)
+  );
+}
+function createLayoutFile(projectPath, ext, config) {
+  const layout = `import React from 'react';
+import './globals.css';
+
+export default function RootLayout({ children }${config.typescript ? ": { children: React.ReactNode }" : ""}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>${config.name}</title>
+      </head>
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, `src/app/layout.${ext}`), layout);
+}
+function createPageFile(projectPath, ext, config) {
+  const templates = {
+    default: `import React from 'react';
+import { Link } from '@satset/core';
+
+export const metadata = { title: "Welcome to ${config.name}", description: "Built with Satset.js - The fastest React framework" };
+
+export default function HomePage() {
+  return (
+    <>
+      <div style={{ padding: '3rem', fontFamily: 'system-ui', maxWidth: '900px', margin: '0 auto' }}>
+        <h1 style={{ fontSize: '3rem', marginBottom: '1rem', background: 'linear-gradient(to right, #3b82f6, #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+          Welcome to Satset.js! \u{1F680}
+        </h1>
+        <p style={{ fontSize: '1.25rem', color: '#64748b', marginBottom: '2rem' }}>
+          The fastest way to build fullstack React apps.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem' }}>
+          <Link href="/about" style={{ padding: '0.75rem 1.5rem', background: '#3b82f6', color: 'white', borderRadius: '8px', textDecoration: 'none' }}>
+            Get Started
+          </Link>
+          <a href="https://github.com/satset/satset" style={{ padding: '0.75rem 1.5rem', border: '1px solid #e2e8f0', borderRadius: '8px', textDecoration: 'none', color: '#64748b' }}>
+            GitHub
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+`,
+    minimal: `import React from 'react';
+
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Hello Satset!</h1>
+    </div>
+  );
+}
+`,
+    fullstack: `import React from 'react';
+export const metadata = { title: "${config.name}" };
+
+export default function HomePage() {
+  const [data, setData] = React.useState${config.typescript ? "<any>" : ""}(null);
+
+  React.useEffect(() => {
+    fetch('/api/hello')
+      .then(res => res.json())
+      .then(setData);
+  }, []);
+
+  return (
+    <>
+      <div style={{ padding: '2rem' }}>
+        <h1>Fullstack Satset App</h1>
+        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+      </div>
+    </>
+  );
+}
+`
+  };
+  import_fs3.default.writeFileSync(
+    import_path3.default.join(projectPath, `src/app/page.${ext}`),
+    templates[config.template]
+  );
+}
+function createApiRoute(projectPath, ext) {
+  const apiRoute = `import { SatsetResponse } from '@satset/core';
+
+export async function GET() {
+  return SatsetResponse.json({
+    message: 'Hello from Satset API!',
+    timestamp: new Date().toISOString(),
+  });
+}
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, `src/app/api/hello.${ext}`), apiRoute);
+}
+function createGlobalCSS(projectPath) {
+  const css = `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, "src/app/globals.css"), css);
+}
+function createGitignore(projectPath) {
+  const gitignore = `# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+dist
+.satset
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, ".gitignore"), gitignore);
+}
+function createEnvExample(projectPath) {
+  const envExample = `# Satset Environment Variables
+# Copy this file to .env.local and fill in your values
+
+# SATSET_PUBLIC_URL=https://yoursite.com
+# SATSET_PORT=3000
+# SATSET_HOST=localhost
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, ".env.example"), envExample);
+}
+function createReadme(projectPath, config) {
+  const readme = `# ${config.name}
+
+This is a [Satset.js](https://satset.dev) project created with \`create-satset-app\`.
+
+## Getting Started
+
+First, run the development server:
+
+\`\`\`bash
+${config.packageManager} run dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Satset.js, check out the following resources:
+
+- [Satset.js Documentation](https://satset.dev/docs)
+- [Learn Satset.js](https://satset.dev/learn)
+- [GitHub Repository](https://github.com/satset/satset)
+
+## Deploy
+
+Deploy your Satset.js app to Vercel, Netlify, or any Node.js hosting platform.
+
+Check out the [deployment documentation](https://satset.dev/docs/deployment) for more details.
+`;
+  import_fs3.default.writeFileSync(import_path3.default.join(projectPath, "README.md"), readme);
+}
+
+// src/index.ts
+var args = process.argv.slice(2);
+var command = args[0];
+async function main() {
+  if (command === "create-satset-react" || !command) {
+    await createApp(command);
+    return;
+  }
+}
+main().catch((error) => {
+  console.error("\u274C Error:", error.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "create-satset-react",
+  "version": "0.0.1-beta.0",
+  "private": false,
+  "description": "CLI tool to create a new Satset React project",
+  "author": "IndokuDev",
+  "license": "Apache-2.0",
+  "bin": {
+    "create-satset-react": "bin/index.js"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --out-dir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "create-satset-react": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  }
+}

package/src/assets/favicon.ts

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import https from 'https';
+
+export async function generateFavicon(root: string): Promise<void> {
+  const publicPath = path.join(root, 'public');
+  const faviconPath = path.join(publicPath, 'favicon.png');
+
+  // Skip if favicon already exists
+  if (fs.existsSync(faviconPath)) {
+    console.log('✅ Favicon already exists, skipping...');
+    return;
+  }
+
+  console.log('🎨 Generating favicon...');
+
+  // Get username from package.json or use default
+  const faviconUrl = "https://raw.githubusercontent.com/IndokuDev/IndokuDev-all-Logo/refs/heads/main/satset.png"
+  try {
+    await downloadImage(faviconUrl, faviconPath);
+    console.log(`✅ Favicon generated`);
+  } catch (error) {
+    console.error('❌ Failed to generate favicon:', error);
+    // Create default SVG favicon
+    createDefaultFavicon(faviconPath);
+  }
+}
+
+function downloadImage(url: string, dest: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(dest);
+    
+    https.get(url, (response) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Failed to download: ${response.statusCode}`));
+        return;
+      }
+
+      response.pipe(file);
+
+      file.on('finish', () => {
+        file.close();
+        resolve();
+      });
+    }).on('error', (err) => {
+      fs.unlink(dest, () => {});
+      reject(err);
+    });
+  });
+}
+
+function createDefaultFavicon(dest: string) {
+  // Create a simple SVG favicon
+  const svg = `
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" fill="url(#grad)" rx="32"/>
+  <text x="128" y="180" font-family="Arial, sans-serif" font-size="140" font-weight="bold" fill="white" text-anchor="middle">S</text>
+</svg>
+  `.trim();
+
+  fs.writeFileSync(dest.replace('.png', '.svg'), svg);
+  console.log('✅ Default SVG favicon created');
+}

package/src/assets/index.ts

@@ -0,0 +1,5 @@
+export { generateFavicon } from './favicon';
+export { generateSitemap, saveSitemap, generateAndSaveSitemap } from './sitemap';
+export type { SitemapOptions } from './sitemap';
+export { generateRobotsTxt, saveRobotsTxt, generateAndSaveRobots } from './robots';
+export type { RobotsOptions } from './robots';

package/src/assets/metadata.ts

@@ -0,0 +1,77 @@
+export interface OpenGraph {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: string;
+  type?: string;
+}
+
+export interface TwitterCard {
+  card?: 'summary' | 'summary_large_image' | 'app' | 'player';
+  site?: string;
+  creator?: string;
+}
+
+export interface Metadata {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  canonical?: string;
+  openGraph?: OpenGraph;
+  twitter?: TwitterCard;
+  robots?: string;
+}
+
+export function renderMetaTags(meta: Metadata | null | undefined): string {
+  if (!meta) return '';
+
+  const parts: string[] = [];
+
+  if (meta.title) {
+    parts.push(`<title>${escapeHtml(meta.title)}</title>`);
+    parts.push(`<meta name="title" content="${escapeHtml(meta.title)}" />`);
+  }
+
+  if (meta.description) {
+    parts.push(`<meta name="description" content="${escapeHtml(meta.description)}" />`);
+  }
+
+  if (meta.keywords) {
+    parts.push(`<meta name="keywords" content="${escapeHtml(meta.keywords)}" />`);
+  }
+
+  if (meta.canonical) {
+    parts.push(`<link rel="canonical" href="${escapeHtml(meta.canonical)}" />`);
+  }
+
+  if (meta.robots) {
+    parts.push(`<meta name="robots" content="${escapeHtml(meta.robots)}" />`);
+  }
+
+  if (meta.openGraph) {
+    const og = meta.openGraph;
+    if (og.title) parts.push(`<meta property="og:title" content="${escapeHtml(og.title)}" />`);
+    if (og.description) parts.push(`<meta property="og:description" content="${escapeHtml(og.description)}" />`);
+    if (og.url) parts.push(`<meta property="og:url" content="${escapeHtml(og.url)}" />`);
+    if (og.image) parts.push(`<meta property="og:image" content="${escapeHtml(og.image)}" />`);
+    parts.push(`<meta property="og:type" content="${escapeHtml(og.type || 'website')}" />`);
+  }
+
+  if (meta.twitter) {
+    const t = meta.twitter;
+    if (t.card) parts.push(`<meta name="twitter:card" content="${escapeHtml(t.card)}" />`);
+    if (t.site) parts.push(`<meta name="twitter:site" content="${escapeHtml(t.site)}" />`);
+    if (t.creator) parts.push(`<meta name="twitter:creator" content="${escapeHtml(t.creator)}" />`);
+  }
+
+  return parts.join('\n');
+}
+
+function escapeHtml(s: string) {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}

package/src/assets/robots.ts

@@ -0,0 +1,95 @@
+import fs from 'fs';
+import path from 'path';
+
+export interface RobotsOptions {
+  allow?: string[];
+  disallow?: string[];
+  sitemap?: string;
+  crawlDelay?: number;
+  userAgent?: string;
+}
+
+export function generateRobotsTxt(options: RobotsOptions = {}): string {
+  const {
+    allow = ['/'],
+    disallow = [],
+    sitemap,
+    crawlDelay,
+    userAgent = '*',
+  } = options;
+
+  let content = `User-agent: ${userAgent}\n`;
+
+  // Add allowed paths
+  allow.forEach(path => {
+    content += `Allow: ${path}\n`;
+  });
+
+  // Add disallowed paths
+  disallow.forEach(path => {
+    content += `Disallow: ${path}\n`;
+  });
+
+  // Add crawl delay
+  if (crawlDelay) {
+    content += `Crawl-delay: ${crawlDelay}\n`;
+  }
+
+  // Add sitemap
+  if (sitemap) {
+    content += `\nSitemap: ${sitemap}\n`;
+  }
+
+  return content;
+}
+
+export function saveRobotsTxt(root: string, robots: string): void {
+  const publicPath = path.join(root, 'public');
+  const robotsPath = path.join(publicPath, 'robots.txt');
+
+  fs.mkdirSync(publicPath, { recursive: true });
+  fs.writeFileSync(robotsPath, robots);
+
+  console.log('✅ Robots.txt generated: public/robots.txt');
+}
+
+export async function generateAndSaveRobots(
+  root: string,
+  baseUrl?: string,
+  options: RobotsOptions = {}
+): Promise<void> {
+  const publicPath = path.join(root, 'public');
+  const robotsPath = path.join(publicPath, 'robots.txt');
+
+  // Always generate (and overwrite) robots.txt. In both dev and build we should write
+  // the current generated file so changes to routes or config are reflected immediately.
+  if (fs.existsSync(robotsPath)) {
+    console.log('ℹ️ Robots.txt exists — overwriting with generated content...');
+  }
+
+  // Get base URL
+  let url = baseUrl || 'http://localhost:3000';
+
+  const pkgPath = path.join(root, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+      if (pkg.homepage) {
+        url = pkg.homepage;
+      }
+    } catch (e) {
+      // Ignore
+    }
+  }
+
+  if (process.env.SATSET_PUBLIC_URL) {
+    url = process.env.SATSET_PUBLIC_URL;
+  }
+
+  const robots = generateRobotsTxt({
+    ...options,
+    sitemap: `${url}/sitemap.xml`,
+  });
+
+  saveRobotsTxt(root, robots);
+}

package/src/assets/sitemap.ts

@@ -0,0 +1,93 @@
+import fs from 'fs';
+import path from 'path';
+import { Route } from '../router/file-system';
+
+export interface SitemapOptions {
+  baseUrl: string;
+  routes: Route[];
+  changefreq?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
+  priority?: number;
+  lastmod?: Date;
+}
+
+export function generateSitemap(options: SitemapOptions): string {
+  const {
+    baseUrl,
+    routes,
+    changefreq = 'weekly',
+    priority = 0.7,
+    lastmod = new Date(),
+  } = options;
+
+  const urls = routes
+    .filter(route => !route.dynamic) // Skip dynamic routes
+    .map(route => {
+      const loc = `${baseUrl}${route.path}`;
+      const lastmodStr = lastmod.toISOString().split('T')[0];
+      
+      return `  <url>
+    <loc>${escapeXml(loc)}</loc>
+    <lastmod>${lastmodStr}</lastmod>
+    <changefreq>${changefreq}</changefreq>
+    <priority>${priority}</priority>
+  </url>`;
+    })
+    .join('\n');
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`;
+}
+
+export function saveSitemap(root: string, sitemap: string): void {
+  const publicPath = path.join(root, 'public');
+  const sitemapPath = path.join(publicPath, 'sitemap.xml');
+
+  fs.mkdirSync(publicPath, { recursive: true });
+  fs.writeFileSync(sitemapPath, sitemap);
+
+  console.log('✅ Sitemap generated: public/sitemap.xml');
+}
+
+export async function generateAndSaveSitemap(
+  root: string,
+  routes: Route[],
+  baseUrl?: string
+): Promise<void> {
+  // Get base URL from package.json or env
+  let url = baseUrl || 'http://localhost:3000';
+
+  const pkgPath = path.join(root, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+      if (pkg.homepage) {
+        url = pkg.homepage;
+      }
+    } catch (e) {
+      // Ignore
+    }
+  }
+
+  // Check for env var
+  if (process.env.SATSET_PUBLIC_URL) {
+    url = process.env.SATSET_PUBLIC_URL;
+  }
+
+  const sitemap = generateSitemap({
+    baseUrl: url,
+    routes,
+  });
+
+  saveSitemap(root, sitemap);
+}
+
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}

package/src/create-app.ts

@@ -0,0 +1,430 @@
+
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+import readline from 'readline';
+import { generateFavicon, generateAndSaveRobots } from './assets';
+
+interface ProjectConfig {
+  name: string;
+  typescript: boolean;
+  packageManager: 'npm' | 'yarn' | 'pnpm';
+  template: 'default' | 'minimal' | 'fullstack';
+  git: boolean;
+}
+
+export async function createApp(projectName: string) {
+  console.log('🚀 Create Satset App\n');
+
+  const config: ProjectConfig = {
+    name: projectName,
+    typescript: true,
+    packageManager: 'npm',
+    template: 'default',
+    git: true,
+  };
+
+  // Interactive prompts
+  const useTypeScript = await prompt('Would you like to use TypeScript?', 'Y/n');
+  config.typescript = useTypeScript.toLowerCase() !== 'n';
+
+  const template = await prompt('Which template would you like to use?', '1) Default  2) Minimal  3) Fullstack');
+  if (template === '2') config.template = 'minimal';
+  else if (template === '3') config.template = 'fullstack';
+
+  const pkgMgr = await prompt('Which package manager?', '1) npm  2) yarn  3) pnpm');
+  if (pkgMgr === '2') config.packageManager = 'yarn';
+  else if (pkgMgr === '3') config.packageManager = 'pnpm';
+
+  const useGit = await prompt('Initialize a git repository?', 'Y/n');
+  config.git = useGit.toLowerCase() !== 'n';
+
+  console.log('\n📦 Creating project...\n');
+
+  const projectPath = path.join(process.cwd(), projectName);
+
+  // Check if directory exists
+  if (fs.existsSync(projectPath)) {
+    console.error(`❌ Directory ${projectName} already exists`);
+    process.exit(1);
+  }
+
+  // Create project structure
+  await createProjectStructure(projectPath, config);
+
+  // Initialize git
+  if (config.git) {
+    try {
+      execSync('git init', { cwd: projectPath, stdio: 'ignore' });
+      console.log('✅ Git initialized');
+    } catch (e) {
+      console.log('⚠️  Git initialization failed (optional)');
+    }
+  }
+
+  // Install dependencies
+  console.log('\n📦 Installing dependencies...\n');
+  try {
+    const installCmd = {
+      npm: 'npm install',
+      yarn: 'yarn',
+      pnpm: 'pnpm install',
+    }[config.packageManager];
+
+    execSync(installCmd, { cwd: projectPath, stdio: 'inherit' });
+    console.log('\n✅ Dependencies installed');
+  } catch (e) {
+    console.log('\n⚠️  Failed to install dependencies. Please run manually.');
+  }
+
+  console.log('\n✅ Project created successfully!\n');
+  console.log('Next steps:');
+  console.log(`  cd ${projectName}`);
+  console.log(`  ${config.packageManager} run dev`);
+  console.log('');
+}
+
+function prompt(question: string, hint?: string): Promise<string> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    const promptText = hint ? `${question} (${hint}): ` : `${question}: `;
+    rl.question(promptText, (answer) => {
+      rl.close();
+      resolve(answer.trim() || '');
+    });
+  });
+}
+
+async function createProjectStructure(projectPath: string, config: ProjectConfig) {
+  const ext = config.typescript ? 'tsx' : 'jsx';
+  const configExt = config.typescript ? 'ts' : 'js';
+
+  // Create directories
+  const dirs = [
+    'src/app',
+    'src/app/api',
+    'src/components',
+    'src/styles',
+    'public',
+  ];
+
+  if (config.template === 'fullstack') {
+    dirs.push('src/lib', 'src/utils');
+  }
+
+  dirs.forEach(dir => {
+    fs.mkdirSync(path.join(projectPath, dir), { recursive: true });
+  });
+
+  // Create files based on template
+  createPackageJson(projectPath, config);
+  createSatsetConfig(projectPath, configExt);
+  
+  if (config.typescript) {
+    createTsConfig(projectPath);
+  }
+
+  createLayoutFile(projectPath, ext, config);
+  createPageFile(projectPath, ext, config);
+  createApiRoute(projectPath, configExt);
+  createGlobalCSS(projectPath);
+  createGitignore(projectPath);
+  createReadme(projectPath, config);
+  createEnvExample(projectPath);
+
+  // Generate assets
+  console.log('\n🎨 Generating assets...');
+  
+  try {
+    await generateFavicon(projectPath);
+  } catch (e) {
+    console.log('⚠️  Favicon generation skipped');
+  }
+
+  try {
+    await generateAndSaveRobots(projectPath);
+  } catch (e) {
+    console.log('⚠️  Robots.txt generation skipped');
+  }
+
+  console.log('✅ Assets generated');
+}
+
+function createPackageJson(projectPath: string, config: ProjectConfig) {
+  const packageJson = {
+    name: config.name,
+    version: '0.1.0',
+    private: true,
+    scripts: {
+      dev: 'satset dev',
+      build: 'satset build',
+      start: 'satset start',
+      lint: config.typescript ? 'tsc --noEmit' : 'echo "No linting configured"',
+    },
+    dependencies: {
+      '@satset/core': '^0.0.1',
+      react: '^18.2.0',
+      'react-dom': '^18.2.0',
+    },
+    devDependencies: config.typescript ? {
+      '@types/react': '^18.2.0',
+      '@types/react-dom': '^18.2.0',
+      '@types/node': '^20.0.0',
+      typescript: '^5.3.0',
+    } : {},
+  };
+
+  fs.writeFileSync(
+    path.join(projectPath, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+}
+
+function createSatsetConfig(projectPath: string, ext: string) {
+  const config = `module.exports = {
+  port: 3000,
+  host: 'localhost',
+  favicon: '/favicon.png',
+};
+`;
+  fs.writeFileSync(path.join(projectPath, `satset.config.${ext}`), config);
+}
+
+function createTsConfig(projectPath: string) {
+  const tsConfig = {
+    compilerOptions: {
+      target: 'ES2020',
+      lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+      jsx: 'react-jsx',
+      module: 'ESNext',
+      moduleResolution: 'bundler',
+      resolveJsonModule: true,
+      allowJs: true,
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      forceConsistentCasingInFileNames: true,
+      paths: {
+        '@/*': ['./src/*'],
+      },
+    },
+    include: ['src'],
+    exclude: ['node_modules', 'dist', '.satset'],
+  };
+
+  fs.writeFileSync(
+    path.join(projectPath, 'tsconfig.json'),
+    JSON.stringify(tsConfig, null, 2)
+  );
+}
+
+function createLayoutFile(projectPath: string, ext: string, config: ProjectConfig) {
+  const layout = `import React from 'react';
+import './globals.css';
+
+export default function RootLayout({ children }${config.typescript ? ': { children: React.ReactNode }' : ''}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>${config.name}</title>
+      </head>
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
+`;
+  fs.writeFileSync(path.join(projectPath, `src/app/layout.${ext}`), layout);
+}
+
+function createPageFile(projectPath: string, ext: string, config: ProjectConfig) {
+  const templates = {
+    default: `import React from 'react';
+import { Link } from '@satset/core';
+
+export const metadata = { title: "Welcome to ${config.name}", description: "Built with Satset.js - The fastest React framework" };
+
+export default function HomePage() {
+  return (
+    <>
+      <div style={{ padding: '3rem', fontFamily: 'system-ui', maxWidth: '900px', margin: '0 auto' }}>
+        <h1 style={{ fontSize: '3rem', marginBottom: '1rem', background: 'linear-gradient(to right, #3b82f6, #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+          Welcome to Satset.js! 🚀
+        </h1>
+        <p style={{ fontSize: '1.25rem', color: '#64748b', marginBottom: '2rem' }}>
+          The fastest way to build fullstack React apps.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem' }}>
+          <Link href="/about" style={{ padding: '0.75rem 1.5rem', background: '#3b82f6', color: 'white', borderRadius: '8px', textDecoration: 'none' }}>
+            Get Started
+          </Link>
+          <a href="https://github.com/satset/satset" style={{ padding: '0.75rem 1.5rem', border: '1px solid #e2e8f0', borderRadius: '8px', textDecoration: 'none', color: '#64748b' }}>
+            GitHub
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+`, 
+    minimal: `import React from 'react';
+
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Hello Satset!</h1>
+    </div>
+  );
+}
+`,
+    fullstack: `import React from 'react';
+export const metadata = { title: "${config.name}" };
+
+export default function HomePage() {
+  const [data, setData] = React.useState${config.typescript ? '<any>' : ''}(null);
+
+  React.useEffect(() => {
+    fetch('/api/hello')
+      .then(res => res.json())
+      .then(setData);
+  }, []);
+
+  return (
+    <>
+      <div style={{ padding: '2rem' }}>
+        <h1>Fullstack Satset App</h1>
+        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+      </div>
+    </>
+  );
+}
+`, 
+  };
+
+  fs.writeFileSync(
+    path.join(projectPath, `src/app/page.${ext}`),
+    templates[config.template]
+  );
+}
+
+function createApiRoute(projectPath: string, ext: string) {
+  const apiRoute = `import { SatsetResponse } from '@satset/core';
+
+export async function GET() {
+  return SatsetResponse.json({
+    message: 'Hello from Satset API!',
+    timestamp: new Date().toISOString(),
+  });
+}
+`;
+  fs.writeFileSync(path.join(projectPath, `src/app/api/hello.${ext}`), apiRoute);
+}
+
+function createGlobalCSS(projectPath: string) {
+  const css = `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+`;
+  fs.writeFileSync(path.join(projectPath, 'src/app/globals.css'), css);
+}
+
+function createGitignore(projectPath: string) {
+  const gitignore = `# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+dist
+.satset
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+  fs.writeFileSync(path.join(projectPath, '.gitignore'), gitignore);
+}
+
+function createEnvExample(projectPath: string) {
+  const envExample = `# Satset Environment Variables
+# Copy this file to .env.local and fill in your values
+
+# SATSET_PUBLIC_URL=https://yoursite.com
+# SATSET_PORT=3000
+# SATSET_HOST=localhost
+`;
+  fs.writeFileSync(path.join(projectPath, '.env.example'), envExample);
+}
+
+function createReadme(projectPath: string, config: ProjectConfig) {
+  const readme = `# ${config.name}
+
+This is a [Satset.js](https://satset.dev) project created with \`create-satset-app\`.
+
+## Getting Started
+
+First, run the development server:
+
+\`\`\`bash
+${config.packageManager} run dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Satset.js, check out the following resources:
+
+- [Satset.js Documentation](https://satset.dev/docs)
+- [Learn Satset.js](https://satset.dev/learn)
+- [GitHub Repository](https://github.com/satset/satset)
+
+## Deploy
+
+Deploy your Satset.js app to Vercel, Netlify, or any Node.js hosting platform.
+
+Check out the [deployment documentation](https://satset.dev/docs/deployment) for more details.
+`;
+  fs.writeFileSync(path.join(projectPath, 'README.md'), readme);
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import { createApp } from './create-app';
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+async function main() {
+  // npm create-satset-react my-app
+  if (command === 'create-satset-react' || !command) {
+    await createApp(command);
+    return;
+  }
+}
+main().catch((error) => {
+  console.error('❌ Error:', error.message);
+  process.exit(1);
+});

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext", // Ganti ini! Biar TS dukung exports di package.json
+    "moduleResolution": "NodeNext", // Ganti ini! Biar sinkron sama NodeNext
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "isolatedModules": true // Tambahin ini biar aman buat Next.js/Esbuild
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}