Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pre-processing Svelte components with HAML? #32

Closed
benjamin-hull opened this issue May 29, 2020 · 6 comments
Closed

Pre-processing Svelte components with HAML? #32

benjamin-hull opened this issue May 29, 2020 · 6 comments

Comments

@benjamin-hull
Copy link

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
Copy link
Collaborator

bknoles commented Jul 10, 2020

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
Copy link
Author

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
Copy link
Collaborator

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
Copy link

chmich commented Oct 7, 2022

@chmich
Copy link

chmich commented Oct 8, 2022

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

@chmich
Copy link

chmich commented Oct 8, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants