Untraceable error using stylus and pug

[eden-omb]

Describe the bug
I'm trying to convert the default SvelteKit demo project to use stylus and pug and get an untraceable error. I may very well be missing something stupid in my translation to stylus and/or pug, but the error being untraceable seems reason enough to report it here; that being said if I'm just doing something stupid and you can spot it I'd love to hear about it.

Logs
All I'm getting is:

 Cannot read properties of undefined (reading 'done')

To Reproduce
Clone my example repo demonstrating this issue, run pnpm dev and navigate to /todos.

Expected behavior
For my repo to be equivalent to the demo repo.

Information about your project:
I'm running Ubuntu 21.10 Impish, using Vivaldi (which runs on Chromium). My user agent is 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.113 Safari/537.36'

I'm using a freshly-installed svelte-preprocess@4.10.1; and whichever build system SvelteKit uses, which I'm pretty sure is just Vite.

[eden-omb]

Curiously enough, changing the index page into using only pug by taking out the <template> tag (which to my understanding means the whole file gets parsed as pug?) I also get the same mysterious error. Replace src/routes/index.svelte with this gist to reproduce. Really not sure what's happening here, I couldn't find anyone talking about this particular error. Seems pretty likely this is stemming from pug, in any case.

[dummdidumm]

Disclaimer: I don't know much about pug.

Your code contains multiple syntax errors. This code works:

<template lang="pug">
	svelte:head: title Todos
	.todos
		h1 Todos
		form.new(
			action="/todos.json"
			method="post"
			'use:enhance'!=`{{
				result: async (res, form) => {
					const created = await res.json()
					todos = [...todos, created]

					form.reset()
				}
			}}`
		)
			input(
				name="text"
				'aria-label'="Add todo"
				placeholder="+ tap to add a todo"
			)

		+each('todos as todo (todo.uid)')
			.todo(
				'class:done'!='{todo.done}'
				'transition:scale|local'!='{{ start: 0.7 }}'
				'animate:flip'!='{{ duration: 200 }}'
			)
				form(
					action!="/todos/{todo.uid}.json?_method=patch"
					method="post"
					'use:enhance'!=`{{
						pending: (data) => {
							todo.done = !!data.get('done')
						},
						result: patch,
					}}`
				)
					input(type="hidden" name="done" value!='{todo.done ? "" : "true"}')
					button.toggle(
						'aria-label'!="Mark todo as {todo.done ? 'not done' : 'done'}")

				form.text(
					action!="/todos/{todo.uid}.json?_method=patch"
					method="post"
					'use:enhance'!=`{{
						result: patch
					}}`
				)
					input('aria-label'="Edit todo" type="text" name="text" value!='{todo.text}')
					button.save('aria-label'="Save todo")

				form(
					action!="/todos/{todo.uid}.json?_method=delete"
					method="post"
					'use:enhance'!=`{{
						pending: () => (todo.pending_delete = true),
						result: () => {
							todos = todos.filter((t) => t.uid !== todo.uid)
						}
					}}`
				)
					button.delete('aria-label'="Delete todo" disabled!='{todo.pending_delete}')
</template>

You forgot an extra {...} around the actions and transitions and you forgot to use !='{...}' in some places. It also seems that it's not allowed to use the back ticks as attribute values, so you need to write 'aria-label'!="Mark todo as {todo.done ? 'not done' : 'done'}" instead of 'aria-label'!=\Mark todo as ${todo.done ? 'not done' : 'done'}``. That's a limitation of Pug it seems.

That said, the error message is really suboptimal, it doesn't contain any context. So I will do the following:

• add another note about the template literal limitation
• enhance the error message