DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor(omi-cli): component template

This commit is contained in:
dntzhang 2021-08-05 17:40:06 +08:00
parent 0dfa006bee
commit 9d111c79e0
5 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/omi-cli/template/component/demo.html
View File

@ -10,7 +10,6 @@
</head>
<body>
<o-counter></o-counter>
</body>

3
packages/omi-cli/template/component/index.html
View File

@ -11,7 +11,8 @@
</head>
<body>
<o-counter></o-counter>
<h1>HTML Mode</h1>
<o-counter count="2"></o-counter>
</body>
</html>

42
packages/omi-cli/template/component/src/demo.tsx
View File

@ -1,16 +1,44 @@
import { tag, WeElement, h, render } from 'omi'
import { tag, h, WeElement, OmiProps, render } from 'omi'
import './index.tsx'
@tag('my-demo')
export default class extends WeElement {
render(props) {
return <div>
demo
</div>
export interface Attrs {
count?: number
}
const tagName = 'my-demo'
declare global {
namespace JSX {
interface IntrinsicElements {
[tagName]: Omi.Props & Attrs
}
}
}
export type Props = OmiProps<Omit<Attrs, 'count'> & { count: number }>
@tag(tagName)
export default class MyDemo extends WeElement<Props> {
count = 2
onChanged = (evt: CustomEvent) => {
//同步内部状态到外部，这样防止父刷新覆盖子的 count
this.count = evt.detail
}
render(props: Props) {
return (
<div>
<h1 onclick={() => {
this.update()
}}>JSX Mode</h1>
<o-counter count={this.count} onCountChanged={this.onChanged}></o-counter>
</div>
)
}
}
render(<my-demo></my-demo>, 'body', {
ignoreAttrs: true

17
packages/omi-cli/template/component/src/index.tsx
View File

@ -3,7 +3,8 @@ import { tag, h, WeElement, OmiProps } from 'omi'
import * as css from './index.scss'
export interface Attrs {
count?: number
count?: number,
onCountChanged?: (evt: CustomEvent) => void
}
const tagName = 'o-counter'
@ -23,7 +24,7 @@ export default class Counter extends WeElement<Props> {
static css = css.default ? css.default : css
static defaultProps = {
count: 0
count: 1
}
static propTypes = {
@ -31,13 +32,17 @@ export default class Counter extends WeElement<Props> {
}
minus = () => {
this.props.count--
this.update()
this.updateProps({
count: this.props.count - 1
})
this.fire('CountChanged', this.props.count)
}
plus = () => {
this.props.count++
this.update()
this.updateProps({
count: this.props.count + 1
})
this.fire('CountChanged', this.props.count)
}
render(props: Props) {

11
packages/omi-cli/template/component/tsconfig.json
View File

@ -1,7 +1,11 @@
{
"compilerOptions": {
"module": "esnext",
"lib": ["es2017", "dom", "dom.iterable"],
"lib": [
"es2017",
"dom",
"dom.iterable"
],
"declaration": true,
"emitDeclarationOnly": true,
"outDir": "./types",
@ -17,6 +21,9 @@
"jsx": "react",
"jsxFactory": "h",
},
"include": ["src/**/*.ts", "src/index.tsx"],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": []
}