Props missing and render problems (don't know how to name the problem)

[ffixitt]

First problem

Component:

<!-- spacer.html -->
<script props>
    module.exports = {
        height: props.height || ''
    }
</script>

<if condition="height || height !== ''">
    <div style="line-height: {{ height }};" role="separator">&zwnj;</div>
</if>
<else>
    <div role="separator">&zwnj;</div>
</else>

Use it:

<x-spacer height="20px"></x-spacer>

Result:

<div style="line-height: 20px;" role="separator">&zwnj;</div>

if I remove the height prop (attr) from x-spacer, the result is the same as above, and always takes the value specified before, although it should be:

<div role="separator">&zwnj;</div>

not

<div style="line-height: 20px;" role="separator">&zwnj;</div>

if I rebuild the project again, then everything works fine until the prop height is declared

---

The second problem is that if I use it twice, the first one without the prop and the second one with it, the first one will inherit the value from the second one.

Use it:

<x-spacer></x-spacer>
<div>Lorem ipsum dolor sit amet.</div>
<x-spacer height="16px"></x-spacer>

Result:

<div style="line-height: 16px;" role="separator">&zwnj;</div>
<div>Lorem ipsum dolor sit amet.</div>
<div style="line-height: 16px;" role="separator">&zwnj;</div>

[thewebartisan7]

Hi, sorry for late reply.

I think that you are using an old version of the plugin, since I remember this was an issues that I have fixed.

I try to reproduce issue in this repo https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter

Try clone it and then run

npm install
npm run build

Then check in dist folder file test.html and test2.html, which is the result of this two pages:

https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter/blob/main/src/pages/test.html
https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter/blob/main/src/pages/test2.html

Be sure that you are using last version of the plugin, which is 1.0.0-beta.16.

In case doesn't work for your project with latest version, please create a repo where I can reproduce this issue.

Thanks!

An extra note about your code:

This condition: <if condition="height || height !== ''"> is the same as <if condition="height"> since empty string is considered falsy value. But I suppose you added this extra check since doesn't work for you?

I also prefer to provide a better API to my component, for example see below code, which allow you to use your component like:

<x-spacer size="sm"></x-spacer>
<x-spacer size="md"></x-spacer>
<x-spacer size="lg"></x-spacer>
etc...

<!-- spacer.html -->
<script props>
  module.exports = {
    size: {
      xs: '10px',
      sm: '20px',
      md: '30px',
      lg: '40px',
      xl: '50px'
    }[props.size] || false
  }
</script>

<if condition="size">
    <div style="line-height: {{ size }};" role="separator">&zwnj;</div>
</if>
<else>
    <div role="separator">&zwnj;</div>
</else>

[ffixitt]

Hi, thanks for your help and example!

Yeah , I used height !== '' for tests.

I am using the latest version 1.0.0-beta.16 and use them on Maizzle framework for emails.

btw what I noticed in my case, if I use predefined data ( as in the example above ) then everything works fine, but if I use "dynamic" data then it works as I described above.

So far I have not found what could be the problem. Maybe in the browserSync && watcher, since during the build everything works fine, but in the devs - no.

Sorry for my English :)

[thewebartisan7]

I understand now.. Yes the watcher could be the problem.
I have also similar problem with posthtml-extends, posthtml-modules and posthtml-components as mentioned here posthtml/posthtml#386

And I see several issues from others with hot module replacement as mentioned here #19

I am using webpack and I notice several times this issues using https://github.com/posthtml/posthtml-loader until I separate the posthtml config from webpack config by using https://github.com/posthtml/posthtml-load-config

I am not sure if maizzle are using webpack, but perphas you can try using a separated posthtml config from webpack config? Maybe @cossssmin can check into.

It's annoying but to me this seem to be something related with the watcher and not the plugin, considering that build works fine.

Another workaround that I used for several times until I found above solution is to set props each time, even this is not ideal solution.

Example in your case:

<x-spacer height="16px"></x-spacer>
<div>Lorem ipsum dolor sit amet.</div>
<!-- Setting height to false will not use previous height value -->
<x-spacer height="false"></x-spacer>

Let me know, in case I will try to do some more tests in your specific environment, if you can provide a simple repo how to reproduce it.

[thewebartisan7]

btw what I noticed in my case, if I use predefined data ( as in the example above ) then everything works fine, but if I use "dynamic" data then it works as I described above.

Also please explain a bit more about this "dynamic" data. Do you mean something like this:

<x-spacer height="{{ height }}"></x-spacer>

[ffixitt]

Yes , when i send to component a custom value not a predefined.

[ffixitt]

Ok, thanks for the help and sorry for bothering you. Have a nice day !

[cossssmin]

I am not sure if maizzle are using webpack, but perphas you can try using a separated posthtml config from webpack config? Maybe @cossssmin can check into.

We're not using Webpack, for local dev we use Browsersync for both file watching (with chokidar) and for the local server.

@quddoss this is what I use:

<script props>
  module.exports = {
    height: props.height,
    msoHeight: props.msoHeight,
  }
</script>

<if condition="height">
  <div
    attributes
    role="separator"
    style="
      {{ height ? `line-height: ${height}` : '' }};
      {{ msoHeight ? `mso-line-height-alt: ${msoHeight}` : '' }};
    "
  >&zwj;</div>
</if>
<else>
  <div role="separator">&zwj;</div>
</else>

Using it with a 'dynamic' value in Maizzle (set in Front Matter in the template):

---
height: 20px
---

<x-main>
  <fill:template>
    <x-spacer height="{{ page.height }}"></x-spacer>
  </fill:template>
</x-main>

... it compiles to <div role="separator" style="line-height: 20px">&zwj;</div> both when developing locally and when building for production.

[thewebartisan7]

Thanks @cossssmin , however I think that he has issue with following code:

---
height: 20px
---

<x-main>
  <fill:template>
    <x-spacer height="{{ page.height }}"></x-spacer>
   <!-- Does this next render without height ? -->
    <x-spacer></x-spacer>
  </fill:template>
</x-main>

[cossssmin]

Yes, it renders <div role="separator">&zwj;</div> as expected from that if/else statement.

[thewebartisan7]

Ah great 👍 Thanks for testing. So maybe the issue with @quddoss is something else