feat(typescript): update to typescript 4.3.5

package.json

@@ -120,7 +120,7 @@
     "sizzle": "^2.3.6",
     "terser": "5.6.1",
     "tslib": "^2.1.0",
-    "typescript": "4.2.3",
+    "typescript": "4.3.5",
     "webpack": "^4.46.0",
     "ws": "7.4.6"
   },

src/compiler/sys/dependencies.json

@@ -50,6 +50,11 @@
         "compiler/lib.es2020.sharedmemory.d.ts",
         "compiler/lib.es2020.string.d.ts",
         "compiler/lib.es2020.symbol.wellknown.d.ts",
+        "compiler/lib.es2021.d.ts",
+        "compiler/lib.es2021.full.d.ts",
+        "compiler/lib.es2021.promise.d.ts",
+        "compiler/lib.es2021.string.d.ts",
+        "compiler/lib.es2021.weakref.d.ts",
         "compiler/lib.es5.d.ts",
         "compiler/lib.es6.d.ts",
         "compiler/lib.esnext.d.ts",

src/compiler/transformers/decorators-to-static/method-decorator.ts

@@ -5,6 +5,7 @@ import {
   createStaticGetter,
   getAttributeTypeInfo,
   isMemberPrivate,
+  mapJSDocTagInfo,
   serializeSymbol,
   typeToString,
   validateReferences,
@@ -95,7 +96,7 @@ const parseMethodDecorator = (
     },
     docs: {
       text: ts.displayPartsToString(signature.getDocumentationComment(typeChecker)),
-      tags: signature.getJsDocTags(),
+      tags: mapJSDocTagInfo(signature.getJsDocTags()),
     },
   };
   validateReferences(diagnostics, methodMeta.complexType.references, method.type || method.name);

src/compiler/transformers/test/transform-utils.spec.ts

@@ -0,0 +1,41 @@
+import { mapJSDocTagInfo } from '../transform-utils';
+
+describe('transform utils', () => {
+  it('flattens TypeScript JSDocTagInfo to Stencil JSDocTagInfo', () => {
+    // tags corresponds to the following JSDoc
+    /*
+     * @param foo the first parameter
+     * @param bar
+     * @returns
+     * @see {@link https://example.com}
+     */
+    const tags = [
+      {
+        name: 'param',
+        text: [
+          { text: 'foo', kind: 'parameterName' },
+          { text: ' ', kind: 'space' },
+          { text: 'the first parameter', kind: 'text' },
+        ],
+      },
+      { name: 'param', text: [{ text: 'bar', kind: 'text' }] },
+      { name: 'returns', text: undefined },
+      {
+        name: 'see',
+        text: [
+          { text: '', kind: 'text' },
+          { text: '{@link ', kind: 'link' },
+          { text: 'https://example.com', kind: 'linkText' },
+          { text: '}', kind: 'link' },
+        ],
+      },
+    ];
+
+    expect(mapJSDocTagInfo(tags)).toEqual([
+      { name: 'param', text: 'foo the first parameter' },
+      { name: 'param', text: 'bar' },
+      { name: 'returns', text: undefined },
+      { name: 'see', text: '{@link https://example.com}' },
+    ]);
+  });
+});

src/compiler/transformers/transform-utils.ts

@@ -515,11 +515,23 @@ export const serializeSymbol = (checker: ts.TypeChecker, symbol: ts.Symbol): d.C
     };
   }
   return {
-    tags: symbol.getJsDocTags().map((tag) => ({ text: tag.text, name: tag.name })),
+    tags: mapJSDocTagInfo(symbol.getJsDocTags()),
     text: ts.displayPartsToString(symbol.getDocumentationComment(checker)),
   };
 };
 
+/**
+ * Maps a TypeScript 4.3+ JSDocTagInfo to a flattened Stencil CompilerJsDocTagInfo.
+ * @param tags A readonly array of JSDocTagInfo objects.
+ * @returns An array of CompilerJsDocTagInfo objects.
+ */
+export const mapJSDocTagInfo = (tags: readonly ts.JSDocTagInfo[]): d.CompilerJsDocTagInfo[] => {
+  // The text following a tag is split semantically by TS 4.3+, e.g. '@param foo the first parameter' ->
+  // [{text: 'foo', kind: 'parameterName'}, {text: ' ', kind: 'space'}, {text: 'the first parameter', kind: 'text'}], so
+  // we join the elements to reconstruct the text.
+  return tags.map((tag) => ({ ...tag, text: tag.text?.map((part) => part.text).join('') }));
+};
+
 export const serializeDocsSymbol = (checker: ts.TypeChecker, symbol: ts.Symbol) => {
   const type = checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration);
   const set = new Set<string>();

src/mock-doc/comment-node.ts

@@ -6,15 +6,15 @@ export class MockComment extends MockNode {
     super(ownerDocument, NODE_TYPES.COMMENT_NODE, NODE_NAMES.COMMENT_NODE, data);
   }
 
-  cloneNode(_deep?: boolean) {
+  override cloneNode(_deep?: boolean) {
     return new MockComment(null, this.nodeValue);
   }
 
-  get textContent() {
+  override get textContent() {
     return this.nodeValue;
   }
 
-  set textContent(text) {
+  override set textContent(text) {
     this.nodeValue = text;
   }
 }

src/mock-doc/document-fragment.ts

@@ -13,7 +13,7 @@ export class MockDocumentFragment extends MockHTMLElement {
     return getElementById(this, id);
   }
 
-  cloneNode(deep?: boolean) {
+  override cloneNode(deep?: boolean) {
     const cloned = new MockDocumentFragment(null);
 
     if (deep) {

src/mock-doc/document.ts

@@ -42,10 +42,10 @@ export class MockDocument extends MockHTMLElement {
     }
   }
 
-  get dir() {
+  override get dir() {
     return this.documentElement.dir;
   }
-  set dir(value: string) {
+  override set dir(value: string) {
     this.documentElement.dir = value;
   }
 
@@ -166,7 +166,7 @@ export class MockDocument extends MockHTMLElement {
     }
   }
 
-  appendChild(newNode: MockElement) {
+  override appendChild(newNode: MockElement) {
     newNode.remove();
     newNode.parentNode = this;
     this.childNodes.push(newNode);
@@ -222,14 +222,14 @@ export class MockDocument extends MockHTMLElement {
     return getElementsByName(this, elmName.toLowerCase());
   }
 
-  get title() {
+  override get title() {
     const title = this.head.childNodes.find((elm) => elm.nodeName === 'TITLE') as MockElement;
     if (title != null && typeof title.textContent === 'string') {
       return title.textContent.trim();
     }
     return '';
   }
-  set title(value: string) {
+  override set title(value: string) {
     const head = this.head;
     let title = head.childNodes.find((elm) => elm.nodeName === 'TITLE') as MockElement;
     if (title == null) {

src/mock-doc/element.ts

@@ -107,10 +107,10 @@ export class MockImageElement extends MockHTMLElement {
     super(ownerDocument, 'img');
   }
 
-  get draggable() {
+  override get draggable() {
     return this.getAttributeNS(null, 'draggable') !== 'false';
   }
-  set draggable(value: boolean) {
+  override set draggable(value: boolean) {
     this.setAttributeNS(null, 'draggable', value);
   }
 
@@ -243,24 +243,24 @@ export class MockStyleElement extends MockHTMLElement {
     this.sheet = new MockCSSStyleSheet(this);
   }
 
-  get innerHTML() {
+  override get innerHTML() {
     return getStyleElementText(this);
   }
-  set innerHTML(value: string) {
+  override set innerHTML(value: string) {
     setStyleElementText(this, value);
   }
 
-  get innerText() {
+  override get innerText() {
     return getStyleElementText(this);
   }
-  set innerText(value: string) {
+  override set innerText(value: string) {
     setStyleElementText(this, value);
   }
 
-  get textContent() {
+  override get textContent() {
     return getStyleElementText(this);
   }
-  set textContent(value: string) {
+  override set textContent(value: string) {
     setStyleElementText(this, value);
   }
 }
@@ -318,14 +318,14 @@ export class MockTemplateElement extends MockHTMLElement {
     this.content = new MockDocumentFragment(ownerDocument);
   }
 
-  get innerHTML() {
+  override get innerHTML() {
     return this.content.innerHTML;
   }
-  set innerHTML(html: string) {
+  override set innerHTML(html: string) {
     this.content.innerHTML = html;
   }
 
-  cloneNode(deep?: boolean) {
+  override cloneNode(deep?: boolean) {
     const cloned = new MockTemplateElement(null);
     cloned.attributes = cloneAttributes(this.attributes);