@ubeac/svelte-preprocessors
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

Svelte Preprocessors

List of some useful preprocessors for svelte

Usage

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

npm install -D @ubeac/svelte-preprocessors

then edit your svelte.config.js file:

import {ifProcessor, previewProcessor} from '@ubeac/svelte-preprocessors'

export default {
    preprocessors: [
        ifProcessor(), // to enable if preprocessor
        previewProcessor() // to enable Preview preprocessor
    ],
    ...other configs
    kit: {
        ...sveltekit configs
    }
}

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.

<Button if={2 + 2 === 4}>
    My Button
</Button>

<p if={!!user}>
    name: {user.name}
    email: {user.email}
</p>

after build process above code will be changed to

{#if 2 + 2 === 4}
<Button>
    My Button
</Button>
{/if}

{#if !!user}
<p>
    name: {user.name}
    email: {user.email}
</p>
{/if}

Example

<div class="actions">
    <button if={user.hasAccess('add-item')}>
        Add
    </button>
    <button if={user.hasAccess('edit-item')}>
        Edit
    </button>
    <button if={user.isAdmin()}>
        Remove
    </button>
</div>

after if processor:

<div class="actions">
    {#if user.hasAccess('add-item')}
    <button>
        Add
    </button>
    {/if}
    {#if user.hasAccess('edit-item')}
    <button>
        Edit
    </button>
    {/if}
    {#if user.isAdmin()}
    <button>
        Remove
    </button>
    {/if}
</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.

declare	namespace svelte.JSX {
    interface HTMLAttributes<T> {
        if?: boolean
    }
}

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.

<script lang="ts">

type $$Props = {
    color: string;
    size: string;
    // other props
    if: boolean
}

export let color: string = 'primary'
export let size: string = 'md'
// other props
</script>

<button ...>
    <slot/>
</button>

limitations:

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

<Card>
    <div if={hasHeader} slot="header">
        Header
    </div>
    Body
</Card>
<Card>
    {#if hasHeader}
        <div slot="header"> <!-- cannot have slot="**" inside if conditions -->
            Header
        </div>
    {/if}
    Body
</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

<script lang="ts">
    export let markup: string | undefined = undefined;
    export let script: string | undefined = undefined;
    export let style: string | undefined = undefined;
    export let isTypescript: boolean | undefined = undefined;

    $: finalScript = isTypescript ? script.replace('<script>', '<script lang="ts">')
</script>

{finalScript}
<br/>
{markup}
<br />
{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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.3
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.3
    0
  • 0.0.2
    0
  • 0.0.1
    0

Package Sidebar

Install

npm i @ubeac/svelte-preprocessors

Weekly Downloads

0

Version

0.0.3

License

Apache-2.0

Unpacked Size

13.8 kB

Total Files

19

Last publish

Collaborators

  • ubeac-owner