@Lapikit/repl

@lapikit/repl is a Svelte component for Lapikit. It's a add-on package for Lapikit library.

Installation

npm install -D @lapikit/repl

// svelte.config.js

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
    preprocess: [vitePreprocess(), lapikitPreprocess({ plugins: ['repl'] })],

    ...
};

export default config;

Usage

<kit:repl content="console.log('hello')" />

<script lang="ts">
    import sampleCounter from './samples/counter.svelte?raw';
    import Counter from './samples/counter.svelte';
</script>

<kit:repl presentation content={sampleCounter}>
    <Counter />
</kit:repl>

<script lang="ts">
    import sampleJson from './samples/json.json?raw';
    import sampleCounter from './samples/counter.svelte?raw';
    import sampleCss from './samples/css.css?raw';
    import Counter from './samples/counter.svelte';
</script>

<kit:repl
    presentation
    content={{
        'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
        'file.json': { code: sampleJson, lang: 'json' },
        'Styles.css': { code: sampleCss, lang: 'css' }
    }}
>
    <Counter />
</kit:repl>

<script lang="ts">
    import sampleJson from './samples/json.json?raw';
    import sampleCounter from './samples/counter.svelte?raw';
    import sampleCss from './samples/css.css?raw';
    import Counter from './samples/counter.svelte';
</script>

<kit:repl
    content={{
        'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
        'file.json': { code: sampleJson, lang: 'json' },
        'Styles.css': { code: sampleCss, lang: 'css' }
    }}
>
    <Counter />
</kit:repl>

Props