1_source.js

import {
    $$htmlToFragment, $$removeItem, $$childNodes, $watch, $ChangeDetector, $$removeElements,
    $digest, $$htmlBlock, $$compareDeep, $$compareArray, $watchReadOnly, $$ifBlock
} from 'malinajs/runtime.js';
export default function App($element, $option) {
    if ($option == null) $option = {};
    let name = '';
    let event = '';
    const click = e => {
        $$apply();
        event = e.x + 'x' + e.y;
    };
    
    function $$apply() {
        if($$apply._p) return;
        if($$apply.planned) return;
        $$apply.planned = true;
        setTimeout(() => {
            $$apply.planned = false;
            $$apply.go();
        }, 1);
    };
    return (function() {
        let $cd = new $ChangeDetector();
        
        let $component = {};
        $component.destroy = () => {
            $cd.destroy();
        };
        
        $$apply.go = () => {
            $$apply._p = true;
            try {
                $digest($cd, () => $$apply._p = false);
            } finally {
                $$apply._p = false;
            }
        };
        function $$build54($cd, $parentElement) {
            let el49 = $parentElement[$$childNodes][1];
            let el50 = $parentElement[$$childNodes][2];
            let el51 = $parentElement[$$childNodes][5];
            let el52 = $parentElement[$$childNodes][7];
            let el53 = $parentElement[$$childNodes][8];{
                let $element=el49;
                $cd.ev($element, 'input', () => { name=$element.value; $$apply(); });
                $watchReadOnly($cd, () => (name), (value) => { if(value != $element.value) $element.value = value; });
                    }
                    {
                        let $element=el49;
                        $cd.ev($element, "keydown", ($event) => { if($event.keyCode != 13) return; $event.preventDefault(); $$apply(); name=''});
                    }
                    {
                        let $element=el50;
                        $watchReadOnly($cd, () => ` `+(name)+`
  `, (value) => {$element.textContent=value;});}
{
            let $element=el51;
            $cd.ev($element, "click", ($event) => {  $$apply(); click($event)});
            }
{
            let $element=el52;
            $cd.ev($element, "click", ($event) => { $event.preventDefault(); $$apply(); event=$element.textContent});
            }
{
                        let $element=el53;
                        $watchReadOnly($cd, () => `
                        `+(event)+`
                        
                        `, (value) => {$element.textContent=value;});}};
                        const rootTemplate = `
                        
                        Enter word and press enter:
                        <input/> <br/>
                        <button>Click!</button>
                        <a href>Click</a> <ul>
                            <li>
                                <b>on:event</b> to listen event, available locals: <i>$element, $event</i>
                            </li>
                            <li>
                                modifier "preventDefault" to use <i>event.preventDefault()</i>
                            </li>
                            <li>
                                modifier "enter": on:keydown|enter - listen work if keyCode == 13 (Enter), modifer "escape" when keyCode == 27
                            </li>
                        </ul>`;
        if($option.afterElement) {
            let tag = $element;
            $element = $$htmlToFragment(rootTemplate);
            $$build54($cd, $element);
            tag.parentNode.insertBefore($element, tag.nextSibling);
        } else {
            $element.innerHTML = rootTemplate;
            $$build54($cd, $element);
        }
    
            $$apply();
            return $component;
        })();;
}

2_result.js

import {$$htmlToFragment, $$removeItem, $$childNodes, $watch, $ChangeDetector, $$removeElements, $digest, $$htmlBlock, $$compareDeep, $$compareArray, $watchReadOnly, $$ifBlock} from 'malinajs/runtime.js';
export default function App($element, $option) {
  if ($option == null) $option = {};
  let name = '';
  let event = '';
  const click = e => {
    $$apply();
    event = e.x + 'x' + e.y;
  };
  function $$apply() {
    if ($$apply._p) return;
    if ($$apply.planned) return;
    $$apply.planned = true;
    setTimeout(() => {
      $$apply.planned = false;
      $$apply.go();
    }, 1);
  }
  ;
  return (function () {
    let $cd = new $ChangeDetector();
    let $component = {};
    $component.destroy = () => {
      $cd.destroy();
    };
    $$apply.go = () => {
      $$apply._p = true;
      try {
        $digest($cd, () => $$apply._p = false);
      } finally {
        $$apply._p = false;
      }
    };
    function $$build54($cd, $parentElement) {
      let el49 = $parentElement[$$childNodes][1];
      let el50 = $parentElement[$$childNodes][2];
      let el51 = $parentElement[$$childNodes][5];
      let el52 = $parentElement[$$childNodes][7];
      let el53 = $parentElement[$$childNodes][8];
      {
        let $element = el49;
        $cd.ev($element, 'input', () => {
          name = $element.value;
          $$apply();
        });
        $watchReadOnly($cd, () => name, value => {
          if (value != $element.value) $element.value = value;
        });
      }
      {
        let $element = el49;
        $cd.ev($element, "keydown", $event => {
          if ($event.keyCode != 13) return;
          $event.preventDefault();
          $$apply();
          name = '';
        });
      }
      {
        let $element = el50;
        $watchReadOnly($cd, () => ` ` + name + `
  `, value => {
          $element.textContent = value;
        });
      }
      {
        let $element = el51;
        $cd.ev($element, "click", $event => {
          $$apply();
          click($event);
        });
      }
      {
        let $element = el52;
        $cd.ev($element, "click", $event => {
          $event.preventDefault();
          $$apply();
          event = $element.textContent;
        });
      }
      {
        let $element = el53;
        $watchReadOnly($cd, () => `
                        ` + event + `
                        
                        `, value => {
          $element.textContent = value;
        });
      }
    }
    ;
    const rootTemplate = `
                        
                        Enter word and press enter:
                        <input/> <br/>
                        <button>Click!</button>
                        <a href>Click</a> <ul>
                            <li>
                                <b>on:event</b> to listen event, available locals: <i>$element, $event</i>
                            </li>
                            <li>
                                modifier "preventDefault" to use <i>event.preventDefault()</i>
                            </li>
                            <li>
                                modifier "enter": on:keydown|enter - listen work if keyCode == 13 (Enter), modifer "escape" when keyCode == 27
                            </li>
                        </ul>`;
    if ($option.afterElement) {
      let tag = $element;
      $element = $$htmlToFragment(rootTemplate);
      $$build54($cd, $element);
      tag.parentNode.insertBefore($element, tag.nextSibling);
    } else {
      $element.innerHTML = rootTemplate;
      $$build54($cd, $element);
    }
    $$apply();
    return $component;
  })();
  ;
}