create-elit 3.2.6 → 3.2.7

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-elit",
-  "version": "3.2.6",
+  "version": "3.2.7",
   "description": "Scaffolding tool for creating Elit projects",
   "type": "module",
   "bin": {