using #each in Markdown

[mvolkmann]

Should this work? The first hardcoded table does work. The second one that uses #each does not. It puts the whole row, including the vertical bars, in the first column of each row.

<script>
  const dogs = [
   {name: 'Dasher', gender: 'male', breed: 'Whippet'},
   {name: 'Maisey', gender: 'female', breed: 'Treeing Walker Coonhound'},
   {name: 'Ramsey', gender: 'male', breed: 'Native American Indian Dog'},
   {name: 'Oscar ', gender: 'male', breed: 'German Shorthaired Pointer'}
  ];
</script>

# dogs

| Name   | Gender | Breed                      |
| ------ | :----: | -------------------------- |
| Dasher |  male  | Whippet                    |
| Maisey | female | Treeing Walker Coonhound   |
| Ramsey |  male  | Native American Indian Dog |
| Oscar  |  male  | German Shorthaired Pointer |

| Name | Gender | Breed |
| ---- | :----: | ----- |
{#each dogs as {name, gender, breed}}
| {name} | {gender} | {breed} |
{/each}

<style>
  h1 {
    color: blue;
    text-transform: uppercase;
    font-size: 4em;
  }

  table {
    border-collapse: collapse;
  }

  td, th {
    border: solid lightgray 3px;
    padding: 0.5rem;
  }

  th {
    background-color: pink;
  }
</style>

[AlexxNB]

No, it doens't work. I didn't implement this case. I will try to make it work.

[AlexxNB]

Check the v2.6.0 on the NPM. I added support for tables in each blocks.

[mvolkmann]

Excellent! Now I'm wondering whether #if is supported and if it can be nested. For example, these do not work currently. Should they?

{#if dogs.length > 2}
  {#each dogs as {name, gender, breed}}
    | {name} | {gender} | {breed} |
  {/each}
{/if}

and

{#each dogs as {name, gender, breed}}
  {#if breed === 'male'}
    | {name} | {gender} | {breed} |
  {/if}
{/each}

[mvolkmann]

It seems it is very important to not have a blank line before the #each. For example:

| Name | Gender | Breed |

{#each dogs as {name, gender, breed}}
| {name} | {gender} | {breed} |
{/each}

will render this:

Removing the blank line will render this:

One thing that makes this tricky that is out of your control is that some code formatters will add the blank line. I use VS Code with the Prettier extension. When I save changes to a .md file, it adds that blank line. To work around this I used Vim to edit the file.

[mvolkmann]

Minor documentation typo: At https://alexxnb.github.io/svelte-preprocess-markdown/, "handeled" should be "handled". Great work by the way!

[AlexxNB]

For example, these do not work currently. Should they?

No, it doesn't work now. My suggesion is to filter dogs array before put it into each block.

It seems it is very important to not have a blank line before the #each.

Will check tomorrow

Minor documentation typo

Yeah, my english is poor. Thanks =)

[AlexxNB]

One thing that makes this tricky that is out of your control is that some code formatters will add the blank line.

Will the blank line be added by formatters, if you will write |---|---|---| also?

Your example does not looks like valid MD table.

By the way, MDSv syntax is not valid MD and is not valid Svelte. So Prettier never will work correctly with this format.

[mvolkmann]

If I remove the spaces around the dashes and save the file in VS Code, something (maybe Prettier) is putting them back in. I don't expect there is anything you can do about this.

I think the only think left to consider for this issue is whether your library can support nested #each and #if blocks.

[AlexxNB]

I think the only think left to consider for this issue is whether your library can support nested #each and #if blocks.

Reworked table handling, now it supports all logic for tables. Check tested cases here https://raw.githubusercontent.com/AlexxNB/svelte-preprocess-markdown/master/tests/9-table-in-each.md

Try v2.7.0 on NPM.

[AlexxNB]

@mvolkmann will you mention my preprocessor in your book? =)

[mvolkmann]

It’s already there! I’ll send you a PDF of the appendix that shows how to use it. You can review it and let me know if you think there should be any changes in how I describe it.

…

--- R. Mark Volkmann Object Computing, Inc.

On Mar 2, 2020, at 2:15 AM, Alexey Schebelev ***@***.***> wrote:  @mvolkmann will you mention my preprocessor in your book? =) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[AlexxNB]

Awesome! =)

[mvolkmann]

Here is a PDF of the current version of the book appendix that covers your library. I'm open to any feedback you have on this.

…

On Mon, Mar 2, 2020 at 6:07 AM Alexey Schebelev ***@***.***> wrote: Awesome! =) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7?email_source=notifications&email_token=AAATLUBC4LOBAOVDG5QK5ZTRFOOQHA5CNFSM4K5HZEX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPB6RY#issuecomment-593370951>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATLUBFUWZQBZM5LM4YNU3RFOOQHANCNFSM4K5HZEXQ> .

-- R. Mark Volkmann Object Computing, Inc.

[AlexxNB]

Sorry, can't figure out the "here" place =)
You can find me at Svelte's Discord for private messaging. (nickname - AlexxNB).

[mvolkmann]

I only see v2.7.0 on npm. Did you maybe not publish it yet? I sent you the PDF on Discord.

…

On Mon, Mar 2, 2020 at 2:12 AM Alexey Schebelev ***@***.***> wrote: I think the only think left to consider for this issue is whether your library can support nested #each and #if blocks. Reworked table handeling, now it supports all logic for tables. Check tested cases here https://raw.githubusercontent.com/AlexxNB/svelte-preprocess-markdown/master/tests/9-table-in-each.md Try v2.8.0 on NPM. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#7?email_source=notifications&email_token=AAATLUE7SNEMUJGU5ACWBNLRFNS5TA5CNFSM4K5HZEX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENOKKXA#issuecomment-593274204>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATLUGKWK5FBNM4PKY63L3RFNS5TANCNFSM4K5HZEXQ> .

-- R. Mark Volkmann Object Computing, Inc.

[AlexxNB]

I edited the comment after found wrong version there. You are tracking issues by email, so you have only first version of the comment. v.2.7.0 is the last at the moment with implemented nested logic. You may be interesting with else syntax also. It produces table row with spanned cell, when there is only one paragraph in the else block:

{#each ... } 
.... 
{:else}
No entries
{/each]

will be processed to:

<table> 
...
<tr><td colspan="num_of_columns_in_the_head>">No entries</td></tr>
...
</table>

Maybe it is good idea to add align="center" also?

[mvolkmann]

Thanks Alexey!

[AlexxNB]

You are welcome. Will buy the papper book as soon as published. =)