Skip to content

Instantly share code, notes, and snippets.

@wycats
Last active October 24, 2022 22:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wycats/e0b0d61d7c588e0a1b73e35959dfe76d to your computer and use it in GitHub Desktop.
Save wycats/e0b0d61d7c588e0a1b73e35959dfe76d to your computer and use it in GitHub Desktop.

I'm assuming these are all talking about cases that didn't already have semis:

Top-Level TemplateDeclaration

<template>
  Hello
</template>|
//         ^ 🚫

// followed by anything

Analogous to:;

  function template() {
    return "Hello";
  }|
// ^ 🚫

TemplateClassElement

class Component {
  <template>
    Hello
  </template>|
  //         ^ 🚫
}

Analogous to:

class Component {
  template() {
    return "Hello";
  }|
// ^ 🚫
}

Trailing Expression in a Variable Declaration

Followed by EOF (including whitespace or comments)

// The expression is the end of a variable declaration and followed by EOF
const HelloComponent = <template>hello</template>|
                                             //  ^ βœ…

Analogous to:

const HelloComponent = [1]|
                       // ^ `;`
no-semi-mode
🚫

Followed by an Unambiguous Statement

"Unambiguous" means that the beginning of the statement is not a valid continuation of the expression.

const HelloComponent = <template>hello</template>|
                                             //  ^ `;`
const y = 1;

Analogous to:

const HelloComponent = [1]|
                       // ^ `;`
const y = 1;
no-semi-mode
🚫
Ambiguity Analysis

Statements (other than ExpressionStatements) always begin with one of:

  • a keyword
  • var, let or const (VariableDeclaration)
  • if (IfStatement)
  • do (DoWhileStatement)
  • while (WhileStatement)
  • for (ForStatement or ForInStatement or ForOfStatement)
  • switch (SwitchStatement)
  • continue (ContinueStatement)
  • break (BreakStatement)
  • return (ReturnStatement)
  • try (TryStatement)
  • with (WithStatement, but disallowed in modules)
  • throw (ThrowStatement)
  • try (TryStatement)
  • debugger (DebuggerStatement)
  • { (BlockStatement)
  • Identifier : (LabeledStatement)

They can also be LabelledStatements which are Identifiers followed by :.

Followed by an Ambiguous Expression

"Ambiguous Expression" means that the next token could be the start of an expression or the continuation of the expression.

const x = <template>hello</template>|
  //                                ^ 🚫
  [1, 2, 3].forEach((x) => console.log(x));

Analogous to:

const x = [1, 2, 3]|
  //               ^ 🚫
  [1, 2, 3].forEach((x) => console.log(x));

Or this ambiguous case, involving a regular expression.

const x = <template>hello</template>|
  //                                ^ 🚫
  /1/g;

Analogous to:

const x = [1, 2, 3]
  //               ^ 🚫
  /1/g;
no-semi-mode
🚫
(same behavior)
Ambiguity Analysis

In this case, we're looking for valid ways to start an expression that are also valid ways to continue an expression.

  • [ (ambiguous ArrayLiteralExpression)
  • ( (ambiguous ParenthesizedExpression or ArrowFunction)
  • / (ambiguous with RegularExpressionLiteral)

Followed by an Unambiguous Expression

Unambiguous means that the beginning of the expression is not a valid continuation of the expression. It means anything that can start an expression other than the cases in the previous section.

const HelloComponent = <template>hello</template>|
//                                               ^ `;`
await x;

Analogous to:

const HelloComponent = [1]|
//                        ^ `;`
await x;
no-semi-mode
🚫
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment