Skip to content

Commit c80a58c

Browse files
aomarksaomarks
authored
Show basic TypeScript errors (#120)
Syntactic and other basic TypeScript errors are now shown with red underlines and a tooltip on hover. We currently can't show any errors that depend on typings, because we don't fetch them (even the standard libs)! This will require some more work -- tracking separately at #119 and will send as followup. It's using the Language Server Protocol Diagnostic type as the interface. Should be good for other diagnostic sources we might add in the future. Sadly, we're currently displaying a border-bottom: 2px dashed red, instead of text-decoration: red wavy underline, because wavy doesn't render anything for single characters (!): https://bugs.chromium.org/p/chromium/issues/detail?id=668042). Could add a custom implementation of wavy underlines as a followup.
1 parent 569b9fd commit c80a58c

File tree

12 files changed

+464
-127
lines changed

12 files changed

+464
-127
lines changed

‎CHANGELOG.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
1717
<!-- ### Fixed -->
1818
<!-- ### Removed -->
1919

20+
## Unreleased
21+
22+
### Added
23+
24+
- TypeScript errors are now displayed in the editor with red underlines. A
25+
tooltip displaying the error is shown on hover.
26+
27+
- Note that only basic/syntactic errors are currently shown, because typings
28+
of dependencies are not currently available to compilation.
29+
30+
- Added CSS property `--playground-error-border`, the `border-bottom` of code
31+
spans with an error (`2px red dashed` by default).
32+
33+
- Added CSS shadow part `diagnostic-tooltip` for styling the tooltip that
34+
appears when hovering over an error.
35+
2036
## [0.6.3] - 2021-03-24
2137

2238
### Added

‎README.md‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -533,12 +533,13 @@ project element.
533533

534534
### Properties
535535

536-
| Name         |  Type | Default   | Description |
537-
| ---------------- | -------------- | ------------------------- | ---------------------------------------------------------------------------- |
538-
| `projectSrc` | `string` | `undefined` | URL of a [project files manifest](#option-2-json-manifest) to load. |
539-
| `files` | `SampleFile[]` | `undefined` | Get or set the array of project files ([details](#option-3-files-property)). |
540-
| `sandboxScope` | `string` | `"playground-elements"` | The service worker scope to register on. |
541-
| `sandboxBaseUrl` | `string` | _module parent directory_ | Base URL for script execution sandbox ([details](#sandbox)). |
536+
| Name         |  Type | Default   | Description |
537+
| ---------------- | ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------- | --- |
538+
| `projectSrc` | `string` | `undefined` | URL of a [project files manifest](#option-2-json-manifest) to load. |
539+
| `files` | `SampleFile[]` | `undefined` | Get or set the array of project files ([details](#option-3-files-property)). |
540+
| `sandboxScope` | `string` | `"playground-elements"` | The service worker scope to register on. |
541+
| `sandboxBaseUrl` | `string` | _module parent directory_ | Base URL for script execution sandbox ([details](#sandbox)). |
542+
| `diagnostics` | `Map<string, lsp.Diagnostic>` | `undefined` | Map from filename to array of Language Server Protocol diagnostics resulting from the latest compilation. | ` |
542543

543544
### Methods
544545

@@ -657,6 +658,7 @@ to quickly experiment with themes and other customizations.
657658
| `--playground-code-TOKEN-color`   | *various*              | Color of each kind of `TOKEN` in syntax highlighted-code. See the [syntax highlighting](#syntax-highlighting) section for details. |
658659
| `--playground-highlight-color`   | ![](images/colors/6200EE.png) `#6200EE`               | Color of the active file-picker tab label and indicator, and the preview loading bar |
659660
| `--playground-code-background`   | ![](images/colors/FFFFFF.png) `#FFFFFF`               | `background` of the code editor |
661+
| `--playground-error-border`   | `2px red dashed`               | `border-bottom` of code spans with an error |
660662
| `--playground-tab-bar-background`   | ![](images/colors/EAEAEA.png) `#EAEAEA`               | `background` of the editor file-picker tab bar |
661663
| `--playground-tab-bar-foreground-color`   | ![](images/colors/000000.png) `#000000`               | Text `color` of inactive file-picker tabs |
662664
| `--playground-preview-toolbar-background`   | ![](images/colors/FFFFFF.png) `#FFFFFF`               | `background` of the preview toolbar |
@@ -671,15 +673,16 @@ parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) are exported,
671673
which you can style with additional rules not covered by the above CSS custom
672674
properties.
673675

674-
| Part name                     | Exported by | Description |
675-
| ------------------------------------------- | ---------------- | -------------------------------------------- |
676-
| `tab-bar`                 | `ide` | Tab bar file switcher |
677-
| `editor`                 | `ide` | Editor |
678-
| `preview`                 | `ide` | Preview |
679-
| `preview-toolbar`                 | `ide`, `preview` | Preview top bar |
680-
| `preview-location`                 | `ide`, `preview` | Preview top bar "Result" heading |
681-
| `preview-reload-button`                 | `ide`, `preview` | Preview top bar reload button |
682-
| `preview-loading-indicator`                 | `ide`, `preview` | Preview top bar horizontal loading indicator |
676+
| Part name                     | Exported by | Description |
677+
| ------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------- |
678+
| `tab-bar`                 | `ide` | Tab bar file switcher |
679+
| `editor`                 | `ide` | Editor |
680+
| `preview`                 | `ide` | Preview |
681+
| `preview-toolbar`                 | `ide`, `preview` | Preview top bar |
682+
| `preview-location`                 | `ide`, `preview` | Preview top bar "Result" heading |
683+
| `preview-reload-button`                 | `ide`, `preview` | Preview top bar reload button |
684+
| `preview-loading-indicator`                 | `ide`, `preview` | Preview top bar horizontal loading indicator |
685+
| `diagnostic-tooltip` | `ide`, `file-editor`, `code-editor` | The tooltip that appears when hovering over a code span that has an error |
683686

684687
# Syntax highlighting
685688

‎configurator/project/project.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"files": {
3-
"index.html": {},
4-
"my-element.ts": {}
3+
"my-element.ts": {},
4+
"index.html": {}
55
}
66
}

‎package-lock.json‎

Lines changed: 99 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@rollup/plugin-commonjs": "^17.0.0",
5252
"@rollup/plugin-node-resolve": "^11.0.0",
5353
"@rollup/plugin-replace": "^2.3.3",
54+
"@types/codemirror": "^0.0.108",
5455
"@web/dev-server": "^0.1.4",
5556
"@web/test-runner": "^0.12.2",
5657
"@web/test-runner-playwright": "^0.8.0",
@@ -78,11 +79,10 @@
7879
"@material/mwc-tab": "^0.20.0",
7980
"@material/mwc-tab-bar": "^0.20.0",
8081
"@material/mwc-textfield": "^0.20.0",
81-
"@types/es-module-lexer": "^0.3.0",
8282
"comlink": "^4.3.0",
83-
"es-module-lexer": "^0.3.26",
8483
"lit-element": "^2.3.1",
8584
"lit-html": "^1.2.1",
86-
"tslib": "^2.0.3"
85+
"tslib": "^2.0.3",
86+
"vscode-languageserver": "^7.0.0"
8787
}
8888
}

‎src/lib/codemirror.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC
4+
* SPDX-License-Identifier: BSD-3-Clause
5+
*/
6+
7+
// Our own specialized CodeMirror bundle (see rollup.config.js).
8+
import '../_codemirror/codemirror-bundle.js';
9+
10+
// Note it's critical we use `import type` here, or else we'll also import the
11+
// wrong runtime modules.
12+
import type CodeMirrorCore from 'codemirror';
13+
import type CoreMirrorFolding from 'codemirror/addon/fold/foldcode.js';
14+
15+
/**
16+
* CodeMirror function.
17+
*
18+
* This function is defined as window.CodeMirror, but @types/codemirror doesn't
19+
* declare that.
20+
*/
21+
export const CodeMirror = (window as {
22+
CodeMirror: typeof CodeMirrorCore & typeof CoreMirrorFolding;
23+
}).CodeMirror;

0 commit comments

Comments
 (0)