svelte-jester-quokka

A quokka plugin that allows you to import svelte components by using svelte-jester to do the preprocessing and compiling.

Installation

This library has peerDependencies listings for svelte-jester = 1.x

npm install svelte-jester-quokka -D or yarn add -D svelte-jester-quokka

then add the following to your Quokka config

{
  plugins: ['svelte-jester-quokka']
}

Options

preprocess (default: false): Pass in true if you are using Svelte preprocessors. They are loaded from svelte.config.js.

debug (default: false): If you'd like to see the output of the compiled code then pass in true.

compilerOptions (default: {}): Use this to pass in Svelte compiler options.

{
  plugins: ['svelte-jester-quokka'],
  svelte: {
    preprocess: false,
    debug: false,
    compilerOptions: {}
  }
}

Example

Following is a complete example with inline quokka configuration of how to load a svelte component. It uses Babel to support modern javascript. It also uses the jsdom-quokka-plugin and Svelte Testing Library to provide a browser-like environment.

({
  plugins: ['jsdom-quokka-plugin', 'svelte-jester-quokka'],
  jsdom: { html: `<div id="test"></div>` },
  svelte: { preprocess: true }
});

import { render } from '@testing-library/svelte';
import { default as App } from './App.svelte';

const target = document.getElementById('test');

const { component } = render(App, { props: { name: 'quokka' } }, { container: target });

console.log(target.innerHTML);