create-kancil-app 1.0.0

package/index.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env bun
+import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync, statSync, copyFileSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const skeletonDir = join(__dirname, 'skeleton');
+
+const target = process.argv[2] || '.';
+const projectDir = join(process.cwd(), target);
+
+if (target !== '.' && !target.startsWith('/') && existsSync(projectDir) && readdirSync(projectDir).length > 0) {
+    console.error('\n❌ Error: directory "' + target + '" already exists and is not empty\n');
+    process.exit(1);
+}
+
+function copyRecursive(src, dest) {
+    if (!existsSync(dest)) mkdirSync(dest, { recursive: true });
+    for (const item of readdirSync(src)) {
+        const s = join(src, item);
+        const d = join(dest, item);
+        if (statSync(s).isDirectory()) {
+            copyRecursive(s, d);
+        } else {
+            copyFileSync(s, d);
+        }
+    }
+}
+
+copyRecursive(skeletonDir, projectDir);
+
+const pkgPath = join(projectDir, 'package.json');
+if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    pkg.name = target === '.' ? basename(projectDir) : target;
+    writeFileSync(pkgPath, JSON.stringify(pkg, null, 4) + '\n');
+}
+
+const name = target === '.' ? basename(projectDir) : target;
+
+console.log('\n' + [
+    '  ╔══════════════════════════════════════╗',
+    '  ║     🚀 Kancil Framework v0.1.0       ║',
+    '  ║     Project: ' + name.padEnd(28) + '║',
+    '  ╚══════════════════════════════════════╝',
+    '',
+    '  ✅ Project created!',
+    '',
+    '  cd ' + target + ' && bun install && bun run server.js',
+    ''
+].join('\n'));

package/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "create-kancil-app",
+    "version": "1.0.0",
+    "type": "module",
+    "bin": "index.js",
+    "license": "MIT",
+    "description": "Scaffold a Kancil Framework project",
+    "keywords": ["kancil", "framework", "bun", "scaffold"]
+}

package/skeleton/.env.example

@@ -0,0 +1,7 @@
+PORT=3000
+DATABASE_URL=sqlite://:memory:
+APP_KEY=
+THEME=default
+APP_ENV=development
+CSRF_TIMEOUT=60
+SESSION_TTL_HOURS=24

package/skeleton/app/middleware/csrf.js

@@ -0,0 +1,16 @@
+import { Csrf } from 'kancil-framework';
+
+export default async (req, next) => {
+    if (['GET', 'HEAD', 'OPTIONS'].includes(req.method)) return next();
+    const token = req.data?._csrf || '';
+    if (!Csrf.verify(token)) {
+        const { ErrorViews } = await import('kancil-framework');
+        return new Response(ErrorViews.render(403, {
+            message: 'CSRF token tidak valid atau expired. Refresh halaman dan coba lagi.'
+        }), {
+            status: 403,
+            headers: { 'Content-Type': 'text/html' }
+        });
+    }
+    return next();
+};

package/skeleton/app/modules/page/controllers/PageController.js

@@ -0,0 +1,7 @@
+import { Reply, View } from 'kancil-framework';
+
+export default class PageController {
+    static home(req) {
+        return Reply.html(View.render('index', { title: 'Home' }));
+    }
+}

package/skeleton/app/modules/page/routes.js

@@ -0,0 +1,5 @@
+import PageController from './controllers/PageController.js';
+
+export default app => {
+    app.get('/', PageController.home);
+};

package/skeleton/app/themes/default/index.hbs

@@ -0,0 +1,38 @@
+<div class="text-center" style="margin-top:10vh">
+<h1 class="fw-bold display-4 mb-3">
+<span style="background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Kancil</span>
+</h1>
+<p class="lead text-secondary mb-5">Bun-native MVC framework &mdash; running!</p>
+<div class="row justify-content-center g-3 mb-5">
+<div class="col-md-4 col-6">
+<div class="card border-0 shadow-sm h-100">
+<div class="card-body text-center py-4">
+<div class="fs-2 mb-2">⚡</div>
+<h6 class="fw-semibold">Native Bun</h6>
+<p class="small text-secondary mb-0">Bun.serve({ routes })</p>
+</div>
+</div>
+</div>
+<div class="col-md-4 col-6">
+<div class="card border-0 shadow-sm h-100">
+<div class="card-body text-center py-4">
+<div class="fs-2 mb-2">📦</div>
+<h6 class="fw-semibold">Modular</h6>
+<p class="small text-secondary mb-0">Auto-discovery modules</p>
+</div>
+</div>
+</div>
+<div class="col-md-4 col-6">
+<div class="card border-0 shadow-sm h-100">
+<div class="card-body text-center py-4">
+<div class="fs-2 mb-2">🗄️</div>
+<h6 class="fw-semibold">MVC</h6>
+<p class="small text-secondary mb-0">Reply &middot; View &middot; Model</p>
+</div>
+</div>
+</div>
+</div>
+<div class="text-center">
+<a href="https://npmjs.com/package/kancil-framework" class="btn btn-outline-primary btn-sm rounded-pill px-4">Dokumentasi</a>
+</div>
+</div>

package/skeleton/app/themes/default/layout.hbs

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{title}} · Kancil</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body{font-family:'Inter',sans-serif;background:#f8f9fa}
+code{color:#6366f1}
+*,*::before,*::after{animation:none!important;transition:none!important}
+</style>
+</head>
+<body>
+{{> nav}}
+<main class="container py-5">{{{body}}}</main>
+{{> footer}}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

package/skeleton/app/themes/default/partials/footer.hbs

@@ -0,0 +1,3 @@
+<footer class="text-center text-secondary py-4">
+<small><a href="https://npmjs.com/package/kancil-framework" class="text-decoration-none text-secondary">Kancil Framework</a></small>
+</footer>

package/skeleton/app/themes/default/partials/nav.hbs

@@ -0,0 +1,11 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm">
+<div class="container">
+<a class="navbar-brand fw-bold" href="/"><span class="text-primary">Kancil</span></a>
+<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
+<div class="collapse navbar-collapse" id="navbarNav">
+<ul class="navbar-nav ms-auto">
+<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+</ul>
+</div>
+</div>
+</nav>

package/skeleton/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "my-app",
+    "type": "module",
+    "scripts": {
+        "dev": "bun --watch server.js",
+        "start": "bun server.js"
+    },
+    "dependencies": {
+        "kancil-framework": "^0.1.0",
+        "handlebars": "^4.7.8"
+    }
+}

package/skeleton/server.js

@@ -0,0 +1,12 @@
+import { Application, Config, DB, Cors, Migration, Seeder } from 'kancil-framework';
+
+const config = new Config();
+DB.init(config.get('DATABASE_URL'));
+
+await Migration.run(import.meta.dir + '/migrations');
+await Seeder.run(import.meta.dir + '/seeds');
+
+const app = new Application({ basePath: import.meta.dir + '/app' });
+app.use(Cors());
+await app.loadModules(import.meta.dir + '/app/modules');
+await app.listen();