@cilix/lightjs 0.0.15 → 0.0.16

package/core.js

@@ -288,6 +288,47 @@ module.exports = (config, fs, path) => {
     'wbr'
   ];
 
+  const bindHelpers = {
+    input: {
+      number: {
+        prop: "valueAsNumber",
+        event: "input"
+      },
+      range: {
+        prop: "valueAsNumber",
+        event: "input"
+      },
+      checkbox: {
+        prop: "checked",
+        event: "change"
+      },
+      radio: {
+        prop: "checked",
+        event: "change"
+      },
+      default: {
+        prop: "value",
+        event: "input"
+      }
+    },
+    textarea: {
+      default: {
+        prop: "value",
+        event: "input"
+      }
+    },
+    select: {
+      multiple: {
+        prop: "selectedOptions[]",
+        event: "change"
+      },
+      default: {
+        prop: "value",
+        event: "change"
+      }
+    }
+  };
+
   const getPathInfo = (p, base) => {
     const full = base ? path.resolve(base, p) : path.resolve(p);
     const parent = path.dirname(full);
@@ -333,8 +374,8 @@ module.exports = (config, fs, path) => {
 
   const tokenize = (prog, file, offset) => {
     let cursor = 0, end_pos = prog.length - 1;
-    let tokens = [{ type: "file_begin", data: file, pos: 0, file: file }];
-    let keywords = [
+    const tokens = [{ type: "file_begin", data: file, pos: 0, file: file }];
+    const keywords = [
       "tag",
       "each",
       "if",
@@ -354,7 +395,7 @@ module.exports = (config, fs, path) => {
       "catch"
     ];
 
-    let symbols = [
+    const symbols = [
       ".",
       "#",
       "=",
@@ -1031,11 +1072,11 @@ module.exports = (config, fs, path) => {
           let nosync = accept('nosync');
           events.push({ type: evt, handler: handler, sync: !nosync });
         } else if (accept("ident") || accept("as")) {
-          // allow ':' in attribute names
+          if (key === 'bind') {
+            includeRuntime = true;
+          }
+          // allow ':' in attribute names ...for now
           while (accept(':')) {
-            if (key === 'bind') {
-              includeRuntime = true;
-            }
             key += ':'
             key += tok.data;
             expect("ident");
@@ -1556,7 +1597,19 @@ module.exports = (config, fs, path) => {
             if (a === 'innerHTML') innerText = val;
             if (val !== false || a === 'innerHTML') {
               emit(' ');
-              emit(a.replace('bind:', ''));
+              if (a === 'bind') {
+                const bindInfo = bindHelpers[node.data.name];
+                if (bindInfo) {
+                  let type = 'default';
+                  if (attr.type && attr.type.data[0]) {
+                    type = attr.type.data[0].data;
+                  }
+                  const details = bindInfo[type];
+                  emit(details.prop);
+                }
+              } else {
+                emit(a.replace('bind:', ''));
+              }
               emit('="');
               if (t === 'array') {
                 val = val.map((c) => {
@@ -2485,8 +2538,20 @@ module.exports = (config, fs, path) => {
             emit(', {');
           }
           for (let a in attr) {
-            // todo: handle other values
-            if (a === 'bind:value') {
+            if (a === 'bind') {
+              const bindInfo = bindHelpers[node.data.name];
+              if (bindInfo) {
+                let type = 'default';
+                if (attr.type && attr.type.data[0]) {
+                  type = attr.type.data[0].data;
+                }
+                const details = bindInfo[type];
+                evts.push({ type: details.event, bindHandler: { lhs: attr[a], rhs: details.prop }, sync: true });
+                const val = attr[a];
+                a = details.prop;
+                attr[a] = val;
+              }
+            } else if (a === 'bind:value') {
               evts.push({ type: 'input', handler: `${attr[a].data} = $e.target.value;`, sync: true });
               attr.value = { type: 'ident', data: attr[a].data };
               a = 'value';
@@ -2502,7 +2567,12 @@ module.exports = (config, fs, path) => {
             emit('"');
             emit(e.type);
             emit('": function($e) {');
-            emit(e.handler);
+            if (e.bindHandler) {
+              walk(e.bindHandler.lhs);
+              emit(` = $e.target.${e.bindHandler.rhs}`);
+            } else {
+              emit(e.handler);
+            }
             emit(`;${e.sync ? ' $sync();' : ''} }, `);
           }
           emit('}');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cilix/lightjs",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "A new kind of JavaScript framework",
   "main": "index.js",
   "scripts": {