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>
Of course, You have to remove some quote-marks with your hands now, but it is not so complex task.
Top comments (1)
great!