pug2svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2-alpha.9 • Public • Published

    pug2svelte

    Build Status npm version Dependencies Status

    Use svelte with pug syntax.

    Install

    npm i -D pug pug2svelte@latest
    
    let pug2svelte = require('pug2svelte')
    
    pug2svelte('<template>p Hello World!</template>')
    // <p> Hello World!</p>

    Supported Svelte syntaxes

    // attribute
    a(href='page/{p}') page {p}
    
    button(disable={!clickable})
    button(disable='{number === 42}')
    button({disable})
    button(on:click|once={handler})
    
    // spread attributes
    Widget({...things})
    
    // if
    {#if answer === 42}
      p what was the question?
      
    // if else
    {#if porridge.temperature > 100}
      p too hot!
    {:else if 80 > porridge.temperature}
      p too cold!
    {:else}
      p just right!
      
    // other svelte blocks
    {#each todos as todo}
      p {todo.text}
    {:else}
      p No tasks today!
    
    {#await promise}
      p waiting for the promise to resolve...
    {:then value}
      p The value is {value}
    {:catch error}
      p Something went wrong: {error.message}
      
    // nested blocks
    div1
      {#if}
        div2
        {#each}
          {#await}
    
    // <div1>
    //   {#if}
    //     <div2></div2>
    //     {#each}
    //       {#await}
    //       {/await}
    //     {/each}
    //   {#if}
    // </div1>

    Use with Rollup

    // rollup.config.js
    import svelte from 'rollup-plugin-svelte'
    import pug2svelte from 'pug2svelte'
    
    export default {
      plugins: [
        svelte({
          extensions: ['.svelte'],
          preprocess: {
            markup: ({ content }) => ({ code: pug2svelte(content) })
          },
          ...
        })
      ]
    }
    // app.svelte
    <template>p Hello {name}!</template>
    
    <script>
      let name = 'World'
    </script>
    <!-- Hello World! -->

    Parse from pug file

    // rollup.config.js
    ...
    extensions: ['.pug'],
    preprocess: {
      markup: ({ content }) => ({ code: pug2svelte(content, { pug: true }) })
    }
    ...
    // app.pug
    p Hello {name}!
    
    script.
      let name = 'World'

    Pug render options

    You can also pass any options of pug.render()

    pug2svelte(content, {
      pretty: true
      })

    License

    MIT

    Install

    npm i pug2svelte

    DownloadsWeekly Downloads

    0

    Version

    0.0.2-alpha.9

    License

    MIT

    Unpacked Size

    14.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • pynnl