TalkingData · Baoyx007 · Jan 20, 2019
diff --git a/.babelrc b/.babelrc
@@ -3,30 +3,21 @@
     [
       "@babel/env",
       {
-        "targets": {
-          "browsers": [
-            "ie >= 11"
-          ]
-        },
+        "targets": { "browsers": ["ie >= 11"] },
         "exclude": ["transform-async-to-generator", "transform-regenerator"],
         "modules": false,
         "loose": true
       }
     ]
   ],
   "plugins": [
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
   ],
   "env": {
     "commonjs": {
-      "presets": [
-        [
-          "@babel/env",
-          {
-            "loose": true
-          }
-        ]
-      ]
+      "presets": [["@babel/env", {  "modules": "cjs" }]]
     }
   }
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 lib
 es
 dist
-coverage
+coverage
+.vscode
diff --git a/docs/advanced/typescript.md b/docs/advanced/typescript.md
@@ -33,4 +33,36 @@ const comment: Model = {
   },
 };
 export default comment;
+```
+
+##  Class style model 
+
+```typescript
+import { Action, model, reducer, pipe } from '@rxloop/core';
+
+@model({ name: '', email: '' })
+export class User {
+  @reducer
+  info(state: any, action: Action) { return state }
+
+  @pipe
+  getData(action$: Observable<Action>, { call, map }) {
+    return action$.pipe(
+      call(async (action: Action) => {
+        return { name: 'wxnet' };
+      }),
+      map((data) => {
+        return { type: 'info', data };
+      }),
+    );
+  }
+
+  @pipe
+  setData(action$: Observable<Action>) {
+    return action$.pipe();
+  }
+}
+
+const app = rxloop();
+app.model(User);
 ```
diff --git a/examples/typescript/index.html b/examples/typescript/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>rxloop basic example</title>
+</head>
+<body>
+  <div>
+    <p>
+      Clicked: <span id="value">0</span> times
+      <button id="increment">+</button>
+      <button id="decrement">-</button>
+      <button id="incrementIfOdd">Increment if odd</button>
+      <button id="incrementAsync">Increment async</button>
+    </p>
+  </div>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "counter-basic-typescript",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "start": "webpack-dev-server --mode development --open --hot"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@rxloop/devtools": "^0.1.3",
+    "rxjs": "^6.3.2",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.1.2",
+    "webpack-dev-server": "^3.1.4"
+  }
+}
diff --git a/examples/typescript/src/index.js b/examples/typescript/src/index.js
@@ -0,0 +1,131 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var __1 = __importStar(require("../../../"));
+var devtools_1 = __importDefault(require("@rxloop/devtools"));
+var operators_1 = require("rxjs/operators");
+var _a = __1.decorators(), reducer = _a.reducer, model = _a.model, pipe = _a.pipe;
+var Counter = /** @class */ (function () {
+    function Counter() {
+    }
+    Counter.prototype.increment = function (state) {
+        return state + 1;
+    };
+    Counter.prototype.decrement = function (state) {
+        return state + 1;
+    };
+    Counter.prototype.incrementAsync = function (action$, _a) {
+        var _this = this;
+        var call = _a.call;
+        return action$.pipe(call(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, 1];
+            });
+        }); }), operators_1.map(function () {
+            return { type: "increment" };
+        }));
+    };
+    __decorate([
+        reducer
+    ], Counter.prototype, "increment", null);
+    __decorate([
+        reducer
+    ], Counter.prototype, "decrement", null);
+    __decorate([
+        pipe
+    ], Counter.prototype, "incrementAsync", null);
+    Counter = __decorate([
+        model(0)
+    ], Counter);
+    return Counter;
+}());
+var a = model(0)(Counter);
+var app = __1.default({
+    plugins: [devtools_1.default()]
+});
+app.model(a);
+app.model({
+    name: 'counter2',
+    state: 0,
+    reducers: {
+        increment: function (state) {
+            return state + 1;
+        },
+        decrement: function (state) {
+            return state - 1;
+        }
+    }
+});
+app.start();
+var valueEl = document.getElementById('value');
+app.stream('counter').subscribe(function (state) {
+    valueEl.innerHTML = state;
+});
+document.getElementById('increment')
+    .addEventListener('click', function () {
+    app.dispatch({ type: 'counter/increment' });
+});
+document.getElementById('decrement')
+    .addEventListener('click', function () {
+    app.dispatch({ type: 'counter/decrement' });
+});
+document.getElementById('incrementIfOdd')
+    .addEventListener('click', function () {
+    if (app.getState('counter') % 2 !== 0) {
+        app.dispatch({ type: 'counter/increment' });
+    }
+});
+document.getElementById('incrementAsync')
+    .addEventListener('click', function () {
+    app.dispatch({ type: 'counter/incrementAsync' });
+});
diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts
@@ -0,0 +1,81 @@
+import rxloop, { decorators, Action, OperatorsMap } from '../../../';
+import devTools from '@rxloop/devtools';
+import { map, filter } from "rxjs/operators";
+import { Observable } from 'rxjs'
+
+const {reducer, model, pipe}=  decorators<number>()
+
+@model(0)
+class Counter {
+
+  @reducer
+  increment(state: number) {
+    return state + 1;
+  }
+
+  @reducer
+  decrement(state: number) {
+    return state + 1;
+  }
+
+  @pipe
+  incrementAsync(action$:Observable<Action>, {call}: OperatorsMap) {
+    return action$.pipe(
+      call(async() => {
+        return 1;
+      }),
+      map(()=> {
+        return { type: "increment" };
+      })
+    );
+  }
+}
+const a = model(0)(Counter)
+
+const app = rxloop({
+  plugins: [ devTools() ]
+});
+
+app.model(a);
+app.model({
+  name: 'counter2',
+  state: 0,
+  reducers:{
+    increment(state) {
+      return state + 1;
+    },
+    decrement(state) {
+      return state - 1;
+    }
+  }
+});
+
+
+app.start();
+
+var valueEl = document.getElementById('value') as HTMLElement;
+app.stream('counter').subscribe((state) => {
+  valueEl.innerHTML = state;
+});
+
+document.getElementById('increment')
+        .addEventListener('click', function () {
+          app.dispatch({ type: 'counter/increment' })
+        })
+
+document.getElementById('decrement')
+        .addEventListener('click', function () {
+          app.dispatch({ type: 'counter/decrement' })
+        })
+
+document.getElementById('incrementIfOdd')
+        .addEventListener('click', function () {
+          if (app.getState('counter') % 2 !== 0) {
+            app.dispatch({ type: 'counter/increment' })
+          }
+        })
+
+document.getElementById('incrementAsync')
+        .addEventListener('click', function () {
+          app.dispatch({ type: 'counter/incrementAsync' })
+        })
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,5 @@ node_modules @@
     lib
     es
     dist
-    coverage
+    coverage
+    .vscode