How to friend Pug and Svelte

SvelteJS is great! In recent days I have been using it for my new project and I am delighted. But at one moment I wanted to combine SvelteJS with my favorite preprocessor Pug. This task is not so simple as one can think.

SvelteJS's authors recommend to use Rollup for module compiling. I am not so familiar with this tool, but I have found out how to use it and how to integrate pug and coffeescript preprocessors in it. But result disappointed me: pug-part works fine, but special symbols in script-part break compilation. Finally, I invented simple hack, that let me to reuse my pug-components.

So, there is a recipe. Firstly, let's create some pug-file:

script.
    let postUrl
    let postMessage
    let save = ()=> alert('save')
    // and so on
form
    .columns
        .column
            .field
                .control
                    input.input.is-primary(bind:this='{postUrl}')
        .column.is-narrow
            a.button.is-white(on:click='{showLink}')
                span.icon
                    i.fas.fa-link
    .field
        .control
            textarea.textarea(maxlength=350 rows=6 bind:this='{postMessage}')

.buttons.has-text-right(style='width: 100%')
    button.button.is-primary.is-normal(on:click='{save}')     Save
    button.button.is-primary.is-normal(on:click='{post}')     Post
    button.button.is-primary.is-normal(on:click='{schedule}') Schedule
    button.button.is-primary.is-normal(on:click='{remove}')   Remove

Never mind what it is for. Main thought here is that the pug-code can be pretty complex, with includes and variables.

Let's name this file as PostEditor.pug and compile it with some special options:

pug --pretty -E svelte PostEditor.pug

Option -E means here extension of resulting file. That's all! You have got useful template, where You can develop script-part.

<script>
  let postUrl
  let postMessage
  let save = ()=> alert('save')
  // and so on
</script>
<form>
  <div class="columns">
    <div class="column">
      <div class="field">
        <div class="control">
          <input class="input is-primary" bind:this="{postUrl}"/>
        </div>
      </div>
    </div>
    <div class="column is-narrow"><a class="button is-white" on:click="{showLink}"><span class="icon"><i class="fas fa-link"></i></span></a></div>
  </div>
  <div class="field">
    <div class="control">
      <textarea class="textarea" maxlength="350" rows="6" bind:this="{postMessage}"></textarea>
    </div>
  </div>
</form>
<div class="buttons has-text-right" style="width: 100%">
  <button class="button is-primary is-normal" on:click="{save}">    Save</button>
  <button class="button is-primary is-normal" on:click="{post}">    Post</button>
  <button class="button is-primary is-normal" on:click="{schedule}">Schedule</button>
  <button class="button is-primary is-normal" on:click="{remove}">  Remove</button>
</div>