sveltejs · dummdidumm · Jan 31, 2022 · Jan 31, 2022
diff --git a/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts b/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts
@@ -86,15 +86,6 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider {
                 continue;
             }
 
-            if (
-                (classificationType === ts.ClassificationType.className ||
-                    classificationType === ts.ClassificationType.text) &&
-                textDocument.getText().substring(start - 3, start) === 'on:'
-            ) {
-                // Don't give semantic highlighting for the click in on:click
-                continue;
-            }
-
             const modifier = this.getTokenModifierFromClassification(encodedClassification);
 
             data.push([line, character, length, classificationType, modifier]);

diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts
@@ -1,5 +1,6 @@
 import MagicString from 'magic-string';
 import { BaseDirective } from '../../interfaces';
+import { surroundWith } from '../utils/node-utils';
 import { Element } from './Element';
 import { InlineComponent } from './InlineComponent';
 
@@ -18,10 +19,9 @@ export function handleEventHandler(
     const nameEnd = nameStart + attr.name.length;
 
     if (element instanceof Element) {
-        // For better mapping
-        str.overwrite(nameStart, nameStart + 1, 'on' + str.original.charAt(nameStart), {
-            contentOnly: true
-        });
+        // Prefix with "on" for better mapping.
+        // Surround with quotes because event name could contain invalid prop chars.
+        surroundWith(str, [nameStart, nameEnd], '"on', '"');
         element.addAttribute(
             [[nameStart, nameEnd]],
             attr.expression ? [[attr.expression.start, attr.expression.end]] : ['undefined']

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js
@@ -1,4 +1,4 @@
-  { svelteHTML.createElement("h1", {  onclick:()=>console.log("click"),});  }
+  { svelteHTML.createElement("h1", {  "onclick":()=>console.log("click"),});  }
  { const $$_Component0 = new Component({ target: __sveltets_2_any(), props: {   }});$$_Component0.$on("click", test);}
  { svelteHTML.createElement("img", {   });__sveltets_2_ensureAction(action(svelteHTML.mapElementTag('img'),(thing)));}
  { svelteHTML.createElement("img", {   });__sveltets_2_ensureTransition(fade(svelteHTML.mapElementTag('img'),(params)));}

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js
@@ -1 +1 @@
- { svelteHTML.createElement("h1", { onclick:undefined,});  }
+ { svelteHTML.createElement("h1", { "onclick":undefined,});  }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expected.jsx
@@ -0,0 +1 @@
+<><h1 onclick-outside={undefined} onclick-outside2={() => 'hi'}>Hello</h1></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js
@@ -0,0 +1 @@
+ { svelteHTML.createElement("h1", {   "onclick-outside":undefined,"onclick-outside2":() => 'hi',});  }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/input.svelte
@@ -0,0 +1 @@
+<h1 on:click-outside on:click-outside2={() => 'hi'}>Hello</h1>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js
@@ -1 +1 @@
- { svelteHTML.createElement("h1", {  onclick:click,});  }
+ { svelteHTML.createElement("h1", {  "onclick":click,});  }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js
@@ -1,2 +1,2 @@
-  { svelteHTML.createElement("button", {  onclick:(e) => {},}); }
-  { svelteHTML.createElement("button", {  onclick:(e) => {},}); }
+  { svelteHTML.createElement("button", {  "onclick":(e) => {},}); }
+  { svelteHTML.createElement("button", {  "onclick":(e) => {},}); }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts
@@ -65,13 +65,13 @@ async () => {
 
 
  { svelteHTML.createElement("div", { "class":"controls",});
-	  { svelteHTML.createElement("button", {    onclick:() => travel(-1),"disabled":i === 0,});  }
-	  { svelteHTML.createElement("button", {    onclick:() => travel(+1),"disabled":i === undoStack.length -1,});  }
+	  { svelteHTML.createElement("button", {    "onclick":() => travel(-1),"disabled":i === 0,});  }
+	  { svelteHTML.createElement("button", {    "onclick":() => travel(+1),"disabled":i === undoStack.length -1,});  }
  }
 
-  { svelteHTML.createElement("svg", {  onclick:handleClick,});
+  { svelteHTML.createElement("svg", {  "onclick":handleClick,});
 	  for(const circle of __sveltets_2_ensureArray(circles)){
-		 { svelteHTML.createElement("circle", {            "cx":circle.cx,"cy":circle.cy,"r":circle.r,onclick:event => select(circle, event),oncontextmenu:() => {
+		 { svelteHTML.createElement("circle", {            "cx":circle.cx,"cy":circle.cy,"r":circle.r,"onclick":event => select(circle, event),"oncontextmenu":() => {
 				adjusting = !adjusting;
 				if (adjusting) selected = circle;
 			},"fill":circle === selected ? '#ccc': 'white',});}
@@ -81,7 +81,7 @@ async () => {
 if(adjusting){
 	 { svelteHTML.createElement("div", { "class":"adjuster",});
 		 { svelteHTML.createElement("p", {});     selected.cx; selected.cy; }
-		 { svelteHTML.createElement("input", {     "type":"range","value":selected.r,oninput:adjust,});}
+		 { svelteHTML.createElement("input", {     "type":"range","value":selected.r,"oninput":adjust,});}
 	 }
 }};
 return { props: {}, slots: {}, getters: {}, events: {} }}

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts
@@ -10,7 +10,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", { onclick:undefined,});  }};
+ { svelteHTML.createElement("button", { "onclick":undefined,});  }};
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click'), 'foo': __sveltets_1_customEvent} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(render())) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts
@@ -10,7 +10,7 @@ function render() {
 ;
 async () => {
 
-  { svelteHTML.createElement("input", { onfocus:undefined,});}};
+  { svelteHTML.createElement("input", { "onfocus":undefined,});}};
 return { props: {}, slots: {}, getters: {}, events: {'focus':__sveltets_1_mapElementEvent('focus'), 'mount': __sveltets_1_customEvent} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts
@@ -1,6 +1,6 @@
 ///<reference types="svelte" />
 ;function render() {
-async () => { { svelteHTML.createElement("button", { onclick:undefined,}); }};
+async () => { { svelteHTML.createElement("button", { "onclick":undefined,}); }};
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click')} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function render() {
-async () => { { svelteHTML.createElement("sveltebody", { onclick:undefined,}); }
- { svelteHTML.createElement("sveltewindow", { onresize:undefined,}); }};
+async () => { { svelteHTML.createElement("sveltebody", { "onclick":undefined,}); }
+ { svelteHTML.createElement("sveltewindow", { "onresize":undefined,}); }};
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapBodyEvent('click'), 'resize':__sveltets_1_mapWindowEvent('resize')} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts
@@ -17,7 +17,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => dispatch('btn', ''),}); }};
+ { svelteHTML.createElement("button", {  "onclick":() => dispatch('btn', ''),}); }};
 return { props: {}, slots: {}, getters: {}, events: {'btn': __sveltets_1_customEvent, 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts
@@ -17,7 +17,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => dispatch('btn', ''),}); }};
+ { svelteHTML.createElement("button", {  "onclick":() => dispatch('btn', ''),}); }};
 return { props: {}, slots: {}, getters: {}, events: {'btn': __sveltets_1_customEvent, 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts
@@ -14,7 +14,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", { onclick:undefined,}); }};
+ { svelteHTML.createElement("button", { "onclick":undefined,}); }};
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click'), 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts
@@ -1,6 +1,6 @@
 ///<reference types="svelte" />
 ;function render() {
-async () => { { svelteHTML.createElement("h1", {  onclick:() => {
+async () => { { svelteHTML.createElement("h1", {  "onclick":() => {
 
     // TODO: this is invalid Svelte right now, stores have to be top level 
     // it's therefore okay to not append "let top1$/top2$ = __svelte_store_get(..)"

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts
@@ -30,7 +30,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => dispatch('btn', ''),}); }};
+ { svelteHTML.createElement("button", {  "onclick":() => dispatch('btn', ''),}); }};
 return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{
     /**
      * A DOC

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts
@@ -19,7 +19,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", { onclick:undefined,}); }};
+ { svelteHTML.createElement("button", { "onclick":undefined,}); }};
 return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{
     /**
      * A DOC

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts
@@ -19,7 +19,7 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", { onclick:undefined,}); }};
+ { svelteHTML.createElement("button", { "onclick":undefined,}); }};
 return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{
     /**
      * A DOC

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function render() {
 async () => { { const $$_Component0 = new Component({ target: __sveltets_2_any(), props: {   }});$$_Component0.$on("click", (__sveltets_1_store_get(check), $check) ? method1 : method2);}
-  { svelteHTML.createElement("button", {  onclick:(__sveltets_1_store_get(check), $check) ? method1 : method2,});  }};
+  { svelteHTML.createElement("button", {  "onclick":(__sveltets_1_store_get(check), $check) ? method1 : method2,});  }};
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/...es/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts b/...es/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts
@@ -21,18 +21,18 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count + myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count - myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count * myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count / myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count ** myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count % myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count << myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count >> myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count >>> myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count & myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count ^ myvar),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count | myvar),});  }};
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count + myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count - myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count * myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count / myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count ** myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count % myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count << myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count >> myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count >>> myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count & myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count ^ myvar),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count | myvar),});  }};
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts
@@ -10,9 +10,9 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count + 1),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count - 1),});  }
- { svelteHTML.createElement("button", {  onclick:() => count.set( $count + 1),});  }};
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count + 1),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count - 1),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => count.set( $count + 1),});  }};
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts
@@ -12,10 +12,10 @@ function render() {
 ;
 async () => {
 
- { svelteHTML.createElement("button", {  onclick:() => !(__sveltets_1_store_get(count), $count),});  }
- { svelteHTML.createElement("button", {  onclick:() => +(__sveltets_1_store_get(count), $count),});  }
- { svelteHTML.createElement("button", {  onclick:() => -(__sveltets_1_store_get(count), $count),});  }
- { svelteHTML.createElement("button", {  onclick:() => ~(__sveltets_1_store_get(count), $count),});  }};
+ { svelteHTML.createElement("button", {  "onclick":() => !(__sveltets_1_store_get(count), $count),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => +(__sveltets_1_store_get(count), $count),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => -(__sveltets_1_store_get(count), $count),});  }
+ { svelteHTML.createElement("button", {  "onclick":() => ~(__sveltets_1_store_get(count), $count),});  }};
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts
@@ -2,7 +2,7 @@
 ;function render() {
 b.set((__sveltets_1_store_get(b), $b).concat(5));
 async () => {
- { svelteHTML.createElement("h1", {  onclick:() => b.set((__sveltets_1_store_get(b), $b).concat(5)),});(__sveltets_1_store_get(b), $b); }};
+ { svelteHTML.createElement("h1", {  "onclick":() => b.set((__sveltets_1_store_get(b), $b).concat(5)),});(__sveltets_1_store_get(b), $b); }};
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts
@@ -6,8 +6,8 @@ async () => {if(true){
  { const $$_sveltecomponent0_ = new testComponent({ target: __sveltets_2_any(), props: {   "propa":5,}});$$_sveltecomponent0_;
      { svelteHTML.createElement("h1", {});  }
  }
- { svelteHTML.createElement("sveltewindow", {   onclick:e => {},});}
- { svelteHTML.createElement("sveltebody", {   onclick:e => {},});}
+ { svelteHTML.createElement("sveltewindow", {   "onclick":e => {},});}
+ { svelteHTML.createElement("sveltebody", {   "onclick":e => {},});}
  { svelteHTML.createElement("sveltehead", {});
      { svelteHTML.createElement("h1", {});  }
  }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{ svelteHTML.createElement("h1", { onclick:undefined,}); }
		{ svelteHTML.createElement("h1", { "onclick":undefined,}); }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<><h1 onclick-outside={undefined} onclick-outside2={() => 'hi'}>Hello</h1></>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<h1 on:click-outside on:click-outside2={() => 'hi'}>Hello</h1>