diff --git a/docs/preprocessing.md b/docs/preprocessing.md index a2e6aa5f..acb77edf 100644 --- a/docs/preprocessing.md +++ b/docs/preprocessing.md @@ -316,6 +316,8 @@ This is also necessary to pass callbacks: button(on:click!="{(e) => doTheThing(e)}") ``` +It is not possible to use template literals for attribute values. You can't write `` attr=`Hello ${value ? 'Foo' : 'Bar'} ``, instead write `attr="Hello {value ? 'Foo' : 'Bar'}"`. + **Spreading props:** To spread props into a pug element, wrap the `{...object}` expression with quotes `"`. diff --git a/src/transformers/pug.ts b/src/transformers/pug.ts index f02f72c9..b1c8494c 100644 --- a/src/transformers/pug.ts +++ b/src/transformers/pug.ts @@ -65,15 +65,28 @@ const transformer: Transformer = async ({ }; const { type: identationType } = detectIndent(content); - const code = `${GET_MIXINS(identationType ?? 'space')}\n${content}`; + const input = `${GET_MIXINS(identationType ?? 'space')}\n${content}`; const compiled = pug.compile( - code, + input, pugOptions, // @types/pug compile() returned value doesn't have `dependencies` prop ) as pug.compileTemplate & { dependencies?: string[] }; + let code: string; + + try { + code = compiled(); + } catch (e) { + // The error message does not have much context, add more of it + if (e instanceof Error) { + e.message = `[svelte-preprocess] Pug error while preprocessing ${filename}\n\n${e.message}`; + } + + throw e; + } + return { - code: compiled(), + code, dependencies: compiled.dependencies ?? [], }; };