kontyra-cli 1.0.0 → 1.0.3

package/index.js

@@ -38,6 +38,7 @@ const packageJson = {
   name: projectName,
   version: "0.1.0",
   private: true,
+  author: "Kontyra",
   scripts: {
     "dev": "node build.js && node server.js",
     "build": "node build.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kontyra-cli",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "CLI tool to scaffold a new Kontyra Framework application.",
   "main": "index.js",
   "bin": {

package/template/build.js

@@ -2,26 +2,45 @@ const esbuild = require('esbuild');
 const fs = require('fs');
 const path = require('path');
 
+const WATCH_MODE = process.argv.includes('--watch');
 const PAGES_DIR = path.join(__dirname, 'src', 'pages');
 
-// 1. Scan pages directory
-const files = fs.readdirSync(PAGES_DIR).filter(f => f.endsWith('.kon'));
-
-// 2. Generate the React Router setup dynamically
-let imports = `import React from 'react';\n`;
-imports += `import Layout from './src/components/Layout.kon';\n`;
-let routes = '';
-
-files.forEach(file => {
-  const componentName = file.replace('.kon', '');
-  // index.kon maps to '/', about.kon maps to '/about'
-  const routePath = componentName === 'index' ? '/' : `/${componentName}`;
-  
-  imports += `import ${componentName}Page from './src/pages/${file}';\n`;
-  routes += `      <Route path="${routePath}" element={<${componentName}Page />} />\n`;
-});
+// ─── Route Scanner ───────────────────────────────────────────────────────────
+const walkSync = (dir, filelist = []) => {
+  if (!fs.existsSync(dir)) return filelist;
+  fs.readdirSync(dir).forEach(file => {
+    const dirFile = path.join(dir, file);
+    if (fs.statSync(dirFile).isDirectory()) {
+      filelist = walkSync(dirFile, filelist);
+    } else if (file.endsWith('.kon')) {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+// ─── Entry Code Generator ────────────────────────────────────────────────────
+function generateEntries() {
+  const allFiles = walkSync(PAGES_DIR);
+
+  let imports = `import React from 'react';\n`;
+  imports += `import Layout from './src/components/Layout.kon';\n`;
+  let routes = '';
+
+  allFiles.forEach(absolutePath => {
+    const relativePath = path.relative(PAGES_DIR, absolutePath).replace(/\\/g, '/');
+    let routePath = relativePath.replace('.kon', '');
+    routePath = routePath.replace(/\[([^\]]+)\]/g, ':$1');
+    if (routePath.endsWith('index')) routePath = routePath.replace(/index$/, '');
+    routePath = '/' + routePath;
+    if (routePath.length > 1 && routePath.endsWith('/')) routePath = routePath.slice(0, -1);
 
-const clientEntryCode = `
+    const componentName = 'Page_' + relativePath.replace(/[^a-zA-Z0-9]/g, '_');
+    imports += `import ${componentName} from './src/pages/${relativePath}';\n`;
+    routes += `      <Route path="${routePath}" element={<${componentName} />} />\n`;
+  });
+
+  const clientEntryCode = `
 ${imports}
 import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
@@ -29,11 +48,11 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 function App() {
   return (
     <BrowserRouter>
-      <Layout>
-        <Routes>
+      <Routes>
+        <Route path="/" element={<Layout />}>
 ${routes}
-        </Routes>
-      </Layout>
+        </Route>
+      </Routes>
     </BrowserRouter>
   );
 }
@@ -41,7 +60,7 @@ ${routes}
 hydrateRoot(document.getElementById('root'), <App />);
 `;
 
-const serverEntryCode = `
+  const serverEntryCode = `
 ${imports}
 import { StaticRouter } from 'react-router-dom/server';
 import { Routes, Route } from 'react-router-dom';
@@ -49,21 +68,21 @@ import { Routes, Route } from 'react-router-dom';
 export function AppServer({ location }) {
   return (
     <StaticRouter location={location}>
-      <Layout>
-        <Routes>
+      <Routes>
+        <Route path="/" element={<Layout />}>
 ${routes}
-        </Routes>
-      </Layout>
+        </Route>
+      </Routes>
     </StaticRouter>
   );
 }
 `;
 
-// Write the dynamic entry files
-fs.writeFileSync(path.join(__dirname, '.client-entry.jsx'), clientEntryCode);
-fs.writeFileSync(path.join(__dirname, '.server-entry.jsx'), serverEntryCode);
+  fs.writeFileSync(path.join(__dirname, '.client-entry.jsx'), clientEntryCode);
+  fs.writeFileSync(path.join(__dirname, '.server-entry.jsx'), serverEntryCode);
+}
 
-// Custom plugin to handle .kon files as JSX
+// ─── esbuild Plugin ──────────────────────────────────────────────────────────
 const kontyraPlugin = {
   name: 'kontyra-plugin',
   setup(build) {
@@ -77,27 +96,72 @@ const kontyraPlugin = {
 const commonConfig = {
   bundle: true,
   plugins: [kontyraPlugin],
-  loader: { '.js': 'jsx', '.jsx': 'jsx' },
+  loader: { '.js': 'jsx', '.jsx': 'jsx', '.css': 'css' },
   define: { 'process.env.NODE_ENV': '"development"' },
 };
 
-// Build Client
-esbuild.build({
-  ...commonConfig,
-  entryPoints: ['.client-entry.jsx'],
-  outfile: 'public/dist/client.js',
-}).then(() => {
-  console.log('Client build successful!');
-}).catch(() => process.exit(1));
-
-// Build Server
-esbuild.build({
-  ...commonConfig,
-  entryPoints: ['.server-entry.jsx'],
-  outfile: 'dist/server-app.js',
-  platform: 'node',
-  format: 'cjs',
-  external: ['react', 'react-dom', 'react-router-dom', 'react-router'],
-}).then(() => {
-  console.log('Server build successful!');
-}).catch(() => process.exit(1));
+// ─── Build Once or Watch ─────────────────────────────────────────────────────
+async function build() {
+  generateEntries();
+
+  if (!WATCH_MODE) {
+    await esbuild.build({
+      ...commonConfig,
+      entryPoints: ['.client-entry.jsx'],
+      outfile: 'public/dist/client.js',
+    });
+    console.log('[kontyra] \u2713 Client build successful!');
+
+    await esbuild.build({
+      ...commonConfig,
+      entryPoints: ['.server-entry.jsx'],
+      outfile: 'dist/server-app.js',
+      platform: 'node',
+      format: 'cjs',
+      external: ['react', 'react-dom', 'react-router-dom', 'react-router'],
+    });
+    console.log('[kontyra] \u2713 Server build successful!');
+    return;
+  }
+
+  // ── Watch mode ──────────────────────────────────────────────────────────────
+  console.log('[kontyra] \uD83D\uDC40 Watch mode active. Waiting for file changes...\n');
+
+  const clientCtx = await esbuild.context({
+    ...commonConfig,
+    entryPoints: ['.client-entry.jsx'],
+    outfile: 'public/dist/client.js',
+  });
+
+  const serverCtx = await esbuild.context({
+    ...commonConfig,
+    entryPoints: ['.server-entry.jsx'],
+    outfile: 'dist/server-app.js',
+    platform: 'node',
+    format: 'cjs',
+    external: ['react', 'react-dom', 'react-router-dom', 'react-router'],
+  });
+
+  async function rebuild(reason) {
+    console.log(`[kontyra] \uD83D\uDD04 Change detected: ${reason}`);
+    generateEntries();
+    try {
+      await Promise.all([clientCtx.rebuild(), serverCtx.rebuild()]);
+      console.log(`[kontyra] \u2713 Rebuilt at ${new Date().toLocaleTimeString()}`);
+    } catch (e) {
+      console.error('[kontyra] \u2717 Build error:', e.message);
+    }
+  }
+
+  await rebuild('initial build');
+
+  fs.watch(path.join(__dirname, 'src'), { recursive: true }, (eventType, filename) => {
+    if (!filename) return;
+    rebuild(filename);
+  });
+}
+
+build().catch(e => {
+  console.error('[kontyra] Fatal build error:', e);
+  process.exit(1);
+});

package/template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "my-kontyra-app",
+  "version": "0.1.0",
+  "description": "A Kontyra Framework application",
+  "author": "Kontyra",
+  "private": true,
+  "scripts": {
+    "build": "node build.js",
+    "start": "node server.js",
+    "dev": "node build.js && node server.js",
+    "dev:build": "node build.js --watch",
+    "dev:serve": "node server.js",
+    "export": "node export.js"
+  },
+  "dependencies": {
+    "express": "^4.19.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.30.4"
+  },
+  "devDependencies": {
+    "esbuild": "^0.20.0"
+  }
+}