[optimize] replace Web Field mixin with Form Field decorator (#18)

Author: TechQuery

.eslintrc.json

@@ -25,6 +25,7 @@
         "@typescript-eslint/ban-ts-comment": "warn",
         "@typescript-eslint/ban-types": "warn",
         "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-unsafe-declaration-merging": "off",
         "@typescript-eslint/no-namespace": "warn",
         "@typescript-eslint/no-unused-vars": "warn",
         "@typescript-eslint/explicit-module-boundary-types": "off"

.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}

legacy/utility/index.ts

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.2",
+    "version": "3.0.0-rc.4",
     "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,16 +45,16 @@
         "@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",
         "eslint-config-prettier": "^9.1.0",
         "husky": "^8.0.3",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jsdom": "^23.1.0",
+        "jsdom": "^23.2.0",
         "lint-staged": "^15.2.0",
         "open-cli": "^8.0.0",
         "parcel": "~2.11.0",
@@ -63,7 +63,7 @@
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.6",
-        "typedoc-plugin-mdn-links": "^3.1.10",
+        "typedoc-plugin-mdn-links": "^3.1.11",
         "typescript": "~5.3.3"
     },
     "scripts": {