Can i run Svelte fully as a CDN? #15658
-
|
I want to have this similar setup i have in VueJs, like this <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue 3</title>
</head>
<body>
<div id="app">
<p>
<span v-for="name in names" :key="name">{{ name }} </span>
</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module">
const { createApp, ref } = Vue;
createApp({
data() {
return {
names: ["bola", "ade", "kemi"],
};
},
}).mount("#app");
</script>
</body>
</html>Is it possible? Because, i haven't been able to find a work around. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
You would have to import the Svelte compiler, compile the component code and then mount the result. This would be rather involved and also slow, so I definitely do not recommend doing this. |
Beta Was this translation helpful? Give feedback.
-
|
Alright then, thanks! Do you have a working sample I can check? |
Beta Was this translation helpful? Give feedback.
-
|
No, not for Svelte 5, which no longer bundles everything. Would probably look similar to this: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svelte Live Compilation</title>
<script type="importmap">
{
"imports": {
"svelte": "https://cdn.jsdelivr.net/npm/[email protected]/src/index-client.js",
[GIANT LIST OF MAPPINGS HERE]
}
}
</script>
</head>
<body>
<script type="module">
import { mount } from 'svelte';
import { compile } from 'svelte/compiler';
const code = `
<${''}script>
let { name } = $props();
let count = $state(0);
</${''}script>
<h1>Hello {name}!</h1>
<button onclick={() => count += 1}>
Count: {count}
</button>
<style>
h1 {
color: blue;
}
button {
background-color: lightblue;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: deepskyblue;
}
</style>
`;
const { js, css } = compile(code, {
filename: 'Component.svelte',
name: 'Component',
css: 'external',
});
const style = document.createElement('style');
style.textContent = css.code;
document.head.appendChild(style);
const componentModule = new Blob([js.code], { type: 'application/javascript' });
const componentUrl = URL.createObjectURL(componentModule);
const Component = await import(componentUrl).then(module => module.default);
URL.revokeObjectURL(componentUrl);
mount(Component, {
target: document.body,
props: {
name: 'World',
},
});
</script>
</body>
</html>(If you want to have the component code in the HTML, there are some ways to do it, but you have to fight the HTML parser because Svelte code is not valid HTML.) |
Beta Was this translation helpful? Give feedback.
-
|
Ohh i understand now, thanks a lot! |
Beta Was this translation helpful? Give feedback.
No, not for Svelte 5, which no longer bundles everything.
Resolving all the imports necessary is a huge pain.
Would probably look similar to this: