4 ms·

Maybe I'm not understanding, but why is this "Turn Markdown into React/Svelte/Vue UI" and not "Turn Markdown into HTML"? I'm not seeing the value of generating

Maybe I'm not understanding, but why is this "Turn Markdown into React/Svelte/Vue UI" and not "Turn Markdown into HTML"? I'm not seeing the value of generating React, Vue or Svelte as opposed to generating DOM components.

thrown-0825 1y ago
keywords for search optimization
jy14898 1y ago
It tickled me seeing the streaming example, thinking about how much better HTML deals with streaming
- yaoke259 1y ago
  html does not allow for event handling, this allows for secure listening of the events at runtime, which afaik is not possible with html
  - mpalmer 1y ago
    Modern frontend frameworks wouldn't exist without JS events, not the other way around. You can absolutely do this with vanilla HTML+JS. https://developer.mozilla.org/en-US/docs/Web/API/Event https://developer.mozilla.org/en-US/docs/Web/API/Event
    - yaoke259 1y ago
      I suppose a vanilla js version is possible? I'll need to look into this
  - paceaux 1y ago
    You really might want to look into what the DOM is and how it works. When HTML reaches the browser, all the markup is parsed, and the browser creates a Document Object Model (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...). That object model is an extremely robust API that's loaded with tons of functionality, not the least of which is working with events (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...). The browser itself brings so much functionality that you can do stuff like check the status of the battery; create, save, and access files; get someone's precise lattitude and longitude; and _create and subscribe to streams_. I'm not sure what you mean by, "html does not allow for event handling," ... but if HTML exists in a browser at all, there's plenty of event handling to go around.
randomtoast 1y ago
> Maybe I'm not understanding, but why is this "Turn Markdown into React/Svelte/Vue UI" and not "Turn Markdown into HTML"? It's very simple: the post had not been upvoted to the front page with the title you suggested.
threetonesun 1y ago
It's very silly. Given that Markdown fully supports HTML I have built sites using just Markdown + web components but that's... just how it works. What's really needed is a better editor experience.
- didgeoridoo 1y ago
  Nice discussion on this here just a couple weeks ago: https://news.ycombinator.com/item?id=44865997 https://news.ycombinator.com/item?id=44865997
- lelanthran 1y ago
  > Given that Markdown fully supports HTML I have built sites using just Markdown + web components but that's... just how it works. Agreed. My blog is a single shell script that runs pandoc on all the files in a subdir, generates a new .md file for table of contents, and then uses pandoc to generate a ToC.html file. That doesn't mean that my the site uses no Javascript - the magic of web components means that I can place `<some-custom-component> ...` in the middle of my .md content and have interactive components in the resulting html. What would be really useful is decent tooling for this sort of authoring.
- yaoke259 1y ago
  this actually uses web components under the hood! the dsl is more secure and easier to write (at least in my opinion). For v2 I'll make the whole design/architecture more polished and web-component oriented, possibly with some sort of verifier/editor support???
yaoke259 1y ago
Svelte, React and Vue allow for easier event handling, at least that was my rationale, is it possible to achieve the same with html?
- lelanthran 1y ago
  > Svelte, React and Vue allow for easier event handling, at least that was my rationale, is it possible to achieve the same with html? I'm not really sure how Svelte, React or Vue allow for easier event handling. I mean, what's harder with standard events in Vanilla JS? Sure, it's not perfect, but what exactly is easier in Svelte, React and Vue that makes the trade-off with VanillaJS a reasonable one? Some more questions, if you don't mind: 1. I see that the event interface specifies detail with `id` and `value` fields. What is the reason for using this? The underlying event already has a target, which will have the id and the value fields anyway. Are the widget's in this system so different that they have different id fields to the DOM elements? 2. There does not appear to be a field in the emitted event for the event sub-name (other than the custom name in the event structure itself). What if a component needs to emit something other than a "click" event? Ordinarily we'd get the event name from the event itself, so the handler knows whether it is being called on "focus", "click" "activate", etc. This information is lost with a custom event. 3. I'm still confused why you can't emit DOM elements; I mean, if you said "can't do two-way data binding" or something along the similar lines, it'd (maybe) make sense, but your response makes me think that you have not even considered it. I feel, maybe wrongly, that this library is both unnecessarily crippled and over-engineered - it targets spaghetti-as-a-pattern React, but not the hierarchical DOM?
  - yaoke259 1y ago
    Thanks for the questions and super valuable feedback! To be totally honest, I came from a Svelte/Framework background and just did not deeply consider/realise you can create a pure dom version and event handling with just plain js. It's definitely a valid point that I'll take into consideration into designing the next version. Currently it does seem a bit overengineered since the React, Vue and Svelte implementations are actually all wrappers over web components, and still potentially offer some (potential) advantages in advanced state management which I have not yet explored. I'll definitely look into this more deeply.
etler 1y ago
The value of generating framework components is that you can integrate the rendering with those frameworks. I've been working on a library to do exactly with a custom MDX pipeline: https://www.npmjs.com/package/react-markdown-with-mdx https://www.npmjs.com/package/react-markdown-with-mdx
corysama 1y ago
BTW: If you want "Turn Markdown into HTML at runtime" there's https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/

thrown-0825 1y ago

keywords for search optimization

jy14898 1y ago

It tickled me seeing the streaming example, thinking about how much better HTML deals with streaming

yaoke259 1y ago
html does not allow for event handling, this allows for secure listening of the events at runtime, which afaik is not possible with html
- mpalmer 1y ago
  Modern frontend frameworks wouldn't exist without JS events, not the other way around. You can absolutely do this with vanilla HTML+JS. https://developer.mozilla.org/en-US/docs/Web/API/Event https://developer.mozilla.org/en-US/docs/Web/API/Event
  - yaoke259 1y ago
    I suppose a vanilla js version is possible? I'll need to look into this
- paceaux 1y ago
  You really might want to look into what the DOM is and how it works. When HTML reaches the browser, all the markup is parsed, and the browser creates a Document Object Model (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...). That object model is an extremely robust API that's loaded with tons of functionality, not the least of which is working with events (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...). The browser itself brings so much functionality that you can do stuff like check the status of the battery; create, save, and access files; get someone's precise lattitude and longitude; and _create and subscribe to streams_. I'm not sure what you mean by, "html does not allow for event handling," ... but if HTML exists in a browser at all, there's plenty of event handling to go around.

randomtoast 1y ago

> Maybe I'm not understanding, but why is this "Turn Markdown into React/Svelte/Vue UI" and not "Turn Markdown into HTML"? It's very simple: the post had not been upvoted to the front page with the title you suggested.

threetonesun 1y ago

It's very silly. Given that Markdown fully supports HTML I have built sites using just Markdown + web components but that's... just how it works. What's really needed is a better editor experience.

didgeoridoo 1y ago
Nice discussion on this here just a couple weeks ago: https://news.ycombinator.com/item?id=44865997 https://news.ycombinator.com/item?id=44865997
lelanthran 1y ago
> Given that Markdown fully supports HTML I have built sites using just Markdown + web components but that's... just how it works. Agreed. My blog is a single shell script that runs pandoc on all the files in a subdir, generates a new .md file for table of contents, and then uses pandoc to generate a ToC.html file. That doesn't mean that my the site uses no Javascript - the magic of web components means that I can place `<some-custom-component> ...` in the middle of my .md content and have interactive components in the resulting html. What would be really useful is decent tooling for this sort of authoring.
yaoke259 1y ago
this actually uses web components under the hood! the dsl is more secure and easier to write (at least in my opinion). For v2 I'll make the whole design/architecture more polished and web-component oriented, possibly with some sort of verifier/editor support???

yaoke259 1y ago

Svelte, React and Vue allow for easier event handling, at least that was my rationale, is it possible to achieve the same with html?

lelanthran 1y ago
> Svelte, React and Vue allow for easier event handling, at least that was my rationale, is it possible to achieve the same with html? I'm not really sure how Svelte, React or Vue allow for easier event handling. I mean, what's harder with standard events in Vanilla JS? Sure, it's not perfect, but what exactly is easier in Svelte, React and Vue that makes the trade-off with VanillaJS a reasonable one? Some more questions, if you don't mind: 1. I see that the event interface specifies detail with `id` and `value` fields. What is the reason for using this? The underlying event already has a target, which will have the id and the value fields anyway. Are the widget's in this system so different that they have different id fields to the DOM elements? 2. There does not appear to be a field in the emitted event for the event sub-name (other than the custom name in the event structure itself). What if a component needs to emit something other than a "click" event? Ordinarily we'd get the event name from the event itself, so the handler knows whether it is being called on "focus", "click" "activate", etc. This information is lost with a custom event. 3. I'm still confused why you can't emit DOM elements; I mean, if you said "can't do two-way data binding" or something along the similar lines, it'd (maybe) make sense, but your response makes me think that you have not even considered it. I feel, maybe wrongly, that this library is both unnecessarily crippled and over-engineered - it targets spaghetti-as-a-pattern React, but not the hierarchical DOM?
- yaoke259 1y ago
  Thanks for the questions and super valuable feedback! To be totally honest, I came from a Svelte/Framework background and just did not deeply consider/realise you can create a pure dom version and event handling with just plain js. It's definitely a valid point that I'll take into consideration into designing the next version. Currently it does seem a bit overengineered since the React, Vue and Svelte implementations are actually all wrappers over web components, and still potentially offer some (potential) advantages in advanced state management which I have not yet explored. I'll definitely look into this more deeply.

etler 1y ago

The value of generating framework components is that you can integrate the rendering with those frameworks. I've been working on a library to do exactly with a custom MDX pipeline: https://www.npmjs.com/package/react-markdown-with-mdx https://www.npmjs.com/package/react-markdown-with-mdx

corysama 1y ago

BTW: If you want "Turn Markdown into HTML at runtime" there's https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/