dalila 1.9.4 → 1.9.5

package/README.md

@@ -1,4 +1,4 @@
-# 🐰 ✂️ Dalila
+# 🐰✂️ Dalila
 
 **DOM-first reactivity without the re-renders.**
 

package/dist/cli/check.js

@@ -520,7 +520,7 @@ function extractTemplateIdentifiers(html) {
         i++;
     }
     // --- 2. Directive scanning (supports single and double quotes) ---
-    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-html|d-attr-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
+    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-html|d-attr-[a-zA-Z][\w-]*|d-bind-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
     DIRECTIVE_RE.lastIndex = 0;
     let match;
     while ((match = DIRECTIVE_RE.exec(html))) {

package/dist/cli/index.js

@@ -9,7 +9,7 @@ const routeArgs = args.slice(2);
 const WATCH_DEBOUNCE_MS = 120;
 function showHelp() {
     console.log(`
-🐰 ✂️  Dalila CLI
+🐰✂️  Dalila CLI
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
@@ -32,7 +32,7 @@ Examples:
 }
 function showRoutesHelp() {
     console.log(`
-🐰 ✂️  Dalila CLI - Routes
+🐰✂️  Dalila CLI - Routes
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
@@ -52,7 +52,7 @@ Examples:
 }
 function showCheckHelp() {
     console.log(`
-🐰 ✂️  Dalila CLI - Check
+🐰✂️  Dalila CLI - Check
 
 Usage:
   dalila check [path] [options]     Static analysis of HTML templates
@@ -182,7 +182,7 @@ function resolveGenerateConfig(cliArgs, cwd = process.cwd()) {
 async function generateRoutes(cliArgs) {
     const { appDir, outputPath } = resolveGenerateConfig(cliArgs);
     console.log('');
-    console.log('🐰 ✂️  Dalila Routes Generator');
+    console.log('🐰✂️  Dalila Routes Generator');
     console.log('');
     try {
         await generateRoutesFile(appDir, outputPath);
@@ -243,7 +243,7 @@ function watchRoutes(cliArgs) {
         process.exit(1);
     }
     console.log('');
-    console.log('🐰 ✂️  Dalila Routes Watch');
+    console.log('🐰✂️  Dalila Routes Watch');
     console.log(`   app: ${appDir}`);
     console.log(`   output: ${outputPath}`);
     console.log('');

package/dist/runtime/bind.js

@@ -2068,14 +2068,76 @@ function bindAttrs(root, ctx, cleanups) {
 // d-bind-* Directive (Two-way Binding)
 // ============================================================================
 /**
- * Bind all [d-bind-value] and [d-bind-checked] directives within root.
- * Two-way binding: signal → DOM (outbound) and DOM → signal (inbound).
- * Only works with signals — logs a warning otherwise.
+ * Bind all [d-bind-*] directives within root.
+ * Two-way bindings:
+ * - d-bind-value
+ * - d-bind-checked
+ *
+ * One-way reactive property bindings:
+ * - d-bind-readonly
+ * - d-bind-disabled
+ * - d-bind-maxlength
+ * - d-bind-placeholder
+ * - d-bind-pattern
+ * - d-bind-multiple
+ *
+ * Optional transform/parse hooks:
+ * - d-bind-transform="fnName" (signal -> view)
+ * - d-bind-parse="fnName" (view -> signal)
  */
 function bindTwoWay(root, ctx, cleanups) {
-    const SUPPORTED = ['value', 'checked'];
-    for (const prop of SUPPORTED) {
-        const attr = `d-bind-${prop}`;
+    const SUPPORTED = [
+        { attr: 'd-bind-value', prop: 'value', twoWay: true },
+        { attr: 'd-bind-checked', prop: 'checked', twoWay: true },
+        { attr: 'd-bind-readonly', prop: 'readOnly', twoWay: false },
+        { attr: 'd-bind-disabled', prop: 'disabled', twoWay: false },
+        { attr: 'd-bind-maxlength', prop: 'maxLength', twoWay: false },
+        { attr: 'd-bind-placeholder', prop: 'placeholder', twoWay: false },
+        { attr: 'd-bind-pattern', prop: 'pattern', twoWay: false },
+        { attr: 'd-bind-multiple', prop: 'multiple', twoWay: false },
+    ];
+    const BOOLEAN_PROPS = new Set(['checked', 'readOnly', 'disabled', 'multiple']);
+    const STRING_PROPS = new Set(['value', 'placeholder', 'pattern']);
+    const applyBoundProp = (el, prop, value) => {
+        if (!(prop in el))
+            return;
+        if (BOOLEAN_PROPS.has(prop)) {
+            el[prop] = !!value;
+            return;
+        }
+        if (STRING_PROPS.has(prop)) {
+            el[prop] = value == null ? '' : String(value);
+            return;
+        }
+        if (prop === 'maxLength') {
+            if (value == null || value === '') {
+                el.maxLength = -1;
+                return;
+            }
+            const parsed = Number(value);
+            el.maxLength = Number.isFinite(parsed) ? Math.max(0, Math.floor(parsed)) : -1;
+            return;
+        }
+        el[prop] = value;
+    };
+    const resolveFunctionBinding = (el, attrName) => {
+        const fnBindingName = normalizeBinding(el.getAttribute(attrName));
+        if (!fnBindingName)
+            return null;
+        const fnBinding = ctx[fnBindingName];
+        if (fnBinding === undefined) {
+            warn(`${attrName}: "${fnBindingName}" not found in context`);
+            return null;
+        }
+        const resolved = isSignal(fnBinding) ? fnBinding() : fnBinding;
+        if (typeof resolved !== 'function') {
+            warn(`${attrName}: "${fnBindingName}" must be a function (or signal-of-function)`);
+            return null;
+        }
+        return resolved;
+    };
+    for (const directive of SUPPORTED) {
+        const attr = directive.attr;
         const elements = qsaIncludingRoot(root, `[${attr}]`);
         for (const el of elements) {
             const bindingName = normalizeBinding(el.getAttribute(attr));
@@ -2083,31 +2145,55 @@ function bindTwoWay(root, ctx, cleanups) {
                 continue;
             const binding = ctx[bindingName];
             if (!isSignal(binding)) {
-                warn(`d-bind-${prop}: "${bindingName}" must be a signal`);
+                warn(`${attr}: "${bindingName}" must be a signal`);
                 continue;
             }
             const writable = isWritableSignal(binding);
-            if (!writable) {
-                warn(`d-bind-${prop}: "${bindingName}" is read-only (inbound updates disabled)`);
+            if (directive.twoWay && !writable) {
+                warn(`${attr}: "${bindingName}" is read-only (inbound updates disabled)`);
             }
             el.removeAttribute(attr);
+            const transformFn = resolveFunctionBinding(el, 'd-bind-transform');
+            const parseFn = resolveFunctionBinding(el, 'd-bind-parse');
+            if (directive.twoWay) {
+                el.removeAttribute('d-bind-transform');
+                el.removeAttribute('d-bind-parse');
+            }
             // Outbound: signal → DOM
-            const isBoolean = prop === 'checked';
             bindEffect(el, () => {
-                const val = binding();
-                if (isBoolean) {
-                    el[prop] = !!val;
-                }
-                else {
-                    el[prop] = val == null ? '' : String(val);
+                const rawValue = binding();
+                let value = rawValue;
+                if (transformFn) {
+                    try {
+                        value = transformFn(rawValue, el);
+                    }
+                    catch (err) {
+                        warn(`d-bind-transform: "${bindingName}" failed (${err.message || String(err)})`);
+                        value = rawValue;
+                    }
                 }
+                applyBoundProp(el, directive.prop, value);
             });
             // Inbound: DOM → signal
-            if (writable) {
-                const eventName = el.tagName === 'SELECT' || isBoolean ? 'change' : 'input';
+            if (directive.twoWay && writable) {
+                const eventName = el.tagName === 'SELECT' || directive.prop === 'checked'
+                    ? 'change'
+                    : 'input';
                 const handler = () => {
-                    const val = isBoolean ? el.checked : el.value;
-                    binding.set(val);
+                    const rawValue = directive.prop === 'checked'
+                        ? el.checked
+                        : el.value;
+                    let nextValue = rawValue;
+                    if (parseFn) {
+                        try {
+                            nextValue = parseFn(rawValue, el);
+                        }
+                        catch (err) {
+                            warn(`d-bind-parse: "${bindingName}" failed (${err.message || String(err)})`);
+                            nextValue = rawValue;
+                        }
+                    }
+                    binding.set(nextValue);
                 };
                 el.addEventListener(eventName, handler);
                 cleanups.push(() => el.removeEventListener(eventName, handler));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/scripts/dev-server.cjs

@@ -1047,7 +1047,7 @@ startKeepalive();
 
 server.listen(port, () => {
   console.log('');
-  console.log('  🐰 ✂️  Dalila dev server');
+  console.log('  🐰✂️  Dalila dev server');
   console.log(`        http://localhost:${port}`);
   console.log('');
 });