Marko: Making the top-level page a component causes <style> tags to be stripped in the browser

Created on 22 Aug 2017 · 11Comments · Source: marko-js/marko

Bug Report

Context

When I try to do this.state.message = event.target.value inside a function which is being called on keyup it resets the css as well as the content in the input box. Code is given in Additional info section.

Expected Behavior

Don't reset CSS or remove the content inside the textbox.

Actual Behavior

No more css rules are being applied, the value inside the textbox is lost.

Additional Info

Your Environment

Version used: 4.2.4
Environment name and version (e.g. Chrome 39, node.js 5.4): Firefox 55, node 8.2.1, Chrome 60.0
Operating System and version (desktop or mobile): 64bit Mac OS X 10.12.5
Source:

class {
  onCreate(){
    this.state = {
      message:'Hey!'
    }
  }
  inputChnaged(event){
    <!-- Tottaly fine -->
    console.log(event.target.value) 
    <!-- Resets css and the value inside textbox -->
    this.state.message = event.target.value
  }
}
style {
  .cont {
    font-family: monaco;
  }
}
$ var content = 'Enter to be mirrored.'
<!doctype html>
html
    head
        title -- Marko
    body
      div.cont -- ${content}
      input on-keyup('inputChnaged')
      button -- ${state.message}

todo bug

Source

meain

Most helpful comment

Please make marko fail fast when the user creates a full page component.

cameronbraid on 21 Jun 2018

👍4

All 11 comments

@meain This is actually related to #804. When doing a re-render of the top-level component, and diffing the <head> and <body>, you will lose content added by the module bundler. As @mlrawlings, suggested in the other thread, React has the same issue. Check out this article: https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375

If you move the content you have in the body into another component, and only re-render that component on state change, you should see this issue go away.

austinkelleher on 22 Aug 2017

index.marko

<!doctype html>
html
    head
        title -- Marko
    body
      mirror

mirror.marko

class {
  onCreate(){
    this.state = {
      message:'Hey!'
    }
  }
  inputChnaged(event){
    <!-- Tottaly fine -->
    console.log(event.target.value) 
    <!-- Resets css and the value inside textbox -->
    this.state.message = event.target.value
  }
}

style {
  .cont {
    font-family: monaco;
  }
}

$ var content = 'Enter to be mirrored.'
div
    div.cont -- ${content}
    input on-keyup('inputChnaged')
    button -- ${state.message}

Created a component like this and imported into the body, the css stays, but the textfield is still being reset @austinkelleher

meain on 22 Aug 2017

@meain On re-render, your input will go back to it's original state, which does not have a value. You can add a no-update attribute to ensure that the value is preserved. http://markojs.com/docs/components/#codeno-updatecode

mirror.marko

class {
  onCreate(){
    this.state = {
      message:'Hey!'
    }
  }
  inputChnaged(event){
    <!-- Tottaly fine -->
    console.log(event.target.value) 
    <!-- Resets css and the value inside textbox -->
    this.state.message = event.target.value
  }
}

style {
  .cont {
    font-family: monaco;
  }
}

$ var content = 'Enter to be mirrored.'
div
    div.cont -- ${content}
    input no-update on-keyup('inputChnaged')
    button -- ${state.message}

austinkelleher on 22 Aug 2017

Thank you. Closing this as #804 already exists

meain on 22 Aug 2017

Alternatively, if you actually want the input value to be in sync with the state, you can set the value attribute on the input field:

input value=state.message on-keyup('inputChnaged')

austinkelleher on 22 Aug 2017

👍2

That does not bind it two way though, right? @austinkelleher

meain on 22 Aug 2017

@meain This is actually something we are talking about supporting If you have any thoughts, feel free to post them in these threads. We'd love to get some feedback.

https://github.com/marko-js/marko/issues/676
https://github.com/marko-js/marko/issues/528

austinkelleher on 22 Aug 2017

👍1

Please make marko fail fast when the user creates a full page component.

cameronbraid on 21 Jun 2018

👍4

For those who find this in the future...the specific issue is that your top level page (where the <head> and <body> are located) canNOT have a class attached to it. It can have styles, but not a JS class. Took me a while to understand/figure this out.