Modifications for Google import compatibility (google#333)

Various changes to make it easier to import playground elements into Google:

- Remove `import type` statements.
- Require explicit `override` keywords.
- Replace `vscode-languageserver` dep with `vscode-languageserver-protocol`.
- Detect and annotate floating promises, so that they can be auto transformed to have the required annotation internally.
- Upgrade from TypeScript 4.4.4 to 4.7.4, and use `~` semver range going forward.
- Add explicit cast for a `JSON.parse` call.
- Add explicit type parameters for a `new Map` call.
- Rename variables called `exports` to `_exports`, because JS Compiler assumes it can always unambiguously refer to a global with that name.
- Simplify part of the project -> service worker proxy protocol. We used to pass the service worker URL over the wire, but since it's static there is no point doing that (simplifies some internal security transforms).

.eslintrc.json

@@ -7,22 +7,61 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json"
   },
   "plugins": ["@typescript-eslint", "no-only-tests", "import"],
   "rules": {
     "no-only-tests/no-only-tests": "error",
     "import/extensions": ["error", "always"],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/no-non-null-assertion": "off"
+    "@typescript-eslint/no-non-null-assertion": "off",
+    // Google internally requires that floating promises are annotated with a
+    // special function. We use eslint-enable and eslint-disable comments for
+    // this rule to identify these spots for automated transform on import.
+    "@typescript-eslint/no-floating-promises": "error"
   },
   "overrides": [
     {
       "files": ["src/playground-styles.ts"],
       "rules": {
         "no-var": "off"
       }
+    },
+    {
+      "files": ["src/typescript-worker/**"],
+      "parserOptions": {
+        "project": "./src/typescript-worker/tsconfig.json"
+      }
+    },
+    {
+      "files": ["src/service-worker/**"],
+      "parserOptions": {
+        "project": "./src/service-worker/tsconfig.json"
+      }
+    },
+    {
+      "files": ["src/shared/**"],
+      "parserOptions": {
+        "project": "./src/shared/tsconfig.json"
+      }
+    },
+    {
+      // These files aren't imported into Google so we don't care about floating
+      // promises.
+      "files": [
+        "scripts/**",
+        "playwright.config.ts",
+        "src/configurator/**",
+        "src/test/**"
+      ],
+      "parserOptions": {
+        "project": null
+      },
+      "rules": {
+        "@typescript-eslint/no-floating-promises": "off"
+      }
     }
   ]
 }

CHANGELOG.md

@@ -17,7 +17,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 <!-- ### Fixed -->
 <!-- ### Removed -->
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- Removed `vscode-languageserver` dependency.
+- TypeScript version upgraded from `4.4.4` to `4.7.4`.
 
 ## [0.16.3] - 2022-08-02
 

configurator/project/my-element.ts

@@ -6,7 +6,7 @@ export class MyElement extends LitElement {
   @property()
   greet = 'nobody';
 
-  render() {
+  override render() {
     return html`<p>Hello <b>${this.greet}</b>!</p>`;
   }
 }

package.json

@@ -286,7 +286,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.3.5",
     "tsc-watch": "^4.2.3",
-    "typescript": "^4.4.3",
+    "typescript": "~4.7.4",
+    "vscode-languageserver-protocol": "^3.17.2",
     "wireit": "^0.7.1"
   },
   "dependencies": {
@@ -300,7 +301,6 @@
     "comlink": "=4.3.1",
     "fuse.js": "^6.4.6",
     "lit": "^2.0.0",
-    "tslib": "^2.0.3",
-    "vscode-languageserver": "^7.0.0"
+    "tslib": "^2.0.3"
   }
 }

playwright.config.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import type {PlaywrightTestConfig} from '@playwright/test';
+import {PlaywrightTestConfig} from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
   testDir: 'src/test/playwright',

src/configurator/playground-configurator.ts

@@ -33,7 +33,7 @@ import {tokens} from './highlight-tokens.js';
  */
 @customElement('playground-configurator')
 export class PlaygroundConfigurator extends LitElement {
-  static styles = [
+  static override styles = [
     ...themeStyles,
     css`
       :host {
@@ -171,7 +171,7 @@ export class PlaygroundConfigurator extends LitElement {
   @query('playground-ide')
   private _ide!: PlaygroundIde;
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.readUrlParams(new URL(document.location.href).searchParams);
   }
@@ -297,7 +297,7 @@ export class PlaygroundConfigurator extends LitElement {
     history.replaceState(null, '', '?' + params.toString());
   }
 
-  render() {
+  override render() {
     return html`
       <style>
         ${this.cssText}

src/configurator/playground-theme-detector.ts

@@ -12,7 +12,7 @@ import {tokens} from './highlight-tokens.js';
 
 @customElement('playground-theme-detector')
 export class PlaygroundThemeDetector extends LitElement {
-  static styles = css`
+  static override styles = css`
     ol {
       padding-left: 24px;
     }
@@ -86,7 +86,7 @@ export class PlaygroundThemeDetector extends LitElement {
   @query('playground-code-editor')
   private _playgroundWithUserText!: PlaygroundCodeEditor;
 
-  render() {
+  override render() {
     return html`
       <h2>Theme detector</h2>
 
@@ -176,7 +176,7 @@ export class PlaygroundThemeDetector extends LitElement {
     `;
   }
 
-  async firstUpdated() {
+  override async firstUpdated() {
     // CodeMirror only renders visible lines plus some margin. Force it to
     // render everything so we can query it.
     await this._playgroundWithUserText.updateComplete;

src/internal/build.ts

@@ -6,14 +6,14 @@
 
 import {Deferred} from '../shared/deferred.js';
 
-import type {
+import {
   SampleFile,
   BuildOutput,
   FileBuildOutput,
   DiagnosticBuildOutput,
   HttpError,
 } from '../shared/worker-api.js';
-import type {Diagnostic} from 'vscode-languageserver';
+import {Diagnostic} from 'vscode-languageserver-protocol';
 
 const unreachable = (n: never) => n;
 

src/internal/codemirror.ts

@@ -9,10 +9,10 @@ import '../_codemirror/codemirror-bundle.js';
 
 // Note it's critical we use `import type` here, or else we'll also import the
 // wrong runtime modules.
-import type CodeMirrorCore from 'codemirror';
-import type CoreMirrorFolding from 'codemirror/addon/fold/foldcode.js';
-import type CodeMirrorHinting from 'codemirror/addon/hint/show-hint.js';
-import type CodeMirrorComment from 'codemirror/addon/comment/comment.js';
+import CodeMirrorCore from 'codemirror';
+import CoreMirrorFolding from 'codemirror/addon/fold/foldcode.js';
+import CodeMirrorHinting from 'codemirror/addon/hint/show-hint.js';
+import CodeMirrorComment from 'codemirror/addon/comment/comment.js';
 
 /**
  * CodeMirror function.

src/internal/tab-bar.ts

@@ -8,7 +8,7 @@ import {html, css, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
-import type {PlaygroundInternalTab} from './tab.js';
+import {PlaygroundInternalTab} from './tab.js';
 
 /**
  * A horizontal bar of tabs.
@@ -18,7 +18,7 @@ import type {PlaygroundInternalTab} from './tab.js';
  */
 @customElement('playground-internal-tab-bar')
 export class PlaygroundInternalTabBar extends LitElement {
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       overflow-x: auto;
@@ -88,7 +88,7 @@ export class PlaygroundInternalTabBar extends LitElement {
   private _tabs: PlaygroundInternalTab[] = [];
   private _active: PlaygroundInternalTab | undefined = undefined;
 
-  render() {
+  override render() {
     return html`
       <div role="tablist" aria-label=${ifDefined(this.label)}>
         <slot