From 6f9dc56b2a5fb0a0725c280187bb6d6374f1100b Mon Sep 17 00:00:00 2001 From: dntzhang Date: Mon, 1 Jan 2024 08:54:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20prettierrc=E6=A0=BC=E5=BC=8F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 9 + package-lock.json | 22 ++ package.json | 6 +- src/assets/index.css | 6 +- src/components/markdown-docs.tsx | 9 +- src/components/md.css | 10 +- src/components/prism.css | 51 +-- src/files.ts | 4 +- src/global.d.ts | 2 +- src/index.tsx | 342 +++++++++++------- src/rollup-build.ts | 20 +- src/rollup-plugin-css.ts | 6 +- src/rollup-plugin-vfile.ts | 2 +- src/sections/en/bubble-sort/app/index.css | 2 +- src/sections/en/bubble-sort/app/index.tsx | 42 ++- src/sections/en/bubble-sort/app/store.ts | 10 +- src/sections/en/clock/app/index.css | 2 +- src/sections/en/clock/app/index.tsx | 38 +- src/sections/en/component/app/index.tsx | 7 +- src/sections/en/component/app/my-counter.tsx | 2 +- src/sections/en/congratulations/app/index.tsx | 20 +- src/sections/en/event/app/index.tsx | 3 +- src/sections/en/fragment/app/index.tsx | 2 +- src/sections/en/hello-omi/app/index.tsx | 5 +- .../en/lifecycle-and-ref/app/index.tsx | 4 +- src/sections/en/props/app/button.css | 120 +++--- src/sections/en/props/app/button.tsx | 2 +- src/sections/en/props/app/index.tsx | 84 +++-- src/sections/en/render/app/index.css | 2 +- src/sections/en/render/app/index.tsx | 20 +- src/sections/en/router/app/index.tsx | 23 +- src/sections/en/scoped-css/app/index.tsx | 6 +- src/sections/en/slot/app/index.tsx | 7 +- .../en/snake-game/app/game-screen.tsx | 24 +- src/sections/en/snake-game/app/game.ts | 18 +- src/sections/en/snake-game/app/snake-game.tsx | 43 ++- src/sections/en/snake-game/app/snake.ts | 14 +- src/sections/en/snake-game/app/store.ts | 10 +- src/sections/en/to-motion/app/index.tsx | 67 +++- src/sections/en/transition/app/index.tsx | 7 +- src/sections/en/unsafe-html/app/index.tsx | 2 +- src/sections/zh/bubble-sort/app/index.css | 2 +- src/sections/zh/bubble-sort/app/index.tsx | 42 ++- src/sections/zh/bubble-sort/app/store.ts | 10 +- src/sections/zh/clock/app/index.css | 2 +- src/sections/zh/clock/app/index.tsx | 38 +- src/sections/zh/component/app/index.tsx | 7 +- src/sections/zh/component/app/my-counter.tsx | 2 +- src/sections/zh/congratulations/app/index.tsx | 20 +- src/sections/zh/event/app/index.tsx | 3 +- src/sections/zh/fragment/app/index.tsx | 2 +- src/sections/zh/hello-omi/app/index.tsx | 5 +- .../zh/lifecycle-and-ref/app/index.tsx | 4 +- src/sections/zh/props/app/button.css | 120 +++--- src/sections/zh/props/app/button.tsx | 2 +- src/sections/zh/props/app/index.tsx | 84 +++-- src/sections/zh/render/app/index.css | 2 +- src/sections/zh/render/app/index.tsx | 20 +- src/sections/zh/router/app/index.tsx | 23 +- src/sections/zh/scoped-css/app/index.tsx | 6 +- src/sections/zh/slot/app/index.tsx | 7 +- .../zh/snake-game/app/game-screen.tsx | 24 +- src/sections/zh/snake-game/app/game.ts | 18 +- src/sections/zh/snake-game/app/snake-game.tsx | 43 ++- src/sections/zh/snake-game/app/snake.ts | 14 +- src/sections/zh/snake-game/app/store.ts | 10 +- src/sections/zh/to-motion/app/index.tsx | 67 +++- src/sections/zh/transition/app/index.tsx | 7 +- src/sections/zh/unsafe-html/app/index.tsx | 2 +- src/ts-build.ts | 5 +- 70 files changed, 1015 insertions(+), 651 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..422976b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "printWidth": 90, + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "proseWrap": "always", + "endOfLine": "auto" +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cce53df..9ebdfb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ }, "devDependencies": { "less": "^4.1.1", + "prettier": "3.1.1", "sass": "^1.37.5", "typescript": "^4.3.2", "vite": "^2.9.14" @@ -1006,6 +1007,21 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prettier": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz", + "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", @@ -2043,6 +2059,12 @@ "source-map-js": "^1.0.2" } }, + "prettier": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz", + "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==", + "dev": true + }, "prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", diff --git a/package.json b/package.json index ca070c7..ca0b25e 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,12 @@ "build": "tsc && vite build --base=./ && npm run cp-libs && npm run cp-sections", "serve": "vite preview", "cp-libs": "cp -r ./libs ./dist/libs", - "cp-sections": "cp -r ./src/sections ./dist/sections" + "cp-sections": "cp -r ./src/sections ./dist/sections", + "p": "prettier --write \"src/**/*.{ts,tsx,less,scss,css,js,json,html}\"" }, "devDependencies": { "less": "^4.1.1", + "prettier": "3.1.1", "sass": "^1.37.5", "typescript": "^4.3.2", "vite": "^2.9.14" @@ -27,11 +29,11 @@ "markdown-it": "^13.0.1", "markdown-it-anchor": "^8.6.4", "omi": "^7.3.5", - "rspa": "^0.0.1", "omi-transition": "^0.0.2", "omi-twind": "^0.0.2", "prismjs": "^1.28.0", "rollup": "^2.77.0", + "rspa": "^0.0.1", "typescript": "^4.6.4" } } diff --git a/src/assets/index.css b/src/assets/index.css index f7f27ca..d0d22a3 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,5 +1,5 @@ html, body { - padding: 0; - margin: 0; -} \ No newline at end of file + padding: 0; + margin: 0; +} diff --git a/src/components/markdown-docs.tsx b/src/components/markdown-docs.tsx index 48d432d..5a9a36d 100644 --- a/src/components/markdown-docs.tsx +++ b/src/components/markdown-docs.tsx @@ -37,8 +37,7 @@ export default class extends Component { static defaultProps = { mdContent: '', - padding: 0 - + padding: 0, } md @@ -47,7 +46,7 @@ export default class extends Component { // @ts-ignore this.md = new MdIt().use(anchor.default, { level: 2, - permalink: true + permalink: true, }) } @@ -91,8 +90,8 @@ export default class extends Component { render() { return (
-
-
+
+ ) } } diff --git a/src/components/md.css b/src/components/md.css index f725c16..a265812 100644 --- a/src/components/md.css +++ b/src/components/md.css @@ -16,7 +16,7 @@ .source { width: 100%; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px; } @@ -26,7 +26,6 @@ max-width: 950px; margin: 0 auto; background-color: #fff; - } .result-html img { @@ -123,7 +122,7 @@ width: 230px; z-index: 10000; white-space: nowrap; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #686868; box-shadow: 0 0 2px rgba(102, 102, 102, 0.4); padding: 1px 0; @@ -160,7 +159,6 @@ width: auto; } - .result-html { font-size: 0.875em; } @@ -221,12 +219,10 @@ h2 { font-size: 1.3em; } - h3 { font-size: 1.2em; } - h4 { font-size: 1.1em; } @@ -237,4 +233,4 @@ h5 { h6 { font-size: 0.9em; -} \ No newline at end of file +} diff --git a/src/components/prism.css b/src/components/prism.css index 9eafd7a..de3cba3 100644 --- a/src/components/prism.css +++ b/src/components/prism.css @@ -6,8 +6,8 @@ https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clik * @author ocodia */ -code[class*="language-"], -pre[class*="language-"] { +code[class*='language-'], +pre[class*='language-'] { color: #f8f8f2; background: none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); @@ -27,27 +27,25 @@ pre[class*="language-"] { -moz-hyphens: none; -ms-hyphens: none; hyphens: none; - } /* Code blocks */ -pre[class*="language-"] { +pre[class*='language-'] { padding: 1em; margin: 0; overflow: auto; border-radius: 0.5em; - } -:not(pre)>code[class*="language-"], -pre[class*="language-"] { +:not(pre) > code[class*='language-'], +pre[class*='language-'] { background: #214247; } /* Inline code */ -:not(pre)>code[class*="language-"] { - padding: .1em; - border-radius: .3em; +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; white-space: normal; } @@ -63,7 +61,7 @@ pre[class*="language-"] { } .namespace { - opacity: .7; + opacity: 0.7; } .token.property, @@ -139,8 +137,12 @@ pre[data-line] { margin-top: 1em; /* Same as .prism’s padding-top */ - background: hsla(24, 20%, 50%, .08); - background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0)); + background: hsla(24, 20%, 50%, 0.08); + background: linear-gradient( + to right, + hsla(24, 20%, 50%, 0.1) 70%, + hsla(24, 20%, 50%, 0) + ); pointer-events: none; @@ -152,15 +154,15 @@ pre[data-line] { .line-highlight[data-end]:after { content: attr(data-start); position: absolute; - top: .4em; - left: .6em; + top: 0.4em; + left: 0.6em; min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%, .4); + padding: 0 0.5em; + background-color: hsla(24, 20%, 50%, 0.4); color: hsl(24, 20%, 95%); font: bold 65%/1.5 sans-serif; text-align: center; - vertical-align: .3em; + vertical-align: 0.3em; border-radius: 999px; text-shadow: none; box-shadow: 0 1px white; @@ -169,7 +171,7 @@ pre[data-line] { .line-highlight[data-end]:after { content: attr(data-end); top: auto; - bottom: .4em; + bottom: 0.4em; } .line-numbers .line-highlight:before, @@ -177,13 +179,13 @@ pre[data-line] { content: none; } -pre[class*="language-"].line-numbers { +pre[class*='language-'].line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } -pre[class*="language-"].line-numbers>code { +pre[class*='language-'].line-numbers > code { position: relative; white-space: inherit; } @@ -203,19 +205,18 @@ pre[class*="language-"].line-numbers>code { -moz-user-select: none; -ms-user-select: none; user-select: none; - } -.line-numbers-rows>span { +.line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } -.line-numbers-rows>span:before { +.line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; -} \ No newline at end of file +} diff --git a/src/files.ts b/src/files.ts index b58fde4..62b318b 100644 --- a/src/files.ts +++ b/src/files.ts @@ -10,5 +10,5 @@ './a.css': 'h1{color: red}' */ export const files = { - './index': '' -} \ No newline at end of file + './index': '', +} diff --git a/src/global.d.ts b/src/global.d.ts index f0cc287..3d9b212 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -9,4 +9,4 @@ declare module '*.less' declare module '*.css' declare module '*.scss' declare module '*.sass' -declare module '*.webp' \ No newline at end of file +declare module '*.webp' diff --git a/src/index.tsx b/src/index.tsx index f990e4b..b1d65d8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import logo from './assets/logo.svg' import { tw, sheet } from 'omi-twind' import './components/markdown-docs' // import { EditorState, EditorStateConfig, Compartment, Extension, StateEffect } from '@codemirror/state' -import { EditorState } from "@codemirror/state" +import { EditorState } from '@codemirror/state' import { EditorView, basicSetup } from 'codemirror' import { javascript } from '@codemirror/lang-javascript' import { css } from '@codemirror/lang-css' @@ -61,83 +61,109 @@ export default class extends Component { this.$iframe.contentWindow.location.reload() } - treeData: TreeItem[] = [{ - label: 'Base', - sign: '❤️', - expanded: true, - // selected: true, - // icon: 'ac-unit-outlined', - children: [{ - id: 'hello-omi', - label: 'Hello Omi', - }, { - id: 'render', - label: 'Render', - files: ['index.tsx', 'index.css'], - }, { - id: 'component', - label: 'Component', - files: ['index.tsx', 'my-counter.tsx'], - }, { - id: 'props', - label: 'Props', - files: ['index.tsx', 'button.tsx', 'button.css'], - }, { - id: 'event', - label: 'Event', - }, { - id: 'lifecycle-and-ref', - label: 'Lifecycle and Ref', + treeData: TreeItem[] = [ + { + label: 'Base', + sign: '❤️', + expanded: true, + // selected: true, + // icon: 'ac-unit-outlined', + children: [ + { + id: 'hello-omi', + label: 'Hello Omi', + }, + { + id: 'render', + label: 'Render', + files: ['index.tsx', 'index.css'], + }, + { + id: 'component', + label: 'Component', + files: ['index.tsx', 'my-counter.tsx'], + }, + { + id: 'props', + label: 'Props', + files: ['index.tsx', 'button.tsx', 'button.css'], + }, + { + id: 'event', + label: 'Event', + }, + { + id: 'lifecycle-and-ref', + label: 'Lifecycle and Ref', + }, + { + id: 'scoped-css', + label: 'Scoped CSS', + }, + { + id: 'slot', + label: 'Slot', + }, + { + id: 'fragment', + label: 'Fragment', + }, + { + id: 'unsafe-html', + label: 'Unsafe HTML', + }, + ], }, { - id: 'scoped-css', - label: 'Scoped CSS', - }, { - id: 'slot', - label: 'Slot', - }, { - id: 'fragment', - label: 'Fragment', - }, { - id: 'unsafe-html', - label: 'Unsafe HTML', - }] - }, { - label: 'Complex', - expanded: true, - sign: '💯', - children: [{ - id: 'router', - label: '🔗Router', - target: '_blank', - href: 'https://codesandbox.io/p/github/omijs/omi-router-example/main?file=%2Fsrc%2Froutes.tsx' + label: 'Complex', + expanded: true, + sign: '💯', + children: [ + { + id: 'router', + label: '🔗Router', + target: '_blank', + href: 'https://codesandbox.io/p/github/omijs/omi-router-example/main?file=%2Fsrc%2Froutes.tsx', + }, + // { + // id: 'transition', + // label: 'Transition', + // }, + { + id: 'bubble-sort', + label: 'Bubble Sort', + files: ['index.tsx'], + }, + { + id: 'clock', + label: 'Clock', + files: ['index.tsx', 'index.css'], + }, + { + id: 'to-motion', + label: 'To Motion', + }, + { + id: 'snake-game', + label: 'Snake Game', + files: [ + 'index.tsx', + 'snake-game.tsx', + 'game-screen.tsx', + 'store.ts', + 'game.ts', + 'snake.ts', + ], + codePanelHeight: '41%', + previewPanelHeight: '59%', + }, + ], }, - // { - // id: 'transition', - // label: 'Transition', - // }, { - id: 'bubble-sort', - label: 'Bubble Sort', - files: ['index.tsx'], - }, { - id: 'clock', - label: 'Clock', - files: ['index.tsx', 'index.css'], - }, { - id: 'to-motion', - label: 'To Motion', - }, { - id: 'snake-game', - label: 'Snake Game', - files: ['index.tsx', 'snake-game.tsx', 'game-screen.tsx', 'store.ts', 'game.ts', 'snake.ts'], - codePanelHeight: '41%', - previewPanelHeight: '59%' - }] - }, { - id: 'congratulations', - label: '🎉 Congratulations!', - }] + id: 'congratulations', + label: '🎉 Congratulations!', + }, + ] lan = 'en' @@ -206,25 +232,27 @@ export default class extends Component { const url = 'https://omi.cdn-go.cn/tutorial/latest/sections/' // const url = './sections/' showLoading() - const urls = [ - `${url}${this.lan}/${section}/description.md` - ] + const urls = [`${url}${this.lan}/${section}/description.md`] this.files.forEach((file) => { urls.push(`${url}${this.lan}/${section}/app/${file}`) }) - const texts = await Promise.all(urls.map(async url => { - const resp = await fetch(url) - return resp.text() - })) + const texts = await Promise.all( + urls.map(async (url) => { + const resp = await fetch(url) + return resp.text() + }) + ) this.mdContent = texts[0] const tsxMatch = texts[1] this.editor.dispatch({ - changes: { from: 0, to: this.editor.state.doc.length, insert: tsxMatch } + changes: { from: 0, to: this.editor.state.doc.length, insert: tsxMatch }, }) this.files.forEach((file, index) => { this.filesContent[file] = texts[index + 1] - files[`./${file.replace('.tsx', '').replace('.ts', '')}`] = file.endsWith('.css') ? texts[index + 1] : tsBuild(texts[index + 1]) + files[`./${file.replace('.tsx', '').replace('.ts', '')}`] = file.endsWith('.css') + ? texts[index + 1] + : tsBuild(texts[index + 1]) }) rollupBuild((code) => { @@ -246,7 +274,6 @@ export default class extends Component { route('/:section', async (evt) => { this.setFiles(evt.params.section) this.loadSection(evt.params.section) - }) route('*', async () => { @@ -255,10 +282,15 @@ export default class extends Component { } setCodeLang(lan) { - this.editor.setState(EditorState.create({ - doc: this.editor.state.doc, - extensions: [basicSetup, lan === 'css' ? css() : javascript({ jsx: true, typescript: true })], - })); + this.editor.setState( + EditorState.create({ + doc: this.editor.state.doc, + extensions: [ + basicSetup, + lan === 'css' ? css() : javascript({ jsx: true, typescript: true }), + ], + }) + ) } installed(): void { @@ -270,13 +302,17 @@ export default class extends Component { // css(), EditorView.updateListener.of((e) => { this.filesContent[this.tabName] = e.state.doc.toString() - files['./' + this.tabName.replace('.tsx', '').replace('.ts', '')] = this.tabName.endsWith('.css') ? e.state.doc.toString() : tsBuild(e.state.doc.toString()) + files['./' + this.tabName.replace('.tsx', '').replace('.ts', '')] = + this.tabName.endsWith('.css') + ? e.state.doc.toString() + : tsBuild(e.state.doc.toString()) rollupBuild((code) => { this.reloadPreview(code) }) - })], + }), + ], parent: this.$editor, - doc: '' + doc: '', }) this.registerRoute() @@ -304,28 +340,27 @@ export default class extends Component { changes: { from: 0, to: this.editor.state.doc.length, - insert: this.filesContent[evt.detail.tab.label] - } + insert: this.filesContent[evt.detail.tab.label], + }, }) this.setCodeLang(this.tabName.endsWith('.css') ? 'css' : 'tsx') } - - $mainPanel: HTMLElement $mdPanel: HTMLElement $translate: Component $tip: Component - render() { return (
-

+

+ {' '} + OMI

- + this.$translate = e} + ref={(e) => (this.$translate = e)} class={tw``} >
    this.$tip = e} > -
  • this.setLan('zh')} underline={false}>简体中文
    • -
  • this.setLan('en')} underline={false}>English
    • + ref={(e) => (this.$tip = e)} + > +
  • + {' '} + this.setLan('zh')} underline={false}> + 简体中文 + +
    • +
  • + this.setLan('en')} underline={false}> + English + +
-
-
.o-tree-node__expand-icon { padding: 2px !important; } - `} + ` + } style={{ - width: window.innerWidth > 768 ? '200px' : '120px' + width: window.innerWidth > 768 ? '200px' : '120px', }} onNodeClick={this.onNodeClick} - data={this.treeData}> - + data={this.treeData} + >
-
this.$mainPanel = e} class={tw`md:flex md:flex-row flex-col flex-1 overflow-scroll md:overflow-hidden`} style={{ - height: window.innerWidth < 768 ? 'calc(100vh)' : 'auto' - }}> -
this.$mdPanel = e} class={tw`md:w-1/2 overflow-auto pl-2 pr-2 md:pl-8 md:pr-8 border-l`} style={{ - height: window.innerWidth > 768 ? 'calc(100vh)' : 'auto' - }}> - {this.mdContent && } +
(this.$mainPanel = e)} + class={tw`md:flex md:flex-row flex-col flex-1 overflow-scroll md:overflow-hidden`} + style={{ + height: window.innerWidth < 768 ? 'calc(100vh)' : 'auto', + }} + > +
(this.$mdPanel = e)} + class={tw`md:w-1/2 overflow-auto pl-2 pr-2 md:pl-8 md:pr-8 border-l`} + style={{ + height: window.innerWidth > 768 ? 'calc(100vh)' : 'auto', + }} + > + {this.mdContent && ( + + )}
{/* Prev Next */}
-
768 ? 'calc(100vh)' : 'auto' - }}> -
- { - return { label: file } - })}> -
this.$editor = e} > -
+
768 ? 'calc(100vh)' : 'auto', + }} + > +
+ { + return { label: file } + })} + > +
(this.$editor = e)} + >
-
-
- -
- +
+
+ +
+
-
) diff --git a/src/rollup-build.ts b/src/rollup-build.ts index c8b6aca..a4886f2 100644 --- a/src/rollup-build.ts +++ b/src/rollup-build.ts @@ -1,5 +1,5 @@ import { vfilePlugin } from './rollup-plugin-vfile' -import { rollup } from 'rollup'; +import { rollup } from 'rollup' import { files } from './files' import { cssStringPlugin } from './rollup-plugin-css' @@ -8,16 +8,17 @@ const inputOptions = { input: './index', // resolved by our plugin plugins: [vfilePlugin(files), cssStringPlugin()], // 不需要 tree shaking - treeshake: false + treeshake: false, } // you can create multiple outputs from the same input to generate e.g. // different formats like CommonJS and ESM -const outputOptionsList = [{ - file: 'bundle.js', - format: 'umd' //es -}] - +const outputOptionsList = [ + { + file: 'bundle.js', + format: 'umd', //es + }, +] export async function rollupBuild(callback) { if (!files['./index']) { @@ -28,13 +29,12 @@ export async function rollupBuild(callback) { try { // create a bundle // @ts-ignore - bundle = await rollup(inputOptions); + bundle = await rollup(inputOptions) // an array of file names this bundle depends on const output = await generateOutputs(bundle) callback(output[0].code) } catch (error) { - // do some error reporting console.error(error) } @@ -58,4 +58,4 @@ async function generateOutputs(bundle) { // } // } // } -} \ No newline at end of file +} diff --git a/src/rollup-plugin-css.ts b/src/rollup-plugin-css.ts index 8aa04bf..42e3bb5 100644 --- a/src/rollup-plugin-css.ts +++ b/src/rollup-plugin-css.ts @@ -1,13 +1,13 @@ export function cssStringPlugin() { return { - name: "css-string", + name: 'css-string', transform(code, id) { if (id.endsWith('.css')) { return { code: `export default ${JSON.stringify(code)};`, - map: { mappings: "" } + map: { mappings: '' }, } } - } + }, } } diff --git a/src/rollup-plugin-vfile.ts b/src/rollup-plugin-vfile.ts index c0ce80d..fccdb16 100644 --- a/src/rollup-plugin-vfile.ts +++ b/src/rollup-plugin-vfile.ts @@ -12,6 +12,6 @@ export function vfilePlugin(files) { return files[id] // the source code for "virtual-module" } return null // other ids should be handled as usually - } + }, } } diff --git a/src/sections/en/bubble-sort/app/index.css b/src/sections/en/bubble-sort/app/index.css index aa45d51..9b254ca 100644 --- a/src/sections/en/bubble-sort/app/index.css +++ b/src/sections/en/bubble-sort/app/index.css @@ -7,4 +7,4 @@ .active { background: red; -} \ No newline at end of file +} diff --git a/src/sections/en/bubble-sort/app/index.tsx b/src/sections/en/bubble-sort/app/index.tsx index 9ee15d3..e5f2679 100644 --- a/src/sections/en/bubble-sort/app/index.tsx +++ b/src/sections/en/bubble-sort/app/index.tsx @@ -1,4 +1,14 @@ -import { Component, bind, signal, tag, render, h, classNames, mixin, SignalValue } from 'omi' +import { + Component, + bind, + signal, + tag, + render, + h, + classNames, + mixin, + SignalValue, +} from 'omi' class Store { state: SignalValue<{ @@ -44,7 +54,7 @@ class Store { this.state.value.indexA = indexA this.state.value.indexB = indexB this.state.update() - } + }, }) } @@ -68,7 +78,7 @@ class Store { } async swap(arr: number[], indexA: number, indexB: number) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(() => { const temp = arr[indexA] arr[indexA] = arr[indexB] @@ -80,10 +90,9 @@ class Store { } mixin({ - store: new Store() + store: new Store(), }) - @tag('my-element') class MyElement extends Component { static css = ` @@ -107,17 +116,28 @@ class MyElement extends Component {
{state.value.arr?.map((item: number, index: number) => ( -
+
))}
- - + +
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/bubble-sort/app/store.ts b/src/sections/en/bubble-sort/app/store.ts index 1604a57..c02df2f 100644 --- a/src/sections/en/bubble-sort/app/store.ts +++ b/src/sections/en/bubble-sort/app/store.ts @@ -14,7 +14,7 @@ export default class Store { arr: Array.from({ length: 30 }, () => this.randomInt()), indexA: -1, indexB: -1, - sorting: false + sorting: false, } } @@ -40,7 +40,7 @@ export default class Store { this.data.indexA = indexA this.data.indexB = indexB this.ui.update() - } + }, }) } } @@ -65,12 +65,12 @@ async function bubbleSort(arr, options) { } function swap(arr, indexA, indexB) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(() => { - const temp = arr[indexA]; + const temp = arr[indexA] arr[indexA] = arr[indexB] arr[indexB] = temp resolve(true) }, 20) }) -} \ No newline at end of file +} diff --git a/src/sections/en/clock/app/index.css b/src/sections/en/clock/app/index.css index b985d27..64a0e84 100644 --- a/src/sections/en/clock/app/index.css +++ b/src/sections/en/clock/app/index.css @@ -32,4 +32,4 @@ svg { .second-counterweight { stroke-width: 3; -} \ No newline at end of file +} diff --git a/src/sections/en/clock/app/index.tsx b/src/sections/en/clock/app/index.tsx index 8433c88..69e28ac 100644 --- a/src/sections/en/clock/app/index.tsx +++ b/src/sections/en/clock/app/index.tsx @@ -24,7 +24,7 @@ class MyClock extends Component { setInterval(() => { this.install() this.update() - }, 1000); + }, 1000) } arr = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] @@ -32,23 +32,35 @@ class MyClock extends Component { render() { const { hours, minutes, seconds } = this return ( - - - {this.arr.map(i => ( - + + + {this.arr.map((i) => ( + ))} - {this.arr.map(i => ( - [1, 2, 3, 4].map(o => ) - ))} - - + {this.arr.map((i) => + [1, 2, 3, 4].map((o) => ( + + )) + )} + + - - + + ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/component/app/index.tsx b/src/sections/en/component/app/index.tsx index fa4c909..ad9fd57 100644 --- a/src/sections/en/component/app/index.tsx +++ b/src/sections/en/component/app/index.tsx @@ -1,9 +1,10 @@ import { render, h } from 'omi' import './my-counter' -render(( +render(
Component Demo
-
-), 'body') \ No newline at end of file +
, + 'body' +) diff --git a/src/sections/en/component/app/my-counter.tsx b/src/sections/en/component/app/my-counter.tsx index a1549df..3f398d8 100644 --- a/src/sections/en/component/app/my-counter.tsx +++ b/src/sections/en/component/app/my-counter.tsx @@ -28,4 +28,4 @@ class MyCounter extends Component { ) } -} \ No newline at end of file +} diff --git a/src/sections/en/congratulations/app/index.tsx b/src/sections/en/congratulations/app/index.tsx index fe2cd60..0550104 100644 --- a/src/sections/en/congratulations/app/index.tsx +++ b/src/sections/en/congratulations/app/index.tsx @@ -51,7 +51,7 @@ class MyElement extends Component { vy: -2 + Math.random() * -5, r: 2 + 2 * Math.random(), opacity: 1, - color: this.randomColor() + color: this.randomColor(), }) } } @@ -69,9 +69,9 @@ class MyElement extends Component { particle.y += particle.vy this.ctx.fillStyle = particle.color this.ctx.globalAlpha = particle.opacity - this.ctx.beginPath(); - this.ctx.arc(particle.x, particle.y, particle.r, 0, 2 * Math.PI); - this.ctx.fill(); + this.ctx.beginPath() + this.ctx.arc(particle.x, particle.y, particle.r, 0, 2 * Math.PI) + this.ctx.fill() }) this.ctx.restore() } @@ -90,15 +90,17 @@ class MyElement extends Component { render() { return (
-

this.h1 = e} onClick={this.onClick}>🎉 Congratulations!

+

(this.h1 = e)} onClick={this.onClick}> + 🎉 Congratulations! +

this.canvas = e} + ref={(e) => (this.canvas = e)} width={window.innerWidth} - height={window.innerHeight}> - + height={window.innerHeight} + >
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/event/app/index.tsx b/src/sections/en/event/app/index.tsx index 69e7e11..776f87c 100644 --- a/src/sections/en/event/app/index.tsx +++ b/src/sections/en/event/app/index.tsx @@ -35,9 +35,8 @@ class MyApp extends Component {
evt.detail: {this.evtDetail}
- ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/fragment/app/index.tsx b/src/sections/en/fragment/app/index.tsx index 94ae760..1fbb444 100644 --- a/src/sections/en/fragment/app/index.tsx +++ b/src/sections/en/fragment/app/index.tsx @@ -30,4 +30,4 @@ class MyCounter extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/hello-omi/app/index.tsx b/src/sections/en/hello-omi/app/index.tsx index 13118f3..b64990c 100644 --- a/src/sections/en/hello-omi/app/index.tsx +++ b/src/sections/en/hello-omi/app/index.tsx @@ -8,10 +8,11 @@ class HelloOmi extends Component { return ( <>

Hello {props.msg}!

- {count.value} + {count.value} + ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/lifecycle-and-ref/app/index.tsx b/src/sections/en/lifecycle-and-ref/app/index.tsx index bf89635..b9660fe 100644 --- a/src/sections/en/lifecycle-and-ref/app/index.tsx +++ b/src/sections/en/lifecycle-and-ref/app/index.tsx @@ -11,10 +11,10 @@ class HelloOmi extends Component { render(props) { return (
-

this.h1 = e}>Can't see me!

+

(this.h1 = e)}>Can't see me!

) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/props/app/button.css b/src/sections/en/props/app/button.css index a55f406..ac75c92 100644 --- a/src/sections/en/props/app/button.css +++ b/src/sections/en/props/app/button.css @@ -1,9 +1,9 @@ :host { - display: inline-block + display: inline-block; } :host([block]) { - display: block + display: block; } .o-button { @@ -19,23 +19,23 @@ box-sizing: border-box; outline: none; margin: 0; - transition: .1s; + transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; - border-radius: 4px + border-radius: 4px; } .o-button:hover { border-color: #07c16061; - border-color: var(--o-primary-fade-some, rgba(7, 193, 96, .382)); + border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); color: #07c160; color: var(--o-primary, #07c160); background-color: #07c1601a; - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button:active { @@ -43,34 +43,34 @@ color: var(--o-primary, #07c160); border-color: #07c160; border-color: var(--o-primary, #07c160); - outline: none + outline: none; } .o-button-medium { padding: 10px 20px; font-size: 14px; - border-radius: 4px + border-radius: 4px; } .o-button-small { padding: 9px 15px; font-size: 12px; - border-radius: 3px + border-radius: 3px; } .o-button-mini { padding: 7px 15px; font-size: 12px; - border-radius: 3px + border-radius: 3px; } .o-button.is-round { - border-radius: 20px + border-radius: 20px; } .o-button.is-circle { border-radius: 20px; - padding: 12px + padding: 12px; } .o-button.is-disabled, @@ -80,157 +80,157 @@ cursor: not-allowed; background-image: none; background-color: #fff; - border-color: #ebeef5 + border-color: #ebeef5; } .o-button.is-block { display: block; - width: 100% + width: 100%; } .o-button-primary { color: #fff; background-color: var(--o-primary, #07c160); - border-color: var(--o-primary, #07c160) + border-color: var(--o-primary, #07c160); } .o-button-primary:disabled, .o-button-primary:disabled:hover { - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button-primary.is-plain { color: var(--o-primary, #07c160); - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)); - border-color: var(--o-primary-fade-some, rgba(7, 193, 96, .382)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); + border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); } .o-button-primary:hover { - background-color: var(--o-primary-fade-little, rgba(7, 193, 96, .618)); - border-color: var(--o-primary-fade-little, rgba(7, 193, 96, .618)); - color: #fff + background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618)); + border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618)); + color: #fff; } .o-button-primary:active { background-color: var(--o-primary-active, #059048); border-color: var(--o-primary-active, #059048); - color: #fff + color: #fff; } .o-button-success { color: #fff; background-color: var(--o-success, #07c160); - border-color: var(--o-success, #07c160) + border-color: var(--o-success, #07c160); } .o-button-success:disabled, .o-button-success:disabled:hover { - background-color: var(--o-success-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button-success.is-plain { color: var(--o-success, #07c160); - background-color: var(--o-success-fade-lot, rgba(7, 193, 96, .1)); - border-color: var(--o-success-fade-some, rgba(7, 193, 96, .382)) + background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1)); + border-color: var(--o-success-fade-some, rgba(7, 193, 96, 0.382)); } .o-button-success:hover { - background-color: var(--o-success-fade-little, rgba(7, 193, 96, .618)); - border-color: var(--o-success-fade-little, rgba(7, 193, 96, .618)); - color: #fff + background-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618)); + border-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618)); + color: #fff; } .o-button-success:active { background-color: var(--o-success-active, #059048); border-color: var(--o-success-active, #059048); - color: #fff + color: #fff; } .o-button-warning { color: #fff; background-color: var(--o-warning, #f2711c); - border-color: var(--o-warning, #f2711c) + border-color: var(--o-warning, #f2711c); } .o-button-warning:disabled, .o-button-warning:disabled:hover { - background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, .1)) + background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1)); } .o-button-warning.is-plain { color: var(--o-warning, #f2711c); - background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, .1)); - border-color: var(--o-warning-fade-some, rgba(242, 113, 28, .382)) + background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1)); + border-color: var(--o-warning-fade-some, rgba(242, 113, 28, 0.382)); } .o-button-warning:hover { - background-color: var(--o-warning-fade-little, rgba(242, 113, 28, .618)); - border-color: var(--o-warning-fade-little, rgba(242, 113, 28, .618)); - color: #fff + background-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618)); + border-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618)); + color: #fff; } .o-button-warning:active { background-color: var(--o-warning-active, #cf590c); border-color: var(--o-warning-active, #cf590c); - color: #fff + color: #fff; } .o-button-danger { color: #fff; background-color: var(--o-danger, #fa5151); - border-color: var(--o-danger, #fa5151) + border-color: var(--o-danger, #fa5151); } .o-button-danger:disabled, .o-button-danger:disabled:hover { - background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, .1)) + background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1)); } .o-button-danger.is-plain { color: var(--o-danger, #fa5151); - background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, .1)); - border-color: var(--o-danger-fade-some, rgba(250, 81, 81, .382)) + background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1)); + border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); } .o-button-danger:hover { - background-color: var(--o-danger-fade-little, rgba(250, 81, 81, .618)); - border-color: var(--o-danger-fade-little, rgba(250, 81, 81, .618)); - color: #fff + background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618)); + border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618)); + color: #fff; } .o-button-danger:active { background-color: var(--o-danger-active, #f91f1f); border-color: var(--o-danger-active, #f91f1f); - color: #fff + color: #fff; } .o-button-info { color: #fff; background-color: var(--o-info, #42b8dd); - border-color: var(--o-info, #42b8dd) + border-color: var(--o-info, #42b8dd); } .o-button-info:disabled, .o-button-info:disabled:hover { - background-color: var(--o-info-fade-lot, rgba(66, 184, 221, .1)) + background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1)); } .o-button-info.is-plain { color: var(--o-info, #42b8dd); - background-color: var(--o-info-fade-lot, rgba(66, 184, 221, .1)); - border-color: var(--o-info-fade-some, rgba(66, 184, 221, .382)) + background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1)); + border-color: var(--o-info-fade-some, rgba(66, 184, 221, 0.382)); } .o-button-info:hover { - background-color: var(--o-info-fade-little, rgba(66, 184, 221, .618)); - border-color: var(--o-info-fade-little, rgba(66, 184, 221, .618)); - color: #fff + background-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618)); + border-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618)); + color: #fff; } .o-button-info:active { background-color: var(--o-info-active, #24a1c8); border-color: var(--o-info-active, #24a1c8); - color: #fff + color: #fff; } .loading { @@ -238,25 +238,25 @@ height: 1em; display: inline-block; animation: loading 1s steps(12, end) infinite; - vertical-align: -.125em + vertical-align: -0.125em; } @-webkit-keyframes loading { 0% { - transform: rotate3d(0, 0, 1, 0) + transform: rotate3d(0, 0, 1, 0); } to { - transform: rotate3d(0, 0, 1, 360deg) + transform: rotate3d(0, 0, 1, 360deg); } } @keyframes loading { 0% { - transform: rotate3d(0, 0, 1, 0) + transform: rotate3d(0, 0, 1, 0); } to { - transform: rotate3d(0, 0, 1, 360deg) + transform: rotate3d(0, 0, 1, 360deg); } -} \ No newline at end of file +} diff --git a/src/sections/en/props/app/button.tsx b/src/sections/en/props/app/button.tsx index b542b60..75b8779 100644 --- a/src/sections/en/props/app/button.tsx +++ b/src/sections/en/props/app/button.tsx @@ -81,4 +81,4 @@ class Button extends Component { ) } -} \ No newline at end of file +} diff --git a/src/sections/en/props/app/index.tsx b/src/sections/en/props/app/index.tsx index 118f227..3737191 100644 --- a/src/sections/en/props/app/index.tsx +++ b/src/sections/en/props/app/index.tsx @@ -1,7 +1,7 @@ import { h, render } from 'omi' import './button' -render(( +render(
@@ -13,38 +13,54 @@ render(( Icon - Icon + + Icon
Default - Primary - Warning - Danger - Info + + Primary + + + Warning + + + Danger + + + Info + Icon - Icon + + Icon
Plain - Primary - Warning - Danger - Info + + Primary + + + Warning + + + Danger + + + Info + Icon - Icon + + Icon @@ -56,11 +72,21 @@ render((
- Plain - Primary - Warning - Danger - Info + + Plain + + + Primary + + + Warning + + + Danger + + + Info + @@ -79,9 +105,15 @@ render((
Default - Medium - Small - Mini + + Medium + + + Small + + + Mini +
@@ -115,6 +147,6 @@ render((
Block button -
-), 'body') - +
, + 'body' +) diff --git a/src/sections/en/render/app/index.css b/src/sections/en/render/app/index.css index 1a05ad5..63ef5b8 100644 --- a/src/sections/en/render/app/index.css +++ b/src/sections/en/render/app/index.css @@ -1,4 +1,4 @@ span { display: inline-block; width: 68px; -} \ No newline at end of file +} diff --git a/src/sections/en/render/app/index.tsx b/src/sections/en/render/app/index.tsx index 12e4786..75aa56a 100644 --- a/src/sections/en/render/app/index.tsx +++ b/src/sections/en/render/app/index.tsx @@ -8,18 +8,22 @@ class MyApp extends Component { render(props) { return (
- {props.numbers.map((a, indexA) => + {props.numbers.map((a, indexA) => (
- { - props.numbers.map((b, indexB) => { - return indexA <= indexB && {a}*{b}={a * b} - }) - } + {props.numbers.map((b, indexB) => { + return ( + indexA <= indexB && ( + + {a}*{b}={a * b}{' '} + + ) + ) + })}
- )} + ))}
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/router/app/index.tsx b/src/sections/en/router/app/index.tsx index f5e1924..3401ea5 100644 --- a/src/sections/en/router/app/index.tsx +++ b/src/sections/en/router/app/index.tsx @@ -17,11 +17,7 @@ class UserDetail extends Component { @tag('home-page') class HomePage extends Component { render() { - return ( -
- home-page -
- ) + return
home-page
} } @@ -40,7 +36,6 @@ class MyApp extends Component { $route install() { - route('/', () => { this.data.tag = 'home-page' this.update() @@ -76,16 +71,24 @@ class MyApp extends Component { return (
-
+
+ +
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/scoped-css/app/index.tsx b/src/sections/en/scoped-css/app/index.tsx index de6ced9..d5406e7 100644 --- a/src/sections/en/scoped-css/app/index.tsx +++ b/src/sections/en/scoped-css/app/index.tsx @@ -6,9 +6,11 @@ class HelloOmi extends Component { render(props) { return ( -

Hello, {props.msg}!

+

+ Hello, {props.msg}! +

) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/slot/app/index.tsx b/src/sections/en/slot/app/index.tsx index 730abfe..3eba4b8 100644 --- a/src/sections/en/slot/app/index.tsx +++ b/src/sections/en/slot/app/index.tsx @@ -17,9 +17,10 @@ class MyElement extends Component { } } -render(( +render(

One

Two

- -), 'body') \ No newline at end of file + , + 'body' +) diff --git a/src/sections/en/snake-game/app/game-screen.tsx b/src/sections/en/snake-game/app/game-screen.tsx index edcf754..69e9243 100644 --- a/src/sections/en/snake-game/app/game-screen.tsx +++ b/src/sections/en/snake-game/app/game-screen.tsx @@ -2,7 +2,6 @@ import { Component, h, tag } from 'omi' @tag('game-screen') export default class extends Component { - static css = ` .screen { border: 1px solid #000; @@ -46,22 +45,23 @@ export default class extends Component { background: #879372; overflow: hidden; }` - + render(props, store) { return (
- {store.state.value.map.map(row => { - return

- {row.map(col => { - if (col) { - return - } - return - })} -

+ {store.state.value.map.map((row) => { + return ( +

+ {row.map((col) => { + if (col) { + return + } + return + })} +

+ ) })}
) } } - diff --git a/src/sections/en/snake-game/app/game.ts b/src/sections/en/snake-game/app/game.ts index 820e2e4..e6ff1fc 100644 --- a/src/sections/en/snake-game/app/game.ts +++ b/src/sections/en/snake-game/app/game.ts @@ -23,8 +23,7 @@ class Game { onTick: () => void init() { - - this.snake = new Snake + this.snake = new Snake() for (let i = 0; i < this.size; i++) { const row = [] @@ -103,21 +102,24 @@ class Game { if (!this.food) { this.food = [this._rd(0, this.size - 1), this._rd(0, this.size - 1)] for (let k = 0, len = this.snake.body.length; k < len; k += 2) { - if (this.snake.body[k + 1] === this.food[1] - && this.snake.body[k] === this.food[0]) { + if ( + this.snake.body[k + 1] === this.food[1] && + this.snake.body[k] === this.food[0] + ) { this.food = null this.makeFood() break } - } } } eat() { for (let k = 0, len = this.snake.body.length; k < len; k += 2) { - if (this.snake.body[k + 1] === this.food[1] - && this.snake.body[k] === this.food[0]) { + if ( + this.snake.body[k + 1] === this.food[1] && + this.snake.body[k] === this.food[0] + ) { this.food = null return true } @@ -129,4 +131,4 @@ class Game { } } -export default Game \ No newline at end of file +export default Game diff --git a/src/sections/en/snake-game/app/snake-game.tsx b/src/sections/en/snake-game/app/snake-game.tsx index 7d97cd1..4c11651 100644 --- a/src/sections/en/snake-game/app/snake-game.tsx +++ b/src/sections/en/snake-game/app/snake-game.tsx @@ -3,7 +3,6 @@ import { Component, h, tag } from 'omi' @tag('snake-game') export default class extends Component { - static css = ` .r { float: right @@ -211,7 +210,7 @@ export default class extends Component { top: 0px; left: 30px; }` - + render(props, store) { return (
@@ -219,17 +218,41 @@ export default class extends Component {
-
Up
-
Down
-
Left
-
Right
-
Speed+/-
-
Reset
-
{store.state.value.paused ? 'Play' : 'Pause'}
+
+ + + Up +
+
+ + + Down +
+
+ + + Left +
+
+ + + Right +
+
+ + Speed+/- +
+
+ + Reset +
+
+ + {store.state.value.paused ? 'Play' : 'Pause'} +
) } } - diff --git a/src/sections/en/snake-game/app/snake.ts b/src/sections/en/snake-game/app/snake.ts index 923916c..d1dea1d 100644 --- a/src/sections/en/snake-game/app/snake.ts +++ b/src/sections/en/snake-game/app/snake.ts @@ -31,21 +31,17 @@ class Snake { } turnUp() { - if (this.dir !== 'down') - this.dir = 'up' + if (this.dir !== 'down') this.dir = 'up' } turnRight() { - if (this.dir !== 'left') - this.dir = 'right' + if (this.dir !== 'left') this.dir = 'right' } turnDown() { - if (this.dir !== 'up') - this.dir = 'down' + if (this.dir !== 'up') this.dir = 'down' } turnLeft() { - if (this.dir !== 'right') - this.dir = 'left' + if (this.dir !== 'right') this.dir = 'left' } } -export default Snake \ No newline at end of file +export default Snake diff --git a/src/sections/en/snake-game/app/store.ts b/src/sections/en/snake-game/app/store.ts index ff5173a..dc69572 100644 --- a/src/sections/en/snake-game/app/store.ts +++ b/src/sections/en/snake-game/app/store.ts @@ -6,20 +6,20 @@ class Store { snake: Snake map: number[][] game: Game - state: SignalValue<{ map: number[][], paused: boolean }> - + state: SignalValue<{ map: number[][]; paused: boolean }> + constructor() { const game = new Game({ onTick: () => { this.state.update() - } + }, }) const { snake, map } = game this.snake = snake this.map = map this.game = game game.start() - this.state = signal( { map: game.map, paused: false }) + this.state = signal({ map: game.map, paused: false }) } @bind @@ -65,4 +65,4 @@ class Store { } } -export default new Store \ No newline at end of file +export default new Store() diff --git a/src/sections/en/to-motion/app/index.tsx b/src/sections/en/to-motion/app/index.tsx index 307e651..8a52c10 100644 --- a/src/sections/en/to-motion/app/index.tsx +++ b/src/sections/en/to-motion/app/index.tsx @@ -6,7 +6,7 @@ class MyApp extends Component { from = this.number to = this.number out = { - number: this.number + number: this.number, } start = false outs = [{ width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }] @@ -32,7 +32,13 @@ class MyApp extends Component { this.outs.forEach((out, index) => { this[`$to${index}`].stop() }) - this.outs = [{ width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }] + this.outs = [ + { width: 10 }, + { width: 10 }, + { width: 10 }, + { width: 10 }, + { width: 10 }, + ] this.update() } @@ -40,25 +46,52 @@ class MyApp extends Component { return (

Simple

- +
{this.out.number.toFixed(0)}
-
{this.out.number.toFixed(0)}*{this.out.number.toFixed(0)}={(this.out.number * this.out.number).toFixed(0)}
-
- - - +
+ {this.out.number.toFixed(0)}*{this.out.number.toFixed(0)}= + {(this.out.number * this.out.number).toFixed(0)} +
+
+

Group

- {this.outs.map((item, index) => -
- )} - - {this.outs.map((item, index) => - this[`$to${index}`] = e} from={{ width: 10 }} start={this.start} easing="bounce-out" delay={100 * index} onProgress={this.onProgress} to={{ width: 200 }} out={this.outs[index]} duration={600}> - - )} + {this.outs.map((item, index) => ( +
+ ))} + {' '} + + {this.outs.map((item, index) => ( + (this[`$to${index}`] = e)} + from={{ width: 10 }} + start={this.start} + easing="bounce-out" + delay={100 * index} + onProgress={this.onProgress} + to={{ width: 200 }} + out={this.outs[index]} + duration={600} + > + ))}
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/transition/app/index.tsx b/src/sections/en/transition/app/index.tsx index 4027ea3..89e570f 100644 --- a/src/sections/en/transition/app/index.tsx +++ b/src/sections/en/transition/app/index.tsx @@ -34,10 +34,7 @@ class MyApp extends Component {
    {this.list.map((item, index) => ( - +
  • {item}
    •  ))} @@ -47,4 +44,4 @@ class MyApp extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/en/unsafe-html/app/index.tsx b/src/sections/en/unsafe-html/app/index.tsx index 5ca053f..336be03 100644 --- a/src/sections/en/unsafe-html/app/index.tsx +++ b/src/sections/en/unsafe-html/app/index.tsx @@ -9,4 +9,4 @@ class MyElement extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/bubble-sort/app/index.css b/src/sections/zh/bubble-sort/app/index.css index aa45d51..9b254ca 100644 --- a/src/sections/zh/bubble-sort/app/index.css +++ b/src/sections/zh/bubble-sort/app/index.css @@ -7,4 +7,4 @@ .active { background: red; -} \ No newline at end of file +} diff --git a/src/sections/zh/bubble-sort/app/index.tsx b/src/sections/zh/bubble-sort/app/index.tsx index c88d8a8..96e4e90 100644 --- a/src/sections/zh/bubble-sort/app/index.tsx +++ b/src/sections/zh/bubble-sort/app/index.tsx @@ -1,4 +1,14 @@ -import { Component, bind, signal, tag, render, h, classNames, mixin, SignalValue } from 'omi' +import { + Component, + bind, + signal, + tag, + render, + h, + classNames, + mixin, + SignalValue, +} from 'omi' class Store { state: SignalValue<{ @@ -44,7 +54,7 @@ class Store { this.state.value.indexA = indexA this.state.value.indexB = indexB this.state.update() - } + }, }) } @@ -68,7 +78,7 @@ class Store { } async swap(arr: number[], indexA: number, indexB: number) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(() => { const temp = arr[indexA] arr[indexA] = arr[indexB] @@ -80,10 +90,9 @@ class Store { } mixin({ - store: new Store() + store: new Store(), }) - @tag('my-element') class MyElement extends Component { static css = ` @@ -107,17 +116,28 @@ class MyElement extends Component {
    {state.value.arr?.map((item: number, index: number) => ( -
    +
    ))}
    - - + +
    ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/bubble-sort/app/store.ts b/src/sections/zh/bubble-sort/app/store.ts index 1604a57..c02df2f 100644 --- a/src/sections/zh/bubble-sort/app/store.ts +++ b/src/sections/zh/bubble-sort/app/store.ts @@ -14,7 +14,7 @@ export default class Store { arr: Array.from({ length: 30 }, () => this.randomInt()), indexA: -1, indexB: -1, - sorting: false + sorting: false, } } @@ -40,7 +40,7 @@ export default class Store { this.data.indexA = indexA this.data.indexB = indexB this.ui.update() - } + }, }) } } @@ -65,12 +65,12 @@ async function bubbleSort(arr, options) { } function swap(arr, indexA, indexB) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(() => { - const temp = arr[indexA]; + const temp = arr[indexA] arr[indexA] = arr[indexB] arr[indexB] = temp resolve(true) }, 20) }) -} \ No newline at end of file +} diff --git a/src/sections/zh/clock/app/index.css b/src/sections/zh/clock/app/index.css index b985d27..64a0e84 100644 --- a/src/sections/zh/clock/app/index.css +++ b/src/sections/zh/clock/app/index.css @@ -32,4 +32,4 @@ svg { .second-counterweight { stroke-width: 3; -} \ No newline at end of file +} diff --git a/src/sections/zh/clock/app/index.tsx b/src/sections/zh/clock/app/index.tsx index 8433c88..69e28ac 100644 --- a/src/sections/zh/clock/app/index.tsx +++ b/src/sections/zh/clock/app/index.tsx @@ -24,7 +24,7 @@ class MyClock extends Component { setInterval(() => { this.install() this.update() - }, 1000); + }, 1000) } arr = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] @@ -32,23 +32,35 @@ class MyClock extends Component { render() { const { hours, minutes, seconds } = this return ( - - - {this.arr.map(i => ( - + + + {this.arr.map((i) => ( + ))} - {this.arr.map(i => ( - [1, 2, 3, 4].map(o => ) - ))} - - + {this.arr.map((i) => + [1, 2, 3, 4].map((o) => ( + + )) + )} + + - - + + ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/component/app/index.tsx b/src/sections/zh/component/app/index.tsx index cb60982..fdb6a7e 100644 --- a/src/sections/zh/component/app/index.tsx +++ b/src/sections/zh/component/app/index.tsx @@ -1,9 +1,10 @@ import { render, h } from 'omi' import './my-counter' -render(( +render(
    组件 Demo
    -
    -), 'body') \ No newline at end of file +
, + 'body' +) diff --git a/src/sections/zh/component/app/my-counter.tsx b/src/sections/zh/component/app/my-counter.tsx index a1549df..3f398d8 100644 --- a/src/sections/zh/component/app/my-counter.tsx +++ b/src/sections/zh/component/app/my-counter.tsx @@ -28,4 +28,4 @@ class MyCounter extends Component { ) } -} \ No newline at end of file +} diff --git a/src/sections/zh/congratulations/app/index.tsx b/src/sections/zh/congratulations/app/index.tsx index fe2cd60..0550104 100644 --- a/src/sections/zh/congratulations/app/index.tsx +++ b/src/sections/zh/congratulations/app/index.tsx @@ -51,7 +51,7 @@ class MyElement extends Component { vy: -2 + Math.random() * -5, r: 2 + 2 * Math.random(), opacity: 1, - color: this.randomColor() + color: this.randomColor(), }) } } @@ -69,9 +69,9 @@ class MyElement extends Component { particle.y += particle.vy this.ctx.fillStyle = particle.color this.ctx.globalAlpha = particle.opacity - this.ctx.beginPath(); - this.ctx.arc(particle.x, particle.y, particle.r, 0, 2 * Math.PI); - this.ctx.fill(); + this.ctx.beginPath() + this.ctx.arc(particle.x, particle.y, particle.r, 0, 2 * Math.PI) + this.ctx.fill() }) this.ctx.restore() } @@ -90,15 +90,17 @@ class MyElement extends Component { render() { return (
-

this.h1 = e} onClick={this.onClick}>🎉 Congratulations!

+

(this.h1 = e)} onClick={this.onClick}> + 🎉 Congratulations! +

this.canvas = e} + ref={(e) => (this.canvas = e)} width={window.innerWidth} - height={window.innerHeight}> - + height={window.innerHeight} + >
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/event/app/index.tsx b/src/sections/zh/event/app/index.tsx index 69e7e11..776f87c 100644 --- a/src/sections/zh/event/app/index.tsx +++ b/src/sections/zh/event/app/index.tsx @@ -35,9 +35,8 @@ class MyApp extends Component {
evt.detail: {this.evtDetail}
- ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/fragment/app/index.tsx b/src/sections/zh/fragment/app/index.tsx index 94ae760..1fbb444 100644 --- a/src/sections/zh/fragment/app/index.tsx +++ b/src/sections/zh/fragment/app/index.tsx @@ -30,4 +30,4 @@ class MyCounter extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/hello-omi/app/index.tsx b/src/sections/zh/hello-omi/app/index.tsx index 13118f3..b64990c 100644 --- a/src/sections/zh/hello-omi/app/index.tsx +++ b/src/sections/zh/hello-omi/app/index.tsx @@ -8,10 +8,11 @@ class HelloOmi extends Component { return ( <>

Hello {props.msg}!

- {count.value} + {count.value} + ) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/lifecycle-and-ref/app/index.tsx b/src/sections/zh/lifecycle-and-ref/app/index.tsx index bf89635..b9660fe 100644 --- a/src/sections/zh/lifecycle-and-ref/app/index.tsx +++ b/src/sections/zh/lifecycle-and-ref/app/index.tsx @@ -11,10 +11,10 @@ class HelloOmi extends Component { render(props) { return (
-

this.h1 = e}>Can't see me!

+

(this.h1 = e)}>Can't see me!

) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/props/app/button.css b/src/sections/zh/props/app/button.css index a55f406..ac75c92 100644 --- a/src/sections/zh/props/app/button.css +++ b/src/sections/zh/props/app/button.css @@ -1,9 +1,9 @@ :host { - display: inline-block + display: inline-block; } :host([block]) { - display: block + display: block; } .o-button { @@ -19,23 +19,23 @@ box-sizing: border-box; outline: none; margin: 0; - transition: .1s; + transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; - border-radius: 4px + border-radius: 4px; } .o-button:hover { border-color: #07c16061; - border-color: var(--o-primary-fade-some, rgba(7, 193, 96, .382)); + border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); color: #07c160; color: var(--o-primary, #07c160); background-color: #07c1601a; - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button:active { @@ -43,34 +43,34 @@ color: var(--o-primary, #07c160); border-color: #07c160; border-color: var(--o-primary, #07c160); - outline: none + outline: none; } .o-button-medium { padding: 10px 20px; font-size: 14px; - border-radius: 4px + border-radius: 4px; } .o-button-small { padding: 9px 15px; font-size: 12px; - border-radius: 3px + border-radius: 3px; } .o-button-mini { padding: 7px 15px; font-size: 12px; - border-radius: 3px + border-radius: 3px; } .o-button.is-round { - border-radius: 20px + border-radius: 20px; } .o-button.is-circle { border-radius: 20px; - padding: 12px + padding: 12px; } .o-button.is-disabled, @@ -80,157 +80,157 @@ cursor: not-allowed; background-image: none; background-color: #fff; - border-color: #ebeef5 + border-color: #ebeef5; } .o-button.is-block { display: block; - width: 100% + width: 100%; } .o-button-primary { color: #fff; background-color: var(--o-primary, #07c160); - border-color: var(--o-primary, #07c160) + border-color: var(--o-primary, #07c160); } .o-button-primary:disabled, .o-button-primary:disabled:hover { - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button-primary.is-plain { color: var(--o-primary, #07c160); - background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, .1)); - border-color: var(--o-primary-fade-some, rgba(7, 193, 96, .382)) + background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1)); + border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); } .o-button-primary:hover { - background-color: var(--o-primary-fade-little, rgba(7, 193, 96, .618)); - border-color: var(--o-primary-fade-little, rgba(7, 193, 96, .618)); - color: #fff + background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618)); + border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618)); + color: #fff; } .o-button-primary:active { background-color: var(--o-primary-active, #059048); border-color: var(--o-primary-active, #059048); - color: #fff + color: #fff; } .o-button-success { color: #fff; background-color: var(--o-success, #07c160); - border-color: var(--o-success, #07c160) + border-color: var(--o-success, #07c160); } .o-button-success:disabled, .o-button-success:disabled:hover { - background-color: var(--o-success-fade-lot, rgba(7, 193, 96, .1)) + background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1)); } .o-button-success.is-plain { color: var(--o-success, #07c160); - background-color: var(--o-success-fade-lot, rgba(7, 193, 96, .1)); - border-color: var(--o-success-fade-some, rgba(7, 193, 96, .382)) + background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1)); + border-color: var(--o-success-fade-some, rgba(7, 193, 96, 0.382)); } .o-button-success:hover { - background-color: var(--o-success-fade-little, rgba(7, 193, 96, .618)); - border-color: var(--o-success-fade-little, rgba(7, 193, 96, .618)); - color: #fff + background-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618)); + border-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618)); + color: #fff; } .o-button-success:active { background-color: var(--o-success-active, #059048); border-color: var(--o-success-active, #059048); - color: #fff + color: #fff; } .o-button-warning { color: #fff; background-color: var(--o-warning, #f2711c); - border-color: var(--o-warning, #f2711c) + border-color: var(--o-warning, #f2711c); } .o-button-warning:disabled, .o-button-warning:disabled:hover { - background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, .1)) + background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1)); } .o-button-warning.is-plain { color: var(--o-warning, #f2711c); - background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, .1)); - border-color: var(--o-warning-fade-some, rgba(242, 113, 28, .382)) + background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1)); + border-color: var(--o-warning-fade-some, rgba(242, 113, 28, 0.382)); } .o-button-warning:hover { - background-color: var(--o-warning-fade-little, rgba(242, 113, 28, .618)); - border-color: var(--o-warning-fade-little, rgba(242, 113, 28, .618)); - color: #fff + background-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618)); + border-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618)); + color: #fff; } .o-button-warning:active { background-color: var(--o-warning-active, #cf590c); border-color: var(--o-warning-active, #cf590c); - color: #fff + color: #fff; } .o-button-danger { color: #fff; background-color: var(--o-danger, #fa5151); - border-color: var(--o-danger, #fa5151) + border-color: var(--o-danger, #fa5151); } .o-button-danger:disabled, .o-button-danger:disabled:hover { - background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, .1)) + background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1)); } .o-button-danger.is-plain { color: var(--o-danger, #fa5151); - background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, .1)); - border-color: var(--o-danger-fade-some, rgba(250, 81, 81, .382)) + background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1)); + border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); } .o-button-danger:hover { - background-color: var(--o-danger-fade-little, rgba(250, 81, 81, .618)); - border-color: var(--o-danger-fade-little, rgba(250, 81, 81, .618)); - color: #fff + background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618)); + border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618)); + color: #fff; } .o-button-danger:active { background-color: var(--o-danger-active, #f91f1f); border-color: var(--o-danger-active, #f91f1f); - color: #fff + color: #fff; } .o-button-info { color: #fff; background-color: var(--o-info, #42b8dd); - border-color: var(--o-info, #42b8dd) + border-color: var(--o-info, #42b8dd); } .o-button-info:disabled, .o-button-info:disabled:hover { - background-color: var(--o-info-fade-lot, rgba(66, 184, 221, .1)) + background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1)); } .o-button-info.is-plain { color: var(--o-info, #42b8dd); - background-color: var(--o-info-fade-lot, rgba(66, 184, 221, .1)); - border-color: var(--o-info-fade-some, rgba(66, 184, 221, .382)) + background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1)); + border-color: var(--o-info-fade-some, rgba(66, 184, 221, 0.382)); } .o-button-info:hover { - background-color: var(--o-info-fade-little, rgba(66, 184, 221, .618)); - border-color: var(--o-info-fade-little, rgba(66, 184, 221, .618)); - color: #fff + background-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618)); + border-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618)); + color: #fff; } .o-button-info:active { background-color: var(--o-info-active, #24a1c8); border-color: var(--o-info-active, #24a1c8); - color: #fff + color: #fff; } .loading { @@ -238,25 +238,25 @@ height: 1em; display: inline-block; animation: loading 1s steps(12, end) infinite; - vertical-align: -.125em + vertical-align: -0.125em; } @-webkit-keyframes loading { 0% { - transform: rotate3d(0, 0, 1, 0) + transform: rotate3d(0, 0, 1, 0); } to { - transform: rotate3d(0, 0, 1, 360deg) + transform: rotate3d(0, 0, 1, 360deg); } } @keyframes loading { 0% { - transform: rotate3d(0, 0, 1, 0) + transform: rotate3d(0, 0, 1, 0); } to { - transform: rotate3d(0, 0, 1, 360deg) + transform: rotate3d(0, 0, 1, 360deg); } -} \ No newline at end of file +} diff --git a/src/sections/zh/props/app/button.tsx b/src/sections/zh/props/app/button.tsx index b542b60..75b8779 100644 --- a/src/sections/zh/props/app/button.tsx +++ b/src/sections/zh/props/app/button.tsx @@ -81,4 +81,4 @@ class Button extends Component { ) } -} \ No newline at end of file +} diff --git a/src/sections/zh/props/app/index.tsx b/src/sections/zh/props/app/index.tsx index 118f227..3737191 100644 --- a/src/sections/zh/props/app/index.tsx +++ b/src/sections/zh/props/app/index.tsx @@ -1,7 +1,7 @@ import { h, render } from 'omi' import './button' -render(( +render(
@@ -13,38 +13,54 @@ render(( Icon - Icon + + Icon
Default - Primary - Warning - Danger - Info + + Primary + + + Warning + + + Danger + + + Info + Icon - Icon + + Icon
Plain - Primary - Warning - Danger - Info + + Primary + + + Warning + + + Danger + + + Info + Icon - Icon + + Icon @@ -56,11 +72,21 @@ render((
- Plain - Primary - Warning - Danger - Info + + Plain + + + Primary + + + Warning + + + Danger + + + Info + @@ -79,9 +105,15 @@ render((
Default - Medium - Small - Mini + + Medium + + + Small + + + Mini +
@@ -115,6 +147,6 @@ render((
Block button -
-), 'body') - +
, + 'body' +) diff --git a/src/sections/zh/render/app/index.css b/src/sections/zh/render/app/index.css index 1a05ad5..63ef5b8 100644 --- a/src/sections/zh/render/app/index.css +++ b/src/sections/zh/render/app/index.css @@ -1,4 +1,4 @@ span { display: inline-block; width: 68px; -} \ No newline at end of file +} diff --git a/src/sections/zh/render/app/index.tsx b/src/sections/zh/render/app/index.tsx index 12e4786..75aa56a 100644 --- a/src/sections/zh/render/app/index.tsx +++ b/src/sections/zh/render/app/index.tsx @@ -8,18 +8,22 @@ class MyApp extends Component { render(props) { return (
- {props.numbers.map((a, indexA) => + {props.numbers.map((a, indexA) => (
- { - props.numbers.map((b, indexB) => { - return indexA <= indexB && {a}*{b}={a * b} - }) - } + {props.numbers.map((b, indexB) => { + return ( + indexA <= indexB && ( + + {a}*{b}={a * b}{' '} + + ) + ) + })}
- )} + ))}
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/router/app/index.tsx b/src/sections/zh/router/app/index.tsx index f5e1924..3401ea5 100644 --- a/src/sections/zh/router/app/index.tsx +++ b/src/sections/zh/router/app/index.tsx @@ -17,11 +17,7 @@ class UserDetail extends Component { @tag('home-page') class HomePage extends Component { render() { - return ( -
- home-page -
- ) + return
home-page
} } @@ -40,7 +36,6 @@ class MyApp extends Component { $route install() { - route('/', () => { this.data.tag = 'home-page' this.update() @@ -76,16 +71,24 @@ class MyApp extends Component { return (
-
+
+ +
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/scoped-css/app/index.tsx b/src/sections/zh/scoped-css/app/index.tsx index de6ced9..d5406e7 100644 --- a/src/sections/zh/scoped-css/app/index.tsx +++ b/src/sections/zh/scoped-css/app/index.tsx @@ -6,9 +6,11 @@ class HelloOmi extends Component { render(props) { return ( -

Hello, {props.msg}!

+

+ Hello, {props.msg}! +

) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/slot/app/index.tsx b/src/sections/zh/slot/app/index.tsx index 730abfe..3eba4b8 100644 --- a/src/sections/zh/slot/app/index.tsx +++ b/src/sections/zh/slot/app/index.tsx @@ -17,9 +17,10 @@ class MyElement extends Component { } } -render(( +render(

One

Two

- -), 'body') \ No newline at end of file + , + 'body' +) diff --git a/src/sections/zh/snake-game/app/game-screen.tsx b/src/sections/zh/snake-game/app/game-screen.tsx index edcf754..69e9243 100644 --- a/src/sections/zh/snake-game/app/game-screen.tsx +++ b/src/sections/zh/snake-game/app/game-screen.tsx @@ -2,7 +2,6 @@ import { Component, h, tag } from 'omi' @tag('game-screen') export default class extends Component { - static css = ` .screen { border: 1px solid #000; @@ -46,22 +45,23 @@ export default class extends Component { background: #879372; overflow: hidden; }` - + render(props, store) { return (
- {store.state.value.map.map(row => { - return

- {row.map(col => { - if (col) { - return - } - return - })} -

+ {store.state.value.map.map((row) => { + return ( +

+ {row.map((col) => { + if (col) { + return + } + return + })} +

+ ) })}
) } } - diff --git a/src/sections/zh/snake-game/app/game.ts b/src/sections/zh/snake-game/app/game.ts index 820e2e4..e6ff1fc 100644 --- a/src/sections/zh/snake-game/app/game.ts +++ b/src/sections/zh/snake-game/app/game.ts @@ -23,8 +23,7 @@ class Game { onTick: () => void init() { - - this.snake = new Snake + this.snake = new Snake() for (let i = 0; i < this.size; i++) { const row = [] @@ -103,21 +102,24 @@ class Game { if (!this.food) { this.food = [this._rd(0, this.size - 1), this._rd(0, this.size - 1)] for (let k = 0, len = this.snake.body.length; k < len; k += 2) { - if (this.snake.body[k + 1] === this.food[1] - && this.snake.body[k] === this.food[0]) { + if ( + this.snake.body[k + 1] === this.food[1] && + this.snake.body[k] === this.food[0] + ) { this.food = null this.makeFood() break } - } } } eat() { for (let k = 0, len = this.snake.body.length; k < len; k += 2) { - if (this.snake.body[k + 1] === this.food[1] - && this.snake.body[k] === this.food[0]) { + if ( + this.snake.body[k + 1] === this.food[1] && + this.snake.body[k] === this.food[0] + ) { this.food = null return true } @@ -129,4 +131,4 @@ class Game { } } -export default Game \ No newline at end of file +export default Game diff --git a/src/sections/zh/snake-game/app/snake-game.tsx b/src/sections/zh/snake-game/app/snake-game.tsx index 7d97cd1..4c11651 100644 --- a/src/sections/zh/snake-game/app/snake-game.tsx +++ b/src/sections/zh/snake-game/app/snake-game.tsx @@ -3,7 +3,6 @@ import { Component, h, tag } from 'omi' @tag('snake-game') export default class extends Component { - static css = ` .r { float: right @@ -211,7 +210,7 @@ export default class extends Component { top: 0px; left: 30px; }` - + render(props, store) { return (
@@ -219,17 +218,41 @@ export default class extends Component {
-
Up
-
Down
-
Left
-
Right
-
Speed+/-
-
Reset
-
{store.state.value.paused ? 'Play' : 'Pause'}
+
+ + + Up +
+
+ + + Down +
+
+ + + Left +
+
+ + + Right +
+
+ + Speed+/- +
+
+ + Reset +
+
+ + {store.state.value.paused ? 'Play' : 'Pause'} +
) } } - diff --git a/src/sections/zh/snake-game/app/snake.ts b/src/sections/zh/snake-game/app/snake.ts index 923916c..d1dea1d 100644 --- a/src/sections/zh/snake-game/app/snake.ts +++ b/src/sections/zh/snake-game/app/snake.ts @@ -31,21 +31,17 @@ class Snake { } turnUp() { - if (this.dir !== 'down') - this.dir = 'up' + if (this.dir !== 'down') this.dir = 'up' } turnRight() { - if (this.dir !== 'left') - this.dir = 'right' + if (this.dir !== 'left') this.dir = 'right' } turnDown() { - if (this.dir !== 'up') - this.dir = 'down' + if (this.dir !== 'up') this.dir = 'down' } turnLeft() { - if (this.dir !== 'right') - this.dir = 'left' + if (this.dir !== 'right') this.dir = 'left' } } -export default Snake \ No newline at end of file +export default Snake diff --git a/src/sections/zh/snake-game/app/store.ts b/src/sections/zh/snake-game/app/store.ts index ff5173a..dc69572 100644 --- a/src/sections/zh/snake-game/app/store.ts +++ b/src/sections/zh/snake-game/app/store.ts @@ -6,20 +6,20 @@ class Store { snake: Snake map: number[][] game: Game - state: SignalValue<{ map: number[][], paused: boolean }> - + state: SignalValue<{ map: number[][]; paused: boolean }> + constructor() { const game = new Game({ onTick: () => { this.state.update() - } + }, }) const { snake, map } = game this.snake = snake this.map = map this.game = game game.start() - this.state = signal( { map: game.map, paused: false }) + this.state = signal({ map: game.map, paused: false }) } @bind @@ -65,4 +65,4 @@ class Store { } } -export default new Store \ No newline at end of file +export default new Store() diff --git a/src/sections/zh/to-motion/app/index.tsx b/src/sections/zh/to-motion/app/index.tsx index 307e651..8a52c10 100644 --- a/src/sections/zh/to-motion/app/index.tsx +++ b/src/sections/zh/to-motion/app/index.tsx @@ -6,7 +6,7 @@ class MyApp extends Component { from = this.number to = this.number out = { - number: this.number + number: this.number, } start = false outs = [{ width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }] @@ -32,7 +32,13 @@ class MyApp extends Component { this.outs.forEach((out, index) => { this[`$to${index}`].stop() }) - this.outs = [{ width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }, { width: 10 }] + this.outs = [ + { width: 10 }, + { width: 10 }, + { width: 10 }, + { width: 10 }, + { width: 10 }, + ] this.update() } @@ -40,25 +46,52 @@ class MyApp extends Component { return (

Simple

- +
{this.out.number.toFixed(0)}
-
{this.out.number.toFixed(0)}*{this.out.number.toFixed(0)}={(this.out.number * this.out.number).toFixed(0)}
-
- - - +
+ {this.out.number.toFixed(0)}*{this.out.number.toFixed(0)}= + {(this.out.number * this.out.number).toFixed(0)} +
+
+

Group

- {this.outs.map((item, index) => -
- )} - - {this.outs.map((item, index) => - this[`$to${index}`] = e} from={{ width: 10 }} start={this.start} easing="bounce-out" delay={100 * index} onProgress={this.onProgress} to={{ width: 200 }} out={this.outs[index]} duration={600}> - - )} + {this.outs.map((item, index) => ( +
+ ))} + {' '} + + {this.outs.map((item, index) => ( + (this[`$to${index}`] = e)} + from={{ width: 10 }} + start={this.start} + easing="bounce-out" + delay={100 * index} + onProgress={this.onProgress} + to={{ width: 200 }} + out={this.outs[index]} + duration={600} + > + ))}
) } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/transition/app/index.tsx b/src/sections/zh/transition/app/index.tsx index 4027ea3..89e570f 100644 --- a/src/sections/zh/transition/app/index.tsx +++ b/src/sections/zh/transition/app/index.tsx @@ -34,10 +34,7 @@ class MyApp extends Component {
    {this.list.map((item, index) => ( - +
  • {item}
    •  ))} @@ -47,4 +44,4 @@ class MyApp extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/sections/zh/unsafe-html/app/index.tsx b/src/sections/zh/unsafe-html/app/index.tsx index 5ca053f..336be03 100644 --- a/src/sections/zh/unsafe-html/app/index.tsx +++ b/src/sections/zh/unsafe-html/app/index.tsx @@ -9,4 +9,4 @@ class MyElement extends Component { } } -render(, 'body') \ No newline at end of file +render(, 'body') diff --git a/src/ts-build.ts b/src/ts-build.ts index bd6bb7b..24f129d 100644 --- a/src/ts-build.ts +++ b/src/ts-build.ts @@ -1,4 +1,4 @@ -import * as ts from "typescript" +import * as ts from 'typescript' export function tsBuild(code) { return ts.transpileModule(code, { @@ -8,7 +8,6 @@ export function tsBuild(code) { jsx: ts.JsxEmit.React, jsxFactory: 'h', jsxFragmentFactory: 'h.f', - } + }, }).outputText } -