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

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


2
2 277
3

Ответы:

Решено

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

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


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

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

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


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

Вот мои миксины мопса, включая бонусный миксин show (например, v-show Vue). Внизу вы можете увидеть, как их интегрировать с помощью 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)
    }
}