create-elit 3.2.6 → 3.2.8

package/dist/index.js

@@ -1,9 +1,17 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import { mkdir, writeFile } from "fs/promises";
-import { join, resolve } from "path";
+import { mkdir, writeFile, readFile, readdir } from "fs/promises";
+import { join, resolve, dirname } from "path";
 import { existsSync } from "fs";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+async function getElitVersion() {
+  const packageJsonPath = resolve(__dirname, "../package.json");
+  const packageJson = JSON.parse(await readFile(packageJsonPath, "utf-8"));
+  return packageJson.version;
+}
 var colors = {
   reset: "\x1B[0m",
   cyan: "\x1B[36m",
@@ -19,15 +27,40 @@ function getProjectName() {
   const args = process.argv.slice(2);
   return args[0] || "my-elit-app";
 }
+async function copyDirectory(src, dest, replacements) {
+  await mkdir(dest, { recursive: true });
+  const entries = await readdir(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    if (entry.isDirectory()) {
+      await copyDirectory(srcPath, destPath, replacements);
+    } else {
+      await copyAndReplaceFile(srcPath, destPath, replacements);
+    }
+  }
+}
+async function copyAndReplaceFile(src, dest, replacements) {
+  let content = await readFile(src, "utf-8");
+  for (const [placeholder, value] of Object.entries(replacements)) {
+    content = content.split(placeholder).join(value);
+  }
+  await writeFile(dest, content, "utf-8");
+}
 async function createProject(projectName2) {
   const projectPath = resolve(process.cwd(), projectName2);
+  const templatesPath = resolve(__dirname, "templates");
   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);
+  const elitVersion = await getElitVersion();
+  const replacements = {
+    "ELIT_PROJECT_NAME": projectName2,
+    "ELIT_VERSION": elitVersion
+  };
+  await copyDirectory(templatesPath, projectPath, replacements);
   log("\nSuccess! Created " + projectName2, "green");
   log("\nInside that directory, you can run several commands:", "dim");
   log("\n  npm run dev", "cyan");
@@ -42,321 +75,6 @@ async function createProject(projectName2) {
   log("  npm run dev\n", "cyan");
   log("Happy coding! \u{1F680}", "green");
 }
-async function generateTemplate(projectPath, projectName2) {
-  const packageJson = {
-    name: projectName2,
-    version: "0.0.0",
-    type: "module",
-    scripts: {
-      dev: "elit dev",
-      build: "elit build",
-      preview: "elit preview"
-    },
-    dependencies: {
-      elit: "^3.2.6"
-    }
-  };
-  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:3000 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: 3000,
-    host: 'localhost',
-    open: true,
-    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: 'localhost',
-    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 });
-  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);
-
-// Create app
-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);
-}
 var projectName = getProjectName();
 log("\n\u{1F680} Create Elit App\n", "cyan");
 createProject(projectName).catch((err) => {

package/dist/templates/README.md

@@ -0,0 +1,23 @@
+# ELIT_PROJECT_NAME
+
+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)

package/dist/templates/elit.config.ts

@@ -0,0 +1,59 @@
+import { server } from './src/server';
+import { client } from './src/client';
+
+export default {
+  dev: {
+    port: 3003,
+    host: 'localhost',
+    open: true,
+    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',
+        transform: (content: string, config: { basePath: string; projectName: string; }) => {
+          // Replace script src
+          let html = content.replace('src="../src/main.ts"', 'src="main.js"');
+
+          // Replace project name placeholder
+          html = html.replace(/ELIT_PROJECT_NAME/g, config.projectName);
+
+          // Inject base tag if basePath is configured
+          if (config.basePath) {
+            const baseTag = `<base href="${config.basePath}/">`;
+            html = html.replace(
+              '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+              `<meta name="viewport" content="width=device-width, initial-scale=1.0">\n  ${baseTag}`
+            );
+          }
+
+          return html;
+        }
+      },
+      { from: './public/favicon.svg', to: './favicon.svg' }
+    ]
+  }],
+  preview: {
+    port: 3000,
+    host: 'localhost',
+    open: false,
+    logging: true,
+    root: './dist',
+    basePath: '',
+    index: './index.html'
+  }
+};

package/dist/templates/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ELIT_PROJECT_NAME",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "elit dev",
+    "build": "elit build",
+    "preview": "elit preview"
+  },
+  "dependencies": {
+    "@types/node": "^25.0.9",
+     "elit": "^ELIT_VERSION"
+  }
+}

package/dist/templates/public/favicon.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366f1"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Clean background -->
+  <rect width="100" height="100" rx="20" fill="url(#grad)"/>
+
+  <!-- Simple E shape - 3 horizontal bars -->
+  <rect x="28" y="25" width="44" height="8" rx="4" fill="white"/>
+  <rect x="28" y="46" width="32" height="8" rx="4" fill="white"/>
+  <rect x="28" y="67" width="44" height="8" rx="4" fill="white"/>
+
+  <!-- Vertical connector -->
+  <rect x="28" y="25" width="8" height="50" rx="4" fill="white"/>
+
+  <!-- Single accent dot -->
+  <circle cx="72" cy="50" r="6" fill="white" opacity="0.5"/>
+</svg>

package/dist/templates/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ELIT_PROJECT_NAME</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="../src/main.ts"></script>
+</body>
+</html>

package/dist/templates/src/client.ts

@@ -0,0 +1,15 @@
+import { div, html, head, body, title, link, script, meta } from 'elit/el';
+
+export const client = html(
+  head(
+    title('ELIT_PROJECT_NAME - Elit App'),
+    link({ rel: 'icon', type: 'image/svg+xml', href: 'public/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: 'app' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);

package/dist/templates/src/components/Footer.ts

@@ -0,0 +1,20 @@
+import { footer, div, p, a } from 'elit/el';
+
+export function Footer() {
+  return footer({ className: 'footer' },
+    div({ className: 'footer-content' },
+      div({ className: 'footer-section' },
+        p({ className: 'footer-title' }, 'My Elit App'),
+        p({ className: 'footer-text' }, 'Built with Elit Framework')
+      ),
+      div({ className: 'footer-section' },
+        a({ href: 'https://github.com', target: '_blank', className: 'footer-link' }, 'GitHub'),
+        a({ href: '#', className: 'footer-link' }, 'Documentation'),
+        a({ href: '#', className: 'footer-link' }, 'Support')
+      ),
+      div({ className: 'footer-section' },
+        p({ className: 'footer-copyright' }, '© 2026 My Elit App. All rights reserved.')
+      )
+    )
+  );
+}

package/dist/templates/src/components/Header.ts

@@ -0,0 +1,70 @@
+import { header, nav, div, a, h1, button, span } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+
+export function Header(router: Router) {
+  // Check if user is logged in (has token in localStorage)
+  const isLoggedIn = createState(!!localStorage.getItem('token'));
+  const user = createState(() => {
+    const userStr = localStorage.getItem('user');
+    return userStr ? JSON.parse(userStr) : null;
+  });
+
+  // Listen for storage changes to update header when login/logout happens
+  const handleStorageChange = (e: StorageEvent) => {
+    if (e.key === 'token' || e.key === 'user') {
+      isLoggedIn.value = !!localStorage.getItem('token');
+      const userStr = localStorage.getItem('user');
+      user.value = userStr ? JSON.parse(userStr) : null;
+    }
+  };
+
+  // Also listen for custom storage events (same-tab updates)
+  const handleCustomStorageChange = () => {
+    isLoggedIn.value = !!localStorage.getItem('token');
+    const userStr = localStorage.getItem('user');
+    user.value = userStr ? JSON.parse(userStr) : null;
+  };
+
+  window.addEventListener('storage', handleStorageChange);
+  window.addEventListener('elit:storage', handleCustomStorageChange);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    isLoggedIn.value = false;
+    router.push('/');
+  };
+
+  return header({ className: 'header' },
+    nav({ className: 'nav' },
+      div({ className: 'nav-brand' },
+        a({ href: '#/', className: 'brand-link' },
+          h1({ className: 'brand-title' }, 'ELIT_PROJECT_NAME')
+        )
+      ),
+
+      reactive(isLoggedIn, (loggedIn) => {
+        if (loggedIn) {
+          return div({ className: 'nav-menu' },
+            a({ href: '#/chat/list', className: 'nav-link' }, 'Messages'),
+            a({ href: '#/profile', className: 'nav-link' }, 'Profile'),
+            reactive(user, (u) => u ? span({ className: 'nav-user' }, `Welcome, ${u.name}`) : null),
+            button({
+              className: 'btn btn-secondary btn-sm',
+              onclick: handleLogout
+            }, 'Logout')
+          );
+        }
+
+        return div({ className: 'nav-menu' },
+          a({ href: '#/login', className: 'nav-link' }, 'Login'),
+          button({
+            className: 'btn btn-primary btn-sm',
+            onclick: () => router.push('/register')
+          }, 'Sign Up')
+        );
+      })
+    )
+  );
+}

package/dist/templates/src/components/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export { Footer } from './Footer';

package/dist/templates/src/main.ts

@@ -0,0 +1,22 @@
+import { div, main } from 'elit/el';
+import { reactive } from 'elit/state';
+import { dom } from 'elit/dom';
+import { injectStyles } from './styles';
+import { router, RouterView } from './router';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+
+injectStyles()
+// Create reactive state (shared between SSR and client)
+// Main App
+const App = () =>
+  div(
+    Header(router),
+    main(
+      reactive(router.currentRoute, () => RouterView())
+    ),
+    Footer()
+  );
+
+// Render
+dom.render('#app', App());