feat(omi): more concise static props definitions for cross framework use

packages/omi-vue/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "omi": "^7.3.8",
+    "omi": "^7.4.5",
     "omi-weui": "^0.0.10",
     "vue": "^3.3.8"
   },

packages/omi-vue/src/components/my-counter.ts

@@ -2,15 +2,15 @@ import { define, Component, h } from 'omi'
 
 define('my-counter', class extends Component {
 
-  static propTypes = {
-    count: Number
-  }
-
-  static observedAttributes = ['count']
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.state[name] = newValue
-    this.update()
+  static props = {
+    count: {
+      type: Number,
+      default: 0,
+      changed(newValue, oldValue) {
+        this.state.count = newValue
+        this.update()
+      }
+    }
   }
 
   state = {

packages/omi/README.md

@@ -353,15 +353,15 @@ import { define, Component, h } from 'omi'
 
 define('my-counter', class extends Component {
 
-  static propTypes = {
-    count: Number
-  }
-
-  static observedAttributes = ['count']
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.state[name] = newValue
-    this.update()
+  static props = {
+    count: {
+      type: Number,
+      default: 0,
+      changed(newValue, oldValue) {
+        this.state.count = newValue
+        this.update()
+      }
+    }
   }
 
   state = {

packages/omi/examples/static-props.tsx

@@ -0,0 +1,69 @@
+import { render, tag, Component, h, bind } from '@/index'
+
+@tag('counter-demo')
+class CounterDemo extends Component {
+  static props = {
+    count: {
+      count: Number,
+      // count: [Number, String, Array],
+      default: 20,
+      reflect: true,
+      // or reflect(value) {}
+      changed(newValue, oldValue) {
+        console.log('changed', newValue, oldValue)
+      }
+    }
+  }
+
+  state = {
+    count: 0
+  }
+
+  install() {
+    this.state.count = this.props.count
+  }
+
+  receiveProps(): void {
+    if (this.props.count === this.state.count) {
+      return false
+    }
+
+    this.state.count = this.props.count
+  }
+
+  @bind
+  add() {
+    this.state.count++
+    this.update()
+    this.fire('change', this.state.count)
+  }
+
+  render() {
+    return (
+      <>
+        <span>{this.state.count}  <button onClick={this.add}>+</button></span>
+      </>
+    )
+  }
+}
+
+
+@tag('my-app')
+class MyApp extends Component {
+  count = 10
+
+  @bind
+  onChange(evt) {
+    this.count = evt.detail
+    this.update()
+  }
+
+  render() {
+    return (
+
+      <counter-demo onChange={this.onChange} count={this.count}></counter-demo>
+
+    )
+  }
+}
+render(<my-app />, document.body)

packages/omi/omi.d.ts

@@ -89,6 +89,8 @@ declare namespace Omi {
     css?: (() => string) | string;
   }
 
+  type PropType = String | Number | Boolean | Array<any> | Object | Array<PropType>;
+
   abstract class WeElement<P = {}> {
     constructor();
 
@@ -97,7 +99,15 @@ declare namespace Omi {
     static css?: string | CSSStyleSheet | (string | CSSStyleSheet)[]
     static tagName: string
     static define(name: string): void
-
+    static props?: {
+      [key: string]: {
+        type?: PropType;
+        default?: any;
+        reflect?: boolean | ((value: any) => any);
+        changed?: (newValue: any, oldValue: any) => void;
+      }
+    }
+
     props: OmiProps<P> | P
     prevProps: OmiProps<P> | P
     rootElement?: HTMLElement
@@ -134,6 +144,14 @@ declare namespace Omi {
     static css?: string | CSSStyleSheet | (string | CSSStyleSheet)[]
     static tagName: string
     static define(name: string): void
+    static props?: {
+      [key: string]: {
+        type?: PropType;
+        default?: any;
+        reflect?: boolean | ((value: any) => any);
+        changed?: (newValue: any, oldValue: any) => void;
+      }
+    }
 
     props: OmiProps<P> | P
     prevProps: OmiProps<P> | P

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "7.4.4",
+  "version": "7.4.5",
   "scripts": {
     "start": "vite",
     "dev-vite": "vite",

packages/omi/src/component.ts

@@ -50,6 +50,25 @@ export class Component extends HTMLElement {
 
   constructor() {
     super()
+
+    if (!this.constructor.defaultProps) {
+      this.constructor.defaultProps = {}
+    }
+    if (!this.constructor.propTypes) {
+      this.constructor.propTypes = {}
+    }
+    if (!this.constructor.reflectProps) {
+      this.constructor.reflectProps = {}
+    }
+    if (this.constructor.props) {
+      for (const propName in this.constructor.props) {
+        const prop = this.constructor.props[propName]
+        this.constructor.defaultProps[propName] = prop.default
+        this.constructor.propTypes[propName] = prop.type
+        this.constructor.reflectProps[propName] = prop.reflect
+      }
+    }
+
     // @ts-ignore fix lazy load props missing
     this.props = Object.assign(
       {},
@@ -61,6 +80,19 @@ export class Component extends HTMLElement {
     this.rootElement = null
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (this.constructor.props && this.constructor.props[name]) {
+      const prop = this.constructor.props[name]
+      if (prop.changed) {
+        prop.changed.call(this, newValue, oldValue)
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return this.props ? Object.keys(this.props) : []
+  }
+
   injectObject() {
     let p: ExtendedElement = this.parentNode as ExtendedElement
     // @ts-ignore deprecated

packages/omi/src/index.ts

@@ -18,4 +18,4 @@ export { Signal } from './signal'
 export { css } from './css-tag'
 export { mixin } from './options'
 export { registerDirective } from './directive'
-export const version = '7.4.4'
+export const version = '7.4.5'

packages/omi/test/props.test.jsx

@@ -7,6 +7,7 @@ import {
   getHost,
   h
 } from '@/index'
+import { genNode } from './gen-node'
 
 describe('props', () => {
   let parentElement
@@ -145,5 +146,48 @@ describe('props', () => {
     expect(valA === valB).toBe(true)
   })
 
+  it('static props 1', () => {
+    let a = true
+    class Ele extends Component {
+      static props = {
+        count: {
+          default: 1
+        }
+      }
+
+      render(props) {
+        return (
+          <div>{props.count}</div>
+        )
+      }
+    }
+    let node = genNode()
+    define(node.name, Ele)
+    render(<Ele />, parentElement)
+    expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<div>1</div>')
+
+  })
+
+  it('static props 2', () => {
+    let a = true
+    class Ele extends Component {
+      static props = {
+        count: {
+          default: 1,
+        }
+      }
+
+      render(props) {
+        return (
+          <div>{props.count}</div>
+        )
+      }
+    }
+    let node = genNode()
+    define(node.name, Ele)
+    render(<Ele count={2} />, parentElement)
+    expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<div>2</div>')
+
+  })
 
 })