@kuratchi/js 0.0.21 → 0.0.23

package/README.md

@@ -63,12 +63,12 @@ Route files are not client files. They are server-rendered routes that can opt i
 
 ### Route file structure
 
-```html
-<script>
-  import { getItems, addItem, deleteItem } from '$database/items';
-
-  const items = await getItems();
-</script>
+```html
+<script>
+  import { getItems, addItem, deleteItem } from '$server/items';
+
+  const items = await getItems();
+</script>
 
 <!-- Template — plain HTML with minimal extensions -->
 <ul>
@@ -78,8 +78,8 @@ Route files are not client files. They are server-rendered routes that can opt i
 </ul>
 ```
 
-The `$database/` alias resolves to `src/database/`. You can use any path alias configured in your tsconfig.
-Private server logic should live in `src/server/` and be imported into routes explicitly.
+The `$server/` alias resolves to `src/server/`. Use that as the canonical home for reusable server-only modules.
+Private server logic should live in `src/server/` and be imported into routes explicitly.
 
 ### Layout file
 
@@ -132,6 +132,40 @@ for (const item of items) {
 }
 ```
 
+### Attribute expressions
+
+Use `{expression}` in attribute values for dynamic content:
+
+```html
+<!-- Ternary expressions -->
+<div class={isActive ? 'active' : 'inactive'}>...</div>
+<button class={count > 0 ? 'has-items' : ''}>View ({count})</button>
+
+<!-- Any JS expression -->
+<a href={`/items/${item.id}`}>{item.name}</a>
+<img src={user.avatar} alt={user.name} />
+```
+
+### Boolean attributes
+
+Boolean attributes like `disabled`, `checked`, `selected`, etc. are conditionally rendered based on the expression value:
+
+```html
+<!-- Renders: <button disabled> or <button> -->
+<button disabled={isLoading}>Submit</button>
+
+<!-- Form elements -->
+<input type="checkbox" checked={todo.completed} />
+<option selected={item.id === selectedId}>{item.name}</option>
+
+<!-- Other boolean attributes -->
+<details open={showDetails}>...</details>
+<input readonly={!canEdit} />
+<input required={isRequired} />
+```
+
+Supported boolean attributes: `disabled`, `checked`, `selected`, `readonly`, `required`, `hidden`, `open`, `autofocus`, `autoplay`, `controls`, `default`, `defer`, `formnovalidate`, `inert`, `loop`, `multiple`, `muted`, `novalidate`, `reversed`, `async`.
+
 ### Components
 
 Import `.html` components from your `src/lib/` directory or from packages:
@@ -241,10 +275,10 @@ Failure and edge behavior:
 
 Export server functions from a route's `<script>` block and reference them with `action={fn}`. The compiler automatically registers them as dispatchable actions.
 
-```html
-<script>
-  import { addItem, deleteItem } from '$database/items';
-</script>
+```html
+<script>
+  import { addItem, deleteItem } from '$server/items';
+</script>
 
 <!-- Standard form — POST-Redirect-GET -->
 <form action={addItem} method="POST">
@@ -256,8 +290,8 @@ Export server functions from a route's `<script>` block and reference them with
 The action function receives the raw `FormData`. Throw `ActionError` to surface a message back to the form — see [Error handling](#error-handling).
 
 ```ts
-// src/database/items.ts
-import { ActionError } from '@kuratchi/js';
+// src/server/items.ts
+import { ActionError } from '@kuratchi/js';
 
 export async function addItem(formData: FormData): Promise<void> {
   const title = (formData.get('title') as string)?.trim();
@@ -303,10 +337,10 @@ export async function signIn(formData: FormData) {
 
 In the template, the action's state object is available under its function name:
 
-```html
-<script>
-  import { signIn } from '$database/auth';
-</script>
+```html
+<script>
+  import { signIn } from '$server/auth';
+</script>
 
 <form action={signIn}>
   (signIn.error ? `<p class="error">${signIn.error}</p>` : '')
@@ -364,16 +398,18 @@ for (const rec of (recommendations ?? [])) {
 
 These `data-*` attributes wire up client-side interactivity without writing JavaScript.
 
-### `data-action` — fetch action (no page reload)
-
-Calls a server action via `fetch` and refreshes `data-refresh` targets when done:
-
-```html
-<button data-action="deleteItem" data-args={JSON.stringify([item.id])}>Delete</button>
-<button data-action="toggleItem" data-args={JSON.stringify([item.id, true])}>Done</button>
-```
-
-The action function receives the args array as individual arguments:
+### `data-post` — client-triggered server action
+
+Use `data-post={fn(args)}` for button-style server actions without exposing compiler transport details in templates:
+
+```html
+<button data-post={deleteItem(item.id)} data-refresh="" type="button">Delete</button>
+<button data-post={toggleItem(item.id, true)} data-refresh="" type="button">Done</button>
+```
+
+Kuratchi lowers `data-post` into its internal action transport automatically. Authored `data-action` / `data-args` attributes are deprecated and should be treated as compiler output only.
+
+The action function receives the direct arguments you passed in the template:
 
 ```ts
 export async function deleteItem(id: number): Promise<void> {
@@ -387,7 +423,7 @@ export async function toggleItem(id: number, done: boolean): Promise<void> {
 
 ### `data-refresh` — partial refresh
 
-After a `data-action` call succeeds, elements with `data-refresh` re-fetch their content:
+After a `data-post` call succeeds, elements with `data-refresh` re-fetch their content:
 
 ```html
 <section data-refresh="/items">

package/dist/cli.d.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
 /**
- * CLI entry point — kuratchi build | watch | create
+ * CLI entry point � kuratchi build | watch | create
  */
 export {};

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * CLI entry point — kuratchi build | watch | create
+ * CLI entry point � kuratchi build | watch | create
  */
 import { compile } from './compiler/index.js';
 import * as path from 'node:path';
@@ -11,6 +11,7 @@ import { spawn } from 'node:child_process';
 const args = process.argv.slice(2);
 const command = args[0];
 const projectDir = process.cwd();
+let cachedScriptRuntimeExecutable = null;
 void main().catch((err) => {
     console.error(`[kuratchi] ${err?.message ?? err}`);
     process.exit(1);
@@ -33,15 +34,15 @@ async function main() {
             await runTypes();
             return;
         default:
-            console.log(`
-KuratchiJS CLI
-
-Usage:
-  kuratchi create [name]  Scaffold a new KuratchiJS project
-  kuratchi build          Compile routes once
-  kuratchi dev            Compile, watch for changes, and start wrangler dev server
-  kuratchi watch          Compile + watch only (no wrangler — for custom setups)
-  kuratchi types          Generate TypeScript types from schema to src/app.d.ts
+            console.log(`
+KuratchiJS CLI
+
+Usage:
+  kuratchi create [name]  Scaffold a new KuratchiJS project
+  kuratchi build          Compile routes once
+  kuratchi dev            Compile, watch for changes, and start wrangler dev server
+  kuratchi watch          Compile + watch only (no wrangler � for custom setups)
+  kuratchi types          Generate TypeScript types from schema to src/app.d.ts
 `);
             process.exit(1);
     }
@@ -61,7 +62,7 @@ async function runBuild(isDev = false) {
     console.log('[kuratchi] Compiling...');
     try {
         const outFile = await compile({ projectDir, isDev });
-        console.log(`[kuratchi] Built → ${path.relative(projectDir, outFile)}`);
+        console.log(`[kuratchi] Built -> ${path.relative(projectDir, outFile)}`);
     }
     catch (err) {
         console.error(`[kuratchi] Build failed: ${err.message}`);
@@ -70,30 +71,8 @@ async function runBuild(isDev = false) {
 }
 async function runWatch(withWrangler = false) {
     await runBuild(true);
-    const routesDir = path.join(projectDir, 'src', 'routes');
-    const serverDir = path.join(projectDir, 'src', 'server');
-    const watchDirs = [routesDir, serverDir].filter(d => fs.existsSync(d));
-    let rebuildTimeout = null;
-    const triggerRebuild = () => {
-        if (rebuildTimeout)
-            clearTimeout(rebuildTimeout);
-        rebuildTimeout = setTimeout(async () => {
-            console.log('[kuratchi] File changed, rebuilding...');
-            try {
-                await compile({ projectDir, isDev: true });
-                console.log('[kuratchi] Rebuilt.');
-            }
-            catch (err) {
-                console.error(`[kuratchi] Rebuild failed: ${err.message}`);
-            }
-        }, 100);
-    };
-    for (const dir of watchDirs) {
-        fs.watch(dir, { recursive: true }, triggerRebuild);
-    }
+    startCompilerWatch();
     console.log('[kuratchi] Watching for changes...');
-    // `kuratchi dev` also starts the wrangler dev server.
-    // `kuratchi watch` is the compiler-only mode for custom setups.
     if (withWrangler) {
         await startWranglerDev();
         return;
@@ -171,16 +150,52 @@ function resolveWranglerBin() {
         return null;
     }
 }
-function getNodeExecutable() {
-    if (!process.versions.bun)
-        return process.execPath;
-    return 'node';
+function getScriptRuntimeExecutable() {
+    if (cachedScriptRuntimeExecutable)
+        return cachedScriptRuntimeExecutable;
+    if (!process.versions.bun) {
+        cachedScriptRuntimeExecutable = process.execPath;
+        return cachedScriptRuntimeExecutable;
+    }
+    const nodeExecutable = findExecutableOnPath('node');
+    cachedScriptRuntimeExecutable = nodeExecutable ?? process.execPath;
+    return cachedScriptRuntimeExecutable;
+}
+function startCompilerWatch() {
+    const routesDir = path.join(projectDir, 'src', 'routes');
+    const serverDir = path.join(projectDir, 'src', 'server');
+    const watchDirs = [routesDir, serverDir].filter(d => fs.existsSync(d));
+    const watchers = [];
+    let rebuildTimeout = null;
+    const triggerRebuild = () => {
+        if (rebuildTimeout)
+            clearTimeout(rebuildTimeout);
+        rebuildTimeout = setTimeout(async () => {
+            console.log('[kuratchi] File changed, rebuilding...');
+            try {
+                await compile({ projectDir, isDev: true });
+                console.log('[kuratchi] Rebuilt.');
+            }
+            catch (err) {
+                console.error(`[kuratchi] Rebuild failed: ${err.message}`);
+            }
+        }, 100);
+    };
+    for (const dir of watchDirs) {
+        watchers.push(fs.watch(dir, { recursive: true }, triggerRebuild));
+    }
+    return () => {
+        if (rebuildTimeout)
+            clearTimeout(rebuildTimeout);
+        for (const watcher of watchers)
+            watcher.close();
+    };
 }
 function spawnWranglerProcess(wranglerArgs) {
     const localWranglerBin = resolveWranglerBin();
     const stdio = ['pipe', 'inherit', 'inherit'];
     if (localWranglerBin) {
-        return spawn(getNodeExecutable(), [localWranglerBin, ...wranglerArgs], {
+        return spawn(getScriptRuntimeExecutable(), [localWranglerBin, ...wranglerArgs], {
             cwd: projectDir,
             stdio,
         });
@@ -191,3 +206,39 @@ function spawnWranglerProcess(wranglerArgs) {
         stdio,
     });
 }
+function findExecutableOnPath(command) {
+    const pathEnv = process.env.PATH;
+    if (!pathEnv)
+        return null;
+    const pathEntries = pathEnv.split(path.delimiter).filter(Boolean);
+    const extensions = process.platform === 'win32'
+        ? (process.env.PATHEXT?.split(';').filter(Boolean) ?? ['.EXE', '.CMD', '.BAT', '.COM'])
+        : [''];
+    const hasExtension = !!path.extname(command);
+    for (const entry of pathEntries) {
+        if (hasExtension) {
+            const candidate = path.join(entry, command);
+            if (isExecutableFile(candidate))
+                return candidate;
+            continue;
+        }
+        for (const ext of extensions) {
+            const candidate = path.join(entry, `${command}${process.platform === 'win32' ? ext.toLowerCase() : ext}`);
+            if (isExecutableFile(candidate))
+                return candidate;
+            const exactCaseCandidate = path.join(entry, `${command}${ext}`);
+            if (exactCaseCandidate !== candidate && isExecutableFile(exactCaseCandidate))
+                return exactCaseCandidate;
+        }
+    }
+    return null;
+}
+function isExecutableFile(filePath) {
+    try {
+        const stat = fs.statSync(filePath);
+        return stat.isFile();
+    }
+    catch {
+        return false;
+    }
+}

package/dist/compiler/compiler-shared.d.ts

@@ -4,6 +4,7 @@ export interface OrmDatabaseEntry {
     schemaExportName: string;
     skipMigrations: boolean;
     type: 'd1' | 'do';
+    remote: boolean;
 }
 export interface AuthConfigEntry {
     cookieName: string;

package/dist/compiler/config-reading.d.ts

@@ -1,4 +1,10 @@
 import { type AuthConfigEntry, type DoConfigEntry, type OrmDatabaseEntry, type SecurityConfigEntry, type WorkerClassConfigEntry } from './compiler-shared.js';
+export interface UiConfigEntry {
+    theme: string;
+    radius: string;
+    library?: 'tailwindcss';
+    plugins: string[];
+}
 export declare function readUiTheme(projectDir: string): string | null;
 export declare function readUiConfigValues(projectDir: string): {
     theme: string;

package/dist/compiler/config-reading.js

@@ -1,5 +1,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import { execFileSync } from 'node:child_process';
 function skipWhitespace(source, start) {
     let i = start;
     while (i < source.length && /\s/.test(source[i]))
@@ -51,7 +52,15 @@ function readConfigBlock(source, key) {
     }
     return { kind: 'call-empty', body: '' };
 }
-export function readUiTheme(projectDir) {
+function normalizeUiPluginName(plugin) {
+    const normalized = plugin.trim();
+    if (!normalized)
+        return normalized;
+    if (normalized === 'forms')
+        return '@tailwindcss/forms';
+    return normalized;
+}
+function readUiConfig(projectDir) {
     const configPath = path.join(projectDir, 'kuratchi.config.ts');
     if (!fs.existsSync(configPath))
         return null;
@@ -60,7 +69,78 @@ export function readUiTheme(projectDir) {
     if (!uiBlock)
         return null;
     const themeMatch = uiBlock.body.match(/theme\s*:\s*['"]([^'"]+)['"]/);
-    const themeValue = themeMatch?.[1] ?? 'default';
+    const radiusMatch = uiBlock.body.match(/radius\s*:\s*['"]([^'"]+)['"]/);
+    const libraryMatch = uiBlock.body.match(/library\s*:\s*['"]([^'"]+)['"]/);
+    const pluginsMatch = uiBlock.body.match(/plugins\s*:\s*\[([\s\S]*?)\]/);
+    const plugins = [];
+    if (pluginsMatch) {
+        const itemRegex = /['"]([^'"]+)['"]/g;
+        let pluginMatch;
+        while ((pluginMatch = itemRegex.exec(pluginsMatch[1])) !== null) {
+            const plugin = normalizeUiPluginName(pluginMatch[1]);
+            if (plugin)
+                plugins.push(plugin);
+        }
+    }
+    return {
+        theme: themeMatch?.[1] ?? 'dark',
+        radius: radiusMatch?.[1] ?? 'default',
+        library: libraryMatch?.[1] === 'tailwindcss' ? 'tailwindcss' : undefined,
+        plugins,
+    };
+}
+function findTailwindCliPath(projectDir) {
+    const candidates = [
+        path.join(projectDir, 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.mjs'),
+        path.join(projectDir, 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.js'),
+        path.join(projectDir, '..', 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.mjs'),
+        path.join(projectDir, '..', 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.js'),
+        path.join(projectDir, '..', '..', 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.mjs'),
+        path.join(projectDir, '..', '..', 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.js'),
+        path.join(path.resolve(projectDir, '../..'), 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.mjs'),
+        path.join(path.resolve(projectDir, '../..'), 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.js'),
+    ];
+    for (const candidate of candidates) {
+        if (fs.existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+function buildTailwindCss(projectDir, uiConfig) {
+    const cliPath = findTailwindCliPath(projectDir);
+    if (!cliPath) {
+        console.warn('[kuratchi] ui.library: "tailwindcss" configured but @tailwindcss/cli could not be resolved');
+        return null;
+    }
+    const uiDir = path.join(projectDir, '.kuratchi', 'ui');
+    if (!fs.existsSync(uiDir))
+        fs.mkdirSync(uiDir, { recursive: true });
+    const inputPath = path.join(uiDir, 'tailwind.input.css');
+    const outputPath = path.join(uiDir, 'tailwind.output.css');
+    const sourcePath = path.relative(uiDir, path.join(projectDir, 'src')).replace(/\\/g, '/');
+    const configSource = path.relative(uiDir, path.join(projectDir, 'kuratchi.config.ts')).replace(/\\/g, '/');
+    const lines = [
+        '@import "tailwindcss";',
+        `@source "${sourcePath}";`,
+        `@source "${configSource}";`,
+        ...uiConfig.plugins.map((plugin) => `@plugin "${plugin}";`),
+        '',
+    ];
+    fs.writeFileSync(inputPath, lines.join('\n'), 'utf-8');
+    execFileSync(process.execPath, [cliPath, '-i', inputPath, '-o', outputPath], {
+        cwd: projectDir,
+        stdio: 'pipe',
+    });
+    return fs.existsSync(outputPath) ? fs.readFileSync(outputPath, 'utf-8') : null;
+}
+export function readUiTheme(projectDir) {
+    const uiConfig = readUiConfig(projectDir);
+    if (!uiConfig)
+        return null;
+    if (uiConfig.library === 'tailwindcss') {
+        return buildTailwindCss(projectDir, uiConfig);
+    }
+    const themeValue = uiConfig.theme ?? 'default';
     if (themeValue === 'default' || themeValue === 'dark' || themeValue === 'light' || themeValue === 'system') {
         const candidates = [
             path.join(projectDir, 'node_modules', '@kuratchi/ui', 'src', 'styles', 'theme.css'),
@@ -83,18 +163,12 @@ export function readUiTheme(projectDir) {
     return null;
 }
 export function readUiConfigValues(projectDir) {
-    const configPath = path.join(projectDir, 'kuratchi.config.ts');
-    if (!fs.existsSync(configPath))
+    const uiConfig = readUiConfig(projectDir);
+    if (!uiConfig)
         return null;
-    const source = fs.readFileSync(configPath, 'utf-8');
-    const uiBlock = readConfigBlock(source, 'ui');
-    if (!uiBlock)
-        return null;
-    const themeMatch = uiBlock.body.match(/theme\s*:\s*['"]([^'"]+)['"]/);
-    const radiusMatch = uiBlock.body.match(/radius\s*:\s*['"]([^'"]+)['"]/);
     return {
-        theme: themeMatch?.[1] ?? 'dark',
-        radius: radiusMatch?.[1] ?? 'default',
+        theme: uiConfig.theme,
+        radius: uiConfig.radius,
     };
 }
 export function readOrmConfig(projectDir) {
@@ -134,10 +208,12 @@ export function readOrmConfig(projectDir) {
         const skipMigrations = skipMatch?.[1] === 'true';
         const typeMatch = rest.match(/type\s*:\s*['"]?(d1|do)['"]?/);
         const type = typeMatch?.[1] ?? 'd1';
+        const remoteMatch = rest.match(/remote\s*:\s*(true|false)/);
+        const remote = remoteMatch?.[1] === 'true';
         const schemaImportPath = importMap.get(schemaExportName);
         if (!schemaImportPath)
             continue;
-        entries.push({ binding, schemaImportPath, schemaExportName, skipMigrations, type });
+        entries.push({ binding, schemaImportPath, schemaExportName, skipMigrations, type, remote });
     }
     return entries;
 }
@@ -174,10 +250,10 @@ export function readDoConfig(projectDir) {
     const source = fs.readFileSync(configPath, 'utf-8');
     const doIdx = source.search(/durableObjects\s*:\s*\{/);
     if (doIdx === -1)
-        return [];
+        return readWranglerDoConfig(projectDir);
     const braceStart = source.indexOf('{', doIdx);
     if (braceStart === -1)
-        return [];
+        return readWranglerDoConfig(projectDir);
     let depth = 0;
     let braceEnd = braceStart;
     for (let i = braceStart; i < source.length; i++) {
@@ -227,7 +303,7 @@ export function readDoConfig(projectDir) {
             continue;
         entries.push({ binding: match[1], className: match[2] });
     }
-    return entries;
+    return entries.length > 0 ? entries : readWranglerDoConfig(projectDir);
 }
 /** Read durable_objects.bindings from wrangler.jsonc / wrangler.json as fallback. */
 function readWranglerDoConfig(projectDir) {

package/dist/compiler/desktop-manifest.d.ts

@@ -0,0 +1,48 @@
+import type { DesktopConfigEntry, OrmDatabaseEntry } from './compiler-shared.js';
+export interface DesktopManifest {
+    formatVersion: 1;
+    generatedAt: string;
+    projectDir: string;
+    app: {
+        name: string;
+        id: string;
+        initialPath: string;
+        window: {
+            title: string;
+            width: number;
+            height: number;
+        };
+    };
+    runtime: {
+        workerEntrypoint: string;
+        assetsRoot: string | null;
+        compatibilityDate: string;
+        compatibilityFlags: string[];
+        cloudflareAccountId: string | null;
+    };
+    bindings: {
+        desktop: {
+            notifications: boolean;
+            files: boolean;
+        };
+        remote: Array<{
+            binding: string;
+            type: 'd1';
+            remote: boolean;
+            databaseId: string;
+            databaseName: string | null;
+        } | {
+            binding: string;
+            type: 'r2';
+            remote: boolean;
+            bucketName: string;
+        }>;
+    };
+}
+export declare function buildDesktopManifest(opts: {
+    projectDir: string;
+    workerFile: string;
+    desktopConfig: DesktopConfigEntry | null;
+    ormDatabases: OrmDatabaseEntry[];
+}): DesktopManifest | null;
+export declare function writeDesktopManifest(projectDir: string, manifest: DesktopManifest): string;