Function style event handlers being Inlined Into the document

[Khauri]

Marko Version: 5.17.5

Details

For native tags such as button and input passing in event handlers in function form causes the function to be inlined into the document as an attribute when used in a class component. For example:

class {
  onCreate() {
    this.state = {count: 0};
  }
  increment() {
    this.setState('count', this.state.count + 1);
  }
}

<p>${state.count}</p>

<button on-click('increment')> This works </button>

<button onClick=component.increment.bind(component)> onClick gets inlined </button>

A similar and possibly related issue is that in the tags api the same thing happens when you use a dynamic tag string that gets defined outside of the component (it can come from attrs or be defined as const, doesn't matter which).

<let/count=0 />
<const/as="button" />

<p>${count}</p>

<button onClick(){count += 1}>This works</button>

<${'button'} onClick(){count += 1}>This works</>

<${as} onClick(){count += 1}>This does not work </>

Not sure how hard of a problem this is to solve per se, but this greatly limits the ability to make composable components as events cannot be passed down to components that do this.t

Expected Behavior

I don't believe the function should be inlined in either of these cases. I don't really see a lot of use case for functions ever being inlined as most of the time they rely on local variables (except maybe for web components?), but perhaps an explicit escape hatch should be added for that behavior, ie a special flag similar to no-update. Though I believe web components also allow you to attach events using addEventListener so it's still probably not necessary at all.

Actual Behavior

The function gets inlined into the element's attributes in the output, causing errors to be thrown as local variables aren't referenceable.

Possible Fix

Additional Info

Your Environment

• Environment name and version (e.g. Chrome 39, node.js 5.4):
• Operating System and version (desktop or mobile):
• Link to your project:

Steps to Reproduce

1. first...

Stack Trace