malinajs 0.7.0-a14 → 0.7.0-a15

package/malina.js

@@ -1663,8 +1663,8 @@
           ctx.write(true, `let {${pa}, ...$attributes} = $props;`);
 
           if(!this.script.readOnly && !n.constantProps) {
-            ctx.write(true, `$runtime.current_component.push = () => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}, ...$attributes} = $props = $option.props || {});`);
-            ctx.write(true, `$runtime.current_component.exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
+            ctx.write(true, `$runtime.current_component.$push = ($$props) => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}, ...$attributes} = $props = $$props);`);
+            ctx.write(true, `$runtime.current_component.$exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
           }
         } else if(this.inuse.$props) {
           let pa = n.props.map(p => {
@@ -1674,8 +1674,8 @@
           ctx.write(true, `let {${pa}} = $props;`);
 
           if(!this.script.readOnly && !n.constantProps) {
-            ctx.write(true, `$runtime.current_component.push = () => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}} = $props = $option.props || {});`);
-            ctx.write(true, `$runtime.current_component.exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
+            ctx.write(true, `$runtime.current_component.$push = ($$props) => ({${n.props.map(p => p.name + '=' + p.name).join(', ')}} = $props = $$props);`);
+            ctx.write(true, `$runtime.current_component.$exportedProps = () => ({${n.props.map(p => p.name).join(', ')}});`);
           }
         }
       }));
@@ -1685,13 +1685,13 @@
       this.module.head.push(xNode('no-props', ctx => {
         if(this.inuse.$props && this.inuse.$attributes) {
           ctx.write(true, 'let $props = $option.props || {}, $attributes = $props;');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $props = $attributes = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $props = $attributes = $$props;');
         } else if(this.inuse.$props) {
           ctx.write(true, 'let $props = $option.props || {};');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $props = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $props = $$props;');
         } else if(this.inuse.$attributes) {
           ctx.write(true, 'let $attributes = $option.props || {};');
-          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.push = () => $attributes = $option.props || {};');
+          if(!this.script.readOnly) ctx.write(true, '$runtime.current_component.$push = ($$props) => $attributes = $$props;');
         }
       }));
 
@@ -1781,22 +1781,13 @@
       }
     }));
 
-    this.module.head.push(xNode('$context', {
-      $hold: ['componentFn']
-    }, (ctx) => {
-      if(this.inuse.$context) {
-        this.require('componentFn');
-        ctx.write(true, 'const $context = $runtime.$context;');
-      }
+    this.module.head.push(xNode('$context', (ctx) => {
+      if(this.inuse.$context) ctx.write(true, 'const $context = $option.context || {};');
     }));
 
     this.module.top.push(xNode(this.glob.$onMount, {
-      $hold: ['componentFn']
     }, (ctx, n) => {
-      if(n.value) {
-        this.require('componentFn');
-        ctx.write(true, `import { $onMount } from 'malinajs/runtime.js';`);
-      }
+      if(n.value) ctx.write(true, `import { $onMount } from 'malinajs/runtime.js';`);
     }));
 
     this.module.top.push(xNode('$onDestroy', (ctx) => {
@@ -2408,7 +2399,9 @@
                     base = n;
                     shift = 0;
                   } else if(n._innerBinding) {
-                    let npath = [base._boundName];
+                    let npath;
+                    if(base) npath = [base._boundName];
+                    else npath = [...path, 'firstChild'];
                     while(shift--) npath.push('nextSibling');
                     walk(n, npath);
                     shift = 0;
@@ -4983,6 +4976,7 @@
     if(Object.keys(events).length == 0) events = null;
 
     let result = xNode('component', {
+      $wait: ['apply'],
       componentName,
       staticProps,
       props: propsFn,
@@ -4996,7 +4990,7 @@
       let comma = false;
       ctx.write(`$runtime.callComponent($context, ${n.componentName}, {`);
 
-      if(n.props.length && n.staticProps) {
+      if(n.props.length && (n.staticProps || !this.inuse.apply)) {
         ctx.write(`props: {${n.props.join(', ')}}`);
         comma = true;
         n.props = [];
@@ -5067,7 +5061,7 @@
       if(n.props.length) ctx.write(',\n', true, `() => ({${n.props.join(', ')}})`);
       else other = ', null';
 
-      if(ctx.inuse.apply && n.props.length) {
+      if(this.inuse.apply && n.props.length) {
         if(other) ctx.write(other);
         other = '';
         ctx.write(',');
@@ -5076,7 +5070,7 @@
         else ctx.write('$runtime.$$compareDeep');
       } else other += ', null';
 
-      if(n.propsSetter.length) {
+      if(n.propsSetter.length && this.inuse.apply) {
         if(other) ctx.write(other);
         other = '';
         ctx.write(',\n', true, `($$_value) => ({${n.propsSetter.join(', ')}} = $$_value)`);
@@ -6551,7 +6545,7 @@
     return { event, fn, rootModifier };
   }
 
-  const version = '0.7.0-a14';
+  const version = '0.7.0-a15';
 
 
   async function compile(source, config = {}) {

package/package.json

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

package/runtime.js

@@ -348,7 +348,7 @@ function $$addEventForComponent(list, event, fn) {
 }
 
 
-let current_component, $context;
+let current_component;
 
 
 const makeApply = () => {
@@ -370,8 +370,8 @@ const makeApply = () => {
     return r;
   };
 
-  current_component.apply = apply;
-  current_component.push = apply;
+  current_component.$apply = apply;
+  current_component.$push = apply;
   apply();
   return apply;
 };
@@ -379,21 +379,15 @@ const makeApply = () => {
 
 const makeComponent = (init) => {
   return ($option = {}) => {
-    $context = $option.context || {};
     let prev_component = current_component,
       prev_cd = current_cd,
-      $component = current_component = {
-        $option,
-        context: $context,
-        exported: {}
-      };
+      $component = current_component = {$option};
     current_cd = null;
 
     try {
       $component.$dom = init($option);
     } finally {
       current_component = prev_component;
-      $context = null;
       current_cd = prev_cd;
     }
 
@@ -407,32 +401,27 @@ const callComponent = (context, component, option = {}, propFn, cmp, setter, cla
   let $component, parentWatch, parentCD = current_cd;
 
   if(propFn) {
-    if(cmp) {
-      parentWatch = $watch(propFn, value => {
-        option.props = value;
-        if($component) {
-          $component.push?.();
-          $component.apply?.();
-        }
-      }, { value: {}, cmp });
-      fire(parentWatch);
-    } else option.props = propFn();
+    parentWatch = $watch(propFn, value => {
+      $component.$push?.(value);
+      $component.$apply?.();
+    }, { value: {}, idle: true, cmp });
+    fire(parentWatch);
+    option.props = parentWatch.value;
   }
 
   if(classFn) {
     fire($watch(classFn, value => {
       option.$class = value;
-      $component?.apply?.();
+      $component?.$apply?.();
     }, { value: {}, cmp: keyComparator }));
   }
 
   $component = safeCall(() => component(option));
-  if(setter && $component?.exportedProps) {
-    let w = new WatchObject($component.exportedProps, value => {
+  if($component instanceof Node) $component = {$dom: $component};
+  if(setter && $component?.$exportedProps) {
+    let w = new WatchObject($component.$exportedProps, value => {
       setter(value);
-      cd_component(parentCD).apply();
-      option.props = parentWatch.fn();
-      $component.push();
+      cd_component(parentCD).$apply();
     });
     Object.assign(w, { idle: true, cmp, value: parentWatch.value });
     $component.$cd.watchers.push(w);
@@ -455,15 +444,16 @@ const attachDynComponent = (label, exp, bind) => {
 
     if(component) {
       destroyList = current_destroyList = [];
+      current_mountList = [];
       $cd = current_cd = cd_new();
       try {
         $dom = bind(component).$dom;
+        cd_attach2(parentCD, $cd);
+        insertAfter(label, $dom);
+        safeCallMount(current_mountList, destroyList);
       } finally {
-        current_destroyList = null;
-        current_cd = null;
+        current_destroyList = current_mountList = current_cd = null;
       }
-      cd_attach2(parentCD, $cd);
-      insertAfter(label, $dom);
       active = true;
     } else {
       $cd = null;
@@ -477,7 +467,7 @@ const attachDynComponent = (label, exp, bind) => {
 const autoSubscribe = (...list) => {
   list.forEach(i => {
     if(isFunction(i.subscribe)) {
-      let unsub = i.subscribe(current_component.apply);
+      let unsub = i.subscribe(current_component.$apply);
       if(isFunction(unsub)) $onDestroy(unsub);
     }
   });
@@ -613,7 +603,7 @@ const makeExternalProperty = (name, getter, setter) => {
   let $component = current_component;
   Object.defineProperty($component, name, {
     get: getter,
-    set: v => { setter(v); $component.apply(); }
+    set: v => { setter(v); $component.$apply(); }
   });
 };
 
@@ -684,7 +674,7 @@ const callExportedFragment = (childComponent, name, slot, events, props, cmp) =>
     fire(w);
     props = () => result;
   }
-  let fn = childComponent.exported[name];
+  let fn = childComponent.$exported?.[name];
   ([$dom, push] = fn(props, events, slot));
   return $dom;
 };
@@ -692,11 +682,13 @@ const callExportedFragment = (childComponent, name, slot, events, props, cmp) =>
 
 const exportFragment = (name, fn) => {
   let childCD = current_cd;
-  cd_component(childCD).exported[name] = (props, events, slot) => {
+  let component = cd_component(childCD);
+  if(!component.$exported) component.$exported = {};
+  component.$exported[name] = (props, events, slot) => {
     let prev = current_cd, $cd = current_cd = cd_new();
     cd_attach2(childCD, $cd);
     $onDestroy(() => cd_detach($cd));
-    let apply = cd_component(childCD).apply;
+    let apply = cd_component(childCD).$apply;
     apply();
     try {
       return [fn(props, events || {}, slot), apply];
@@ -813,8 +805,7 @@ const mount = (label, component, option) => {
     label.appendChild($dom);
     safeCallMount(current_mountList, destroyList);
   } finally {
-    current_destroyList = null;
-    current_mountList = null;
+    current_destroyList = current_mountList = null;
   }
   app.destroy = () => {
     safeGroupCall(destroyList);
@@ -832,8 +823,7 @@ const mountStatic = (label, component, option) => {
     safeGroupCall(current_mountList);
     return app;
   } finally {
-    current_destroyList = null;
-    current_mountList = null;
+    current_destroyList = current_mountList = null;
   }
 };
 
@@ -916,9 +906,7 @@ function ifBlock(label, fn, parts, parentLabel) {
     try {
       $dom = builder();
     } finally {
-      current_destroyList = null;
-      current_mountList = null;
-      current_cd = null;
+      current_destroyList = current_mountList = current_cd = null;
     }
     cd_attach2(parentCD, $cd);
     if($dom.nodeType == 11) {
@@ -997,7 +985,7 @@ function $$awaitBlock(label, relation, fn, build_main, build_then, build_catch)
     } else first = last = $dom;
     insertAfter(label, $dom);
     safeCallMount(mountList, destroyList);
-    cd_component(parentCD).apply();
+    cd_component(parentCD).$apply();
   }
 
   $watch(relation, () => {
@@ -1251,10 +1239,13 @@ const invokeSlot = ($component, slotName, $context, propsFn, placeholder, cmp) =
 const makeSlot = (fr, fn) => {
   let parentCD = current_cd;
   return (callerComponent, $context, props) => {
-    let $dom = fr.cloneNode(true), prev = current_cd, $cd = current_cd = cd_new();
-    cd_attach2(parentCD, $cd);
-    $onDestroy(() => cd_detach($cd));
-    parentCD.component.apply();
+    let $dom = fr.cloneNode(true), prev = current_cd;
+    if(parentCD) {
+      let $cd = current_cd = cd_new();
+      cd_attach2(parentCD, $cd);
+      $onDestroy(() => cd_detach($cd));
+      cd_component(parentCD).$apply();
+    } else current_cd = null;
     try {
       return { $dom, push: fn($dom, $context, callerComponent, props) };
     } finally {
@@ -1263,4 +1254,4 @@ const makeSlot = (fr, fn) => {
   };
 };
 
-export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $context, $digest, $makeEmitter, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callExportedFragment, cd_attach, cd_attach2, cd_component, cd_detach, cd_new, cloneDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, destroyResults, eachDefaultKey, exportFragment, fire, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };
+export { $$addEventForComponent, $$awaitBlock, $$cloneDeep, $$compareArray, $$compareDeep, $$deepComparator, $$eachBlock, $$htmlBlock, $$htmlBlockStatic, $$htmlToFragment, $$htmlToFragmentClean, $$removeElements, $$removeItem, $digest, $makeEmitter, $onDestroy, $onMount, $tick, $watch, WatchObject, __app_onerror, __bindActionSubscribe, addClass, addEvent, addStyles, attachAnchor, attachBlock, attachDynComponent, autoSubscribe, bindAction, bindAttribute, bindAttributeBase, bindClass, bindClassExp, bindInput, bindStyle, bindText, callComponent, callExportedFragment, cd_attach, cd_attach2, cd_component, cd_detach, cd_new, cloneDeep, configure, createTextNode, current_cd, current_component, current_destroyList, current_mountList, destroyResults, eachDefaultKey, exportFragment, fire, getFinalLabel, ifBlock, ifBlockReadOnly, insertAfter, invokeSlot, invokeSlotBase, isArray, isFunction, iterNodes, keyComparator, makeAnchor, makeApply, makeBlock, makeBlockBound, makeClassResolver, makeComponent, makeEachBlock, makeEachElseBlock, makeEachSingleBlock, makeExternalProperty, makeRootEvent, makeSlot, mergeAllEvents, mergeEvents, mount, mountStatic, noop, prefixPush, refer, removeElementsBetween, setClassToElement, spreadAttributes, svgToFragment, unwrapProps };