Support inline <span> components in markdown
Is your feature request or improvement related to a problem?
I wanted to create a pill component as follows; somewhat psuedo
<div @name="pill" class="pill">
<slot/>
</div>
I also tried
<div @name="pill" class="pill">
{text}
</div>
and was unable to use it in markdown;
[pill]
text: my pill
Both options gives me runtime error in chrome console
mount.js:18 Uncaught (in promise) TypeError: Failed to resolve module specifier ''
at importAll (mount.js:18:21)
at mountAll (mount.js:26:30)
at patch (hotreload.js:53:9)
at async sse.onmessage (hotreload.js:84:7)
The documentation does not explain how to create a component. There are some vague notes on constructors. But no worked examples.
Solution you'd like
- I'd like the vagueness in the documentation around building components to be removed by providing a full worked example of some small simple component. Both how to create the component, and how to use it.
update: it's possible there is a different bug causing the "failed to resolve module specifier" which might mean the current docs are sufficient. (I can't tell while I'm getting this error since I dont know what I dont know.)
- I'd like to be able to able to create "inline"
<span>components for items like "pills". (css styled rounded end tags) - I'd want to be able to invoke the components inline in markdown for easier testing and more flexibility using both html syntax as well as markdown sytnax as follows
This is my inline [pill hello!] and also <pill text="hello"/>!
- Agreed
- and 3.: Partial duplicate of #187
I will check, if I can get at least the non-inline variant to work.
@nobkd I'm still checking but I think the Failed to resolve module specifier is happening on a brand new nue create codebase without modifications; which may have led me totally down this rabbit hole. If I was able to get components working I'm fairly certain I would have been able to provide a much more coherant suggestion of improvement to documentation, with some simple getting started exercises that can be done with nue from scratch.
I've created a new bug report for the failed to resolve error;
https://github.com/nuejs/nue/issues/349
When that's resolved, this may or may not still be an issue.
I started working on this, but then remembered how complex and unfriendly Marked API is. Doing this later. I have a custom Markdown parser implementation forming in my mind
Ended up doing a custom Markdown parser/renderer that is easier to work with than Marked. Likely faster too. It's a bit of a work, but there are so many benefits to do this in-house (beyond the NIH syndrome) that will benefit Nue in the long run.
New side quest started ;)
Edit: On a side note: it would be nice to be able to extend the new md parser e. g. replacing something in MD before Parsing (or modify text leafs afterward).
(my use case is simple smartypants: replacing --, --- with – (–), — (—) or ... with … (…) or "", '' with „” („”) (bottom double quote; right double quote) and ‚’ (‚’) (single bottom quote; right single quote) (this would be for German. I think those were right, but I might have switched something up when copying / checking out)
Should work with dev branch.
Though I'm not sure, if inline [.class] would result in <p>inline <span class="class"></span></p> or in <div class="class"></div></p>
Probably it would be best to have it span for inline- and div for block-syntsx