fix: avoid ASI hazard with computed class members (#22)

Fixes #21

This change defends against a ASI hazard. When a computed class member
name has a leading type modifier
(`public/private/protected/readonly/override`) a `;` is inserted in it's
place to avoid being interpreted as index lookup of the previous class
member.

Signed-off-by: Ashley Claymore <[email protected]>

README.md

@@ -139,9 +139,9 @@ There are two cases, described here, where it does more than replace the TypeScr
 
 ### ASI (automatic semicolon insertion)
 
-To guard against [ASI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion) issues in the output, `ts-blank-space` will add `;` to the end of type-only statements.
+To guard against [ASI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion) issues in the output, `ts-blank-space` will add `;` to the end of type-only statements, and when removing a leading type annotation could introduce an ASI hazard.
 
-Example input:
+#### Example one - type-only statement
 
 <!-- prettier-ignore -->
 ```typescript
@@ -159,6 +159,26 @@ statementWithNoSemiColon
 ("not calling above statement");
 ```
 
+#### Example two - computed class fields/methods
+
+<!-- prettier-ignore -->
+```typescript
+class C {
+    field = 1/* no ; */
+    public ["computed field not accessing above"] = 2
+}
+```
+
+becomes:
+
+<!-- prettier-ignore -->
+```javascript
+class C {
+    field = 1/* no ; */
+    ;      ["computed field not accessing above"] = 2
+}
+```
+
 ### Arrow function type annotations that introduce a new line
 
 If the type annotations around an arrow function's parameters introduce a new line then only replacing them with blank space can be incorrect. Therefore, in addition to removing the type annotation, the `(` or `)` surrounding the function parameters may also be moved.

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ts-blank-space",
     "description": "A small, fast, pure JavaScript type-stripper that uses the official TypeScript parser.",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "license": "Apache-2.0",
     "homepage": "https://bloomberg.github.io/ts-blank-space",
     "contributors": [

src/index.ts

@@ -228,7 +228,7 @@ function visitClassLike(node: ts.ClassLikeDeclaration): VisitResult {
             blankStatement(node);
             return VISIT_BLANKED;
         }
-        visitModifiers(node.modifiers);
+        visitModifiers(node.modifiers, /* addSemi:*/ false);
     }
 
     // ... <T>
@@ -280,12 +280,17 @@ function isRemovedModifier(kind: ts.SyntaxKind): kind is (typeof classElementMod
     return classElementModifiersToRemove.has(kind as never);
 }
 
-function visitModifiers(modifiers: ArrayLike<ts.ModifierLike>): void {
+function visitModifiers(modifiers: ArrayLike<ts.ModifierLike>, addSemi: boolean): void {
     for (let i = 0; i < modifiers.length; i++) {
         const modifier = modifiers[i];
         const kind = modifier.kind;
         if (isRemovedModifier(kind)) {
-            blankExact(modifier);
+            if (addSemi && i === 0) {
+                str.blankButStartWithSemi(modifier.getStart(ast), modifier.end);
+                addSemi = false;
+            } else {
+                blankExact(modifier);
+            }
             continue;
         } else if (kind === SK.Decorator) {
             visitor(modifier);
@@ -328,7 +333,7 @@ function visitPropertyDeclaration(node: ts.PropertyDeclaration): VisitResult {
             blankStatement(node);
             return VISIT_BLANKED;
         }
-        visitModifiers(node.modifiers);
+        visitModifiers(node.modifiers, /* addSemi */ node.name.kind === SK.ComputedPropertyName);
     }
     node.exclamationToken && blankExact(node.exclamationToken);
     node.questionToken && blankExact(node.questionToken);
@@ -394,12 +399,13 @@ function visitFunctionLikeDeclaration(node: ts.FunctionLikeDeclaration, kind: ts
         return VISIT_BLANKED;
     }
 
+    const nodeName = node.name;
     if (node.modifiers) {
-        visitModifiers(node.modifiers);
+        visitModifiers(node.modifiers, /* addSemi */ !!nodeName && nodeName.kind === SK.ComputedPropertyName);
     }
 
-    if (node.name) {
-        visitor(node.name);
+    if (nodeName) {
+        visitor(nodeName);
     }
 
     let moveOpenParen = false;

tests/fixture/cases/asi.ts

@@ -78,4 +78,16 @@ class ASI {
         ((() => { 1/*trailing*/})(), 1) + 1 as number/*trailing*/
         (1);
     }
+    g = 2/*missing ; */
+    public ["computed-field"] = 1
+//  ;^^^^^
+    h = 3/*missing ; */
+    public ["computed-method"]() {}
+//  ;^^^^^
+}
+
+class NoASI {
+    f = 1/*missing ; */
+    static readonly ["computed-field"] = 1
+//         ^^^^^^^^
 }