From c0da266d28c9d5de4afff032dbd41280e3f8ea62 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 10 May 2021 12:13:27 +0200
Subject: [PATCH] (fix) Keep parantheses in script tags for which JS is assumed

If a script tag is assumed to be JS, use babel-ts now to format the contents. The formatter prints a little different, keeping parantheses in more places, which fixes #218 . The change is not perfect because it would be better to know for sure that the language is JS, which we cannot know because of the possible language defaults.
---
 CHANGELOG.md                                  |  1 +
 src/embed.ts                                  | 20 +++++++++++++---
 src/print/node-helpers.ts                     | 13 ++++++++++-
 .../samples/jsdoc-parens-in-script.html       |  4 ++++
 .../samples/typescript-without-lang-attr.html | 23 +++++++++++++++++++
 test/printer/samples/typescript.html          | 23 +++++++++++++++++++
 6 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 test/printer/samples/jsdoc-parens-in-script.html
 create mode 100644 test/printer/samples/typescript-without-lang-attr.html
 create mode 100644 test/printer/samples/typescript.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d043b6e..8f925c7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * (fix) Don't snip style tag that is inside script tag ([#219](https://github.com/sveltejs/prettier-plugin-svelte/issues/219), [#70](https://github.com/sveltejs/prettier-plugin-svelte/issues/70))
 * (fix) Better formatting of long attribute values with mustache tags inbetween ([#221](https://github.com/sveltejs/prettier-plugin-svelte/pull/221))
 * (fix) Format properly when using Prettier 2.3.0+ ([#222](https://github.com/sveltejs/prettier-plugin-svelte/pull/222))
+* (fix) Keep parantheses in script tags for which JS is assumed ([#218](https://github.com/sveltejs/prettier-plugin-svelte/issues/218))
 
 ## 2.2.0
 
diff --git a/src/embed.ts b/src/embed.ts
index 4cc18d8a..84154a66 100644
--- a/src/embed.ts
+++ b/src/embed.ts
@@ -8,6 +8,7 @@ import {
     getLeadingComment,
     isIgnoreDirective,
     isNodeSupportedLanguage,
+    isTypeScript,
 } from './print/node-helpers';
 import { Node } from './print/nodes';
 
@@ -40,7 +41,11 @@ export function embed(
         }
     }
 
-    const embedType = (tag: string, parser: 'typescript' | 'css', isTopLevel: boolean) =>
+    const embedType = (
+        tag: string,
+        parser: 'typescript' | 'babel-ts' | 'css',
+        isTopLevel: boolean,
+    ) =>
         embedTag(
             tag,
             path,
@@ -49,7 +54,16 @@ export function embed(
             isTopLevel,
         );
 
-    const embedScript = (isTopLevel: boolean) => embedType('script', 'typescript', isTopLevel);
+    const embedScript = (isTopLevel: boolean) =>
+        embedType(
+            'script',
+            // Use babel-ts as fallback because the absence does not mean the content is not TS,
+            // the user could have set the default language. babel-ts will format things a little
+            // bit different though, especially preserving parentheses around dot notation which
+            // fixes https://github.com/sveltejs/prettier-plugin-svelte/issues/218
+            isTypeScript(node) ? 'typescript' : 'babel-ts',
+            isTopLevel,
+        );
     const embedStyle = (isTopLevel: boolean) => embedType('style', 'css', isTopLevel);
 
     switch (node.type) {
@@ -102,7 +116,7 @@ function getSnippedContent(node: Node) {
 
 function formatBodyContent(
     content: string,
-    parser: 'typescript' | 'css',
+    parser: 'typescript' | 'babel-ts' | 'css',
     textToDoc: (text: string, options: object) => Doc,
     options: ParserOptions,
 ) {
diff --git a/src/print/node-helpers.ts b/src/print/node-helpers.ts
index ca25ba3a..cf053f38 100644
--- a/src/print/node-helpers.ts
+++ b/src/print/node-helpers.ts
@@ -226,7 +226,7 @@ function getLangAttribute(node: Node): string | null {
 }
 
 /**
- * Checks whether the node contains a `lang` attribute with a value corresponding to
+ * Checks whether the node contains a `lang` or `type` attribute with a value corresponding to
  * a language we cannot format. This might for example be `<template lang="pug">`.
  * If the node does not contain a `lang` attribute, the result is true.
  */
@@ -236,6 +236,17 @@ export function isNodeSupportedLanguage(node: Node) {
     return !(lang && unsupportedLanguages.includes(lang));
 }
 
+/**
+ * Checks whether the node contains a `lang` or `type` attribute which indicates that
+ * the script contents are written in TypeScript. Note that the absence of the tag
+ * does not mean it's not TypeScript, because the user could have set the default
+ * to TypeScript in his settings.
+ */
+export function isTypeScript(node: Node) {
+    const lang = getLangAttribute(node) || '';
+    return ['typescript', 'ts'].includes(lang);
+}
+
 export function isLoneMustacheTag(node: true | Node[]): node is [MustacheTagNode] {
     return node !== true && node.length === 1 && node[0].type === 'MustacheTag';
 }
diff --git a/test/printer/samples/jsdoc-parens-in-script.html b/test/printer/samples/jsdoc-parens-in-script.html
new file mode 100644
index 00000000..3358f687
--- /dev/null
+++ b/test/printer/samples/jsdoc-parens-in-script.html
@@ -0,0 +1,4 @@
+<script>
+    const x = /** @type {Foo} */ (a.b).c();
+    const y = /** @type {Foo} */ a.b.c();
+</script>
diff --git a/test/printer/samples/typescript-without-lang-attr.html b/test/printer/samples/typescript-without-lang-attr.html
new file mode 100644
index 00000000..6898ae6d
--- /dev/null
+++ b/test/printer/samples/typescript-without-lang-attr.html
@@ -0,0 +1,23 @@
+<script>
+    interface A {
+        b: string;
+    }
+    type Foo<T> = T extends true ? A & { b: boolean } : string;
+    type SeussFish = `${Quantity | Color} fish`;
+    const a: A = { b: "" };
+
+    function foo(a: A): void {
+        const foo = <Foo<true>>a;
+        return null as any;
+    }
+
+    const bar: () => void = () => {};
+
+    abstract class B<T> {
+        t: T;
+    }
+
+    enum E {
+        a = 1,
+    }
+</script>
diff --git a/test/printer/samples/typescript.html b/test/printer/samples/typescript.html
new file mode 100644
index 00000000..7089c745
--- /dev/null
+++ b/test/printer/samples/typescript.html
@@ -0,0 +1,23 @@
+<script lang="ts">
+    interface A {
+        b: string;
+    }
+    type Foo<T> = T extends true ? A & { b: boolean } : string;
+    type SeussFish = `${Quantity | Color} fish`;
+    const a: A = { b: "" };
+
+    function foo(a: A): void {
+        const foo = <Foo<true>>a;
+        return null as any;
+    }
+
+    const bar: () => void = () => {};
+
+    abstract class B<T> {
+        t: T;
+    }
+
+    enum E {
+        a = 1,
+    }
+</script>