Package Exports

svelte-to-html
svelte-to-html/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-to-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Svelte to HTML

svelte-to-html is a command to quickly transform a Svelte file into static html.
Props can be supplied to the main Svelte file.
The main Svelte file can import other Svelte components or JavaScript files.

What this is not?

This command is not a replacement for SvelteKit. It does not ship any JavaScript nor does it include any head or body tag.
It obviously does not support any DOM APIs like window, location, navigator etc.

Why?

For scenarios where you'd want to generate a static HTML file but with if/else conditionals or for loops. Svelte's templating features and syntax come to rescue.
Ideal for creating templates for GitHub comments which can be used in GitHub Actions.

Usage (CLI)

npx svelte-to-html <filepath> <output> <props>

# Props as json string
npx svelte-to-html filepath.svelte output.html '{"food":"Pizza"}'

# Props as json file
npx svelte-to-html filepath.svelte output.html props.json

Usage (Compiler API)

const { compile } = require('svelte-to-html');
compile('filepath.svelte', { food: 'Pizza' }).then(html => console.log(html));

Example

Input

<!-- template.svelte -->
<script>
  const a = 5;
  const b = 8;

  export let numbers = [];
</script>

<ul>
  {#each numbers as number}
    <li>{number}</li>
  {/each}
</ul>

{#if a < b}
  <p>a is less than b</p>
{:else}
  <p>b is less than a</p>
{/if}

Command

npx svelte-to-html template.svelte template.html '{"numbers": [2, 5, 7]}'
###                <filepath>          <output>     <props>

Output:

<ul>
  <li>2</li>
  <li>5</li>
  <li>7</li>
</ul>
<p>a is less than b</p>