add react-typescript-mobx template

steamerjs · Jun 2, 2018 · 67a01e4 · 67a01e4
1 parent 156c600
commit 67a01e4
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 10 deletions.
diff --git a/tools/feature/tsconfig.json b/tools/feature/tsconfig.json
@@ -1,11 +1,14 @@
 {
- "compilerOptions": {
- "outDir": "./dist/",
- "sourceMap": true,
- "noImplicitAny": true,
- "module": "commonjs",
- "target": "es5",
- "jsx": "react"
- },
- "include": ["./src/**/*"]
-}
+ "compilerOptions": {
+ "outDir": "./dist/",
+ "sourceMap": true,
+ "noImplicitAny": true,
+ "module": "commonjs",
+ "target": "es5",
+ "jsx": "react",
+ "experimentalDecorators": true
+ },
+ "include": [
+ "./src/**/*"
+ ]
+}
diff --git a/tools/template/react-typescript-mobx/container/index.less b/tools/template/react-typescript-mobx/container/index.less
@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+@import "~css/common/common.less";
+@import "~css/common/reset.less";
+@import "css/sprites/icons.full.css";
+
+.wrapper {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0;
+ right: 0;
+ margin: auto;
+}
+
+h2.title {
+ margin: 20px auto;
+ text-align: center;
+ font-size: 30px;
+ font-weight: bold;
+}
+
+.logo {
+ display: block;
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 20px;
+ background-size: 100%;
+ background-image: inline('img/steamer.png');
+}
+
+.text {
+ text-align: center;
+ margin: 0 0 20px;
+}
+
+.btn {
+ text-align: center;
+ margin: 0 0 20px;
+}
+
+.link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ a {
+ flex: 1;
+ max-width: 64px;
+ margin: 0 10px;
+ }
+}
diff --git a/tools/template/react-typescript-mobx/container/index.tsx b/tools/template/react-typescript-mobx/container/index.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { observer, inject } from 'mobx-react';
+import { Provider } from 'mobx-react';
+import View from '../stores/view';
+import { Stores } from '../types';
+
+import './index.less';
+
+interface SelectedStores {
+ store?: View
+}
+
+interface Props extends SelectedStores {
+
+}
+
+@inject((stores: Stores): Props => ({ store: stores.ViewStore }))
+@observer
+export default class App extends React.Component<Props, {}>{
+
+ private store = this.props.store;
+
+ constructor(props: Props) {
+ super(props);
+ this.show = this.show.bind(this);
+ this.text = this.text.bind(this);
+ }
+
+ show(): void {
+ this.store.setShow(!this.store.show)
+ }
+
+ text(): string {
+ if (this.store.show) {
+ return '模板由 hordeliu 提供';
+ } else {
+ return 'credit to hordeliu';
+ }
+ }
+
+ render(): JSX.Element {
+
+ return (
+ <div className="wrapper">
+ <div className="logo"></div>
+ <h2 className="title">steamer-react</h2>
+ <div className="text">TypeScript Mobx模板</div>
+ <div className="btn" onClick={this.show}>点我显示 - {this.text()}</div>
+ <div className="link">
+ <a className="icon-github" href="https:/steamerjs/steamer-react" target="_blank" title="Github"></a>
+ <a className="icon-docs" href="https://steamerjs.github.io/" target="_blank" title="文档"></a>
+ <a className="icon-author" href="https:/lcxfs1991" target="_blank" title="作者"></a>
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/tools/template/react-typescript-mobx/main.html b/tools/template/react-typescript-mobx/main.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="zh">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,minimal-ui, viewport-fit=cover"
+ />
+ <meta content="yes" name="apple-mobile-web-app-capable" />
+ <meta content="black" name="apple-mobile-web-app-status-bar-style" />
+ <meta name="format-detection" content="telephone=no, email=no" />
+ <title>
+ <% title %>
+ </title>
+ <meta name="keywords" content="" />
+ <meta name="description" content="" />
+ <meta name="author" content="" />
+ <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
+ <link rel="icon" type="image/x-icon" href="./favicon.ico">
+ <link rel="stylesheet" href="<% title %>.css?__production">
+</head>
+
+<body>
+ <div id="pages" class="cm-page-wrap"></div>
+ <script src="libs/react.js?__production"></script>
+ <script src="libs/react-dom.js?__production"></script>
+ <script src="<% title %>.js"></script>
+</body>
+
+</html>
diff --git a/tools/template/react-typescript-mobx/main.tsx b/tools/template/react-typescript-mobx/main.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Provider } from 'mobx-react';
+import { createStores } from './stores/'
+import App from './container';
+
+const rootStores = createStores();
+
+ReactDOM.render(
+ <Provider {...rootStores}>
+ <App />
+ </Provider>,
+ document.getElementById('pages')
+);
diff --git a/tools/template/react-typescript-mobx/stores/index.ts b/tools/template/react-typescript-mobx/stores/index.ts
@@ -0,0 +1,8 @@
+import View from './view';
+import { Stores } from '../types'
+
+export function createStores() : Stores{
+ return {
+ ViewStore : new View()
+ }
+}
diff --git a/tools/template/react-typescript-mobx/stores/view.ts b/tools/template/react-typescript-mobx/stores/view.ts
@@ -0,0 +1,20 @@
+import { observable, computed, action } from 'mobx';
+
+export default class View {
+ @observable show : boolean;
+ @observable text : string;
+
+ constructor(){
+ this.text = 'hello World'
+ }
+
+ @action
+ setShow = ( flag : boolean) : void => {
+ this.show = flag;
+ }
+
+ @action 
+ setText = (text : string) : void => {
+ this.text = text;
+ }
+}
diff --git a/tools/template/react-typescript-mobx/types/index.ts b/tools/template/react-typescript-mobx/types/index.ts
@@ -0,0 +1,5 @@
+import View from '../stores/view'
+
+export interface Stores {
+ ViewStore : View
+}