有没有办法在 svelte 组件中使用 pugjs？

Question

我正在尝试重写我用 pugjs 制作并用 sveltejs 表达的应用程序。我很喜欢用pugjs写html。我想知道我是否可以在 svelte 组件中使用 pugjs。我假设我可能需要使用 svelte-loader and do some preprocessing or is that even possible? I'm using Sapper 来重写我的 svelte 应用程序。谁能帮助我如何在 Sapper 中做到这一点？

Answer 1

我以前没用过 pug，但我认为只要你不想将 pug 模板转换为 svelte 组件（其中 f.i。pug 迭代将变成 svelte 迭代） .

因此，如果您可以使您的 pug 模板成为一个有效的 svelte 组件，您应该就可以开始了。因此，包括带有逻辑的脚本标签，并在输出的 html 中包含 {#if|each|await} 块和 {interpolation} 块。

Answer 2

在我们的分支中，有一些实验性的 helper mixins 连接到 PUG 预处理器中：

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

这些允许在循环和条件中使用 PUG 本机缩进的稍微更简洁的语法。

Answer 3

有一个带有 baked 的 Svelte 预处理器包装器支持常用的预处理器，包括 Pug：https://github.com/kaisermann/svelte-preprocess

这是我的 pug mixin，包括一个额外的 show mixin（就像 Vue 的 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)
    }
}

有没有办法在 svelte 组件中使用 pugjs？

Is there a way to use pugjs in svelte components?

webpack

pugjs

svelte