Marko: Some attributes not working when component starts with an <if> tag

[Joeao]

Bug Report

Context

Trying to create a single-file component with the HTML section starting with an <if> tag and containing an event listener or reference to an object.

<if(true == true)>
    <div>
    <button on-click('increment')>
       ${state.count}
    </button>
    </div>
</if>

Expected Behavior

The component should compile as expected, with events intact and objects correctly referenced

Actual Behavior

Console will throw Exception: ReferenceError: __component is not defined if the event listener is present first, or ReferenceError: state is not defined if an object reference.

Additional Info

Your Environment

• Version used: 4.4.21
• Environment name and version (e.g. Chrome 39, node.js 5.4): Node 6.11.1, Chromium 59.0.3071.109
• Operating System and version (desktop or mobile): Ubuntu 16.04

Steps to Reproduce

1. Clone https://github.com/marko-js-samples/marko-starter-demo
2. Wrap an if statement around the click-count.js HTML section or copy & paste:

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

style {
  .count {
    color:#70b;
    font-size:3em;
  }
  .example-button {
    font-size:1em;
    padding:0.5em;
  }
}

<if(true == true)>
    <div>
    <button on-click('increment')>
       ${state.count}
    </button>
    </div>
</if>

1. Load localhost:8080

Stack Trace

Render error. Exception: ReferenceError: __component is not defined
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/components/click-count/index.marko.js:24:18)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at Object.renderBody (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/index.marko.js:27:13)
at doInclude (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/taglibs/core/include-tag.js:13:31)
at includeTag (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/taglibs/core/include-tag.js:30:5)
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/components/site-layout/index.marko.js:56:3)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/index.marko.js:17:3)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at safeRender (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/runtime/renderable.js:6:9)
[marko-starter marko-starter-demo] Error building page /. Error: Error: Render error. Exception: ReferenceError: __component is not defined
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/components/click-count/index.marko.js:24:18)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at Object.renderBody (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/index.marko.js:27:13)
at doInclude (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/taglibs/core/include-tag.js:13:31)
at includeTag (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/taglibs/core/include-tag.js:30:5)
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/components/site-layout/index.marko.js:56:3)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at Object.render (/home/joeao/Documents/Sourcecode/marko-starter-demo/src/index.marko.js:17:3)
at hotReloadProxy (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/hot-reload.js:85:31)
at safeRender (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/runtime/renderable.js:6:9)
at AsyncStream.error (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/runtime/html/AsyncStream.js:411:13)
at Timeout._onTimeout (/home/joeao/Documents/Sourcecode/marko-starter-demo/node_modules/marko/src/runtime/renderable.js:17:22)
at ontimeout (timers.js:386:14)
at tryOnTimeout (timers.js:250:5)
at Timer.listOnTimeout (timers.js:214:5)

---

693 may be related. If this is expected behaviour, then #774 may be related in that an error should be thrown due to bad syntax.

<if (true == true)> may be a bad example, in my use case I'm checking if a particular property belongs inside the input parameter.

[ianvonholt]

Is this resolved if you have a root element that is not an <if> tag?

Example:

class {
  onCreate() {
    this.state = {
        count:0,
        truthy: true 
    };
  }
  increment() {
    this.state.count++;
  }
}

style {
  .count {
    color:#70b;
    font-size:3em;
  }
  .example-button {
    font-size:1em;
    padding:0.5em;
  }
}


<div>
    <if(state.truthy === true)>
    <button on-click('increment')>
       ${state.count}
    </button>
    </if>
</div>

[Joeao]

Yes, the issue occurs when starting with if, wrapping in a div is my current workaround. This issue could be resolved either by:

1. Starting with if works
2. An error is thrown on build
3. The documentation states it should be used within other HTML

3 could be complicated or difficult to explain seeing as the documentation is quite straightforward right now, so 1 or 2 would be good in my opinion.

[mlrawlings]

This should be fixed in the latest beta version (npm i marko@beta) which will go stable very soon.