Stimulus: Idea of a new html markup language

1

This and this Discussion and the idea of svelte and the idea of Progressive Web Enhancement and the idea of Rails-7 fullfilling a vision all lead me to the same idea of the need for a new markup language that combines a (stimulus?) controller with a html template.

Since I do not have the time to write this, but to get it out of my head, I am posting the idea here.

An example of how Svelte would handle a calculation from 2 numeric inputs is in Svelte / Examples / numeric inputs. … The simplicity of the Svelte syntax is amazing:

<script>
	let a = 1;
...
</script>
...
<input type="number" bind:value={a} min="0" max="10" />
...
<p>{a} + {b} = {a + b}</p>

And not only that! The Svelte Syntax is really worth a look.

In my opinion, a new markup language would be needed to combine the advantages of your soulution and the advantages of svelte. For example, I am working on [haml] (https://haml.info/).

Imagine a syntax like svelte, but separated into two files that are linked by a stimulus controller based on the filename.

  1. The first file is just rendered by the server and is able to deliver the initial state to a rendered view without any javascript.
  2. Then the stimulus controller hooks up and is ready for handling further user interactions.

IF all this is possible in this way, I havent tested in detail, its just the status of an idea. But this would be the fullfilling of progressive web enhancement, how svelte it would be much faster compared to react (see video ive linked above (Rethinking reactivity) and comfortable for a programmer and fit exactly the way that rails does with v-7 for a minimalistic javascript approach along with the user experience of single page application.

That all leaned to haml and a naming we are familiar in rails (compare vite-svelte-initializer you could write a file like:

views/articles/_article_controller.stimulus_haml

- a_js = 1
...
%input{ type: 'number', bindings: { value: :a_js }, min: 0, max: 10 }
...
%p
   = a_js + b_js
  • All variables with a suffix of _js, by example, are javascript ones and the a_js = 1 does the let a = 1 inside the stimulus for the initial state and the stimulus controller is able to fetch and handle all this stuff.

As I am working on vite you could have a controller that, as we are familiar with on rails, is based on the filename, lets say:

app/frontend/javascript/components/article-controller.js

That interacts with the above showed file.

This is all just an idea, but technically I see it as a matter of time until the first developer builds something like this.

1 Like
2

This might be good for an abstraction framework for stimulus but not something I see being added to the core library. Since StimulusJS’s core principle is to write less Javascript and move away from the React styled coding styles.

3

@ yunggindigo Yes and sorry it was not clear mentioned. It would need a JS library too (maybe based on stimulus) that would correspond with the html markup.

1 Like
4

Alpine Js allows to inline JS, very similar to what you’ve shown up with Svelte. It’s also non-virtual dom, uses similar syntax to VueJs

This is a good article that has demo use cases.

I find it quite nice, and better for one-off stuff that you’d like to just write inline, and not build a component (controller) for.

5

Thanks @mtomov, good to know about alpine.js

But what i am looking for is a tool with separated javascript, because on the case where i need it, javascript is a bit more intensive.

I really love Svelte for that, but only little disadvantage, on going the way of minimalistic javascript by hotwired/rails is on some cases you have a little blink, but only on very first loading or on clicking the reload button when the html is delivered by the server but then Svelte has to build the html.

Stimulus solves that but on small components with heavy javascript svelte is so much more handy.

So, what i am looking for would be to combine the advantages of haml, svelte and stimulus: Html and javascript in separated files but connected with corresponding variables.

6

Svelte has a solution from their side: You can render the Svelte components server-side using a node server server-side-component-api.