Preprocessing a `.pug`-file completely with `markupTagName: ""` crashes

[wvhulle]

Describe the bug

While using the preprocessor for pug and trying to make the preprocessor parse the whole file, the site crashes. How can I parse a .pug file successfully?

Logs

Error: .svelte-kit/dev/generated/root.svelte:55:34
    53|     export let props_2 = null;
    54| 
  > 55|     setContext('__svelte__', stores);
-----------------------------------------^
    56| 
    57|     $: stores.page.set(page);
    58|     afterUpdate(stores.page.notify);

unexpected text ";

    $"
    at makeError (/node_modules/pug-error/index.js:34:13)
    at Lexer.error (/node_modules/pug-lexer/index.js:62:15)
    at Lexer.fail (/node_modules/pug-lexer/index.js:1629:10)
    at Lexer.advance (node_modules/pug-lexer/index.js:1694:12)
    at Lexer.callLexerFunction (/node_modules/pug-lexer/index.js:1647:23)
    at Lexer.getTokens (/node_modules/pug-lexer/index.js:1706:12)
    at lex (/node_modules/pug-lexer/index.js:12:42)
    at Object.lex (/node_modules/pug/lib/index.js:104:9)
    at Function.loadString [as string] (/dsp-app/node_modules/pug-load/index.js:53:24)
    at compileBody (/node_modules/pug/lib/index.js:82:18)

To Reproduce

Use this as svelte.config.js

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-node';

import pkg from 'svelte-preprocess';
const {pug } = pkg;

const config = {
    extensions: ['.svelte',".pug"],
    preprocess: [
        preprocess({
            // postcss: true,
            // pug: true,
        }),
        pug({markupTagName: ""}),
    ],
    kit: {
        target: '#svelte',
        adapter: adapter({ out: 'build' })
    }
};

export default config;

Load the homepage.

Expected behavior

Writing a .pug-file and have it pre-processed completely to svelte syntax.

Stacktraces If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

Stack trace goes here...

Information about your project:

Firefox 94 Arch Linux Node 16.11.1

Additional context

[dummdidumm]

My guess: You have pug({markupTagName: ""}) in there so context of every tag is treated as pug, maybe also including the contents of the script tag. Plus you preprocess all files using the auto preprocessing mode once and then again using pug standalone, essentially running pug twice. What happens if you just remove that line?

If that's not it, please provide the file to reproduce this.

[kaisermann]

Hey @wvhulle 👋 sorry for taking so long to reply 😅 why did you want to process the whole svelte file with pug and not only your component's markup?

I started to think that we should only allow using markup languages inside the {markupTagName} tag. Ideally, we would have a simple way to separate the markup from script and style during markup transformation, but it's not trivial considering script/style tags that might be written in the middle of the markup (think of script tags inside svelte:head for example).

[alphaelf]

hey guys! @wvhulle , @kaisermann did you think about pug filters too? we can use pug file as entire svelte component like this:

:ts(setup)
  let name:string = 'World'

h1 Hello {name}!

:sass
  h1
    color: #f90

then use pug filters to extract js/ts/coffe and css/scss/sass/stylus/less from source, and also IDEs can inject proper language by those filter modifiers (when ever use a name after : in pug file)

this is example for rendering pug file with ts and sass filter:

const result:string = await pug.render(source, {
filters: {
  ts: (code:string, opts:{ setup?:boolean }) => `
    <script lang="ts"${opts.setup ? ' setup' : ''}>
    ${code.trim()}
    </script>
  `,
  sass: (code:string) => `
    <style lang="sass">
    ${code.trim()}
    </style>
  `
}
})

and further more we can add :yaml or :json filter to pug file for capture locale translation like i18n tag in vue files