Есть ли способ использовать pugjs в компонентах svelte? - PullRequest
Новая
       17

Есть ли способ использовать pugjs в компонентах svelte?

0 голосов
/ 22 мая 2018

Я пытаюсь переписать свое приложение, созданное с помощью pugjs, и выразить его в sveltejs.Мне очень нравится писать HTML в pugjs.Мне было интересно, могу ли я использовать pugjs в компонентах svelte.Я предполагаю, что мне может понадобиться использовать svelte-loader и выполнить некоторую предварительную обработку или это вообще возможно?Я использую Sapper , чтобы переписать мое приложение в svelte.Кто-нибудь может мне помочь, как это сделать в Сапере?

Ответы [ 3 ]

0 голосов
/ 04 июля 2018

В нашем форке есть несколько экспериментальных вспомогательных миксинов, подключенных к препроцессору PUG:

https://github.com/alvin/sapper-template-pug#pug-mixins

Они позволяют немного более чистый синтаксис с собственным отступом PUG в циклах и условных выражениях.

0 голосов
/ 12 августа 2018

Существует обертка препроцессора Svelte с выпечкой для поддержки распространенных препроцессоров, включая Pug: https://github.com/kaisermann/svelte-preprocess

Вот мои миксины для мопса, включая бонус show mixin (например, Vue's v-show),Внизу вы можете увидеть, как интегрировать их с svelte-preprocess. 

const pugMixins = `

mixin if(condition)
    | {#if !{condition}}
    block
    | {/if}

mixin else
    | {:else}
    block

mixin elseif(condition)
    | {:elseif !{condition}}
    block

mixin each(loop)
    | {#each !{loop}}
    block
    | {/each}

mixin await(promise)
    | {#await !{promise}}
    block
    | {/await}

mixin then(answer)
    | {:then !{answer}}
    block

mixin catch(error)
    | {:catch !{error}}
    block

mixin debug(variables)
    | {@debug !{variables}}

mixin show(condition)
    div(style!="display: {" + condition + " ? 'initial' : 'none'}")
        block

`

export default {
    /** Transform the whole markup before preprocessing */
    onBefore({ content, filename }) {
        return content.replace('<template lang="pug">', '<template lang="pug">' + pugMixins)
    }
}
0 голосов
/ 01 июня 2018

Я раньше не использовал pug, но я полагаю, если вы не хотите переводить шаблон pug в компонент svelte (где итерация fi pug будет превращена в итерацию svelte).

Так что, если вы можете сделать свой шаблон мопса допустимым компонентом svelte, у вас все получится.Так, включая тег script с логикой, и в выведенном html есть блоки {#if|each|await} и {interpolation}.

...