Svelte Preprocessors

List of some useful preprocessors for svelte

Usage

you can install this package as devDependency of your svelte based project.

1npm install -D @ubeac/svelte-preprocessors

then edit your svelte.config.js file:

1import {ifProcessor, previewProcessor} from '@ubeac/svelte-preprocessors'
2
3export default {
4    preprocessors: [
5        ifProcessor(), // to enable if preprocessor
6        previewProcessor() // to enable Preview preprocessor
7    ],
8    ...other configs
9    kit: {
10        ...sveltekit configs
11    }
12}

if Processor

if processor transforms if={...} props to {#if ...} in svelte templates for all Components and DOM Elements.

after installation and enabling if Processor you should be able to use if prop in your .sevlte files.

1<Button if={2 + 2 === 4}>
2    My Button
3</Button>
4
5<p if={!!user}>
6    name: {user.name}
7    email: {user.email}
8</p>

after build process above code will be changed to

1{#if 2 + 2 === 4}
2<Button>
3    My Button
4</Button>
5{/if}
6
7{#if !!user}
8<p>
9    name: {user.name}
10    email: {user.email}
11</p>
12{/if}

Example

1<div class="actions">
2    <button if={user.hasAccess('add-item')}>
3        Add
4    </button>
5    <button if={user.hasAccess('edit-item')}>
6        Edit
7    </button>
8    <button if={user.isAdmin()}>
9        Remove
10    </button>
11</div>

after if processor:

1<div class="actions">
2    {#if user.hasAccess('add-item')}
3    <button>
4        Add
5    </button>
6    {/if}
7    {#if user.hasAccess('edit-item')}
8    <button>
9        Edit
10    </button>
11    {/if}
12    {#if user.isAdmin()}
13    <button>
14        Remove
15    </button>
16    {/if}
17</div>

typescript support:

you can add if as an attribute for all HTML Elements by adding below code in *.d.ts file in your project.

1declare	namespace svelte.JSX {
2    interface HTMLAttributes<T> {
3        if?: boolean
4    }
5}

also you need to ignore your editor's Intellisense errors for if={...} prop in Components. everything works in dev-mode and after build. only editor doesn't know that you use ifProcessor.

Alternatively, you can add typing for if prop to your component.

1
2<script lang="ts">
3
4type $$Props = {
5    color: string;
6    size: string;
7    // other props
8    if: boolean
9}
10
11export let color: string = 'primary'
12export let size: string = 'md'
13// other props
14</script>
15
16<button ...>
17    <slot/>
18</button>

limitations:

one problem is that you cannot use ifProcessor with slot prop in same element:

1<Card>
2    <div if={hasHeader} slot="header">
3        Header
4    </div>
5    Body
6</Card>

1<Card>
2    {#if hasHeader}
3        <div slot="header"> <!-- cannot have slot="**" inside if conditions -->
4            Header
5        </div>
6    {/if}
7    Body
8</Card>

Preview Processor

using this processor you can extract source code of svelte components as string.

to get started you should have a Preview component which have some props:

Preview.svelte

1<script lang="ts">
2    export let markup: string | undefined = undefined;
3    export let script: string | undefined = undefined;
4    export let style: string | undefined = undefined;
5    export let isTypescript: boolean | undefined = undefined;
6
7    $: finalScript = isTypescript ? script.replace('<script>', '<script lang="ts">')
8</script>
9
10{finalScript}
11<br/>
12{markup}
13<br />
14{style}

here is an example of Preview.svelte component which uses this preprocessor.

this processor is useful when you want to show source code of examples alongside live demo. Example