malinajs 0.7.0-a4 → 0.7.0-a7

package/malina.js

@@ -1277,7 +1277,6 @@
     let source = this.scriptNodes.length ? this.scriptNodes[0].content : null;
     this.script = {
       source,
-      watchers: [],
       imports: [],
       importedNames: [],
       autosubscribeNames: [],
@@ -1429,7 +1428,7 @@
     function walk(node, parent, fn) {
       if(typeof node !== 'object') return;
 
-      if(node._apply) return;
+      if(node._apply && node.type == 'ExpressionStatement') return;
       node._parent = parent;
       let forParent = parent;
       if(node.type) {
@@ -1467,6 +1466,8 @@
       };
     }
 
+    let watchers = xNode('block');
+
     const makeWatch = (n) => {
       function assertExpression(n) {
         if(['Identifier', 'TemplateLiteral', 'Literal'].includes(n.type)) return;
@@ -1483,15 +1484,22 @@
           target = ex.left.name;
           if(!(target in rootVariables)) resultBody.push(makeVariable(target));
         } else if(ex.left.type == 'MemberExpression') {
-          target = source.substring(ex.left.start, ex.left.end);
+          target = astring.generate(ex.left);
         } else throw 'Error';
         assertExpression(ex.right);
-        const exp = source.substring(ex.right.start, ex.right.end);
-        result.watchers.push(`$runtime.prefixPush(() => {${target} = ${exp};});`);
+        const exp = astring.generate(ex.right);
+        watchers.push(xNode('watch-assign', {
+          $wait: ['apply'],
+          target,
+          exp
+        }, (ctx, n) => {
+          if(this.inuse.apply) ctx.write(true, `$runtime.prefixPush(() => {${n.target} = ${n.exp};});`);
+          else ctx.write(true, `${n.target} = ${n.exp};`);
+        }));
       } else if(n.body.expression.type == 'SequenceExpression') {
         const ex = n.body.expression.expressions;
-        const handler = ex[ex.length - 1];
-        let callback = source.substring(handler.start, handler.end);
+        const handler = last(ex);
+        let callback = astring.generate(handler);
         if(handler.type == 'ArrowFunctionExpression' || handler.type == 'FunctionExpression') ; else if(detectExpressionType(callback) == 'identifier') {
           callback = `(v) => { ${callback}(v); }`;
         } else {
@@ -1500,13 +1508,33 @@
 
         if(ex.length == 2) {
           assertExpression(ex[0]);
-          let exp = source.substring(ex[0].start, ex[0].end);
-          if(this.config.immutable) result.watchers.push(`$watch($cd, () => (${exp}), ${callback}, {ro: false});`);
-          else result.watchers.push(`$watch($cd, () => (${exp}), ${callback}, {ro: false, cmp: $runtime.$$deepComparator(0)});`);
+          watchers.push(xNode('watch-expression', {
+            $wait: ['apply'],
+            exp: astring.generate(ex[0]),
+            callback
+          }, (ctx, n) => {
+            if(this.inuse.apply) {
+              if(this.config.immutable) ctx.write(true, `$watch(() => (${n.exp}), ${n.callback});`);
+              else ctx.write(true, `$watch(() => (${n.exp}), ${n.callback}, {cmp: $runtime.$$deepComparator(0)});`);
+            } else {
+              ctx.write(true, `(${n.callback})(${n.exp});`);
+            }
+          }));
         } else if(ex.length > 2) {
           for(let i = 0; i < ex.length - 1; i++) assertExpression(ex[i]);
-          let exp = source.substring(ex[0].start, ex[ex.length - 2].end);
-          result.watchers.push(`$watch($cd, () => [${exp}], ($args) => { (${callback}).apply(null, $args); }, {ro: false, cmp: $runtime.$$deepComparator(1)});`);
+          let exp = {
+            type: 'ArrayExpression',
+            elements: ex.slice(0, ex.length - 1)
+          };
+
+          watchers.push(xNode('watch-expression', {
+            $wait: ['apply'],
+            exp: astring.generate(exp),
+            callback
+          }, (ctx, n) => {
+            if(this.inuse.apply) ctx.write(true, `$watch(() => ${n.exp}, ($args) => { (${n.callback}).apply(null, $args); }, {cmp: $runtime.$$deepComparator(1)});`);
+            else ctx.write(true, `(${n.callback}).apply(null, ${n.exp})`);
+          }));
         } else throw 'Error';
       } else throw 'Error';
     };
@@ -1634,6 +1662,7 @@
     }));
 
     this.module.top.push(xNode('ast', { body: imports }));
+    this.module.code.push(watchers);
 
     if(this.scriptNodes[0] && this.scriptNodes[0].attributes.some(a => a.name == 'property') && this.script.props.length && !this.script.readOnly) {
       this.require('apply');
@@ -1770,9 +1799,6 @@
 
     if(this.script.onMount) runtime.push('$runtime.$onMount(onMount);');
     if(this.script.onDestroy) runtime.push('$runtime.$onDestroy(onDestroy);');
-    if(this.script.watchers.length) {
-      this.script.watchers.forEach(n => runtime.push(n));
-    }
 
     runtime.push(xNode('addStyle', ctx => {
       if(!this.css.active()) return;
@@ -4590,7 +4616,7 @@
             if(n.props) ctx.write(', $localProps');
             ctx.write(') => {', true);
             ctx.indent++;
-            if(n.props) ctx.write(true, `let {${n.props.join(', ')}} = $localProps;`);
+            if(n.props) ctx.write(true, `let {${n.props.join(', ')}} = $localProps || {};`);
             ctx.add(n.bind);
 
             if(n.props && this.inuse.apply) ctx.write(true, `return ($localProps) => ({${n.props.join(', ')}} = $localProps, $$apply());`);
@@ -5653,7 +5679,7 @@
     }, (ctx, n) => {
       let dynamicProps = this.inuse.apply && !n.staticProps;
 
-      let missed = '', slotName = n.name == 'default' ? 'null' : n.name;
+      let missed = '', slotName = n.name == 'default' ? 'null' : `'${n.name}'`;
       if(dynamicProps) ctx.write(`$runtime.invokeSlot($component, ${slotName}, $context`);
       else ctx.write(`$runtime.invokeSlotBase($component, ${slotName}, $context`);
 
@@ -6270,7 +6296,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a4';
+  const version = '0.7.0-a7';
 
 
   async function compile(source, config = {}) {
@@ -6395,7 +6421,7 @@
     await hook(ctx, 'js:before');
     ctx.js_parse();
     await hook(ctx, 'js');
-    ctx.js_transform();
+    use_context(ctx, () => ctx.js_transform());
     await hook(ctx, 'js:after');
 
     await hook(ctx, 'css:before');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.7.0-a4",
+  "version": "0.7.0-a7",
   "license": "MIT",
   "scripts": {
     "prepare": "npm run build",

package/runtime.js

@@ -30,7 +30,6 @@ const $onDestroy = fn => fn && current_destroyList.push(fn);
 function WatchObject(fn, cb) {
   this.fn = fn;
   this.cb = cb;
-  this.ro = true;
   this.value = NaN;
   this.cmp = null;
 }
@@ -101,7 +100,6 @@ function $$compareArray(w, value) {
   if(isArray(value)) w.value = value.slice();
   else w.value = value;
   w.cb(w.value);
-  return w.ro ? 0 : 1;
 }
 
 
@@ -159,7 +157,6 @@ function $$deepComparator(depth) {
     let diff = compareDeep(w.value, value, depth);
     diff && (w.value = cloneDeep(value, depth), !w.idle && w.cb(value));
     w.idle = false;
-    return !w.ro && diff ? 1 : 0;
   };
 }
 
@@ -174,7 +171,6 @@ const keyComparator = (w, value) => {
   }
   diff && !w.idle && w.cb(value);
   w.idle = false;
-  return !w.ro && diff ? 1 : 0;
 };
 
 
@@ -186,27 +182,26 @@ const fire = w => {
   }
 };
 
-function $digest($cd) {
+function $digest($cd, flag) {
   let loop = 10;
   let w;
   while(loop >= 0) {
-    let changes = 0;
     let index = 0;
     let queue = [];
-    let i, value, cd = $cd;
+    let i, value, cd = $cd, changes = 0;
     while(cd) {
       for(i = 0; i < cd.prefix.length; i++) cd.prefix[i]();
       for(i = 0; i < cd.watchers.length; i++) {
         w = cd.watchers[i];
         value = w.fn();
         if(w.value !== value) {
+          flag[0] = 0;
           if(w.cmp) {
-            changes += w.cmp(w, value);
+            w.cmp(w, value);
           } else {
-            w.value = value;
-            if(!w.ro) changes++;
-            w.cb(w.value);
+            w.cb(w.value = value);
           }
+          changes += flag[0];
         }
       }
       if(cd.children.length) queue.push.apply(queue, cd.children);
@@ -356,13 +351,14 @@ const makeApply = () => {
   let $cd = current_component.$cd = current_cd = cd_new();
   $cd.component = current_component;
 
-  let planned;
+  let planned, flag = [0];
   let apply = r => {
+    flag[0]++;
     if(planned) return r;
     planned = true;
     $tick(() => {
       try {
-        $digest($cd);
+        $digest($cd, flag);
       } finally {
         planned = false;
       }
@@ -550,7 +546,7 @@ const bindAction = (element, action, fn, subscribe) => {
   } else handler = action(element);
   $onDestroy(handler?.destroy);
   subscribe?.(fn, handler, value);
-  handler.init && $tick(handler.init);
+  handler?.init && $tick(handler.init);
 };
 
 
@@ -558,7 +554,7 @@ const __bindActionSubscribe = (fn, handler, value) => {
   if(handler?.update && fn) {
     $watch(fn, args => {
       handler.update.apply(handler, args);
-    }, { ro: false, cmp: $$deepComparator(1), value: cloneDeep(value, 1) });
+    }, { cmp: $$deepComparator(1), value: cloneDeep(value, 1) });
   }
 };
 
@@ -1134,12 +1130,17 @@ const invokeSlot = ($component, slotName, $context, propsFn, placeholder, cmp) =
   let $slot = $component.$option.slots?.[slotName || 'default'];
 
   if($slot) {
-    let push, $dom,
-      w = new WatchObject(propsFn, value => push(value));
+    let push, w = new WatchObject(propsFn, value => push(value));
     Object.assign(w, {value: {}, cmp, idle: true});
     fire(w);
-    ([$dom, push] = $slot($component, $context, w.value));
-    if(push) current_cd.watchers.push(w);
+    let $dom = $slot($component, $context, w.value);
+    if($dom.$dom) {
+      if($dom.push) {
+        push = $dom.push;
+        current_cd.watchers.push(w);
+      }
+      $dom = $dom.$dom;
+    }
     return $dom;
   } else return placeholder?.();
 };
@@ -1150,8 +1151,9 @@ const makeSlot = (fr, fn) => {
     let $dom = fr.cloneNode(true), prev = current_cd, $cd = current_cd = cd_new();
     cd_attach2(parentCD, $cd);
     $onDestroy(() => cd_detach($cd));
+    parentCD.component.apply();
     try {
-      return [$dom, fn($dom, $context, callerComponent, props)];
+      return {$dom, push: fn($dom, $context, callerComponent, props)};
     } finally {
       current_cd = prev;
     }