[optimize] upgrade to TypeScript 4.x

[optimize] upgrade Upstream packages

Author: TechQuery

ReadMe.md

@@ -132,14 +132,14 @@ export class TestTag extends mixin<Props, State>() {
 
     render({ title }: Props, { status }: State) {
         return (
-            <Fragment>
+            <>
                 <h1 title={title} className={`title ${status}`}>
                     {title}
                     <img alt={title} onClick={this.onClick} />
 
                     <SubTag />
                 </h1>
-            </Fragment>
+            </>
         );
     }
 }
@@ -191,10 +191,9 @@ We recommend these libraries to use with WebCell:
 
 ## Roadmap
 
--   [x] (Template) [Document Fragment node][21]
 -   [ ] Server-side Render
 
-Go to [contribute][22]!
+Go to [contribute][21]!
 
 [1]: https://www.webcomponents.org/
 [2]: https://facebook.github.io/jsx/
@@ -216,5 +215,4 @@ Go to [contribute][22]!
 [18]: https://web-cell.dev/web-utility/
 [19]: https://web-cell.dev/iterable-observer/
 [20]: https://github.com/EasyWebApp/MarkCell
-[21]: https://github.com/Microsoft/TypeScript/issues/20469
-[22]: https://github.com/EasyWebApp/WebCell/blob/v2/Contributing.md
+[21]: https://github.com/EasyWebApp/WebCell/blob/v2/Contributing.md

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "2.1.3",
+    "version": "2.2.0",
     "description": "Web Components engine based on JSX & TypeScript",
     "keywords": [
         "web",
@@ -26,27 +26,27 @@
         "@webcomponents/webcomponentsjs": "^2.4.4",
         "core-js": "^3.6.5",
         "jsdom": "^16.4.0",
-        "web-utility": "^1.7.0"
+        "web-utility": "^1.8.0"
     },
     "devDependencies": {
         "@types/core-js": "^2.5.3",
-        "@types/jest": "^26.0.9",
+        "@types/jest": "^26.0.10",
         "@types/jsdom": "^16.2.3",
-        "@typescript-eslint/parser": "^3.8.0",
-        "eslint": "^7.6.0",
+        "@typescript-eslint/parser": "^3.10.1",
+        "eslint": "^7.7.0",
         "eslint-config-prettier": "^6.11.0",
         "eslint-plugin-prettier": "^3.1.4",
         "husky": "^4.2.5",
-        "jest": "^26.3.0",
-        "lint-staged": "^10.2.11",
+        "jest": "^26.4.2",
+        "lint-staged": "^10.2.13",
         "open-cli": "^6.0.1",
         "parcel-bundler": "^1.12.4",
-        "prettier": "^2.0.5",
+        "prettier": "^2.1.1",
         "snabbdom": "^1.0.1",
-        "ts-jest": "^26.1.4",
+        "ts-jest": "^26.3.0",
         "typedoc": "^0.18.0",
-        "typescript": "^3.9.7",
-        "web-utility": "^1.7.0"
+        "typescript": "^4.0.2",
+        "web-utility": "^1.8.0"
     },
     "scripts": {
         "lint": "lint-staged",

source/WebCell.tsx

@@ -9,10 +9,8 @@ import {
 import { ComponentMeta, watch, DOMEventDelegater } from './decorator';
 import { VNodeChildElement, VNode, createCell, render } from './renderer';
 
-export interface WebCellComponent<
-    P extends WebCellProps = WebCellProps,
-    S = {}
-> extends HTMLElement {
+export interface WebCellComponent<P extends WebCellProps = WebCellProps, S = {}>
+    extends HTMLElement {
     /**
      * Called every time the element is inserted into the DOM
      */
@@ -144,10 +142,10 @@ export function mixin<P = WebCellProps, S = {}>(
             this.cache = {} as Partial<S>;
 
             this.vTree = render(
-                <Fragment>
+                <>
                     {this.CSS}
                     {this.render(this.props, this.state)}
-                </Fragment>,
+                </>,
                 this.root,
                 this.vTree
             );

source/utility/vDOM.ts

@@ -1,5 +1,6 @@
 import { HTMLProps } from 'web-utility/source/DOM-type';
 import { VNodeChildElement } from 'snabbdom/src/package/h';
+import { WebCellComponent } from '../WebCell';
 
 export interface WebCellData extends HTMLProps {
     key?: string | number;
@@ -23,9 +24,7 @@ declare global {
         interface ElementChildrenAttribute {
             defaultSlot: VNodeChildElement[];
         }
-        interface ElementClass {
-            render: (props: WebCellProps, state: any) => WebCellElement;
-        }
+        interface ElementClass extends WebCellComponent<any, any> {}
     }
 }
 

test/renderer.spec.tsx

@@ -46,7 +46,7 @@ describe('Renderer', () => {
 
     it('should render VDOM to Markup', () => {
         const source = renderToStaticMarkup(
-            <Fragment>
+            <>
                 <div
                     className="test"
                     style={{ color: 'red', opacity: 0.5 }}
@@ -57,7 +57,7 @@ describe('Renderer', () => {
                     <span>example</span>
                 </div>
                 sample
-            </Fragment>
+            </>
         );
 
         expect(source).toBe(

tsconfig.json

@@ -13,6 +13,7 @@
         "experimentalDecorators": true,
         "jsx": "react",
         "jsxFactory": "createCell",
+        "jsxFragmentFactory": "Fragment",
         "lib": ["ES2019", "DOM"]
     },
     "include": ["./source/**/*"],