218 lines
6.6 KiB
Markdown
218 lines
6.6 KiB
Markdown
# Svelte
|
|
|
|
[Svelte](https://svelte.dev/docs/svelte/overview) is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.
|
|
|
|
## Usage
|
|
|
|
Svelte components can be used as documented in the [docs](https://svelte.dev/docs/svelte/svelte-files). See below for usage.
|
|
|
|
### Demo
|
|
|
|
import LiveCodes from '../../src/components/LiveCodes.tsx';
|
|
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
|
|
|
|
<LiveCodes template="svelte" height="400"></LiveCodes>
|
|
|
|
### CSS Frameworks
|
|
|
|
[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in Svelte components.
|
|
Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.html.md)#processors)).
|
|
|
|
See [example below](#multiple-components).
|
|
|
|
### Languages and Pre-Processors
|
|
|
|
Many of the [languages supported in LiveCodes](./index.html.md) can be used. The value of `lang` attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).
|
|
|
|
You may wrap the markup in a `template` element if you want to specify the `lang` attribute.
|
|
|
|
export const processorsDemo = {
|
|
svelte: `<template lang="pug">\nh1 {msg}\n</template>\n\n<script lang="ts">\n let msg: string = 'Hello!'\n</script>\n\n<style lang="scss">\n $primary-color: #555;\n h1 {\n color: $primary-color;\n }\n</style>\n`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={processorsDemo}
|
|
code={processorsDemo.svelte}
|
|
language="html"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
### Module Imports
|
|
|
|
npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `<link rel="stylesheet">` tags in the page `head`.
|
|
|
|
Example:
|
|
|
|
export const importsDemo = {
|
|
svelte: `<script>
|
|
import confetti from "canvas-confetti";
|
|
import "bootstrap/dist/css/bootstrap.css";\n
|
|
let count = $state(0);
|
|
function increment() {
|
|
count++;
|
|
confetti();
|
|
}
|
|
</script>\n
|
|
<div class="m-5 text-center">
|
|
<p>You clicked {count} times.</p>
|
|
<button on:click={increment}>Click me</button>
|
|
</div>
|
|
`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={importsDemo}
|
|
code={importsDemo.svelte}
|
|
language="html"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations.
|
|
|
|
### Multiple Components
|
|
|
|
Svelte is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors.
|
|
|
|
This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.
|
|
|
|
This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,
|
|
e.g. `./script.svelte`, `./Component.svelte`, `./Counter.svelte`, etc.
|
|
|
|
export const multi = {
|
|
markup: {
|
|
language: 'svelte',
|
|
content: `<script lang="ts">
|
|
import Counter from './Counter.svelte';
|
|
</script>
|
|
|
|
<Counter start="5" />
|
|
`,
|
|
},
|
|
script: {
|
|
language: 'svelte',
|
|
content: `<script lang="ts">
|
|
let { start } = $props();
|
|
let count = $state(start);
|
|
</script>
|
|
|
|
<div class="mt-8 text-center">
|
|
<span class="text-3xl font-bold">{count}</span>
|
|
</div>
|
|
<div class="mt-4 space-x-4 text-center">
|
|
<button on:click={() => count--} class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">-</button>
|
|
<button on:click={() => count++} class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">+</button>
|
|
</div>
|
|
<div class="mt-4 space-x-4 text-center">
|
|
<button on:click={() => count = start} class="text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl">Reset</button>
|
|
</div>
|
|
`,
|
|
},
|
|
style: {
|
|
language: 'css',
|
|
content: '@import "tailwindcss";\n',
|
|
},
|
|
processors: ['tailwindcss'],
|
|
}
|
|
|
|
<LiveCodes config={multi}></LiveCodes>
|
|
|
|
Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
|
|
|
|
Example:
|
|
|
|
export const multiFiles = {
|
|
...multi,
|
|
markup: {
|
|
...multi.markup,
|
|
title: 'App.svelte',
|
|
},
|
|
script: {
|
|
...multi.script,
|
|
title: 'Counter.svelte',
|
|
},
|
|
style: {
|
|
...multi.style,
|
|
title: 'styles.css',
|
|
order: 3,
|
|
},
|
|
};
|
|
|
|
<LiveCodes config={multiFiles}></LiveCodes>
|
|
|
|
When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the [root element](#root-element).
|
|
To render the component in the script editor, it has to be imported and used by the main component.
|
|
|
|
### Importing External Components
|
|
|
|
External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
|
|
|
|
Example:
|
|
|
|
```html
|
|
<script>
|
|
import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
|
|
</script>
|
|
|
|
<Counter />
|
|
```
|
|
|
|
### Root Element
|
|
|
|
To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
|
|
|
|
Example:
|
|
|
|
export const customRoot = {
|
|
markup: {
|
|
language: 'html',
|
|
content: `<h1>Custom Root Element</h1>
|
|
<div id="livecodes-app"></div>
|
|
<p>...other page content</p>
|
|
`,
|
|
},
|
|
script: {
|
|
language: 'svelte',
|
|
content: `<script>
|
|
let name = $state('Svelte');
|
|
</script>\n
|
|
<div>I'm a {name} component</div>
|
|
`,
|
|
},
|
|
};
|
|
|
|
<LiveCodes config={customRoot} />
|
|
|
|
## Language Info
|
|
|
|
### Name
|
|
|
|
`svelte`
|
|
|
|
### Extensions
|
|
|
|
`.svelte`
|
|
|
|
### Editor
|
|
|
|
`script`, `markup`
|
|
|
|
## Compiler
|
|
|
|
The official [Svelte compiler](https://svelte.dev/docs/svelte/svelte-compiler).
|
|
|
|
### Version
|
|
|
|
`svelte`: v5.12.0
|
|
|
|
## Code Formatting
|
|
|
|
Using [Prettier](https://prettier.io/).
|
|
|
|
## Starter Template
|
|
|
|
https://livecodes.io/?template=svelte
|
|
|
|
## Links
|
|
|
|
- [Svelte](https://svelte.dev/)
|
|
- [Svelte documentations](https://svelte.dev/docs/svelte/overview) |