Skip to content

Commit 6dbc33d

Browse files
TechQueryTechQuery
authored
optimize DOM types & upgrade to TypeScript 4.2 (#2)
1 parent 5abece5 commit 6dbc33d

File tree

17 files changed

+129
-70
lines changed

17 files changed

+129
-70
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ jobs:
1010
- name: Checkout
1111
uses: actions/checkout@v2
1212
- name: Use Node.js
13-
uses: actions/setup-node@v2-beta
13+
uses: actions/setup-node@v2
1414
with:
1515
node-version: '14'
1616
- name: Install & build

‎MobX/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobx-web-cell",
3-
"version": "0.3.4",
3+
"version": "0.3.5",
44
"license": "LGPL-3.0",
55
"author": "[email protected]",
66
"description": "MobX adaptor for WebCell v2",
@@ -24,15 +24,15 @@
2424
},
2525
"dependencies": {
2626
"mobx": ">4.0.0 <6.0.0",
27-
"web-cell": "^2.3.0-beta.4"
27+
"web-cell": "^2.3.0"
2828
},
2929
"devDependencies": {
30-
"@types/jest": "^26.0.19",
30+
"@types/jest": "^26.0.20",
3131
"@webcomponents/webcomponentsjs": "^2.5.0",
3232
"jest": "^26.6.3",
33-
"microbundle": "^0.12.4",
34-
"ts-jest": "^26.4.4",
35-
"typescript": "^4.1.3"
33+
"microbundle": "^0.13.0",
34+
"ts-jest": "^26.5.2",
35+
"typescript": "^4.2.2"
3636
},
3737
"jest": {
3838
"preset": "ts-jest"

‎MobX/source/index.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { WebCellProps, WebCellClass, VNode, patch } from 'web-cell';
1+
import {
2+
WebCellProps,
3+
WebCellClass,
4+
WebCellComponent,
5+
VNode,
6+
patch
7+
} from 'web-cell';
28
import { autorun } from 'mobx';
39

410
export type FunctionComponent<P extends WebCellProps = WebCellProps> = (
@@ -17,10 +23,10 @@ function wrapFunction<P>(func: FunctionComponent<P>) {
1723
}
1824

1925
function wrapClass<P, S>(Class: WebCellClass<P, S>) {
20-
const { update } = Class.prototype;
26+
const { update } = Class.prototype as WebCellComponent<P, S>;
2127

22-
Class.prototype.update = function () {
23-
autorun(() => update.call(this));
28+
Class.prototype.update = function (this: WebCellComponent<P, S>) {
29+
autorun(() => this.isConnected && update.call(this));
2430
};
2531
}
2632

‎ReadMe.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[Web Components][1] engine based on [JSX][2] & [TypeScript][3]
66

77
[![NPM Dependency](https://david-dm.org/EasyWebApp/WebCell.svg)][4]
8-
[![Build Status](https://travis-ci.com/EasyWebApp/WebCell.svg?branch=v2)][5]
8+
[![CI & CD](https://github.com/EasyWebApp/WebCell/workflows/CI%20&%20CD/badge.svg)][5]
99

1010
[![Anti 996 license](https://img.shields.io/badge/license-Anti%20996-blue.svg)][6]
1111
[![jaywcjlove/sb](https://jaywcjlove.github.io/sb/ico/awesome.svg)][7]
@@ -200,7 +200,7 @@ We recommend these libraries to use with WebCell:
200200
- **UI components**
201201

202202
- [BootCell][14] (based on **BootStrap v4**)
203-
- [Material Cell][15] (based on **Material Design** & **BootStrap v4**)
203+
- [Material Cell][15] (based on **Material Design**)
204204
- [GitHub Web Widget][16]
205205

206206
- **HTTP request**: [KoAJAX][17] (based on **Koa**-like middlewares)
@@ -222,7 +222,7 @@ Go to [contribute][21]!
222222
[2]: https://facebook.github.io/jsx/
223223
[3]: https://www.typescriptlang.org
224224
[4]: https://david-dm.org/EasyWebApp/WebCell
225-
[5]: https://travis-ci.com/EasyWebApp/WebCell
225+
[5]: https://github.com/EasyWebApp/WebCell/actions
226226
[6]: https://github.com/996icu/996.ICU/blob/master/LICENSE
227227
[7]: https://github.com/jaywcjlove/awesome-uikit
228228
[8]: https://tech-query.me/programming/web-components-practise/slide.html
@@ -232,7 +232,7 @@ Go to [contribute][21]!
232232
[12]: https://github.com/EasyWebApp/WebCell/blob/v2/MobX
233233
[13]: https://web-cell.dev/cell-router/
234234
[14]: https://bootstrap.web-cell.dev/
235-
[15]: https://web-cell.dev/material-cell/
235+
[15]: https://material.web-cell.dev/
236236
[16]: https://tech-query.me/GitHub-Web-Widget/
237237
[17]: https://web-cell.dev/KoAJAX/
238238
[18]: https://web-cell.dev/web-utility/

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "web-cell",
3-
"version": "2.3.0-beta.4",
3+
"version": "2.3.0",
44
"description": "Web Components engine based on JSX & TypeScript",
55
"keywords": [
66
"web",
@@ -23,41 +23,41 @@
2323
"source": "source/index.ts",
2424
"types": "dist/index.d.ts",
2525
"dependencies": {
26-
"web-utility": "^2.2.1"
26+
"web-utility": "^2.4.4"
2727
},
2828
"peerDependencies": {
2929
"@webcomponents/webcomponentsjs": "^2.5.0",
30-
"core-js": "^3.8.1",
30+
"core-js": "^3.9.0",
3131
"jsdom": "^16.4.0"
3232
},
3333
"devDependencies": {
3434
"@types/core-js": "^2.5.4",
35-
"@types/jest": "^26.0.19",
36-
"@types/jsdom": "^16.2.5",
37-
"@typescript-eslint/parser": "^4.11.0",
38-
"element-internals-polyfill": "0.1.1",
39-
"eslint": "^7.16.0",
40-
"eslint-config-prettier": "^7.1.0",
41-
"eslint-plugin-prettier": "^3.3.0",
42-
"husky": "^4.3.6",
35+
"@types/jest": "^26.0.20",
36+
"@types/jsdom": "^16.2.6",
37+
"@typescript-eslint/parser": "^4.15.2",
38+
"element-internals-polyfill": "0.1.9",
39+
"eslint": "^7.20.0",
40+
"eslint-config-prettier": "^8.0.0",
41+
"eslint-plugin-prettier": "^3.3.1",
42+
"husky": "^4.3.8",
4343
"jest": "^26.6.3",
44-
"lint-staged": "^10.5.3",
44+
"lint-staged": "^10.5.4",
4545
"open-cli": "^6.0.1",
4646
"parcel-bundler": "^1.12.4",
4747
"prettier": "^2.2.1",
4848
"snabbdom": "^2.1.0",
49-
"ts-jest": "^26.4.4",
50-
"typedoc": "^0.19.2",
51-
"typescript": "^4.1.3"
49+
"ts-jest": "^26.5.2",
50+
"typedoc": "^0.20.28",
51+
"typescript": "^4.2.2"
5252
},
5353
"scripts": {
5454
"lint": "lint-staged",
5555
"test": "npm run lint && jest",
5656
"pack-type": "tsc && rm -f dist/*.{js,map} dist/**/*.{js,map}",
5757
"pack-dist": "parcel build source/index.ts --global WebCell",
58-
"pack-docs": "typedoc source/",
58+
"pack-docs": "rm -rf docs/ && typedoc source/",
5959
"build": "rm -rf dist/ && npm run pack-type && npm run pack-dist && npm run pack-docs",
60-
"help": "npm run pack-docs && open-cli docs/index.html",
60+
"start": "npm run pack-docs && open-cli docs/index.html",
6161
"prepublishOnly": "npm test && npm run build"
6262
},
6363
"lint-staged": {

‎source/WebCell.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Constructor } from 'web-utility/source/data';
2-
import { CustomElement } from 'web-utility/source/DOM-type';
1+
import type { Constructor } from 'web-utility';
2+
import type { CustomElement } from 'web-utility';
33
import {
44
WebCellProps,
55
WebCellElement,
@@ -8,7 +8,7 @@ import {
88
toHyphenCase,
99
toCamelCase
1010
} from './utility';
11-
import { ComponentMeta, watch, DOMEventDelegater } from './decorator';
11+
import { ComponentMeta, DOMEventDelegater, watch } from './decorator';
1212
import { VNodeChildElement, VNode, createCell, render } from './renderer';
1313

1414
export type WebCellFunction<P extends WebCellProps = WebCellProps> = (
@@ -48,8 +48,8 @@ export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
4848
superClass: Constructor<HTMLElement> = HTMLElement
4949
): WebCellClass<P, S> {
5050
class WebCell extends superClass implements WebCellComponent<P, S> {
51-
static tagName: string;
52-
static extends?: string;
51+
static tagName: ComponentMeta['tagName'];
52+
static extends?: ComponentMeta['extends'];
5353
static renderTarget: ComponentMeta['renderTarget'] = 'shadowRoot';
5454
static style?: ComponentMeta['style'];
5555
static attributes: string[] = [];
@@ -149,7 +149,7 @@ export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
149149
));
150150
}
151151

152-
private syncPropAttr(data: Partial<P>, list: string[]) {
152+
private syncPropAttr(data: Partial<WebCellProps>, list: string[]) {
153153
for (const key in data) {
154154
const name = toHyphenCase(key);
155155

‎source/WebField.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type {} from 'element-internals-polyfill';
2-
import { ElementInternals } from 'element-internals-polyfill/dist/element-internals';
3-
import { Constructor } from 'web-utility/source/data';
4-
import { BaseFieldProps, CustomFormElement } from 'web-utility/source/DOM-type';
2+
import type { ElementInternals } from 'element-internals-polyfill/dist/element-internals';
3+
import type { Constructor } from 'web-utility';
4+
import type { BaseFieldProps, CustomFormElement } from 'web-utility';
55

66
import { WebCellProps } from './utility';
77
import { mixin, WebCellComponent } from './WebCell';

‎source/decorator.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
import { WebCellClass, WebCellComponent } from './WebCell';
88

99
export interface ComponentMeta {
10-
tagName: string;
11-
extends?: string;
10+
tagName: `${string}-${string}`;
11+
extends?: keyof HTMLElementTagNameMap;
1212
renderTarget?: 'shadowRoot' | 'children';
1313
style?: string | CSSObject;
1414
}
@@ -56,12 +56,12 @@ export function attribute({ constructor }: Object, key: string) {
5656
}
5757

5858
export interface DOMEventDelegater {
59-
type: string;
59+
type: keyof HTMLElementEventMap;
6060
selector: string;
6161
method: string;
6262
}
6363

64-
export function on(type: string, selector: string) {
64+
export function on(type: DOMEventDelegater['type'], selector: string) {
6565
return <T extends DelegateEventHandler>(
6666
{ constructor }: Object,
6767
method: string,

‎source/renderer.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function render(
5858
return nodes;
5959
}
6060

61-
function splitProps(raw: any) {
61+
function splitProps(raw: Record<string, any>) {
6262
const [attrs, dataset, on] = Object.entries(raw).reduce(
6363
([attrs, dataset, on], [key, value]) => {
6464
const data = /^data-(.+)/.exec(key);
@@ -67,7 +67,8 @@ function splitProps(raw: any) {
6767
dataset[
6868
data[1].replace(/-\w/g, char => char[1].toUpperCase())
6969
] = value;
70-
else if (/^on\w+/.test(key)) on[key.slice(2).toLowerCase()] = value;
70+
else if (/^on\w+/.test(key) && value instanceof Function)
71+
on[key.slice(2).toLowerCase()] = value;
7172
else attrs[key] = value;
7273

7374
return [attrs, dataset, on];
@@ -78,7 +79,7 @@ function splitProps(raw: any) {
7879
return { attrs, dataset, on };
7980
}
8081

81-
function splitAttrs(tagName: string, raw: any) {
82+
function splitAttrs(tagName: string, raw: Record<string, any>) {
8283
const prototype = tagName.includes('-')
8384
? (customElements.get(tagName) || '').prototype
8485
: Object.getPrototypeOf(templateOf(tagName));

‎source/utility/DOM.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { HTMLProps } from 'web-utility/source/DOM-type';
1+
import type { CSSStyles } from 'web-utility';
22
import { toHyphenCase } from './data';
33

4-
export type CSSRule = Record<string, HTMLProps['style']>;
4+
export type CSSRule = Record<string, CSSStyles>;
55
export type CSSObject = CSSRule | Record<string, CSSRule>;
66

77
export function stringifyCSS(
8-
data: HTMLProps['style'] | CSSObject,
8+
data: CSSStyles | CSSObject,
99
depth = 0,
1010
indent = ' '
1111
): string {

0 commit comments

Comments
 (0)