Marko: [v4] Issue with inline style tag

[gilbert]

Bug Report

Context

<script>
module.exports = {
  onInput(input) {
    this.state = {
      count: input.count
    }
    this.initialCount = input.count
  },
  incrementCount() {
    this.state.count++
  },
  resetCount() {
    this.state.count = this.initialCount
  }
}
</script>

<style>
.hello { color: green; }
</style>

<div class="hello">And an example component! Current value: <b>${state.count}</b></div>
<button on-click('incrementCount')>+</button>
<button on-click('resetCount')>reset</button>

Expected Behavior

The text should be green, and clicking the + button should increment the counter.

Actual Behavior

The text is green, but the + button does nothing.

Hopefully it doesn't have to do with my configuration :)

• Link to component file
• Link to marko / lasso setup

Additional Info

Your Environment

• Version used: v4.0.0-rc.1
• Environment name and version: Chrome 54
• Operating System and version: OS X
• Link to your project:

Steps to Reproduce

1. 
   
   
   2.
   
2. 
   
   
   4.
   

Stack Trace

[patrick-steele-idem]

Just a quick update:

• I am not able to reproduce when using your component in ui-components-playground
• I am able to reproduce the problem within your sample app (investigating)

[gilbert]

I see. In that case I would think it has to do with require('marko-magic'), but I just removed that line and it's still happening..

[patrick-steele-idem]

It looks to be a bug in Marko (specifically, template metadata). Internally, marko-magic is calling template.getDependencies() to get the top-level page dependencies and this method is returning the incorrect value when the UI component has a <style> tag:

With style tag:

[ { type: 'css',
    code: '\n.hello { color: green; }\n',
    virtualPath: '/Users/psteeleidem/temp/marko-style-tag-issue/client/components/counter/index.marko.css' } ]

NOTE: The index.marko file is not included as a dependency when it should be.

Without style tag:

[ { type: 'require',
    path: '/Users/psteeleidem/temp/marko-style-tag-issue/client/components/counter/index.marko' } ]

ui-components-playground is working fine because we are explicitly adding the top-level app UI component as a dependency for the top-level page.

I'll work with @mlrawlings to resolve this issue today. Thank you for reporting the problem!

[mlrawlings]

@mindeavor There was a regression in 4.0.0.-rc.1 (my bad 😞) that has been fixed, but had not been published (https://github.com/marko-js/marko/commit/1564788f2e0b84dce79d755602b7bdf9f26f8a58). Things will be fixed if you pull in4.0.0.-rc.2 which I believe Patrick is publishing as we speak.

[patrick-steele-idem]

Fix from @mlrawlings verified. New version published with fix: [email protected]

@mindeavor Please let us know if you see any other issues. Thanks, again.