Pre-processing Svelte components with HAML?

[benjamin-hull]

Hi - first off, thanks for Inertia. I'm having a great time with it so far!

I'm using Rails 6 + Svelte.js currently, and I'm wondering if anyone has any experience with using HAML to template their svelte components? I'd love to be able to write HAML for these instead of raw HTML.

[bknoles]

i'm not aware of a way to write HAML that compiles to JS... I think the closest equivalent may be Jade: http://jade-lang.com/

I'm also not a Svelte user, so i'm not sure how it would work to compile Jade/Svelte

[benjamin-hull]

Hi - thanks for the response, sorry it's taken me so long to get back to it.

I'm not specifically trying to generate JS from HAML, I'm trying to use HAML to write my .svelte components (which are effectively HTML). HAML includes its own pre-processor 'filters' to include javascript and style blocks, which would allow, for example, SASS or Less to be used to write the styles in the components.

For example, this component:

<script>
  import { Inertia } from '@inertiajs/inertia'

  function handleSubmit() {
    Inertia.post('/endpoint', {})
  }
</script>

<style>
  button {
    border: 1px solid red;
  }
</style>

<form on:submit|preventDefault={handleSubmit}>
  <button type="submit">Go</button>
</form>

Would be written in HAML as:

:javascript
  import { Inertia } from '@inertiajs/inertia'

  function handleSubmit() {
    Inertia.post('/endpoint', {})
  }

:sass
  button
    border: 1px solid red

%form{'on:submit|preventDefault' => '{handleSubmit}'}
  %button{type: 'submit'} Go

I'm guessing this would require HAML to process the .svelte components in app/javascript/Pages, etc before inertia packs them up for delivery to the client.

I appreciate this is a pretty obscure request, so don't worry too much - I was more interested if anyone else had thought to do it.

[BrandonShar]

I think you hit the nail on the head; I imagine the components would all need to be pre-processed on the initial page load so that inertia could treat them like "normal" svelte components.

I'm going to close this issue because it seems a bit beyond the scope of what inertia-rails is meant to handle, but feel free to re-open if you find a solution that seems in-line with what the library currently handles!

[chmich]

What about pug? https://www.reddit.com/r/sveltejs/comments/v4asjb/haml_like_alternatives_for_svelte/

[chmich]

pug together with svelte-preprocess works fine. See my tutorial rails-vite-svelte. That way you can also include other preprocessors like scss.

[chmich]

On the same way it may be possible pre-process haml, and there is one node package: hamljs. Last commit is 2014 and last publish 9 years ago but it seems to work because it has 48.755 weekly downloads! Wow, can be called a stable code :) But, regarding to my test: It doesn't work together with svelte-preprocess: Internal server error: Error while preprocessing /Users/dev/temp/vite-app/app/frontend/javascript/components/hello.svelte - Cannot find module './transformers/hamljs' (same with 'haml' instead of 'hamljs'). I openend a issue on github.