passing data from state in the include tag

[cathalmcguire]

Bug Report

Context

component state is out of scope inside the include tag

Expected Behavior

pass state variable to included template

Actual Behavior

state is undefined

Steps to Reproduce

I have a component something like

class {
  onCreate() {
    this.state = { id: 1}
  }
}

//works fine
< input id=state.id  />

//state is undefined
<include(/path/to/generic/input, {id: state.id}) />
<include(/path/to/generic/input) id=state.id />

Stack Trace

Uncaught ReferenceError: state is not defined
    at render (index.marko:40)
    at safeRender (renderable.js:6)
    at Template.render (renderable.js:136)
    at doInclude (include-tag.js:17)
    at includeTag (include-tag.js:30)
    at render (index.marko:45)
    at Template.renderSync (renderable.js:69)
    at Object.<anonymous> (index-desktop.marko.js:12)
    at __webpack_require__ (bootstrap e38ec24…:19)
    at Object.<anonymous> (emitter.js:2)

[patrick-steele-idem]

First off, the following is not valid:

< input id=state.id  />

That prevents the HTML tag from being parsed. The initial space after the < needs to be removed:

<input id=state.id  />

That is a separate issue though...

It is somewhat of an odd restriction, but the ID for the root HTML element of a UI component needs to be static and (we need to provide a better error message... sorry about that!). The reason for this is that a UI component is uniquely identified by its ID and if the ID changes during a re-render then diffing/patching will break. Wrapping everything in a <div> (without the id attribute) will fix the state is not defined error and it is recommended to have a single top-level HTML element (for now, at least... see below):

class {
  onCreate() {
    this.state = { id: 1}
  }
}

<div>
  <input id=state.id  />
  <include('./include-target', {id: state.id}) />
  <include('./include-target') id=state.id />
</div>

Typically, you want to always avoid assigning an id to any HTML element when using Marko. You should either use key (to assign a scoped ID) or use class for targeting styling.

Marko does not currently correctly handle multiple dynamic top-level HTML elements correctly in all cases. We are working on a fix for that.

[patrick-steele-idem]

@austinkelleher @mlrawlings, can either of you look into improving the error message if the ID for the top-level HTML is dynamic? Thanks. I'm keeping this issue open because we are not providing a good error message to the user.

[cathalmcguire]

That's great, worked straight away. Thanks for the quick response. The space after the input was a typo. Will avoid using id in the future :)

[austinkelleher]

@patrick-steele-idem I'll get to working on this either later tonight or tomorrow.