create-elit 3.1.6 → 3.1.7

package/dist/index.js

@@ -4,11 +4,6 @@
 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",
@@ -24,16 +19,7 @@ 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) {
+async function createProject(projectName2) {
   const projectPath = resolve(process.cwd(), projectName2);
   if (existsSync(projectPath)) {
     log(`Error: Directory "${projectName2}" already exists!`, "red");
@@ -41,7 +27,7 @@ async function createProject(projectName2, template2) {
   }
   log(`Creating a new Elit app in ${projectPath}...`, "cyan");
   await mkdir(projectPath, { recursive: true });
-  await generateTemplate(projectPath, projectName2, template2);
+  await generateTemplate(projectPath, projectName2);
   log("\nSuccess! Created " + projectName2, "green");
   log("\nInside that directory, you can run several commands:", "dim");
   log("\n  npm run dev", "cyan");
@@ -56,7 +42,7 @@ async function createProject(projectName2, template2) {
   log("  npm run dev\n", "cyan");
   log("Happy coding! \u{1F680}", "green");
 }
-async function generateTemplate(projectPath, projectName2, template2) {
+async function generateTemplate(projectPath, projectName2) {
   const packageJson = {
     name: projectName2,
     version: "0.0.0",
@@ -67,7 +53,7 @@ async function generateTemplate(projectPath, projectName2, template2) {
       preview: "elit preview"
     },
     dependencies: {
-      elit: "^3.1.6"
+      elit: "^3.1.7"
     }
   };
   await writeFile(
@@ -112,7 +98,7 @@ npm install
 npm run dev
 \`\`\`
 
-Visit http://localhost:3003 to view your app.
+Visit http://localhost:3000 to view your app.
 
 ## Available Scripts
 
@@ -131,9 +117,9 @@ import { client } from './src/client';
 
 export default {
   dev: {
-    port: 3003,
+    port: 3000,
     host: 'localhost',
-    open: ${template2 === "basic" ? "true" : "false"},
+    open: true,
     logging: true,
     clients: [{
       root: '.',
@@ -184,24 +170,15 @@ export default {
 `;
   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)
+// Create reactive state
 export const count = createState(0);
 
-// Create app (shared between SSR and client)
+// Create app
 export const app = div({ className: 'container' },
   div({ className: 'card' },
     h1('Welcome to Elit! \u{1F680}'),
@@ -376,289 +353,13 @@ router.get('/api/hello', async (ctx) => {
   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) => {
+createProject(projectName).catch((err) => {
   log(`Error: ${err.message}`, "red");
   process.exit(1);
 });

package/package.json

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