posthtml-modules icon indicating copy to clipboard operation
posthtml-modules copied to clipboard

Passing data to modules

Open cossssmin opened this issue 4 years ago • 2 comments

Would be really useful if we could somehow pass data other than a JSON string to a module.

For example, imagine using a loop with posthtml-expressions:

<each loop="item, key in [1, 2, 3]">
  <module href="test.html">
    {{ item }}
  </module>
</each>

or maybe somehow pass item as a local:

<each loop="item, key in items">
  <module href="test.html" locals='{"item": item}'></module>
</each>

I can't figure out how to provide item to the module, so that it evaluates it and renders the correct value.

@Scrum any ideas?

cossssmin avatar Jan 29 '21 19:01 cossssmin

@Scrum now that we have attributes as locals, would it be possible to evaluate them with expressions so that a user could do something like this?

parent.html

<each loop="item, key in [1, 2, 3]">
  <component
    src="example.html"
    item="{{ item }}"
  ></component>
</each>

example.html

{{ item }}

Result

1
2
3

cossssmin avatar Mar 30 '22 13:03 cossssmin

Hmm so actually, it does work.

The problem I had was with an array of objects, and that can be done like this:

const items = [
  {
    title: 'lorem',
  },
  {
    title: 'lorem ipsum',
  },
]

parent.html

<each loop="item, key in items">
  <component
    src="example.html"
    item="{{ item }}"
  ></component>
</each>

example.html

{{{ JSON.parse(item).title }}}

Result

lorem
lorem ipsum

cossssmin avatar Mar 30 '22 14:03 cossssmin