create-elit 3.0.0

package/README.md

@@ -0,0 +1,115 @@
+# create-elit
+
+Scaffolding tool for creating new Elit projects.
+
+## Usage
+
+With npm:
+```bash
+npm create elit@latest my-app
+```
+
+With yarn:
+```bash
+yarn create elit my-app
+```
+
+With pnpm:
+```bash
+pnpm create elit my-app
+```
+
+With bun:
+```bash
+bun create elit my-app
+```
+
+With deno:
+```bash
+deno run -A npm:create-elit my-app
+```
+
+## Templates
+
+Choose a template with the `--template` flag:
+
+```bash
+npm create elit@latest my-app --template=basic
+```
+
+Available templates:
+
+- **basic** (default) - Full-featured app with styled counter using CSS-in-JS
+- **full** - Full-stack app with dev server, API routes, and CSS-in-JS
+- **minimal** - Minimal setup with just DOM rendering
+
+## Features
+
+✨ **Zero Configuration** - Works out of the box
+🎨 **CSS-in-JS** - Uses Elit's `CreateStyle` for type-safe styling
+📦 **TypeScript Ready** - Full TypeScript support
+🚀 **Fast Setup** - Creates project in seconds
+🎯 **Multiple Templates** - Choose the right starting point
+
+## What's Included
+
+Each template includes:
+- TypeScript configuration
+- Package.json with Elit scripts (`dev`, `build`, `preview`)
+- Elit config file (`elit.config.mjs`)
+- 100% TypeScript - no HTML files needed
+- Type-safe CSS-in-JS with `CreateStyle`
+- Server-side rendering with `dom.renderServer`
+- Client-side hydration with `client.ts`
+- Example code showing best practices
+- Auto-generated README and .gitignore
+
+## Example
+
+```bash
+# Create a new project
+npm create elit@latest my-elit-app
+
+# Navigate to project
+cd my-elit-app
+
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+```
+
+Visit http://localhost:3003 to see your app!
+
+## Template Details
+
+### Basic Template
+- Counter example with increment/decrement
+- Beautiful gradient UI with CSS-in-JS
+- Reactive state management demo
+- Type-safe styling with `CreateStyle`
+- Server-side rendering with `dom.renderServer`
+
+### Full Template
+- Counter and API call examples
+- Server-side routing with middleware
+- CORS and logging setup
+- Client-server communication
+- Full-stack TypeScript setup
+
+### Minimal Template
+- Just the essentials
+- Simple "Hello Elit!" example
+- Perfect for learning or prototyping
+- Pure TypeScript - zero HTML
+
+## Learn More
+
+- [Elit Documentation](https://d-osc.github.io/elit)
+- [GitHub Repository](https://github.com/d-osc/elit)
+- [npm Package](https://www.npmjs.com/package/elit)
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,664 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { mkdir, writeFile } from "fs/promises";
+import { join, resolve } from "path";
+import { existsSync } from "fs";
+var templates = {
+  basic: "Basic Elit app with counter example",
+  full: "Full-stack app with dev server and API routes",
+  minimal: "Minimal setup with just DOM rendering"
+};
+var colors = {
+  reset: "\x1B[0m",
+  cyan: "\x1B[36m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  red: "\x1B[31m",
+  dim: "\x1B[2m"
+};
+function log(message, color = "reset") {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+function getProjectName() {
+  const args = process.argv.slice(2);
+  return args[0] || "my-elit-app";
+}
+function getTemplate() {
+  const args = process.argv.slice(2);
+  const templateArg = args.find((arg) => arg.startsWith("--template="));
+  if (templateArg) {
+    const template2 = templateArg.split("=")[1];
+    if (template2 in templates) return template2;
+  }
+  return "basic";
+}
+async function createProject(projectName2, template2) {
+  const projectPath = resolve(process.cwd(), projectName2);
+  if (existsSync(projectPath)) {
+    log(`Error: Directory "${projectName2}" already exists!`, "red");
+    process.exit(1);
+  }
+  log(`Creating a new Elit app in ${projectPath}...`, "cyan");
+  await mkdir(projectPath, { recursive: true });
+  await generateTemplate(projectPath, projectName2, template2);
+  log("\nSuccess! Created " + projectName2, "green");
+  log("\nInside that directory, you can run several commands:", "dim");
+  log("\n  npm run dev", "cyan");
+  log("    Starts the development server with HMR\n", "dim");
+  log("  npm run build", "cyan");
+  log("    Builds the app for production\n", "dim");
+  log("  npm run preview", "cyan");
+  log("    Preview the production build\n", "dim");
+  log("\nWe suggest that you begin by typing:\n", "dim");
+  log(`  cd ${projectName2}`, "cyan");
+  log("  npm install", "cyan");
+  log("  npm run dev\n", "cyan");
+  log("Happy coding! \u{1F680}", "green");
+}
+async function generateTemplate(projectPath, projectName2, template2) {
+  const packageJson = {
+    name: projectName2,
+    version: "0.0.0",
+    type: "module",
+    scripts: {
+      dev: "elit dev",
+      build: "elit build",
+      preview: "elit preview"
+    },
+    dependencies: {
+      elit: "^2.0.0"
+    }
+  };
+  await writeFile(
+    join(projectPath, "package.json"),
+    JSON.stringify(packageJson, null, 2)
+  );
+  const tsConfig = {
+    compilerOptions: {
+      target: "ES2020",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      types: ["node"]
+    },
+    include: ["src"]
+  };
+  await writeFile(
+    join(projectPath, "tsconfig.json"),
+    JSON.stringify(tsConfig, null, 2)
+  );
+  const gitignore = `node_modules
+dist
+.env
+.env.local
+*.log
+.DS_Store
+`;
+  await writeFile(join(projectPath, ".gitignore"), gitignore);
+  const readme = `# ${projectName2}
+
+A new Elit project created with create-elit.
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+Visit http://localhost:3003 to view your app.
+
+## Available Scripts
+
+- \`npm run dev\` - Start development server with HMR
+- \`npm run build\` - Build for production
+- \`npm run preview\` - Preview production build
+
+## Learn More
+
+- [Elit Documentation](https://d-osc.github.io/elit)
+- [GitHub Repository](https://github.com/d-osc/elit)
+`;
+  await writeFile(join(projectPath, "README.md"), readme);
+  const elitConfig = `import { server } from './src/server';
+import { client } from './src/client';
+
+export default {
+  dev: {
+    port: 3003,
+    host: '0.0.0.0',
+    open: ${template2 === "basic" ? "true" : "false"},
+    logging: true,
+    clients: [{
+      root: '.',
+      basePath: '',
+      ssr: () => client,
+      api: server
+    }]
+  },
+  build: [{
+    entry: './src/main.ts',
+    outDir: './dist',
+    outFile: 'main.js',
+    format: 'esm',
+    minify: true,
+    sourcemap: true,
+    target: 'es2020',
+    copy: [
+      { from: './public/index.html', to: './index.html' }
+    ]
+  }],
+  preview: {
+    port: 3000,
+    host: '0.0.0.0',
+    open: false,
+    logging: true,
+    root: './dist',
+    basePath: '',
+    index: './index.html'
+  }
+};
+`;
+  await writeFile(join(projectPath, "elit.config.ts"), elitConfig);
+  await mkdir(join(projectPath, "public"), { recursive: true });
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${projectName2}</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <meta name="description" content="Built with Elit - Full-stack TypeScript framework">
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>
+`;
+  await writeFile(join(projectPath, "public", "index.html"), indexHtml);
+  await mkdir(join(projectPath, "src"), { recursive: true });
+  if (template2 === "basic") {
+    await generateBasicTemplate(projectPath, projectName2);
+  } else if (template2 === "full") {
+    await generateFullTemplate(projectPath, projectName2);
+  } else {
+    await generateMinimalTemplate(projectPath, projectName2);
+  }
+}
+async function generateBasicTemplate(projectPath, projectName2) {
+  const mainTs = `import { div, h1, h2, button, p } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import { render } from 'elit/dom';
+import './styles.ts';
+
+// Create reactive state (shared between SSR and client)
+export const count = createState(0);
+
+// Create app (shared between SSR and client)
+export const app = div({ className: 'container' },
+  div({ className: 'card' },
+    h1('Welcome to Elit! \u{1F680}'),
+    p('A lightweight TypeScript framework with reactive state management'),
+
+    div({ className: 'counter' },
+      h2('Counter Example'),
+      reactive(count, (value) =>
+        div({ className: 'count-display' }, \`Count: \${value}\`)
+      ),
+      div({ className: 'button-group' },
+        button({
+          onclick: () => count.value--,
+          className: 'btn btn-secondary'
+        }, '- Decrement'),
+        button({
+          onclick: () => count.value = 0,
+          className: 'btn btn-secondary'
+        }, 'Reset'),
+        button({
+          onclick: () => count.value++,
+          className: 'btn btn-primary'
+        }, '+ Increment')
+      )
+    )
+  )
+);
+
+render('root', app);
+console.log('[Main] App rendered');
+`;
+  await writeFile(join(projectPath, "src", "main.ts"), mainTs);
+  const stylesTs = `import styles from 'elit/style';
+
+// Global styles
+styles.addTag('*', {
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box'
+});
+
+styles.addTag('body', {
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  minHeight: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '2rem'
+});
+
+// Container
+styles.addClass('container', {
+  width: '100%',
+  maxWidth: '600px'
+});
+
+// Card
+styles.addClass('card', {
+  background: 'white',
+  borderRadius: '16px',
+  padding: '3rem',
+  boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
+});
+
+// Typography
+styles.addTag('h1', {
+  fontSize: '2.5rem',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  WebkitBackgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  backgroundClip: 'text',
+  marginBottom: '1rem'
+});
+
+styles.addTag('h2', {
+  fontSize: '1.5rem',
+  color: '#333',
+  marginBottom: '1rem'
+});
+
+styles.addTag('p', {
+  color: '#666',
+  marginBottom: '2rem',
+  lineHeight: 1.6
+});
+
+// Counter section
+styles.addClass('counter', {
+  marginTop: '2rem',
+  paddingTop: '2rem',
+  borderTop: '2px solid #f0f0f0'
+});
+
+styles.addClass('count-display', {
+  fontSize: '3rem',
+  fontWeight: 'bold',
+  color: '#667eea',
+  textAlign: 'center',
+  margin: '2rem 0'
+});
+
+// Button group
+styles.addClass('button-group', {
+  display: 'flex',
+  gap: '1rem',
+  justifyContent: 'center'
+});
+
+// Buttons
+styles.addClass('btn', {
+  padding: '0.75rem 1.5rem',
+  border: 'none',
+  borderRadius: '8px',
+  fontSize: '1rem',
+  fontWeight: 600,
+  cursor: 'pointer',
+  transition: 'all 0.2s'
+});
+
+styles.addClass('btn-primary', {
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  color: 'white'
+});
+
+styles.addPseudoClass('hover', {
+  transform: 'translateY(-2px)',
+  boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)'
+}, '.btn-primary');
+
+styles.addClass('btn-secondary', {
+  background: '#f0f0f0',
+  color: '#333'
+});
+
+styles.addPseudoClass('hover', {
+  background: '#e0e0e0',
+  transform: 'translateY(-2px)'
+}, '.btn-secondary');
+
+styles.addPseudoClass('active', {
+  transform: 'translateY(0)'
+}, '.btn');
+
+styles.inject('global-styles');
+export default styles;
+`;
+  await writeFile(join(projectPath, "src", "styles.ts"), stylesTs);
+  const clientTs = `import { div, html, head, body, title, link, script, meta } from 'elit/el';
+
+export const client = html(
+  head(
+    title('${projectName2} - Elit App'),
+    link({ rel: 'icon', type: 'image/svg+xml', href: 'favicon.svg' }),
+    meta({ charset: 'UTF-8' }),
+    meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+    meta({ name: 'description', content: 'Elit - Full-stack TypeScript framework with dev server, HMR, routing, SSR, and REST API.' })
+  ),
+  body(
+    div({ id: 'root' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);
+`;
+  await writeFile(join(projectPath, "src", "client.ts"), clientTs);
+  const serverTs = `import { ServerRouter } from 'elit/server';
+
+export const router = new ServerRouter();
+
+router.get('/api/hello', async (ctx) => {
+  ctx.res.setHeader('Content-Type', 'application/json');
+  ctx.res.end(JSON.stringify({ message: 'Hello from Elit ServerRouter!' }));
+});
+
+export const server = router;
+`;
+  await writeFile(join(projectPath, "src", "server.ts"), serverTs);
+}
+async function generateFullTemplate(projectPath, projectName2) {
+  const mainTs = `import { div, h1, h2, button, p } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import { render } from 'elit/dom';
+import './styles.ts';
+
+// Create reactive state
+export const count = createState(0);
+export const message = createState<string>('');
+
+// Fetch from API
+async function fetchMessage() {
+  try {
+    const res = await fetch('/api/hello');
+    const data = await res.json();
+    message.value = data.message;
+  } catch (err) {
+    message.value = 'Error loading message';
+  }
+}
+
+// Create app
+export const app = div({ className: 'container' },
+  div({ className: 'card' },
+    h1('Elit Full-Stack App \u{1F680}'),
+    p('Counter and API integration example'),
+
+    div({ className: 'counter' },
+      h2('Counter Example'),
+      reactive(count, (value) =>
+        div({ className: 'count-display' }, \`Count: \${value}\`)
+      ),
+      div({ className: 'button-group' },
+        button({
+          onclick: () => count.value--,
+          className: 'btn btn-secondary'
+        }, '- Decrement'),
+        button({
+          onclick: () => count.value = 0,
+          className: 'btn btn-secondary'
+        }, 'Reset'),
+        button({
+          onclick: () => count.value++,
+          className: 'btn btn-primary'
+        }, '+ Increment')
+      )
+    ),
+
+    div({ className: 'api-section' },
+      h2('API Example'),
+      button({
+        onclick: () => fetchMessage(),
+        className: 'btn btn-primary'
+      }, 'Fetch from API'),
+      reactive(message, (msg) =>
+        msg ? p({ className: 'api-message' }, \`API says: \${msg}\`) : p('')
+      )
+    )
+  )
+);
+
+render('root', app);
+console.log('[Main] App rendered');
+`;
+  await writeFile(join(projectPath, "src", "main.ts"), mainTs);
+  const serverTs = `import { ServerRouter } from 'elit/server';
+
+export const router = new ServerRouter();
+
+router.get('/api/hello', async (ctx) => {
+  ctx.res.setHeader('Content-Type', 'application/json');
+  ctx.res.end(JSON.stringify({ message: 'Hello from Elit ServerRouter!' }));
+});
+
+router.get('/api/count', async (ctx) => {
+  ctx.res.setHeader('Content-Type', 'application/json');
+  ctx.res.end(JSON.stringify({ count: Math.floor(Math.random() * 100) }));
+});
+
+export const server = router;
+`;
+  await writeFile(join(projectPath, "src", "server.ts"), serverTs);
+  const stylesTs = `import styles from 'elit/style';
+
+// Global styles
+styles.addTag('*', {
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box'
+});
+
+styles.addTag('body', {
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  minHeight: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '2rem'
+});
+
+// Container
+styles.addClass('container', {
+  width: '100%',
+  maxWidth: '600px'
+});
+
+// Card
+styles.addClass('card', {
+  background: 'white',
+  borderRadius: '16px',
+  padding: '3rem',
+  boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
+});
+
+// Typography
+styles.addTag('h1', {
+  fontSize: '2.5rem',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  WebkitBackgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  backgroundClip: 'text',
+  marginBottom: '1rem'
+});
+
+styles.addTag('h2', {
+  fontSize: '1.5rem',
+  color: '#333',
+  marginBottom: '1rem'
+});
+
+styles.addTag('p', {
+  color: '#666',
+  marginBottom: '2rem',
+  lineHeight: 1.6
+});
+
+// Counter section
+styles.addClass('counter', {
+  marginTop: '2rem',
+  paddingTop: '2rem',
+  borderTop: '2px solid #f0f0f0'
+});
+
+styles.addClass('count-display', {
+  fontSize: '3rem',
+  fontWeight: 'bold',
+  color: '#667eea',
+  textAlign: 'center',
+  margin: '2rem 0'
+});
+
+// API section
+styles.addClass('api-section', {
+  marginTop: '2rem',
+  paddingTop: '2rem',
+  borderTop: '2px solid #f0f0f0'
+});
+
+styles.addClass('api-message', {
+  marginTop: '1rem',
+  padding: '1rem',
+  background: '#f0f0f0',
+  borderRadius: '8px',
+  color: '#333',
+  textAlign: 'center'
+});
+
+// Button group
+styles.addClass('button-group', {
+  display: 'flex',
+  gap: '1rem',
+  justifyContent: 'center'
+});
+
+// Buttons
+styles.addClass('btn', {
+  padding: '0.75rem 1.5rem',
+  border: 'none',
+  borderRadius: '8px',
+  fontSize: '1rem',
+  fontWeight: 600,
+  cursor: 'pointer',
+  transition: 'all 0.2s'
+});
+
+styles.addClass('btn-primary', {
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  color: 'white'
+});
+
+styles.addPseudoClass('hover', {
+  transform: 'translateY(-2px)',
+  boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)'
+}, '.btn-primary');
+
+styles.addClass('btn-secondary', {
+  background: '#f0f0f0',
+  color: '#333'
+});
+
+styles.addPseudoClass('hover', {
+  background: '#e0e0e0',
+  transform: 'translateY(-2px)'
+}, '.btn-secondary');
+
+styles.addPseudoClass('active', {
+  transform: 'translateY(0)'
+}, '.btn');
+
+styles.inject('global-styles');
+export default styles;
+`;
+  await writeFile(join(projectPath, "src", "styles.ts"), stylesTs);
+  const clientTs = `import { div, html, head, body, title, link, script, meta } from 'elit/el';
+
+export const client = html(
+  head(
+    title('${projectName2} - Elit Full-Stack App'),
+    link({ rel: 'icon', type: 'image/svg+xml', href: 'favicon.svg' }),
+    meta({ charset: 'UTF-8' }),
+    meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+    meta({ name: 'description', content: 'Full-stack TypeScript framework with dev server, HMR, routing, SSR, and REST API.' })
+  ),
+  body(
+    div({ id: 'root' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);
+`;
+  await writeFile(join(projectPath, "src", "client.ts"), clientTs);
+}
+async function generateMinimalTemplate(projectPath, projectName2) {
+  const mainTs = `import { div, h1 } from 'elit/el';
+import { render } from 'elit/dom';
+
+// Create app
+export const app = div(
+  h1('Hello Elit! \u{1F44B}')
+);
+
+render('root', app);
+console.log('[Main] App rendered');
+`;
+  await writeFile(join(projectPath, "src", "main.ts"), mainTs);
+  const clientTs = `import { div, html, head, body, title, meta, script } from 'elit/el';
+
+export const client = html(
+  head(
+    title('${projectName2}'),
+    meta({ charset: 'UTF-8' }),
+    meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' })
+  ),
+  body(
+    div({ id: 'root' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);
+`;
+  await writeFile(join(projectPath, "src", "client.ts"), clientTs);
+  const serverTs = `import { ServerRouter } from 'elit/server';
+
+export const router = new ServerRouter();
+
+// Add your API routes here
+// Example:
+// router.get('/api/hello', async (ctx) => {
+//   ctx.res.setHeader('Content-Type', 'application/json');
+//   ctx.res.end(JSON.stringify({ message: 'Hello!' }));
+// });
+
+export const server = router;
+`;
+  await writeFile(join(projectPath, "src", "server.ts"), serverTs);
+}
+var projectName = getProjectName();
+var template = getTemplate();
+log("\n\u{1F680} Create Elit App\n", "cyan");
+createProject(projectName, template).catch((err) => {
+  log(`Error: ${err.message}`, "red");
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-elit",
+  "version": "3.0.0",
+  "description": "Scaffolding tool for creating Elit projects",
+  "type": "module",
+  "bin": {
+    "create-elit": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [
+    "create-elit",
+    "elit",
+    "scaffolding",
+    "cli",
+    "template",
+    "boilerplate"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/d-osc/elit.git",
+    "directory": "packages/create-elit"
+  },
+  "bugs": {
+    "url": "https://github.com/d-osc/elit/issues"
+  },
+  "homepage": "https://d-osc.github.io/elit/",
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}