create-elit 3.6.5 → 3.6.7

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

@@ -0,0 +1,89 @@
+import { button, div, h1, h2, p, section, span } from 'elit/el';
+import { dom } from 'elit/dom';
+import { createState, reactive } from 'elit/state';
+import { injectStyles } from './styles';
+
+const count = createState(0);
+
+const highlights = [
+  {
+    title: 'Minimal setup',
+    body: 'Start with one page, one entry file, and enough styling to shape your own direction quickly.'
+  },
+  {
+    title: 'Reactive by default',
+    body: 'The counter panel is deliberately small so you can replace it with your real state and interactions.'
+  },
+  {
+    title: 'Ready to extend',
+    body: 'Keep this starter simple for small tools, or grow it into a larger app with routing, APIs, and persistence later.'
+  }
+];
+
+const nextSteps = [
+  'Rename the placeholder copy to fit your project.',
+  'Replace the counter with your first real feature.',
+  'Use elit.config.ts as the place to add build, mobile, or desktop tweaks.'
+];
+
+function HighlightCard(title: string, body: string) {
+  return div({ className: 'highlight-card' },
+    h2({ className: 'highlight-title' }, title),
+    p({ className: 'highlight-copy' }, body)
+  );
+}
+
+function StepItem(index: number, label: string) {
+  return div({ className: 'step-item' },
+    span({ className: 'step-index' }, String(index).padStart(2, '0')),
+    p({ className: 'step-copy' }, label)
+  );
+}
+
+function App() {
+  return div({ className: 'app-shell' },
+    section({ className: 'hero-panel' },
+      div({ className: 'hero-copy' },
+        span({ className: 'hero-kicker' }, 'basic-example'),
+        h1({ className: 'hero-title' }, 'A clean Elit starter for small ideas and fast prototypes.'),
+        p({ className: 'hero-description' },
+          'Use this template when you want the simplest possible starting point with a tasteful UI, one reactive example, and room to reshape the structure immediately.'
+        ),
+        div({ className: 'hero-actions' },
+          button({ className: 'btn btn-primary', onclick: () => count.value += 1 }, 'Try the counter'),
+          button({ className: 'btn btn-secondary', onclick: () => count.value = 0 }, 'Reset')
+        )
+      ),
+      div({ className: 'counter-panel' },
+        span({ className: 'counter-label' }, 'Reactive state'),
+        reactive(count, (value: number) =>
+          div({ className: 'counter-value' }, String(value))
+        ),
+        p({ className: 'counter-copy' }, 'This is intentionally small. Swap it for your first form, dashboard metric, or workflow state without undoing a heavy starter.'),
+        div({ className: 'counter-row' },
+          button({ className: 'btn btn-ghost', onclick: () => count.value -= 1 }, 'Decrease'),
+          button({ className: 'btn btn-primary', onclick: () => count.value += 1 }, 'Increase')
+        )
+      )
+    ),
+    section({ className: 'content-grid' },
+      div({ className: 'panel' },
+        h2({ className: 'section-title' }, 'Why this starter exists'),
+        p({ className: 'section-copy' }, 'Not every new project needs auth, a database, or a multi-page workflow on day one. This template keeps the footprint low while still feeling intentional.'),
+        div({ className: 'highlight-grid' },
+          ...highlights.map((item) => HighlightCard(item.title, item.body))
+        )
+      ),
+      div({ className: 'panel panel-accent' },
+        h2({ className: 'section-title section-title-light' }, 'First moves'),
+        p({ className: 'section-copy section-copy-light' }, 'A good starter should disappear quickly. Use these as the first edits after scaffolding the app.'),
+        div({ className: 'steps-list' },
+          ...nextSteps.map((step, index) => StepItem(index + 1, step))
+        )
+      )
+    )
+  );
+}
+
+injectStyles();
+dom.render('#app', App());

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

@@ -0,0 +1,35 @@
+import { button, div, h1, p, span } from 'elit/el';
+
+function Tile(title: string, body: string) {
+  return div(
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+        padding: '14px 16px',
+        borderRadius: '18px',
+        background: '#fffaf4'
+      }
+    },
+    span({ style: { fontWeight: '700', color: '#173447' } }, title),
+    p({ style: { margin: '0', color: '#6d7c88' } }, body)
+  );
+}
+
+export const screen = () => div(
+  {
+    style: {
+      padding: '24px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '18px',
+      background: '#f4ede5'
+    }
+  },
+  h1({ style: { margin: '0', color: '#173447' } }, 'Basic Example'),
+  p({ style: { margin: '0', color: '#607180' } }, 'A small native-friendly preview for the create-elit basic starter.'),
+  Tile('One page first', 'Keep the initial scope small and prove the interaction model quickly.'),
+  Tile('Reactive state', 'Use the same Elit syntax to sketch mobile or desktop follow-up views.'),
+  button({ onClick: () => undefined }, 'Sync mobile shell')
+);

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

@@ -0,0 +1,273 @@
+import styles from 'elit/style';
+
+styles.addTag('*', {
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box'
+});
+
+styles.addTag('body', {
+  minHeight: '100vh',
+  fontFamily: "'Aptos', 'Trebuchet MS', sans-serif",
+  color: '#173447',
+  background: 'linear-gradient(160deg, #f7f1e9 0%, #efe4d8 54%, #e6d8c9 100%)'
+});
+
+styles.addTag('button', {
+  fontFamily: 'inherit'
+});
+
+styles.addClass('app-shell', {
+  maxWidth: '1120px',
+  margin: '0 auto',
+  padding: '32px 20px 48px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '20px'
+});
+
+styles.addClass('hero-panel', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+  gap: '20px',
+  alignItems: 'stretch'
+});
+
+styles.addClass('hero-copy', {
+  background: 'rgba(255, 250, 244, 0.8)',
+  borderRadius: '30px',
+  padding: '28px',
+  border: '1px solid rgba(255, 255, 255, 0.7)',
+  boxShadow: '0 22px 46px rgba(23, 52, 71, 0.08)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '14px'
+});
+
+styles.addClass('hero-kicker', {
+  display: 'inline-flex',
+  width: 'fit-content',
+  padding: '7px 12px',
+  borderRadius: '999px',
+  background: 'rgba(47, 125, 109, 0.12)',
+  color: '#25695d',
+  fontSize: '12px',
+  fontWeight: 800,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase'
+});
+
+styles.addClass('hero-title', {
+  fontSize: 'clamp(2.4rem, 4vw, 4.4rem)',
+  lineHeight: 0.98,
+  color: '#173447',
+  maxWidth: '11ch'
+});
+
+styles.addClass('hero-description', {
+  fontSize: '1rem',
+  lineHeight: 1.7,
+  color: '#5f6f7d',
+  maxWidth: '40rem'
+});
+
+styles.addClass('hero-actions', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '12px',
+  marginTop: '4px'
+});
+
+styles.addClass('counter-panel', {
+  background: 'linear-gradient(160deg, #173447 0%, #24566c 100%)',
+  borderRadius: '30px',
+  padding: '28px',
+  color: '#fffaf4',
+  boxShadow: '0 24px 48px rgba(23, 52, 71, 0.16)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '14px',
+  justifyContent: 'space-between'
+});
+
+styles.addClass('counter-label', {
+  fontSize: '12px',
+  fontWeight: 800,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: 'rgba(255, 250, 244, 0.74)'
+});
+
+styles.addClass('counter-value', {
+  fontSize: 'clamp(4rem, 10vw, 6rem)',
+  lineHeight: 0.9,
+  fontWeight: 800,
+  color: '#fffaf4'
+});
+
+styles.addClass('counter-copy', {
+  fontSize: '0.96rem',
+  lineHeight: 1.7,
+  color: 'rgba(255, 250, 244, 0.78)'
+});
+
+styles.addClass('counter-row', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '12px'
+});
+
+styles.addClass('content-grid', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+  gap: '20px'
+});
+
+styles.addClass('panel', {
+  background: 'rgba(255, 250, 244, 0.82)',
+  borderRadius: '30px',
+  padding: '28px',
+  border: '1px solid rgba(255, 255, 255, 0.72)',
+  boxShadow: '0 22px 46px rgba(23, 52, 71, 0.08)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px'
+});
+
+styles.addClass('panel-accent', {
+  background: 'linear-gradient(150deg, #2f7d6d 0%, #3b8f7d 60%, #f18f5a 130%)'
+});
+
+styles.addClass('section-title', {
+  fontSize: '1.4rem',
+  color: '#173447'
+});
+
+styles.addClass('section-title-light', {
+  color: '#fffaf4'
+});
+
+styles.addClass('section-copy', {
+  fontSize: '0.96rem',
+  lineHeight: 1.7,
+  color: '#61707e'
+});
+
+styles.addClass('section-copy-light', {
+  color: 'rgba(255, 250, 244, 0.82)'
+});
+
+styles.addClass('highlight-grid', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
+  gap: '14px'
+});
+
+styles.addClass('highlight-card', {
+  background: '#fffaf4',
+  borderRadius: '22px',
+  padding: '18px',
+  border: '1px solid rgba(23, 52, 71, 0.08)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px'
+});
+
+styles.addClass('highlight-title', {
+  fontSize: '1rem',
+  color: '#173447'
+});
+
+styles.addClass('highlight-copy', {
+  fontSize: '0.9rem',
+  lineHeight: 1.6,
+  color: '#64727f'
+});
+
+styles.addClass('steps-list', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px'
+});
+
+styles.addClass('step-item', {
+  display: 'grid',
+  gridTemplateColumns: '54px 1fr',
+  gap: '12px',
+  alignItems: 'start',
+  padding: '14px 0',
+  borderTop: '1px solid rgba(255, 250, 244, 0.18)'
+});
+
+styles.addClass('step-index', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '54px',
+  height: '54px',
+  borderRadius: '18px',
+  background: 'rgba(255, 250, 244, 0.15)',
+  color: '#fffaf4',
+  fontWeight: 800
+});
+
+styles.addClass('step-copy', {
+  paddingTop: '10px',
+  color: '#fffaf4',
+  lineHeight: 1.6,
+  fontSize: '0.95rem'
+});
+
+styles.addClass('btn', {
+  border: 'none',
+  borderRadius: '999px',
+  padding: '14px 18px',
+  fontSize: '0.95rem',
+  fontWeight: 800,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  transition: 'transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease'
+});
+
+styles.addClass('btn-primary', {
+  background: 'linear-gradient(135deg, #f18f5a 0%, #f06f45 100%)',
+  color: '#fffaf4',
+  boxShadow: '0 16px 30px rgba(240, 111, 69, 0.22)'
+});
+
+styles.addPseudoClass('hover', {
+  transform: 'translateY(-1px)',
+  boxShadow: '0 20px 36px rgba(240, 111, 69, 0.28)'
+}, '.btn-primary');
+
+styles.addClass('btn-secondary', {
+  background: '#fffaf4',
+  color: '#173447',
+  border: '1px solid rgba(23, 52, 71, 0.12)',
+  boxShadow: '0 10px 22px rgba(23, 52, 71, 0.08)'
+});
+
+styles.addPseudoClass('hover', {
+  transform: 'translateY(-1px)',
+  background: '#ffffff'
+}, '.btn-secondary');
+
+styles.addClass('btn-ghost', {
+  background: 'transparent',
+  color: '#fffaf4',
+  border: '1px solid rgba(255, 250, 244, 0.2)'
+});
+
+styles.addPseudoClass('hover', {
+  transform: 'translateY(-1px)',
+  background: 'rgba(255, 250, 244, 0.08)'
+}, '.btn-ghost');
+
+export function injectStyles() {
+  styles.inject('basic-example-styles');
+}
+
+export default styles;

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

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": [
+      "node",
+      "elit/test-globals"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

package/dist/templates/basic-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/basic-example/wapkpatch

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

package/dist/templates/todo-fullstack-example/README.md

@@ -0,0 +1,39 @@
+# ELIT_PROJECT_NAME
+
+A fullstack todo starter for Elit with file-backed persistence powered by `elit/database`.
+
+## What is included
+
+- A polished todo dashboard UI
+- REST API routes in `src/server.ts`
+- File persistence in `databases/todo.ts`
+- Build, preview, mobile, desktop, and WAPK config already wired in `elit.config.ts`
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+Open http://localhost:3003 and start adding tasks. Every create, update, complete, or delete action writes back to `databases/todo.ts`.
+
+## Project structure
+
+- `src/pages/TodoPage.ts` - main todo experience
+- `src/server.ts` - CRUD API powered by `elit/database`
+- `databases/todo.ts` - starter data file that acts as your local database
+- `src/mobile.ts` - native preview entry for mobile mode
+
+## Useful scripts
+
+- `npm run dev` - start the dev server with HMR
+- `npm run build` - build the web 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/todo-fullstack-example/databases/todo.ts

@@ -0,0 +1,41 @@
+export type TodoPriority = 'low' | 'medium' | 'high';
+
+export interface TodoItem {
+	id: string;
+	title: string;
+	notes: string;
+	priority: TodoPriority;
+	completed: boolean;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export const todos: TodoItem[] = [
+	{
+		id: 'todo_launch_board',
+		title: 'Ship the first database-backed board',
+		notes: 'Wire the server endpoints and confirm every action writes back to databases/todo.ts.',
+		priority: 'high',
+		completed: false,
+		createdAt: '2026-04-17T09:00:00.000Z',
+		updatedAt: '2026-04-17T09:00:00.000Z'
+	},
+	{
+		id: 'todo_polish_copy',
+		title: 'Tune the starter copy',
+		notes: 'Replace placeholders with a short workflow that makes sense for your team.',
+		priority: 'medium',
+		completed: false,
+		createdAt: '2026-04-17T09:30:00.000Z',
+		updatedAt: '2026-04-17T09:30:00.000Z'
+	},
+	{
+		id: 'todo_cleanup_template',
+		title: 'Prune example tasks you do not need',
+		notes: 'Keep the board lean so the starter feels like your own project from day one.',
+		priority: 'low',
+		completed: true,
+		createdAt: '2026-04-17T08:15:00.000Z',
+		updatedAt: '2026-04-17T10:15:00.000Z'
+	}
+];

package/dist/templates/todo-fullstack-example/elit.config.ts

@@ -0,0 +1,123 @@
+import { server } from './src/server';
+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,
+      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 }) => {
+          // Replace script src
+          let html = content.replace('src="../src/main.ts"', 'src="main.js"');
+
+          // 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'
+  },
+  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'], // รวมทุกไฟล์ 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/mobile.ts",
+      exportName: "screen",
+      ios: {
+        enabled: false
+      }
+    }
+  },
+  desktop: {
+    compiler: 'auto',
+    entry: './src/main.ts',
+    mode: 'hybrid',
+    outDir: './desktop-dist',
+    runtime: 'quickjs',
+  },
+  wapk: {
+    name: 'elit-todo-example',
+    version: '1.0.0',
+    runtime: 'node',
+    entry: './dist/main.js',
+    script: {
+      start: 'node ./dist/main.js',
+    },
+    env: {
+      APP_NAME: 'Elit Todo Example',
+    },
+    run: {
+      runtime: 'node',
+      useWatcher: true,
+      watchArchive: true,
+      syncInterval: 150,
+      archiveSyncInterval: 150,
+    },
+    // desktop: {
+    //   width: 1024,
+    //   height: 768,
+    //   title: "WAPK Example App"
+    // }
+  }
+};

package/dist/templates/todo-fullstack-example/gitignore

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

package/dist/templates/todo-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"
+  }
+}