create-dalila 1.0.0

package/README.md

@@ -0,0 +1,42 @@
+# create-dalila
+
+Scaffold a new Dalila project with one command.
+
+## Usage
+
+```bash
+npm create dalila my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Open http://localhost:4242 to see your app.
+
+## What's Included
+
+- Counter example with signals and computed values
+- Hot reload development server
+- TypeScript support out of the box
+- Minimal CSS styling
+
+## Project Structure
+
+```
+my-app/
+├── index.html      # Main HTML file
+├── src/
+│   ├── main.ts     # Application entry point
+│   └── style.css   # Styles
+├── package.json
+└── tsconfig.json
+```
+
+## Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Compile TypeScript
+
+## Learn More
+
+- [Dalila Documentation](https://github.com/evertonccarvalho/dalila)

package/index.js

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const projectName = args[0];
+
+// Colors for terminal
+const green = (text) => `\x1b[32m${text}\x1b[0m`;
+const cyan = (text) => `\x1b[36m${text}\x1b[0m`;
+const yellow = (text) => `\x1b[33m${text}\x1b[0m`;
+const bold = (text) => `\x1b[1m${text}\x1b[0m`;
+
+function printHelp() {
+  console.log(`
+${bold('create-dalila')} - Create a new Dalila project
+
+${bold('Usage:')}
+  npm create dalila ${cyan('<project-name>')}
+  npx create-dalila ${cyan('<project-name>')}
+
+${bold('Examples:')}
+  npm create dalila my-app
+  npx create-dalila todo-app
+
+${bold('Options:')}
+  -h, --help     Show this help message
+  -v, --version  Show version
+`);
+}
+
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function updatePackageJson(projectPath, projectName) {
+  const pkgPath = path.join(projectPath, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  pkg.name = projectName;
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+}
+
+function main() {
+  // Handle flags
+  if (args.includes('-h') || args.includes('--help')) {
+    printHelp();
+    process.exit(0);
+  }
+
+  if (args.includes('-v') || args.includes('--version')) {
+    const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
+    console.log(pkg.version);
+    process.exit(0);
+  }
+
+  // Validate project name
+  if (!projectName) {
+    console.error(`${yellow('Error:')} Please specify the project name:\n`);
+    console.log(`  npm create dalila ${cyan('<project-name>')}\n`);
+    console.log('For example:');
+    console.log(`  npm create dalila ${cyan('my-app')}\n`);
+    process.exit(1);
+  }
+
+  // Check if directory exists
+  const projectPath = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(projectPath)) {
+    console.error(`${yellow('Error:')} Directory "${projectName}" already exists.\n`);
+    process.exit(1);
+  }
+
+  console.log();
+  console.log(`Creating ${bold(projectName)}...`);
+  console.log();
+
+  // Copy template
+  const templatePath = path.join(__dirname, 'template');
+  copyDir(templatePath, projectPath);
+
+  // Update package.json with project name
+  updatePackageJson(projectPath, projectName);
+
+  // Success message
+  console.log(`${green('Done!')} Created ${bold(projectName)}\n`);
+  console.log('Next steps:\n');
+  console.log(`  ${cyan('cd')} ${projectName}`);
+  console.log(`  ${cyan('npm install')}`);
+  console.log(`  ${cyan('npm run dev')}`);
+  console.log();
+  console.log(`Open ${cyan('http://localhost:4242')} to see your app.`);
+  console.log();
+}
+
+main();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-dalila",
+  "version": "1.0.0",
+  "description": "Create Dalila apps with one command",
+  "bin": {
+    "create-dalila": "index.js"
+  },
+  "type": "module",
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "keywords": [
+    "dalila",
+    "create",
+    "scaffold",
+    "template",
+    "signals",
+    "reactive"
+  ],
+  "author": "Everton",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/evertonccarvalho/dalila"
+  }
+}

package/template/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dalila App</title>
+  <link rel="stylesheet" href="/src/style.css">
+</head>
+<body>
+  <div id="app" class="container">
+    <h1>Welcome to Dalila</h1>
+
+    <section class="card">
+      <h2>Counter: {count}</h2>
+      <p>Doubled: {doubled}</p>
+
+      <div class="buttons">
+        <button d-on-click="decrement">-</button>
+        <button d-on-click="increment">+</button>
+      </div>
+    </section>
+
+    <section class="card">
+      <p when={isEven}>The count is even</p>
+      <p when={isOdd}>The count is odd</p>
+    </section>
+
+    <footer>
+      <p>Edit <code>src/main.ts</code> and save to see changes.</p>
+    </footer>
+  </div>
+
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package/template/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dalila-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "dalila-dev",
+    "build": "tsc",
+    "preview": "dalila-dev --dist"
+  },
+  "dependencies": {
+    "dalila": "^1.4.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
+  }
+}

package/template/src/main.ts

@@ -0,0 +1,30 @@
+import { signal, computed, createScope, withScope } from 'dalila';
+import { bind } from 'dalila/runtime';
+
+// Create app scope
+const app = createScope();
+
+withScope(app, () => {
+  // Reactive state
+  const count = signal(0);
+  const doubled = computed(() => count() * 2);
+  const isEven = computed(() => count() % 2 === 0);
+  const isOdd = computed(() => count() % 2 !== 0);
+
+  // Actions
+  const increment = () => count.update(n => n + 1);
+  const decrement = () => count.update(n => n - 1);
+
+  // Bind to DOM
+  const root = document.getElementById('app');
+  if (root) {
+    bind(root, {
+      count,
+      doubled,
+      isEven,
+      isOdd,
+      increment,
+      decrement,
+    });
+  }
+});

package/template/src/style.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #1a1a2e;
+  --card-bg: #16213e;
+  --text: #eee;
+  --text-muted: #888;
+  --primary: #e94560;
+  --primary-hover: #ff6b6b;
+  --border: #333;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  max-width: 400px;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  background: linear-gradient(135deg, var(--primary), #a855f7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+}
+
+.card h2 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.card p {
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+button {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  font-size: 1.25rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+}
+
+button:hover {
+  background: var(--primary-hover);
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+footer {
+  margin-top: 2rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+footer code {
+  background: var(--card-bg);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Fira Code', monospace;
+}
+
+/* Hide elements with tokens until bound */
+[d-loading] {
+  visibility: hidden;
+}

package/template/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}