Repository: sveltejs/svelte (JavaScript)
Date: 2019-09-10 15:38:46+00:00
Task type: Bug Fix

Issue:
Unable to handle `@` in attribute values since Svelte v3.12.0
**Describe the bug**
It seems that after upgrading to Svelte 3.12.0, using an @ in an attribute value causes a compiler error on the client.

This works as expected in 3.11.0

**Logs**
```
> TODO@0.0.1 dev /home/ant/Projects/martin-clunes
> sapper dev

✗ client
compiler error: this shouldn't happen! generated code is trying to use inexistent internal 'martin_clunes'
✔ server (846ms)
✔ service worker (439ms)
> Listening on http://localhost:3003
```

**To Reproduce**
https://github.com/beyonk-adventures/sapper-attribute-issue

**Expected behavior**
The bundle should compile correctly.

**Information about your Sapper Installation:**
- Sapper 0.27.0+

- Svelte 3.12.0

- Dynamic application

- Rollup (haven't tried webpack)

**Severity**
It's annoying and broken, but can be worked around temporarily.

**Additional context**
This only occurs in Sapper projects, yet occurs on the client-side build.



Issue discussion:
This is almost certainly a bug in Svelte and not in Sapper, although I'm not sure why I'm having trouble reproducing it with Svelte alone. Moving the issue to the Svelte repo.
Whoops, I was thinking in a box. This reproduces it in the REPL, when compiled with dev mode on:

```svelte
<Foo bar="@baz">
</Foo>
```

The reference to `this.comment` [here](https://github.com/sveltejs/svelte/blob/0a4caeb7e915b73cde9d927e14036b86abd80104/src/compiler/compile/render_dom/Block.ts#L381) needs to have `@` sigils escaped, like it does [down here](https://github.com/sveltejs/svelte/blob/0a4caeb7e915b73cde9d927e14036b86abd80104/src/compiler/compile/render_dom/Block.ts#L424).
I should've written a test when I fixed this the first time in #3186, maybe then this wouldn't have snuck through 😬 
@Conduitry wow - I reviewed all the commits and I didn't spot this :)

Solution patch:
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -2,7 +2,7 @@ import CodeBuilder from '../utils/CodeBuilder';
 import deindent from '../utils/deindent';
 import Renderer from './Renderer';
 import Wrapper from './wrappers/shared/Wrapper';
-import { escape } from '../utils/stringify';
+import { stringify, escape } from '../utils/stringify';
 
 export interface BlockOptions {
 	parent?: Block;
@@ -378,7 +378,7 @@ export default class Block {
 					const block = {
 						${properties}
 					};
-					@dispatch_dev("SvelteRegisterBlock", { block, id: ${this.name || 'create_fragment'}.name, type: "${this.type}", source: "${this.comment ? this.comment.replace(/"/g, '\\"') : ''}", ctx });
+					@dispatch_dev("SvelteRegisterBlock", { block, id: ${this.name || 'create_fragment'}.name, type: "${this.type}", source: ${stringify(this.comment || '', { only_escape_at_symbol: true })}, ctx });
 					return block;`
 				: deindent`
 					return {


Test patch:
diff --git a/test/runtime/samples/sigil-component-attribute/Widget.svelte b/test/runtime/samples/sigil-component-prop/Widget.svelte
similarity index 100%
rename from test/runtime/samples/sigil-component-attribute/Widget.svelte
rename to test/runtime/samples/sigil-component-prop/Widget.svelte
diff --git a/test/runtime/samples/sigil-component-attribute/_config.js b/test/runtime/samples/sigil-component-prop/_config.js
similarity index 69%
rename from test/runtime/samples/sigil-component-attribute/_config.js
rename to test/runtime/samples/sigil-component-prop/_config.js
--- a/test/runtime/samples/sigil-component-attribute/_config.js
+++ b/test/runtime/samples/sigil-component-prop/_config.js
@@ -1,4 +1,7 @@
 export default {
+	compileOptions: {
+		dev: true
+	},
 	props: { foo: 'foo' },
 	html: `<div>foo @ foo # foo</div>`,
 };
diff --git a/test/runtime/samples/sigil-component-attribute/main.svelte b/test/runtime/samples/sigil-component-prop/main.svelte
similarity index 63%
rename from test/runtime/samples/sigil-component-attribute/main.svelte
rename to test/runtime/samples/sigil-component-prop/main.svelte
--- a/test/runtime/samples/sigil-component-attribute/main.svelte
+++ b/test/runtime/samples/sigil-component-prop/main.svelte
@@ -3,4 +3,5 @@
 	export let foo;
 </script>
 
-<Widget value='foo @ {foo} # foo'/>
+<Widget value='foo @ {foo} # foo'>
+</Widget>
\ No newline at end of file