svelte-to-html

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 14 Open GitHub ↗

A command to quickly transform a Svelte file into static html.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://svelte.dev/docs#template-syntax-if) come to rescue.
- Ideal for creating templates for GitHub comments which can be used in GitHub Actions.

## Usage (CLI)

```sh
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)
```js
const { compile } = require('svelte-to-html');
compile('filepath.svelte', { food: 'Pizza' }).then(html => console.log(html));
```

### Example

#### Input

```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

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

#### Output:

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

svelte-to-html

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

svelte-to-html

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README