Show HN: Turn Markdown into React/Svelte/Vue UI at runtime, zero build step

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

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.

Happy to give you my spin on this. I use Vue, but in personal projects I mix Vue and vanilla JS according to page complexity. On pages that need more state management and would benefit from orderly code (such as the Options API for Vue), I use Vue. For simpler, shallower functionality I use plain JS. I want to emphasize my callout of Vue's Options API, which provides for very nice and easy to read structure to the code. React and Vue's current Composition API, I feel, look like and encourage spaghetti code. But hey, people get better typescript coverage, I guess?

> 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?

This is something I rarely use in Vue anymore. I think back in the day, when Angular first emerged and pushed these sort of frameworks, there was a philosophy towards making components embed in code as if they were HTML native elements, and not needing to write JS around the event. If I remember correctly, providing a value field isn't asking it for the value of the event. It's specifying which value in memory should be set to the output of the event... But my memory is dodgy on that. It's confusing and I rarely see it used these days, but maybe that's reflective on the projects I've worked on.

> 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.

Can you expand on the usecase here? Ordinarily, at least in Vue, there's no need to know the name of the event currently being triggered. The component emits a "change" event (or whatever you call it) and the parent component, when setting up the child component, will specify some sort of 'on-change' attribute that listens for the 'change' event and says which function should be evoked as the callback to it. So basically, instead of having to write `document.getElementById('foo').on('change', respondToFoo)`, you simply write `on-change='respondtoFoo'` directly on the element in the HTML.

It's not the world's biggest win, but it does reduce the amount of code our eyes having sift through in reading the JS, and attaches the event details directly to the element(s) they relate to, which I've found to be more readable.

> 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?

You can, at least in Vue, but it's working against the grain. There's two reasons why:

1. Separation of presentation and state. These frameworks like to keep the HTML/DOM as simple presentation tools, and store logic and data separately. So when triggering events, we want to be emitting the important data as data, and not be concerned with the presentational layer from which that data may have originated.

2. Reusability of components. Emiting dom elements creates a more tightly coupled environment where there are a lot of expectations of the object being emitted (and little assurance as to what that object contains). By only exposing data and leaving the DOM element behind, it's easier for invoking components to use that data without having to hold expectations of the data structures being passed through.

Yes fallback markup is what I meant, and yes, it would not be super useful if JS is entirely disabled. I figured custom elements would be good since they can encapsulate state and styling, allowing for slightly more sophisticated behaviour compared to raw dom elements

> Over the course of the past several years I had to open devtools just to send the correct data several times already.

I recently did this for a job application (some third-party was used to capture applicant details): the drop down of local universities ("where did you complete this degree?") was missing my university.

So I added it in via devtools, hit submit, and now am on the third interview :-)