Skip to content

Commit 08559d7

Browse files
TechQueryTechQuery
committed
[fix] Type bug of mixinForm()
[optimize] upgrade Upstream packages
1 parent 92123fb commit 08559d7

8 files changed

Lines changed: 103 additions & 126 deletions

File tree

‎MobX/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobx-web-cell",
3-
"version": "0.3.2",
3+
"version": "0.3.3",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"description": "MobX adaptor for WebCell v2",
@@ -23,16 +23,16 @@
2323
"prepublishOnly": "npm test && rm -rf .rts2_cache_* dist/ && npm run build"
2424
},
2525
"dependencies": {
26-
"mobx": "^5.15.6",
26+
"mobx": ">4.0.0 <6.0.0",
2727
"web-cell": "^2.2.0"
2828
},
2929
"devDependencies": {
30-
"@types/jest": "^26.0.10",
31-
"@webcomponents/webcomponentsjs": "^2.4.4",
32-
"jest": "^26.4.2",
33-
"microbundle": "^0.12.3",
34-
"ts-jest": "^26.3.0",
35-
"typescript": "^4.0.2"
30+
"@types/jest": "^26.0.19",
31+
"@webcomponents/webcomponentsjs": "^2.5.0",
32+
"jest": "^26.6.3",
33+
"microbundle": "^0.12.4",
34+
"ts-jest": "^26.4.4",
35+
"typescript": "^4.1.3"
3636
},
3737
"jest": {
3838
"preset": "ts-jest"

‎ReadMe.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ npm install parcel-bundler -D
5151
crossorigin
5252
src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries"
5353
></script>
54-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.4/webcomponents-bundle.min.js"></script>
55-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.4/custom-elements-es5-adapter.js"></script>
56-
<script src="https://cdn.jsdelivr.net/npm/element-internals-polyfill@0.0.23/dist/index.min.js"></script>
54+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.min.js"></script>
55+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/custom-elements-es5-adapter.js"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/element-internals-polyfill@0.1.1/dist/index.min.js"></script>
5757

5858
<script src="source/SubTag.tsx"></script>
5959
<script src="source/TestTag.tsx"></script>
@@ -161,25 +161,25 @@ export class TestTag extends mixin<Props, State>() {
161161

162162
## Life Cycle hooks
163163

164-
1. [`connectedCallback`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#connectedcallback)
164+
1. [`connectedCallback`](https://web-cell.dev/web-utility/interfaces/customelement.html#connectedcallback)
165165

166-
2. [`disconnectedCallback`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#disconnectedcallback)
166+
2. [`disconnectedCallback`](https://web-cell.dev/web-utility/interfaces/customelement.html#disconnectedcallback)
167167

168-
3. [`attributeChangedCallback`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#attributechangedcallback)
168+
3. [`attributeChangedCallback`](https://web-cell.dev/web-utility/interfaces/customelement.html#attributechangedcallback)
169169

170-
4. [`adoptedCallback`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#adoptedcallback)
170+
4. [`adoptedCallback`](https://web-cell.dev/web-utility/interfaces/customelement.html#adoptedcallback)
171171

172172
5. [`shouldUpdate`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#shouldupdate)
173173

174174
6. [`updatedCallback`](https://web-cell.dev/WebCell/interfaces/webcellcomponent.html#updatedcallback)
175175

176-
7. [`formAssociatedCallback`](https://web-cell.dev/WebCell/interfaces/webfieldcomponent.html#formassociatedcallback)
176+
7. [`formAssociatedCallback`](https://web-cell.dev/web-utility/interfaces/customformelement.html#formassociatedcallback)
177177

178-
8. [`formDisabledCallback`](https://web-cell.dev/WebCell/interfaces/webfieldcomponent.html#formdisabledcallback)
178+
8. [`formDisabledCallback`](https://web-cell.dev/web-utility/interfaces/customformelement.html#formdisabledcallback)
179179

180-
9. [`formResetCallback`](https://web-cell.dev/WebCell/interfaces/webfieldcomponent.html#formresetcallback)
180+
9. [`formResetCallback`](https://web-cell.dev/web-utility/interfaces/customformelement.html#formresetcallback)
181181

182-
10. [`formStateRestoreCallback`](https://web-cell.dev/WebCell/interfaces/webfieldcomponent.html#formstaterestorecallback)
182+
10. [`formStateRestoreCallback`](https://web-cell.dev/web-utility/interfaces/customformelement.html#formstaterestorecallback)
183183

184184
## Scaffolds
185185

@@ -195,7 +195,7 @@ We recommend these libraries to use with WebCell:
195195

196196
- **State management**: [MobX][12] (also powered by **TypeScript** & **Decorator**)
197197

198-
- **Router**: [Cell Router][13] (based on **MobX**)
198+
- **Router**: [Cell Router][13]
199199

200200
- **UI components**
201201

@@ -213,7 +213,7 @@ We recommend these libraries to use with WebCell:
213213

214214
## Roadmap
215215

216-
- [ ] Server-side Render
216+
- [ ] [Server-side Render](https://web.dev/declarative-shadow-dom/)
217217

218218
Go to [contribute][21]!
219219

‎package.json‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "web-cell",
3-
"version": "2.3.0-beta.0",
3+
"version": "2.3.0-beta.1",
44
"description": "Web Components engine based on JSX & TypeScript",
55
"keywords": [
66
"web",
@@ -22,32 +22,33 @@
2222
"main": "dist/index.js",
2323
"source": "source/index.ts",
2424
"types": "dist/index.d.ts",
25+
"dependencies": {
26+
"web-utility": "^2.1.1"
27+
},
2528
"peerDependencies": {
26-
"@webcomponents/webcomponentsjs": "^2.4.4",
27-
"core-js": "^3.6.5",
28-
"jsdom": "^16.4.0",
29-
"web-utility": "^1.8.0"
29+
"@webcomponents/webcomponentsjs": "^2.5.0",
30+
"core-js": "^3.8.1",
31+
"jsdom": "^16.4.0"
3032
},
3133
"devDependencies": {
3234
"@types/core-js": "^2.5.4",
33-
"@types/jest": "^26.0.14",
34-
"@types/jsdom": "^16.2.4",
35-
"@typescript-eslint/parser": "^4.4.1",
36-
"element-internals-polyfill": "0.0.23",
37-
"eslint": "^7.11.0",
38-
"eslint-config-prettier": "^6.12.0",
39-
"eslint-plugin-prettier": "^3.1.4",
40-
"husky": "^4.3.0",
41-
"jest": "^26.5.3",
42-
"lint-staged": "^10.4.0",
35+
"@types/jest": "^26.0.19",
36+
"@types/jsdom": "^16.2.5",
37+
"@typescript-eslint/parser": "^4.10.0",
38+
"element-internals-polyfill": "0.1.1",
39+
"eslint": "^7.15.0",
40+
"eslint-config-prettier": "^7.0.0",
41+
"eslint-plugin-prettier": "^3.3.0",
42+
"husky": "^4.3.6",
43+
"jest": "^26.6.3",
44+
"lint-staged": "^10.5.3",
4345
"open-cli": "^6.0.1",
4446
"parcel-bundler": "^1.12.4",
45-
"prettier": "^2.1.2",
47+
"prettier": "^2.2.1",
4648
"snabbdom": "^2.1.0",
47-
"ts-jest": "^26.4.1",
49+
"ts-jest": "^26.4.4",
4850
"typedoc": "^0.19.2",
49-
"typescript": "^4.0.3",
50-
"web-utility": "^1.8.2"
51+
"typescript": "^4.1.3"
5152
},
5253
"scripts": {
5354
"lint": "lint-staged",

‎source/WebCell.tsx‎

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Constructor } from 'web-utility/source/data';
2+
import { CustomElement } from 'web-utility/source/DOM-type';
13
import {
24
WebCellProps,
35
WebCellElement,
@@ -14,31 +16,7 @@ export type WebCellFunction<P extends WebCellProps = WebCellProps> = (
1416
) => WebCellElement;
1517

1618
export interface WebCellComponent<P extends WebCellProps = WebCellProps, S = {}>
17-
extends HTMLElement {
18-
/**
19-
* Called every time the element is inserted into the DOM
20-
*/
21-
connectedCallback(): void;
22-
/**
23-
* Called every time the element is removed from the DOM.
24-
*/
25-
disconnectedCallback?(): void;
26-
/**
27-
* Called when an observed attribute has been added, removed, updated, or replaced.
28-
* Also called for initial values when an element is created by the parser, or upgraded.
29-
*
30-
* Note: only attributes listed in static `observedAttributes` property will receive this callback.
31-
*/
32-
attributeChangedCallback?(
33-
name: string,
34-
oldValue: string,
35-
newValue: string
36-
): void;
37-
/**
38-
* The custom element has been moved into a new document
39-
* (e.g. someone called `document.adoptNode(el)`).
40-
*/
41-
adoptedCallback?(): void;
19+
extends CustomElement {
4220
update(): void;
4321
props: P;
4422
setProps(data: Partial<P>): Promise<any>;
@@ -59,14 +37,14 @@ export interface WebCellComponent<P extends WebCellProps = WebCellProps, S = {}>
5937
}
6038

6139
export interface WebCellClass<P extends WebCellProps = WebCellProps, S = {}>
62-
extends Partial<ComponentMeta> {
63-
new (options?: ShadowRootInit): WebCellComponent<P, S>;
40+
extends Partial<ComponentMeta>,
41+
Constructor<WebCellComponent<P, S>> {
6442
attributes?: string[];
6543
eventDelegaters?: DOMEventDelegater[];
6644
}
6745

6846
export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
69-
superClass = HTMLElement
47+
superClass: Constructor<HTMLElement> = HTMLElement
7048
): WebCellClass<P, S> {
7149
class WebCell extends superClass implements WebCellComponent<P, S> {
7250
static tagName: string;
@@ -170,7 +148,7 @@ export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
170148
));
171149
}
172150

173-
private syncPropAttr(data: { [key in keyof P]?: any }, list: string[]) {
151+
private syncPropAttr(data: Partial<P>, list: string[]) {
174152
for (const key in data) {
175153
const name = toHyphenCase(key);
176154

@@ -219,10 +197,7 @@ export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
219197
} catch (error) {
220198
//
221199
}
222-
223-
this.setProps({ [toCamelCase(name)]: data ?? value } as {
224-
[key in keyof P]?: any;
225-
});
200+
this.setProps({ [toCamelCase(name)]: data ?? value } as Partial<P>);
226201
}
227202

228203
emit(

‎source/WebField.ts‎

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

45
import { WebCellProps } from './utility';
5-
import { mixin, WebCellClass, WebCellComponent } from './WebCell';
6+
import { mixin, WebCellComponent } from './WebCell';
67
import { watch, attribute } from './decorator';
78

89
export interface WebFieldProps extends BaseFieldProps, WebCellProps {}
910

10-
export interface WebFieldComponent<
11+
export type WebFieldComponent<
1112
P extends WebFieldProps = WebFieldProps,
1213
S = {}
13-
> extends WebCellComponent<P, S> {
14-
/**
15-
* Called when the browser associates the element with a form element,
16-
* or disassociates the element from a form element.
17-
*/
18-
formAssociatedCallback?(form: HTMLFormElement): void;
19-
/**
20-
* Called after the disabled state of the element changes,
21-
* either because the disabled attribute of this element was added or removed;
22-
* or because the disabled state changed on a `<fieldset>` that's an ancestor of this element.
23-
*
24-
* @param disabled This parameter represents the new disabled state of the element.
25-
*/
26-
formDisabledCallback?(disabled: boolean): void;
27-
/**
28-
* Called after the form is reset.
29-
* The element should reset itself to some kind of default state.
30-
*/
31-
formResetCallback?(): void;
32-
/**
33-
* Called in one of two circumstances:
34-
* - When the browser restores the state of the element (for example, after a navigation, or when the browser restarts). The `mode` argument is `"restore"` in this case.
35-
* - When the browser's input-assist features such as form autofilling sets a value. The `mode` argument is `"autocomplete"` in this case.
36-
*
37-
* @param state The type of this argument depends on how the `this.internals.setFormValue()` method was called.
38-
* @param mode
39-
*/
40-
formStateRestoreCallback?(
41-
state: string | File | FormData,
42-
mode: 'restore' | 'autocomplete'
43-
): void;
44-
}
14+
> = CustomFormElement & WebCellComponent<P, S>;
4515

46-
export interface WebFieldClass<P extends WebFieldProps = WebFieldProps, S = {}>
47-
extends WebCellClass<P, S> {
48-
new (options?: ShadowRootInit): WebFieldComponent<P, S>;
49-
}
16+
export type WebFieldClass<
17+
P extends WebFieldProps = WebFieldProps,
18+
S = {}
19+
> = Constructor<WebFieldComponent<P, S>>;
5020

5121
export function mixinForm<P extends WebFieldProps = WebFieldProps, S = {}>(
52-
superClass = HTMLElement
22+
superClass: Constructor<HTMLElement> = HTMLElement
5323
): WebFieldClass<P, S> {
5424
class WebField
5525
extends mixin<P, S>(superClass)

‎source/utility/event.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ export function delegate<T>(
2323
};
2424
}
2525

26-
export const documentReady = new Promise(resolve => {
27-
document.addEventListener('DOMContentLoaded', resolve);
26+
export const documentReady = new Promise<void>(resolve => {
27+
const done = () => resolve();
2828

29-
self.addEventListener('load', resolve);
29+
document.addEventListener('DOMContentLoaded', done);
30+
31+
self.addEventListener('load', () => done);
3032

3133
setTimeout(function check() {
3234
document.readyState === 'complete' ? resolve() : setTimeout(check);

‎test/WebField.spec.tsx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,52 @@
11
import 'element-internals-polyfill';
22

3-
import { render, createCell } from '../source';
3+
import { render, createCell } from '../source/renderer';
44
import { component } from '../source/decorator';
5-
import { mixinForm } from '../source/WebField';
5+
import { WebFieldProps, mixinForm } from '../source/WebField';
6+
7+
const delay = (second: number) =>
8+
new Promise(resolve => setTimeout(resolve, second * 1000));
69

710
describe('Field Class & Decorator', () => {
8-
it('should define a Custom Field Element', () => {
9-
@component({
10-
tagName: 'test-input'
11-
})
12-
class TestInput extends mixinForm<{ a?: number }, { b: string }>() {
13-
state = { b: '' };
14-
}
11+
@component({
12+
tagName: 'test-input'
13+
})
14+
class TestInput extends mixinForm<
15+
{ a?: number } & WebFieldProps,
16+
{ b: string }
17+
>() {
18+
state = { b: '' };
19+
}
1520

21+
it('should define a Custom Field Element', () => {
1622
render(<TestInput />);
1723

1824
expect(self.customElements.get('test-input')).toBe(TestInput);
1925
expect(document.querySelector('test-input').tagName.toLowerCase()).toBe(
2026
'test-input'
2127
);
2228
});
29+
30+
it('should have simple Form properties', async () => {
31+
const input = new TestInput();
32+
33+
input.name = 'test';
34+
await delay(0.05);
35+
expect(input.getAttribute('name')).toBe('test');
36+
37+
input.required = true;
38+
await delay(0.05);
39+
expect(input.hasAttribute('required')).toBeTruthy();
40+
});
41+
42+
it('should have advanced Form properties', () => {
43+
const input = new TestInput();
44+
45+
input.defaultValue = 'example';
46+
expect(input.defaultValue === input.getAttribute('value')).toBeTruthy();
47+
48+
const form = document.createElement('form');
49+
form.append(input);
50+
expect(input.form === form).toBeTruthy();
51+
});
2352
});

‎test/renderer.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe('Renderer', () => {
4949
<>
5050
<div
5151
className="test"
52-
style={{ color: 'red', opacity: 0.5 }}
52+
style={{ color: 'red', opacity: '0.5' }}
5353
data-test="example"
5454
>
5555
test

0 commit comments

Comments
 (0)