pug preprocessor doesn't support spread props

[icheer]

Describe the bug pug preprocessor doesn't support spread props

Logs Syntax Error: Unexpected token

To Reproduce

<template lang="pug">
input({...props})
</template>

<script>
let props = {
  type: 'number',
  disabled: true
};
</script>

Expected behavior it should render a < input type="number" disabled / > in HTML

Information about your project:

• Your browser and the version: Chrome/89.0.4389.82

• Your operating system: Win10

• svelte-preprocess version 4.6.9

• Rollup

[paradis-A]

+1 up for this.

[paradis-A]

Your code actually works on mine. I think this issue maybe language tools related. AFAIK isn't fully supported yet, so might want to try to raise issue there too.

[ZerdoX-x]

Bumped in the same thing. Got Syntax Error: Unexpected token

Usage case:

ul.slider: +each('slides as slide')
  li.slide: svelte:component(this="{slide.comp}" {...slide.props})

[kaisermann]

Putting it between quotes " should be enough to make it work. Unfortunately, pug support for svelte syntax is quite weak at the moment.

So this:

<template lang="pug">
  ul.slider: +each('slides as slide')
    li.slide: svelte:component(this="{slide.comp}" "{...slide.props}")
</template>

Will be transformed into:

<ul class="slider">
  {#each slides as slide}<li class="slide">
    <svelte:component this="{slide.comp}" {...slide.props}></svelte:component></li>
  {/each}
</ul>

[kaisermann]

I've added a section in the preprocessing.md file: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#:~:text=button.big(type%3D%22button%22%20disabled%20%22%7B...slide.props%7D%22)%20Send

[ClaytonFarr]

@kaisermann It looks like an 'unexpected token' error still occurs when trying to use ...$$props or ...$$restProps, even when they are double-quoted.

This is with: svelte-preprocess 4.7.3, svelte 3.38.2, and SvelteKit 1.0.0-next.112

[kaisermann]

@ClaytonFarr I'm unable to reproduce the error with that markup. The test still passes.

[ClaytonFarr]

Thanks for checking @kaisermann. Odd, it's still creating the 'unexpected error' even when I try to implement same markup as test -

Here's a sample repo from a skeleton SvelteKit project that reproduces the problem (at least locally), if that helps at all -

https://github.com/ClaytonFarr/svelte-preprocess-restprops-test

[kaisermann]

Oh, I see! That's happening only on the IDE side, so I'd talk with the folks in the language tools repo. If I'm not mistaken, there's a known issue regarding pug and other markup languages.

The generated markup is:

<button class="big" type="button" disabled {...$$restProps}>Send</button>

[ClaytonFarr]

Thanks @kaisermann

[kingcw]

still having "Unexpected Token" error on "{...$$restProps}" using pug in sveltekit@next, it's not IDE, I ran build script on linux terminal

[geoidesic]

Me too @kaisermann Doesn't compile for me.