fix: don't remove non-null-assertion operator

#2248
sveltejs · Jan 12, 2024 · e9afe90 · e9afe90
1 parent c6a7994
commit e9afe90
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/svelte2tsx/src/utils/htmlxparser.ts b/packages/svelte2tsx/src/utils/htmlxparser.ts
@@ -152,6 +152,8 @@ const possibleOperatorOrPropertyAccess = new Set([
     '-'
 ]);
 
+const id_char = /[\w$]/;
+
 function blankPossiblyErrorOperatorOrPropertyAccess(htmlx: string) {
     let index = htmlx.indexOf('}');
     let lastIndex = 0;
@@ -162,6 +164,16 @@ function blankPossiblyErrorOperatorOrPropertyAccess(htmlx: string) {
         while (backwardIndex > lastIndex) {
             const char = htmlx.charAt(backwardIndex);
             if (possibleOperatorOrPropertyAccess.has(char)) {
+                if (char === '!') {
+                    // remove ! if it's at the beginning but not if it's used as the TS non-null assertion operator
+                    let prev = backwardIndex - 1;
+                    while (prev > lastIndex && htmlx.charAt(prev) === ' ') {
+                        prev--;
+                    }
+                    if (id_char.test(htmlx.charAt(prev))) {
+                        break;
+                    }
+                }
                 const isPlusOrMinus = char === '+' || char === '-';
                 const isIncrementOrDecrement =
                     isPlusOrMinus && htmlx.charAt(backwardIndex - 1) === char;

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expected-svelte5.js b/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expected-svelte5.js
@@ -21,4 +21,5 @@ item as string;
 ;__sveltets_2_ensureSnippet(foo(bar as string));
 
  { svelteHTML.createElement("button", { "onclick":(e: Event) => {e as any},});  }
- { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  "attr":attr as boolean,}});}
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  "attr":attr as boolean,}});}
+ { svelteHTML.createElement("label", { "id":ok!,}); }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/input.svelte
@@ -30,3 +30,4 @@
 
 <button onclick={(e: Event) => {e as any}}>click</button>
 <Component attr={attr as boolean} />
+<label id={ok!}></label>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,3 +30,4 @@

		<button onclick={(e: Event) => {e as any}}>click</button>
		<Component attr={attr as boolean} />
		<label id={ok!}></label>