CODEWITHSUNDEEP
svelte
Marian
Marian

Reputation: 44

Using different language for svelte routing

I would like to use Svelte for a website, though I prefer using a different language for routing like kotlin instead of javascript. I couldn't find any information online as Svelte has it's own files. So instead of .html files I have .svelte files.

Does anyone know if it's possible to use a different language for that? If so how?

Upvotes: 0

Views: 529

Answers (1)

nkostic
nkostic

Reputation: 595

Svelte is a compiler it will compile svelte files into html and js files. Copy js and css generated file and use to import in kotlin app views or any other technology / framework that supports html, js, css; which pretty much all web technologies do.

in rollup config file (by default its named bundle but you can rename in page or whatever also name app will be App later in instantiation step)

export default {
input: 'src/main.js',
output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
},

So in your view you need to import

<link rel='stylesheet' href='/build/bundle.css'>

<script defer src='/build/bundle.js'></script>

And instantiate your svelte "app" (in your case it would be a page some implementations named it widget)

<script>
const app = new App({
target: document.body,
 props: {
    name: 'world'
 }
});
</script>

I just used default svelte create template that has only one prop "name" so here is the svelte file:

<script>
 export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> 
  to learn how to build Svelte apps.</p>
</main>

which after you run

npm run build

Will become bundle.js and bundle.css file in public/build folder (or whatever name was updated in rollup config)

So your question should be "How can I use svelte with Kotlin or other technologies and frameworks that are not svelte."

So to explain better svelte nature is to compile the svelte files in the js that browser will understand and there is no additional runtime so its very easy to port any svelte widgets into any other technology framework.

I hope this answer your question.

In order to organize your 'widgets' or 'pages' you might want to use something like turborepo. I made a short post about it here:

https://nenadkostic.com/blog/turborepo-sveltekit/

Upvotes: 1

Related Questions