[optimize] WebField's props & state

TechQuery · TechQuery · commit 5abece5cf2dc · 2020-12-24T03:57:36.000+08:00
[refactor] replace Travis CI with GitHub Actions
[add] GitHub Sponsor configuration
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+custom:
+    - https://paypal.me/TechQuery
+    - https://tech-query.me/image/TechQuery-Alipay.jpg
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,25 @@
+name: CI & CD
+on:
+    push:
+        branches:
+            - v2
+jobs:
+    Build-and-Deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - name: Use Node.js
+              uses: actions/setup-node@v2-beta
+              with:
+                  node-version: '14'
+            - name: Install & build
+              run: |
+                  npm install
+                  npm run build
+            - name: Deploy
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  publish_dir: ./docs
+                  personal_token: ${{ secrets.GITHUB_TOKEN }}
+                  force_orphan: true
diff --git a/.npmignore b/.npmignore
@@ -3,6 +3,6 @@ test/
 .cache/
 Contributing.md
 docs/
-.travis.yml
+.github/
 .vscode/
 MobX/
diff --git a/.travis.yml b/.travis.yml
diff --git a/MobX/package.json b/MobX/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mobx-web-cell",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "MobX adaptor for WebCell v2",
@@ -24,7 +24,7 @@
     },
     "dependencies": {
         "mobx": ">4.0.0 <6.0.0",
-        "web-cell": "^2.2.0"
+        "web-cell": "^2.3.0-beta.4"
     },
     "devDependencies": {
         "@types/jest": "^26.0.19",
diff --git a/ReadMe.md b/ReadMe.md
@@ -213,6 +213,7 @@ We recommend these libraries to use with WebCell:
 
 ## Roadmap
 
+-   [ ] [Extend **Build-in Elements** with Virtual DOM](https://github.com/snabbdom/snabbdom/pull/829)
 -   [ ] [Server-side Render](https://web.dev/declarative-shadow-dom/)
 
 Go to [contribute][21]!
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "2.3.0-beta.1",
+    "version": "2.3.0-beta.4",
     "description": "Web Components engine based on JSX & TypeScript",
     "keywords": [
         "web",
@@ -23,7 +23,7 @@
     "source": "source/index.ts",
     "types": "dist/index.d.ts",
     "dependencies": {
-        "web-utility": "^2.1.1"
+        "web-utility": "^2.2.1"
     },
     "peerDependencies": {
         "@webcomponents/webcomponentsjs": "^2.5.0",
@@ -34,10 +34,10 @@
         "@types/core-js": "^2.5.4",
         "@types/jest": "^26.0.19",
         "@types/jsdom": "^16.2.5",
-        "@typescript-eslint/parser": "^4.10.0",
+        "@typescript-eslint/parser": "^4.11.0",
         "element-internals-polyfill": "0.1.1",
-        "eslint": "^7.15.0",
-        "eslint-config-prettier": "^7.0.0",
+        "eslint": "^7.16.0",
+        "eslint-config-prettier": "^7.1.0",
         "eslint-plugin-prettier": "^3.3.0",
         "husky": "^4.3.6",
         "jest": "^26.6.3",
diff --git a/source/WebCell.tsx b/source/WebCell.tsx
@@ -17,6 +17,7 @@ export type WebCellFunction<P extends WebCellProps = WebCellProps> = (
 
 export interface WebCellComponent<P extends WebCellProps = WebCellProps, S = {}>
     extends CustomElement {
+    root: DocumentFragment | Element;
     update(): void;
     props: P;
     setProps(data: Partial<P>): Promise<any>;
@@ -54,7 +55,7 @@ export function mixin<P extends WebCellProps = WebCellProps, S = {}>(
         static attributes: string[] = [];
         static eventDelegaters: DOMEventDelegater[] = [];
 
-        private root: DocumentFragment | Element;
+        readonly root: DocumentFragment | Element;
         private CSS?: VNode;
         private vTree: WebCellElement;
         private tick?: Promise<void>;
diff --git a/source/WebField.ts b/source/WebField.ts
@@ -1,53 +1,83 @@
 import type {} from 'element-internals-polyfill';
+import { ElementInternals } from 'element-internals-polyfill/dist/element-internals';
 import { Constructor } from 'web-utility/source/data';
 import { BaseFieldProps, CustomFormElement } from 'web-utility/source/DOM-type';
 
 import { WebCellProps } from './utility';
 import { mixin, WebCellComponent } from './WebCell';
-import { watch, attribute } from './decorator';
+import { attribute } from './decorator';
 
 export interface WebFieldProps extends BaseFieldProps, WebCellProps {}
 
-export type WebFieldComponent<
+export interface WebFieldState {
+    disabled?: boolean;
+}
+
+export interface WebFieldComponent<
     P extends WebFieldProps = WebFieldProps,
     S = {}
-> = CustomFormElement & WebCellComponent<P, S>;
+> extends CustomFormElement,
+        WebCellComponent<P, S> {
+    internals: ElementInternals;
+}
 
 export type WebFieldClass<
     P extends WebFieldProps = WebFieldProps,
     S = {}
 > = Constructor<WebFieldComponent<P, S>>;
 
-export function mixinForm<P extends WebFieldProps = WebFieldProps, S = {}>(
-    superClass: Constructor<HTMLElement> = HTMLElement
-): WebFieldClass<P, S> {
-    class WebField
-        extends mixin<P, S>(superClass)
-        implements WebFieldComponent<P, S> {
+export function mixinForm<
+    P extends WebFieldProps = WebFieldProps,
+    S extends WebFieldState = WebFieldState
+>(): WebFieldClass<P, S> {
+    class WebField extends mixin<P, S>() implements WebFieldComponent<P, S> {
         static formAssociated = true;
 
-        @attribute
-        @watch
-        name: string;
+        readonly internals = this.attachInternals();
 
-        @watch
-        value: string;
+        formDisabledCallback(disabled: boolean) {
+            this.setState({ disabled } as Partial<S>);
+        }
 
         @attribute
-        @watch
-        required: boolean;
+        set name(name: string) {
+            this.setProps({ name } as Partial<P>);
+        }
+        get name() {
+            return this.props.name;
+        }
+
+        set value(value: string) {
+            this.setProps({ value } as Partial<P>);
+            this.internals.setFormValue(value);
+        }
+        get value() {
+            return this.props.value;
+        }
 
         @attribute
-        @watch
-        disabled: boolean;
+        set required(required: boolean) {
+            this.setProps({ required } as Partial<P>);
+        }
+        get required() {
+            return this.props.required;
+        }
 
         @attribute
-        @watch
-        placeholder: string;
+        set disabled(disabled: boolean) {
+            this.setProps({ disabled } as Partial<P>);
+        }
+        get disabled() {
+            return this.props.disabled;
+        }
 
         @attribute
-        @watch
-        autofocus: boolean;
+        set autofocus(autofocus: boolean) {
+            this.setProps({ autofocus } as Partial<P>);
+        }
+        get autofocus() {
+            return this.props.autofocus;
+        }
 
         set defaultValue(raw: string) {
             this.setAttribute('value', raw);
@@ -59,8 +89,6 @@ export function mixinForm<P extends WebFieldProps = WebFieldProps, S = {}>(
             return this.getAttribute('value');
         }
 
-        protected internals = this.attachInternals();
-
         get form() {
             return this.internals.form;
         }
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,7 +6,6 @@
         "declaration": true,
         "allowJs": true,
         "noImplicitReturns": true,
-        "noImplicitAny": true,
         "downlevelIteration": true,
         "module": "ES6",
         "moduleResolution": "Node",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+custom:`
	`2`	`+ - https://paypal.me/TechQuery`
	`3`	`+ - https://tech-query.me/image/TechQuery-Alipay.jpg`