[optimize] replace Web Field mixin with Form Field decorator

[fix] JSX props & children types

.npmignore

@@ -1,3 +1,4 @@
+.parcelrc
 .eslintrc.json
 jest.config.ts
 test/

.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}

Migrating.md

@@ -63,8 +63,9 @@ npm install mobx
 On the other hand, [`mobx-web-cell` adapter][6] has been merged into the core package. And cause of replacing **Prototype Overwrite** with **Class Inheritance** to refactor **Class Mixins**, `@observer` decorator should follow strict order to make observation work:
 
 ```diff
++import { JsxProps } from 'dom-renderer';
 import {
-    WebCellProps,
+-   WebCellProps,
     component,
     attribute,
 -   watch,
@@ -76,7 +77,8 @@ import {
 -import { observer } from 'mobx-web-cell';
 +import { observable } from 'mobx';
 
-export interface MyTagProps extends WebCellProps {
+-export interface MyTagProps extends WebCellProps {
++export interface MyTagProps extends JsxProps<HTMLElement> {
     count?: number
 }
 
@@ -183,7 +185,7 @@ import {
 [JSDoc's `@deprecated` hints][7] will lead your way to rename them:
 
 1. `mixin()` => `HTMLElement` & its Sub-classes
-2. `mixinForm()` => `WebField()`
+2. `mixinForm()` => `HTMLElement` & `@formField`
 3. `@watch` => `@observable accessor`
 
 ## Appendix: v3 prototype

ReadMe.md

@@ -45,7 +45,7 @@ Demo & **GitHub template**: https://web-cell.dev/scaffold/
 ```shell
 npm init -y
 npm install dom-renderer mobx web-cell
-npm install parcel @parcel/config-default "@parcel/transformer-typescript-tsc" -D
+npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 ```
 
 #### `package.json`
@@ -102,12 +102,12 @@ npm install parcel @parcel/config-default "@parcel/transformer-typescript-tsc" -
 
 `source/SubTag.tsx`
 
-```jsx
-import { WebCellProps, component } from 'web-cell';
+```tsx
+import { component, FC, PropsWithChildren } from 'web-cell';
 
-export function InlineTag({ children }: WebCellProps) {
-    return <span>{children}</span>;
-}
+export const InlineTag: FC<PropsWithChildren> = ({ children }) => (
+    <span>{children}</span>
+);
 
 @component({
     tagName: 'sub-tag'
@@ -124,12 +124,14 @@ export class SubTag extends HTMLElement {
 `source/TestTag.tsx`
 
 ```tsx
-import { WebCellProps, component, attribute, observer, on } from 'web-cell';
+import { JsxProps } from 'dom-renderer';
 import { observable } from 'mobx';
+import { component, attribute, observer, on } from 'web-cell';
+import { stringifyCSS } from 'web-utility';
 
 import { SubTag } from './SubTag';
 
-export interface TestTagProps extends WebCellProps {
+export interface TestTagProps extends JsxProps<HTMLElement> {
     topic?: string;
 }
 
@@ -152,6 +154,15 @@ export class TestTag extends HTMLElement {
 
     state = new State();
 
+    style = stringifyCSS({
+        '.topic': {
+            color: 'lightblue'
+        },
+        '.topic.active': {
+            color: 'lightpink'
+        }
+    });
+
     onClick = () => (this.topic = 'Example');
 
     @on('click', ':host h1')
@@ -160,21 +171,12 @@ export class TestTag extends HTMLElement {
     }
 
     render() {
-        const { topic } = this,
+        const { style, topic } = this,
             { status } = this.state;
 
         return (
             <>
-                <style>
-                    {stringifyCSS({
-                        '.topic': {
-                            color: 'lightblue'
-                        },
-                        '.topic.active': {
-                            color: 'lightpink'
-                        }
-                    })}
-                </style>
+                <style>{style}</style>
 
                 <h1 title={topic} className={`topic ${status}`}>
                     {topic}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.2",
+    "version": "3.0.0-rc.3",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -27,7 +27,7 @@
     "types": "dist/index.d.ts",
     "dependencies": {
         "@swc/helpers": "^0.5.3",
-        "dom-renderer": "^2.0.2",
+        "dom-renderer": "^2.0.4",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.1.3"
@@ -45,8 +45,8 @@
         "@parcel/transformer-typescript-tsc": "~2.11.0",
         "@parcel/transformer-typescript-types": "~2.11.0",
         "@types/jest": "^29.5.11",
-        "@typescript-eslint/eslint-plugin": "^6.17.0",
-        "@typescript-eslint/parser": "^6.17.0",
+        "@typescript-eslint/eslint-plugin": "^6.18.0",
+        "@typescript-eslint/parser": "^6.18.0",
         "core-js": "^3.35.0",
         "element-internals-polyfill": "^1.3.10",
         "eslint": "^8.56.0",

preview/Clock.tsx

@@ -39,7 +39,7 @@ export class ClassClock extends HTMLElement implements CustomElement {
         clearInterval(this.timer);
     }
 
-    @reaction((that: ClassClock) => that.time)
+    @reaction(({ time }) => time)
     handleReaction(newValue: Date, oldValue: Date, reaction: IReactionPublic) {
         console.log(newValue, oldValue, reaction);
     }

preview/Field.tsx

@@ -0,0 +1,29 @@
+import { HTMLFieldProps } from 'web-utility';
+import { component, formField, observer } from '../source';
+
+@component({
+    tagName: 'test-field',
+    mode: 'open'
+})
+@formField
+@observer
+export class TestField extends HTMLElement {
+    declare props: HTMLFieldProps;
+
+    declare name: string;
+    declare value: string;
+
+    render() {
+        const { name } = this;
+
+        return (
+            <input
+                name={name}
+                // @ts-ignore
+                onChange={({ currentTarget: { value } }) =>
+                    (this.value = value)
+                }
+            />
+        );
+    }
+}