create-elit 3.6.5 → 3.6.7

package/README.md

@@ -4,105 +4,69 @@ Scaffolding tool for creating new Elit projects.
 
 ## Usage
 
-With npm:
+Default starter:
+
 ```bash
 npm create elit@latest my-app
 ```
 
-With yarn:
-```bash
-yarn create elit my-app
-```
+Pick a template:
 
-With pnpm:
 ```bash
-pnpm create elit my-app
+npm create elit@latest my-app -- --template basic
 ```
 
-With bun:
+List available templates:
+
 ```bash
-bun create elit my-app
+npm create elit@latest -- --list-templates
 ```
 
-With deno:
+With other package managers:
+
 ```bash
-deno run -A npm:create-elit my-app
+yarn create elit my-app --template todo
+pnpm create elit my-app --template todo
+bun create elit my-app --template todo
+deno run -A npm:create-elit my-app --template todo
 ```
 
 ## Templates
 
-Choose a template with the `--template` flag:
+- `basic` - lightweight single-page starter with a reactive counter and no API setup
+- `todo` (default) - fullstack todo workspace with persistence in `databases/todo.ts` via `elit/database`
+- `auth` - auth and chat starter with profile and messaging flows
 
-```bash
-npm create elit@latest my-app --template=basic
-```
-
-Available templates:
+You can also use the full folder names:
 
-- **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
+- `basic-example`
+- `todo-fullstack-example`
+- `auth-fullstack-example`
 
-## Features
+CLI flags:
 
-✨ **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
+- `-t`, `--template <name>` - choose a template
+- `-l`, `--list-templates` - show available templates
+- `-h`, `--help` - show usage and template options
 
-## What's Included
+## What Each Project Includes
 
-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
+- TypeScript setup
+- `package.json` with Elit scripts
+- `elit.config.ts` for dev, build, preview, mobile, desktop, and WAPK flows
+- Auto-generated hidden files such as `.gitignore`, `.wapkignore`, and `.wapkpatch`
+- A ready-to-run README tailored to the selected starter
 
 ## Example
 
 ```bash
-# Create a new project
-npm create elit@latest my-elit-app
-
-# Navigate to project
+npm create elit@latest my-elit-app -- --template basic
 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
+Visit http://localhost:3003 to see your app.
 
 ## Learn More
 

package/dist/index.js

@@ -2,11 +2,38 @@
 
 // src/index.ts
 import { mkdir, writeFile, readFile, readdir } from "fs/promises";
-import { join, resolve, dirname } from "path";
+import { join, resolve, dirname, basename } from "path";
 import { existsSync } from "fs";
 import { fileURLToPath } from "url";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
+var hiddenTemplateFiles = {
+  gitignore: ".gitignore",
+  wapkignore: ".wapkignore",
+  wapkpatch: ".wapkpatch"
+};
+var templates = [
+  {
+    id: "todo-fullstack-example",
+    aliases: ["todo", "todo-fullstack-example"],
+    description: "Database-backed todo workspace starter"
+  },
+  {
+    id: "basic-example",
+    aliases: ["basic", "basic-example"],
+    description: "Lightweight single-page starter",
+    isDefault: true
+  },
+  {
+    id: "auth-fullstack-example",
+    aliases: ["auth", "auth-fullstack-example"],
+    description: "Authentication and chat starter"
+  }
+];
+var defaultTemplate = templates.find((template) => template.isDefault)?.id ?? templates[0].id;
+var templateAliases = Object.fromEntries(
+  templates.flatMap((template) => template.aliases.map((alias) => [alias, template.id]))
+);
 async function getElitVersion() {
   const packageJsonPath = resolve(__dirname, "../package.json");
   const packageJson = JSON.parse(await readFile(packageJsonPath, "utf-8"));
@@ -23,9 +50,80 @@ var colors = {
 function log(message, color = "reset") {
   console.log(`${colors[color]}${message}${colors.reset}`);
 }
-function getProjectName() {
+function logAvailableTemplates() {
+  log("Available templates:", "yellow");
+  for (const template of templates) {
+    const primaryAlias = template.aliases[0];
+    const defaultSuffix = template.id === defaultTemplate ? " (default)" : "";
+    const fullName = template.aliases[1] ? ` [${template.aliases[1]}]` : "";
+    log(`  ${primaryAlias}${defaultSuffix} - ${template.description}${fullName}`, "dim");
+  }
+}
+function logHelp() {
+  log("Usage:", "yellow");
+  log("  create-elit [project-name] [options]", "dim");
+  log("", "reset");
+  log("Options:", "yellow");
+  log("  -t, --template <name>   Choose a template", "dim");
+  log("  -l, --list-templates    Show available templates", "dim");
+  log("  -h, --help              Show this help message", "dim");
+  log("", "reset");
+  logAvailableTemplates();
+}
+function resolveTemplateName(templateName2) {
+  const normalized = templateAliases[templateName2];
+  if (!normalized) {
+    log(`Error: Unknown template "${templateName2}".`, "red");
+    logAvailableTemplates();
+    process.exit(1);
+  }
+  return normalized;
+}
+function getCliOptions() {
   const args = process.argv.slice(2);
-  return args[0] || "my-elit-app";
+  let projectName2 = "my-elit-app";
+  let templateName2 = defaultTemplate;
+  let listTemplates2 = false;
+  let showHelp2 = false;
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === "--list-templates" || arg === "--list" || arg === "-l") {
+      listTemplates2 = true;
+      continue;
+    }
+    if (arg === "--help" || arg === "-h") {
+      showHelp2 = true;
+      continue;
+    }
+    if (arg === "--template" || arg === "-t") {
+      const nextArg = args[index + 1];
+      if (!nextArg || nextArg.startsWith("-")) {
+        log("Error: Missing value for --template.", "red");
+        logAvailableTemplates();
+        process.exit(1);
+      }
+      templateName2 = resolveTemplateName(nextArg);
+      index += 1;
+      continue;
+    }
+    if (arg.startsWith("--template=")) {
+      templateName2 = resolveTemplateName(arg.slice("--template=".length));
+      continue;
+    }
+    if (arg.startsWith("-t=")) {
+      templateName2 = resolveTemplateName(arg.slice("-t=".length));
+      continue;
+    }
+    if (!arg.startsWith("-") && projectName2 === "my-elit-app") {
+      projectName2 = arg;
+    }
+  }
+  return {
+    projectName: projectName2,
+    templateName: templateName2,
+    listTemplates: listTemplates2,
+    showHelp: showHelp2
+  };
 }
 async function copyDirectory(src, dest, replacements) {
   await mkdir(dest, { recursive: true });
@@ -45,17 +143,24 @@ async function copyAndReplaceFile(src, dest, replacements) {
   for (const [placeholder, value] of Object.entries(replacements)) {
     content = content.split(placeholder).join(value);
   }
-  const finalDest = dest.endsWith("gitignore") && !dest.endsWith(".gitignore") ? join(dirname(dest), ".gitignore") : dest;
+  const hiddenFileName = hiddenTemplateFiles[basename(dest)];
+  const finalDest = hiddenFileName ? join(dirname(dest), hiddenFileName) : dest;
   await writeFile(finalDest, content, "utf-8");
 }
-async function createProject(projectName2) {
+async function createProject(projectName2, templateName2) {
   const projectPath = resolve(process.cwd(), projectName2);
-  const templatesPath = resolve(__dirname, "templates");
+  const templatesPath = resolve(__dirname, "templates", templateName2);
   if (existsSync(projectPath)) {
     log(`Error: Directory "${projectName2}" already exists!`, "red");
     process.exit(1);
   }
+  if (!existsSync(templatesPath)) {
+    log(`Error: Template "${templateName2}" is not available in this build.`, "red");
+    logAvailableTemplates();
+    process.exit(1);
+  }
   log(`Creating a new Elit app in ${projectPath}...`, "cyan");
+  log(`Using template: ${templateName2}`, "dim");
   const elitVersion = await getElitVersion();
   const replacements = {
     "ELIT_PROJECT_NAME": projectName2,
@@ -76,9 +181,17 @@ async function createProject(projectName2) {
   log("  npm run dev\n", "cyan");
   log("Happy coding! \u{1F680}", "green");
 }
-var projectName = getProjectName();
+var { projectName, templateName, listTemplates, showHelp } = getCliOptions();
 log("\n\u{1F680} Create Elit App\n", "cyan");
-createProject(projectName).catch((err) => {
+if (showHelp) {
+  logHelp();
+  process.exit(0);
+}
+if (listTemplates) {
+  logAvailableTemplates();
+  process.exit(0);
+}
+createProject(projectName, templateName).catch((err) => {
   log(`Error: ${err.message}`, "red");
   process.exit(1);
 });

package/dist/templates/{elit.config.ts → auth-fullstack-example/elit.config.ts}

@@ -7,6 +7,8 @@ export default {
     host: 'localhost',
     open: true,
     logging: true,
+    outDir: './dev-dist',
+    outFile: 'index.js',
     clients: [{
       root: '.',
       basePath: '',
@@ -68,5 +70,54 @@ export default {
       include: ['**/*.ts'], // รวมทุกไฟล์ TypeScript ในโปรเจกต์
       exclude: ['**/*.test.ts', '**/*.spec.ts', '**/node_modules/**', '**/dist/**', '**/coverage/**']
     }
+  },
+  mobile: {
+    cwd: ".",
+    appId: "com.elit.androidnativeexample",
+    appName: "ElitAndroidNativeExample",
+    webDir: "dist",
+    mode: "hybrid", // native, webview, or hybrid
+    permissions: [
+      "android.permission.INTERNET",
+      "android.permission.ACCESS_NETWORK_STATE"
+    ],
+    native: {
+      entry: "./src/native-screen.ts",
+      exportName: "screen",
+      ios: {
+        enabled: false
+      }
+    }
+  },
+  desktop: {
+    compiler: 'auto',
+    entry: './src/main.ts',
+    mode: 'hybrid',
+    outDir: './desktop-dist',
+    runtime: 'quickjs',
+  },
+  wapk: {
+    name: 'elit-example',
+    version: '1.0.0',
+    runtime: 'node',
+    entry: './dist/index.js',
+    script: {
+      start: 'node ./dist/index.js',
+    },
+    env: {
+      APP_NAME: 'Elit Example',
+    },
+    run: {
+      runtime: 'node',
+      useWatcher: true,
+      watchArchive: true,
+      syncInterval: 150,
+      archiveSyncInterval: 150,
+    },
+    // desktop: {
+    //   width: 1024,
+    //   height: 768,
+    //   title: "WAPK Example App"
+    // }
   }
 };

package/dist/templates/auth-fullstack-example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ELIT_PROJECT_NAME",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "elit dev",
+    "build": "elit build",
+    "preview": "elit preview",
+    "mobile:init": "elit mobile init . --app-id com.elit.mobileexample --app-name ElitMobileExample --web-dir dist",
+    "mobile:sync": "elit mobile sync --cwd . --web-dir dist",
+    "mobile:doctor": "elit mobile doctor --cwd . --json",
+    "mobile:run:android": "elit mobile run android --cwd .",
+    "mobile:run:ios": "elit mobile run ios --cwd .",
+    "mobile:build:android": "elit mobile build android --cwd .",
+    "mobile:build:ios": "elit mobile build ios --cwd .",
+    "desktop:run": "elit desktop run",
+    "desktop:build": "elit desktop build",
+    "test": "elit test",
+    "test:watch": "elit test --watch",
+    "test:coverage": "elit test --coverage"
+  },
+  "dependencies": {
+    "@types/node": "^25.0.9",
+    "elit": "^ELIT_VERSION"
+  }
+}

package/dist/templates/auth-fullstack-example/src/native-screen.ts

@@ -0,0 +1,10 @@
+import { a, button, div, h1, input, p } from 'elit/el';
+
+export const screen = () => div(
+    { style: { padding: '24px' } },
+    h1('Elit Native Mobile Example'),
+    p('This screen is generated from the same Elit syntax during elit mobile sync.'),
+    input({ type: 'checkbox', checked: true }),
+    a({ href: 'https://github.com/d-osc/elit' }, 'Open project page'),
+    button({ onClick: () => undefined }, 'Native placeholder button')
+);

package/dist/templates/auth-fullstack-example/wapkignore

@@ -0,0 +1,10 @@
+node_modules
+tests
+src
+dev-dist
+tsconfig.json
+.elit-config-*
+*.wapk
+package-lock.json
+dist/main.js.map
+public

package/dist/templates/auth-fullstack-example/wapkpatch

@@ -0,0 +1 @@
+dist

package/dist/templates/basic-example/README.md

@@ -0,0 +1,39 @@
+# ELIT_PROJECT_NAME
+
+A lightweight Elit starter with a polished single-page app, a reactive counter, and no API setup.
+
+## What is included
+
+- A small web app in `src/main.ts`
+- CSS-in-JS styling in `src/styles.ts`
+- Build, preview, mobile, desktop, and WAPK config in `elit.config.ts`
+- Hidden scaffold files for `.gitignore`, `.wapkignore`, and `.wapkpatch`
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+Open http://localhost:3003 to view your app.
+
+## Project structure
+
+- `src/main.ts` - main web entry with a reactive counter and starter layout
+- `src/styles.ts` - app styling using `elit/style`
+- `src/mobile.ts` - simple native preview entry for mobile mode
+- `public/index.html` - browser entry document
+
+## Useful scripts
+
+- `npm run dev` - start the dev server with HMR
+- `npm run build` - build the app for production
+- `npm run preview` - preview the production build locally
+- `npm run mobile:sync` - sync the web build into the mobile shell
+- `npm run desktop:run` - run the desktop shell
+
+## Learn more
+
+- [Elit Documentation](https://d-osc.github.io/elit)
+- [GitHub Repository](https://github.com/d-osc/elit)

package/dist/templates/basic-example/elit.config.ts

@@ -0,0 +1,114 @@
+import { client } from './src/client';
+
+export default {
+  dev: {
+    port: 3003,
+    host: 'localhost',
+    open: true,
+    logging: true,
+    outDir: './dev-dist',
+    outFile: 'index.js',
+    clients: [{
+      root: '.',
+      basePath: '',
+      ssr: () => client
+    }]
+  },
+  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 }) => {
+          let html = content.replace('src="../src/main.ts"', 'src="main.js"');
+
+          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'
+  },
+  test: {
+    include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    exclude: ['node_modules', 'dist', 'benchmark', 'docs', 'coverage'],
+    testTimeout: 5000,
+    bail: false,
+    globals: true,
+    watch: false,
+    reporter: 'verbose',
+    coverage: {
+      enabled: false,
+      provider: 'v8',
+      reporter: ['text', 'html', 'lcov', 'json', 'coverage-final.json', 'clover'],
+      include: ['**/*.ts'],
+      exclude: ['**/*.test.ts', '**/*.spec.ts', '**/node_modules/**', '**/dist/**', '**/coverage/**']
+    }
+  },
+  mobile: {
+    cwd: '.',
+    appId: 'com.elit.basicexample',
+    appName: 'ElitBasicExample',
+    webDir: 'dist',
+    mode: 'hybrid',
+    permissions: [
+      'android.permission.INTERNET',
+      'android.permission.ACCESS_NETWORK_STATE'
+    ],
+    native: {
+      entry: './src/mobile.ts',
+      exportName: 'screen',
+      ios: {
+        enabled: false
+      }
+    }
+  },
+  desktop: {
+    compiler: 'auto',
+    entry: './src/main.ts',
+    mode: 'hybrid',
+    outDir: './desktop-dist',
+    runtime: 'quickjs'
+  },
+  wapk: {
+    name: 'elit-basic-example',
+    version: '1.0.0',
+    runtime: 'node',
+    entry: './dist/main.js',
+    script: {
+      start: 'node ./dist/main.js'
+    },
+    env: {
+      APP_NAME: 'Elit Basic Example'
+    },
+    run: {
+      runtime: 'node',
+      useWatcher: true,
+      watchArchive: true,
+      syncInterval: 150,
+      archiveSyncInterval: 150
+    }
+  }
+};

package/dist/templates/basic-example/gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env
+.env.local
+*.log
+.DS_Store
+data

package/dist/templates/basic-example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ELIT_PROJECT_NAME",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "elit dev",
+    "build": "elit build",
+    "preview": "elit preview",
+    "mobile:init": "elit mobile init . --app-id com.elit.mobileexample --app-name ElitMobileExample --web-dir dist",
+    "mobile:sync": "elit mobile sync --cwd . --web-dir dist",
+    "mobile:doctor": "elit mobile doctor --cwd . --json",
+    "mobile:run:android": "elit mobile run android --cwd .",
+    "mobile:run:ios": "elit mobile run ios --cwd .",
+    "mobile:build:android": "elit mobile build android --cwd .",
+    "mobile:build:ios": "elit mobile build ios --cwd .",
+    "desktop:run": "elit desktop run",
+    "desktop:build": "elit desktop build",
+    "test": "elit test",
+    "test:watch": "elit test --watch",
+    "test:coverage": "elit test --coverage"
+  },
+  "dependencies": {
+    "@types/node": "^25.0.9",
+    "elit": "^ELIT_VERSION"
+  }
+}

package/dist/templates/basic-example/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/basic-example/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 - Basic Example</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <meta name="description" content="A lightweight starter built with Elit.">
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="../src/main.ts"></script>
+</body>
+</html>

package/dist/templates/basic-example/src/client.ts

@@ -0,0 +1,15 @@
+import { body, div, head, html, link, meta, script, title } from 'elit/el';
+
+export const client = html(
+  head(
+    title('ELIT_PROJECT_NAME - Basic Example'),
+    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: 'A lightweight starter built with Elit.' })
+  ),
+  body(
+    div({ id: 'app' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);