Markdown list error: </li> attempted to close an element that was not open

[mizzao]

I'm trying to use some markdown inside Svelte components, and it mostly works fine, e.g.:

<Swipe {...swipeConfig}>
  <SwipeItem>
    <img
      alt="parsnip puree"
      src="https://assets.bonappetit.com/photos/57ad30921b3340441497549d/master/pass/parsnip-puree.jpg" />

    # Ingredients

    1 lb parsnips
    milk
    heavy cream or butter

    # Optional

    EVOO
    parsley
  </SwipeItem>

  <SwipeItem>
    (Some other stuff...)
  </SwipeItem>
</Swipe>

However, if I replace the middle part with (note the - list items):

    # Ingredients

    - 1 lb parsnips
    - milk
    - heavy cream or butter

Then I get the following error:

src/ParsnipPuree.svx
49:   </SwipeItem>
50: </Swipe>
51: </li>
    ^
52: </ul>
ParseError: </li> attempted to close an element that was not open
    at error (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/parse/index.ts:93:3)
    at tag (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/parse/state/tag.ts:137:12)
    at new Parser$1 (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/parse/index.ts:45:12)
    at parse (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/parse/index.ts:208:17)
    at compile (/home/mao/parsnip/cookwithme/node_modules/svelte/src/compiler/compile/index.ts:79:14)
    at /home/mao/parsnip/cookwithme/node_modules/rollup-plugin-svelte/index.js:252:22
    at ModuleLoader.addModuleSource (/home/mao/parsnip/cookwithme/node_modules/rollup/dist/shared/rollup.js:17813:30)
    at ModuleLoader.fetchModule (/home/mao/parsnip/cookwithme/node_modules/rollup/dist/shared/rollup.js:17867:9)
    at async Promise.all (index 1)

Any idea what might be going on here? According to the examples on https://mdsvex.com/playground, this should work fine.

[mizzao]

I was playing around a bit and found that (1) it doesn't like to be indented, and (2) any list needs two newlines before the end of the component for the error not to show up. For example, this works:

  <SwipeItem>
# Ingredients

- 1 lb parsnips
- milk
- heavy cream or butter

# Optional

- EVOO
- parsley

  </SwipeItem>

Still a great tool to have, but a bit unexpected in behavior. Just leaving this here for @pngwn or other users to be aware of.

[pngwn]

Yeah, there are currently some limitations around spacing and indentation. In general markdown rules apply, which means that newlines are a really big deal.

In markdown, HTML is just a big blog of content, markdown parsers will not parse the contents of HTML tags at all, they just get skipped and output exactly as they are. But when the parser sees a newline, then it will attempt to parse as markdown again.

This is why the following works fine:

<div>

# Hello

</div>

But this does not:

<div># hello</div>
<span>*Hey there*</span>

I am working on a branch at the minute that will resolve some of these issue by fully parsing all svelte and HTML syntax instead of treating it as an opaque blob of text. This will facilitate markdown nested inside of HTML and Svelte. There will still be some limitations (indentation is especially tricky to solve) but in general lots more things will work in a way that isn't strictly speaking compatible with the markdown spec but makes a lot of sense in the context of mdsvex.

Anything indented may still pose problems, but we will be in a better position to address issues as we will have much more semantic information about the document. Some things will probably never be addressed such as the indentation issue described in this issue. Sometimes the grammar rules and ecosystem idioms don't work well together. These cases will need to be addressed via clear documentation about the differences between markdown and mdsvex.

I'll mark this as a documentation issue and make it a priority to go through and document the differences between markdown and mdsvex when compared to markdown but I'll do this after I have changed the parsing, as this will resolve a number of issues (as well as unlocking some new capabilities).

[pngwn]

I think I can fix this particular case soon.

[eropple]

Hey there! Just ran into this when I was building an inline side notes component, a la TufteCSS. Saw this issue and was wondering if there had been any movement on this one?

Thanks so much for mdsvex, it's been really handy as I'm learning Svelte.