move dir

2019-12-21 21:37:51 +08:00
parent b5cb29ca03
commit 9b5fbedfca
47 changed files with 0 additions and 0 deletions
--- a/doric-js/.gitignore
+++ b/doric-js/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+build/
+bundle/
+demo/
+.DS_Store
--- a/doric-js/LICENSE
+++ b/doric-js/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [2019] [Doric.Pub]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/doric-js/README.md
+++ b/doric-js/README.md
@@ -0,0 +1 @@
+# Doric JS Framework
--- a/doric-js/index.debug.ts
+++ b/doric-js/index.debug.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as doric from './src/runtime/sandbox'
+import * as WebSocket from 'ws'
+const WebSocketClient = require('ws')
+const fs = require('fs')
+let context = process.cwd()  + '/build/context'
+const contextId = fs.readFileSync(context, { encoding: 'utf8' })
+console.log("debugging context id: " + contextId)
+let global = new Function('return this')()
+global.doric = doric
+global.context = doric.jsObtainContext(contextId)
+global.Entry = doric.jsObtainEntry(contextId)
+
+// dev kit client
+const devClient = new WebSocketClient('ws://localhost:7777')
+devClient.on('open', function open() {
+  console.log('dev kit connected on 7777')
+})
+devClient.on('message', function incoming(data: any) {
+  console.log(data)
+})
+devClient.on('error', function incoming(error: any) {
+  console.log(error)
+})
+
+// debug server
+const debugServer = new WebSocket.Server({ port: 2080 })
+debugServer.on('connection', function connection(ws) {
+  console.log('connected')
+  ws.on('message', function incoming(message: string) {
+    let messageObject = JSON.parse(message)
+    switch (messageObject.cmd) {
+      case "injectGlobalJSFunction":
+        console.log(messageObject.name)
+        Reflect.set(global, messageObject.name, function () {
+          let args = [].slice.call(arguments)
+          console.log("===============================")
+          console.log(args)
+          console.log("===============================")
+          ws.send(JSON.stringify({
+            cmd: 'injectGlobalJSFunction',
+            name: messageObject.name,
+            arguments: args
+          }))
+        })
+        break
+      case "invokeMethod":
+        console.log(messageObject.objectName)
+        console.log(messageObject.functionName)
+
+        let args = []
+        for (let i = 0; i < messageObject.javaValues.length; i++) {
+          let javaValue = messageObject.javaValues[i]
+          if (javaValue.type === 0) {
+            args.push(null)
+          } else if (javaValue.type === 1) {
+            args.push(parseFloat(javaValue.value))
+          } else if (javaValue.type === 2) {
+            args.push((javaValue.value == 'true'))
+          } else if (javaValue.type === 3) {
+            args.push(javaValue.value.toString())
+          } else if (javaValue.type === 4) {
+            args.push(JSON.parse(javaValue.value))
+          } else if (javaValue.type === 5) {
+            args.push(JSON.parse(javaValue.value))
+          }
+        }
+        console.log(args)
+        console.log(messageObject.hashKey)
+
+        let object = Reflect.get(global, messageObject.objectName)
+        let method = Reflect.get(object, messageObject.functionName)
+        let result = Reflect.apply(method, undefined, args)
+
+        console.log(result)
+        ws.send(JSON.stringify({
+          cmd: 'invokeMethod',
+          result: result
+        }))
+        break
+    }
+  })
+})
+debugServer.on('listening', function connection(ws: WebSocket) {
+  console.log('debugger server started on 2080')
+})
+
+global.injectGlobal = (objName: string, obj: string) => {
+  Reflect.set(global, objName, JSON.parse(obj))
+}
+
+global.sendToNative = () => {
+
+}
+global.receiveFromNative = () => {
+
+}
+
+export * from './index'
--- a/doric-js/index.runtime.ts
+++ b/doric-js/index.runtime.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './src/runtime/sandbox'
--- a/doric-js/index.ts
+++ b/doric-js/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './src/runtime/global'
+export * from './src/ui/index.ui'
+export * from "./src/widget/index.widget"
+export * from './src/native/index.native'
+export * from "./src/util/index.util"
+export * from "./src/pattern/index.pattern"
--- a/doric-js/package-lock.json
+++ b/doric-js/package-lock.json
@@ -0,0 +1,117 @@
+{
+  "name": "doric",
+  "version": "0.1.3",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@rollup/plugin-node-resolve": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz",
+      "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==",
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.11.1"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.0.tgz",
+      "integrity": "sha512-qBbGQQaUUiId/lBU9VMeYlVLOoRNvz1fV8HWY5tiGDpI2gdPZHbmOfCjzSdXPhdq3XOfyWvXEBlIPbnM3+9ogQ==",
+      "requires": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.40",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.40.tgz",
+      "integrity": "sha512-p3KZgMto/JyxosKGmnLDJ/dG5wf+qTRMUjHJcspC2oQKa4jP7mz+tv0ND56lLBu3ojHlhzY33Ol+khLyNmilkA=="
+    },
+    "@types/node": {
+      "version": "12.12.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.21.tgz",
+      "integrity": "sha512-8sRGhbpU+ck1n0PGAUgVrWrWdjSW2aqNeyC15W88GRsMpSwzv6RJGlLhE7s2RhVSOdyDmxbqlWSeThq4/7xqlA=="
+    },
+    "@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/ws": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.4.tgz",
+      "integrity": "sha512-PpPrX7SZW9re6+Ha8ojZG4Se8AZXgf0GK6zmfqEuCsY49LFDNXO3SByp44X3dFEqtB73lkCDAdUazhAjVPiNwg==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "acorn": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
+      "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
+    },
+    "builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw=="
+    },
+    "estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+    },
+    "reflect-metadata": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+    },
+    "resolve": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",
+      "integrity": "sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==",
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "rollup": {
+      "version": "1.27.13",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.13.tgz",
+      "integrity": "sha512-hDi7M07MpmNSDE8YVwGVFA8L7n8jTLJ4lG65nMAijAyqBe//rtu4JdxjUBE7JqXfdpqxqDTbCDys9WcqdpsQvw==",
+      "requires": {
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      }
+    },
+    "tslib": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+    },
+    "typescript": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.3.tgz",
+      "integrity": "sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw=="
+    },
+    "ws": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz",
+      "integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A=="
+    }
+  }
+}
--- a/doric-js/package.json
+++ b/doric-js/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "doric",
+  "version": "0.1.3",
+  "description": "The JS Framework of Doric",
+  "main": "bundle/doric-vm.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p .&& rollup -c",
+    "dev": "tsc -w -p . & rollup -c -w",
+    "clean": "rm -rf build &&  rm -rf bundle"
+  },
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/doric-pub/doric"
+  },
+  "author": "pengfeizhou",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/doric-pub/doric/issues"
+  },
+  "homepage": "https://github.com/doric-pub/doric#readme",
+  "dependencies": {
+    "@types/ws": "^6.0.4",
+    "reflect-metadata": "^0.1.13",
+    "rollup": "^1.27.13",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "tslib": "^1.10.0",
+    "typescript": "^3.7.3",
+    "ws": "^7.2.1"
+  }
+}
--- a/doric-js/rollup.config.js
+++ b/doric-js/rollup.config.js
@@ -0,0 +1,51 @@
+const path = require('path')
+const fs = require('fs')
+import resolve from '@rollup/plugin-node-resolve'
+
+export default [
+    {
+        input: "build/index.runtime.js",
+        output: {
+            name: "doric",
+            format: "iife",
+            file: "bundle/doric-sandbox.js",
+        },
+        plugins: [
+            resolve({ mainFields: ["jsnext"] }),
+        ],
+        onwarn: function(warning) {
+            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+            console.warn( warning.message );
+        }
+    },
+    {
+        input: "build/index.js",
+        output: {
+            format: "cjs",
+            file: "bundle/doric-lib.js",
+        },
+        plugins: [
+            resolve({ mainFields: ["jsnext"] }),
+        ],
+        external: ['reflect-metadata'],
+        onwarn: function(warning) {
+            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+            console.warn( warning.message );
+        }
+    },
+    {
+        input: "build/index.debug.js",
+        output: {
+            format: "cjs",
+            file: "bundle/doric-vm.js",
+        },
+        plugins: [
+            resolve({ mainFields: ["jsnext"] }),
+        ],
+        external: ['ws'],
+        onwarn: function(warning) {
+            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+            console.warn( warning.message );
+        }
+    },
+]
--- a/doric-js/src/mock/driver.ts
+++ b/doric-js/src/mock/driver.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Panel } from '../ui/panel'
+import { View } from '../ui/view'
+
+export interface Driver {
+    /**
+     * Create and destory page
+     */
+    createPage(): Panel
+    destoryPage(): Panel
+
+    /**
+     * Page lifecycle
+     */
+    dispatchOnCreate(): void
+    dispatchOnDestory(): void
+    dispatchOnShow(): void
+    dispatchOnHidden(): void
+
+    /**
+     * Page render
+     */
+    dispatchBuild(): View
+}
+
+export interface Responser {
+    constructor(): void
+    respond(action: string, extra: any): void
+}
--- a/doric-js/src/native/animate.ts
+++ b/doric-js/src/native/animate.ts
@@ -0,0 +1,64 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Panel } from "../ui/panel"
+import { takeLet } from "../pattern/candies"
+import { BridgeContext } from "../runtime/global"
+/**
+ * Only supports x,y,width,height,corner(just for four corners),rotation,bgColor,
+ * @param panel @see Panel
+ */
+export function animate(context: BridgeContext) {
+    const entity = context.entity
+    if (entity instanceof Panel) {
+        let panel = entity
+        return (args: {
+            animations: () => void,
+            duration: number,
+        }) => {
+            return takeLet(panel.context.animate)(it => {
+                return it.submit().then(() => {
+                    args.animations()
+                    return takeLet(panel.getRootView())(root => {
+                        if (root.isDirty()) {
+                            const model = root.toModel();
+                            (model as any).duration = args.duration
+                            const ret = it.animateRender(model)
+                            root.clean()
+                            return ret
+                        }
+                        for (let v of panel.allHeadViews()) {
+                            if (v.isDirty()) {
+                                const model = v.toModel()
+                                const ret = it.animateRender(model)
+                                it.clean()
+                                return ret
+                            }
+                        }
+                        throw new Error('Cannot find any animated elements')
+                    })
+                })
+            }) as Promise<any>
+        }
+    } else {
+        return (args: {
+            animations: () => void,
+            duration: number,
+        }) => {
+            return Promise.reject(`Cannot find panel in Context:${context.id}`)
+        }
+    }
+
+}
--- a/doric-js/src/native/index.native.ts
+++ b/doric-js/src/native/index.native.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './modal'
+export * from './navbar'
+export * from './navigator'
+export * from './network'
+export * from './storage'
+export * from './popover'
+export * from './animate'
--- a/doric-js/src/native/modal.ts
+++ b/doric-js/src/native/modal.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+import { Gravity } from "../util/gravity"
+
+export function modal(context: BridgeContext) {
+    return {
+        toast: (msg: string, gravity: Gravity = Gravity.Bottom) => {
+            context.modal.toast({
+                msg,
+                gravity: gravity.toModel(),
+            })
+        },
+        alert: (arg: string | {
+            title: string,
+            msg: string,
+            okLabel?: string,
+        }) => {
+            if (typeof arg === 'string') {
+                return context.modal.alert({ msg: arg })
+            } else {
+                return context.modal.alert(arg)
+            }
+        },
+        confirm: (arg: string | {
+            title: string,
+            msg: string,
+            okLabel?: string,
+            cancelLabel?: string,
+        }) => {
+            if (typeof arg === 'string') {
+                return context.modal.confirm({ msg: arg })
+            } else {
+                return context.modal.confirm(arg)
+            }
+        },
+        prompt: (arg: {
+            title?: string,
+            msg?: string,
+            okLabel?: string,
+            cancelLabel?: string,
+            text?: string,
+            defaultText?: string,
+        }) => {
+            return context.modal.prompt(arg) as Promise<string>
+        },
+    }
+}
--- a/doric-js/src/native/navbar.ts
+++ b/doric-js/src/native/navbar.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+import { Panel } from "../ui/panel"
+import { Color } from "../util/color"
+
+export function navbar(context: BridgeContext) {
+    const entity = context.entity
+    let panel: Panel | undefined = undefined
+    if (entity instanceof Panel) {
+        panel = entity
+    }
+
+    return {
+        isHidden: () => {
+            return context.navbar.isHidden() as Promise<boolean>
+        },
+        setHidden: (hidden: boolean) => {
+            return context.navbar.setHidden({
+                hidden,
+            })
+        },
+        setTitle: (title: string) => {
+            return context.navbar.setTitle({
+                title,
+            })
+        },
+        setBgColor: (color: Color) => {
+            return context.navbar.setBgColor({
+                color: color.toModel(),
+            })
+        },
+    }
+}
--- a/doric-js/src/native/navigator.ts
+++ b/doric-js/src/native/navigator.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+
+export function navigator(context: BridgeContext) {
+    return {
+        push: (scheme: string, config?: {
+            alias?: string,
+            animated?: boolean,
+            extra?: object,
+        }) => {
+            if (config && config.extra) {
+                (config as any).extra = JSON.stringify(config.extra)
+            }
+            return context.navigator.push({
+                scheme, config
+            })
+        },
+        pop: (animated = true) => {
+            return context.navigator.pop({ animated })
+        },
+    }
+}
--- a/doric-js/src/native/network.ts
+++ b/doric-js/src/native/network.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+
+export interface IRequest {
+    // `url` is the server URL that will be used for the request
+    url?: string,
+    // `method` is the request method to be used when making the request
+    method?: "get" | "post" | "put" | "delete",
+    // `headers` are custom headers to be sent
+    headers?: { [index: string]: string }
+    // `params` are the URL parameters to be sent with the request
+    // Must be a plain object or a URLSearchParams object
+    params?: { [index: string]: string }
+    // `data` is the data to be sent as the request body
+    // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
+    data?: object | string
+    // `timeout` specifies the number of milliseconds before the request times out.
+    // If the request takes longer than `timeout`, the request will be aborted.
+    timeout?: number, // default is `0` (no timeout)
+}
+
+export interface IResponse {
+    // `data` is the response that was provided by the server
+    data: any,
+    // `status` is the HTTP status code from the server response
+    status: number,
+    // `headers` the headers that the server responded with
+    // All header names are lower cased
+    headers?: { [index: string]: string },
+}
+
+function transformRequest(request: IRequest) {
+    let url = request.url || ""
+    if (request.params !== undefined) {
+        const queryStrings = []
+        for (let key in request.params) {
+            queryStrings.push(`${key}=${encodeURIComponent(request.params[key])}`)
+        }
+        request.url = `${request.url}${url.indexOf('?') >= 0 ? '&' : '?'}${queryStrings.join('&')}`
+    }
+    if (typeof request.data === 'object') {
+        request.data = JSON.stringify(request.data)
+    }
+    return request
+}
+
+export function network(context: BridgeContext) {
+    return {
+        request: (config: IRequest) => {
+            return context.network.request(transformRequest(config)) as Promise<IResponse>
+        },
+        get: (url: string, config?: IRequest) => {
+            let finalConfig = config
+            if (finalConfig === undefined) {
+                finalConfig = {}
+            }
+            finalConfig.url = url
+            finalConfig.method = "get"
+            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+        },
+        post: (url: string, data?: object | string, config?: IRequest) => {
+            let finalConfig = config
+            if (finalConfig === undefined) {
+                finalConfig = {}
+            }
+            finalConfig.url = url
+            finalConfig.method = "post"
+            if (data !== undefined) {
+                finalConfig.data = data
+            }
+            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+        },
+        put: (url: string, data?: object | string, config?: IRequest) => {
+            let finalConfig = config
+            if (finalConfig === undefined) {
+                finalConfig = {}
+            }
+            finalConfig.url = url
+            finalConfig.method = "put"
+            if (data !== undefined) {
+                finalConfig.data = data
+            }
+            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+        },
+        delete: (url: string, data?: object | string, config?: IRequest) => {
+            let finalConfig = config
+            if (finalConfig === undefined) {
+                finalConfig = {}
+            }
+            finalConfig.url = url
+            finalConfig.method = "delete"
+            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+        },
+    }
+}
--- a/doric-js/src/native/popover.ts
+++ b/doric-js/src/native/popover.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+import { View } from "../ui/view"
+import { Panel } from "../ui/panel"
+
+export function popover(context: BridgeContext) {
+    const entity = context.entity
+    let panel: Panel | undefined = undefined
+    if (entity instanceof Panel) {
+        panel = entity
+    }
+    return {
+        show: (view: View) => {
+            if (panel) {
+                panel.addHeadView(view)
+            }
+            return context.popover.show(view.toModel())
+        },
+        dismiss: (view: View | undefined = undefined) => {
+            if (panel) {
+                if (view) {
+                    panel.removeHeadView(view)
+                } else {
+                    panel.clearHeadViews()
+                }
+            }
+            return context.popover.dismiss(view ? { id: view.viewId } : undefined)
+        },
+    }
+}
--- a/doric-js/src/native/storage.ts
+++ b/doric-js/src/native/storage.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+
+export function storage(context: BridgeContext) {
+    return {
+        setItem: (key: string, value: string, zone?: string) => {
+            return context.storage.setItem({ key, value, zone })
+        },
+        getItem: (key: string, zone?: string) => {
+            return context.storage.getItem({ key, zone }) as Promise<string>
+        },
+        remove: (key: string, zone?: string) => {
+            return context.storage.remove({ key, zone })
+        },
+        clear: (zone: string) => {
+            return context.storage.clear({ zone })
+        },
+    }
+}
--- a/doric-js/src/pattern/candies.ts
+++ b/doric-js/src/pattern/candies.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function take<T>(target: T) {
+    return (block: (p: T) => void) => {
+        block(target)
+    }
+}
+
+export function takeNonNull<T, R>(target?: T) {
+    return (block: (p: T) => R) => {
+        if (target !== undefined) {
+            return block(target)
+        }
+    }
+}
+
+export function takeNull<T, R>(target?: T) {
+    return (block: () => R) => {
+        if (target === undefined) {
+            return block()
+        }
+    }
+}
+
+export function takeLet<T, R>(target: T) {
+    return (block: (p: T) => R | undefined) => {
+        return block(target)
+    }
+}
+
+export function takeAlso<T>(target: T) {
+    return (block: (p: T) => void) => {
+        block(target)
+        return target
+    }
+}
+
+export function takeIf<T>(target: T) {
+    return (predicate: (t: T) => boolean) => {
+        return predicate(target) ? target : undefined
+    }
+}
+
+export function takeUnless<T>(target: T) {
+    return (predicate: (t: T) => boolean) => {
+        return predicate(target) ? undefined : target
+    }
+}
+
+export function repeat(action: (count: number) => void) {
+    return (times: number) => {
+        for (let i = 0; i < times; i++) {
+            action(i)
+        }
+    }
+}
--- a/doric-js/src/pattern/index.pattern.ts
+++ b/doric-js/src/pattern/index.pattern.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './candies'
+export * from './provider'
+export * from './mvvm'
--- a/doric-js/src/pattern/mvvm.ts
+++ b/doric-js/src/pattern/mvvm.ts
@@ -0,0 +1,78 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Group } from "../ui/view"
+import { Panel } from "../ui/panel"
+
+export abstract class ViewHolder {
+    abstract build(root: Group): void
+}
+
+export type Setter<M> = (state: M) => void
+
+export abstract class ViewModel<M extends Object, V extends ViewHolder> {
+    private state: M
+    private viewHolder: V
+
+    constructor(obj: M, v: V) {
+        this.state = obj
+        this.viewHolder = v
+    }
+
+    getState() {
+        return this.state
+    }
+
+    updateState(setter: Setter<M>) {
+        setter(this.state)
+        this.onBind(this.state, this.viewHolder)
+    }
+
+    attach(view: Group) {
+        this.viewHolder.build(view)
+        this.onAttached(this.state, this.viewHolder)
+        this.onBind(this.state, this.viewHolder)
+    }
+
+    abstract onAttached(state: M, vh: V): void
+
+    abstract onBind(state: M, vh: V): void
+}
+export type ViewModelClass<M, V extends ViewHolder> = new (m: M, v: V) => ViewModel<M, V>
+
+export type ViewHolderClass<V> = new () => V
+
+export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+
+    private vm?: ViewModel<M, V>
+    private vh?: V
+
+    abstract getViewModelClass(): ViewModelClass<M, V>
+
+    abstract getState(): M
+
+    abstract getViewHolderClass(): ViewHolderClass<V>
+
+    getViewModel() {
+        return this.vm
+    }
+
+    build(root: Group): void {
+        this.vh = new (this.getViewHolderClass())
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
+        this.vm.attach(root)
+    }
+}
+
--- a/doric-js/src/pattern/provider.ts
+++ b/doric-js/src/pattern/provider.ts
@@ -0,0 +1,99 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type Observer<T> = (v: T) => void
+export type Updater<T> = (v: T) => T
+
+export interface IObservable<T> {
+
+    addObserver(observer: Observer<T | undefined>): void
+
+    removeObserver(observer: Observer<T | undefined>): void
+
+    update(updater: Updater<T | undefined>): void
+}
+
+export class Observable<M> implements IObservable<M>{
+    private provider: IProvider
+
+    private clz: { new(...args: any[]): M }
+
+    private observers: Set<Observer<M | undefined>> = new Set
+    constructor(provider: IProvider, clz: { new(...args: any[]): M }) {
+        this.provider = provider
+        this.clz = clz
+    }
+
+    addObserver(observer: Observer<M | undefined>): void {
+        this.observers.add(observer)
+    }
+
+    removeObserver(observer: Observer<M | undefined>): void {
+        this.observers.delete(observer)
+    }
+
+    update(updater: Updater<M | undefined>): void {
+        const oldV = this.provider.acquire(this.clz)
+        const newV = updater(oldV)
+        if (newV !== undefined) {
+            this.provider.provide(newV)
+        }
+        for (let observer of this.observers) {
+            observer(newV)
+        }
+    }
+}
+
+
+export interface IProvider {
+    provide(obj: Object): void
+    acquire<T>(clz: { new(...args: any[]): T }): T | undefined
+    remove<T>(clz: { new(...args: any[]): T }): void
+    clear(): void
+    observe<T>(clz: { new(...args: any[]): T }): Observable<T>
+}
+
+export class Provider implements IProvider {
+
+    private provision: Map<Function, Object> = new Map
+    private observableMap: Map<Function, Observable<any>> = new Map
+
+    provide(obj: Object) {
+        this.provision.set(obj.constructor, obj)
+    }
+
+    acquire<T>(clz: { new(...args: any[]): T }): T | undefined {
+        const ret = this.provision.get(clz)
+        return ret as T | undefined
+    }
+
+    remove<T>(clz: new (...args: any[]) => T): void {
+        this.provision.delete(clz)
+    }
+
+    clear(): void {
+        this.provision.clear()
+    }
+
+    observe<T>(clz: new (...args: any[]) => T): Observable<T> {
+        let observable = this.observableMap.get(clz)
+        if (observable === undefined) {
+            observable = new Observable(this, clz)
+            this.observableMap.set(clz, observable)
+        }
+        return observable
+    }
+}
+
--- a/doric-js/src/runtime/global.ts
+++ b/doric-js/src/runtime/global.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from 'reflect-metadata'
+
+export type BridgeContext = { [index: string]: { [index: string]: (args?: any) => Promise<any> } }
+
+declare global {
+    const context: BridgeContext
+    const Environment: {
+        platform: "Android" | "iOS" | "Qt",
+
+        platformVersion: string,
+
+        appName: string,
+
+        appVersion: string,
+
+        libVersion: string,
+
+        screenWidth: number,
+
+        screenHeight: number,
+
+    }
+    function Entry(constructor: { new(...args: any[]): {} }): any
+}
+export { }
--- a/doric-js/src/runtime/sandbox.ts
+++ b/doric-js/src/runtime/sandbox.ts
@@ -0,0 +1,359 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { uniqueId } from "../util/uniqueId";
+import { loge } from "../util/log";
+import "reflect-metadata"
+
+/**
+ * ``` TypeScript
+ * // load script in global scope
+ * Reflect.apply(
+ * function(doric,context,Entry,require){
+ *  //Script content
+ *  REG()
+ * },doric.jsObtainContext(id),[
+ * undefined,
+ * doric.jsObtainContext(id),
+ * doric.jsObtainEntry(id),
+ * doric.__require__,
+ * ])
+ * // load module in global scope
+ * Reflect.apply(doric.jsRegisterModule,this,[
+ *  moduleName,
+ *  Reflect.apply(function(__module){
+ *           (function(module,exports,require){
+ *                      //module content
+ *                  })(__module,__module.exports,doric.__require__);
+ *           return __module.exports
+ *      },this,[{exports:{}}])
+ * ])
+ * 
+ * ```
+ */
+
+declare function nativeRequire(moduleName: string): boolean
+
+declare function nativeBridge(contextId: string, namespace: string, method: string, callbackId?: string, args?: any): boolean
+
+declare function nativeSetTimer(timerId: number, interval: number, repeat: boolean): void
+
+declare function nativeClearTimer(timerId: number): void
+
+function hookBeforeNativeCall(context?: Context) {
+    if (context) {
+        Reflect.defineMetadata('__doric_context__', context, global)
+        context.hookBeforeNativeCall()
+    }
+}
+
+function hookAfterNativeCall(context?: Context) {
+    if (context) {
+        context.hookAfterNativeCall()
+    }
+}
+
+function getContext(): Context | undefined {
+    return Reflect.getMetadata('__doric_context__', global)
+}
+
+function setContext(context?: Context) {
+    Reflect.defineMetadata('__doric_context__', context, global)
+}
+
+export function jsCallResolve(contextId: string, callbackId: string, args?: any) {
+    const context = gContexts.get(contextId)
+    if (context === undefined) {
+        loge(`Cannot find context for context id:${contextId}`)
+        return
+    }
+    const callback = context.callbacks.get(callbackId)
+    if (callback === undefined) {
+        loge(`Cannot find call for context id:${contextId},callback id:${callbackId}`)
+        return
+    }
+    const argumentsList: any = []
+    for (let i = 2; i < arguments.length; i++) {
+        argumentsList.push(arguments[i])
+    }
+    hookBeforeNativeCall(context)
+    Reflect.apply(callback.resolve, context, argumentsList)
+    hookAfterNativeCall(context)
+}
+
+export function jsCallReject(contextId: string, callbackId: string, args?: any) {
+    const context = gContexts.get(contextId)
+    if (context === undefined) {
+        loge(`Cannot find context for context id:${contextId}`)
+        return
+    }
+    const callback = context.callbacks.get(callbackId)
+    if (callback === undefined) {
+        loge(`Cannot find call for context id:${contextId},callback id:${callbackId}`)
+        return
+    }
+    const argumentsList: any = []
+    for (let i = 2; i < arguments.length; i++) {
+        argumentsList.push(arguments[i])
+    }
+    hookBeforeNativeCall(context)
+    Reflect.apply(callback.reject, context.entity, argumentsList)
+    hookAfterNativeCall(context)
+}
+
+export class Context {
+    entity: any
+    id: string
+    callbacks: Map<string, { resolve: Function, reject: Function }> = new Map
+
+    hookBeforeNativeCall() {
+        if (this.entity && Reflect.has(this.entity, 'hookBeforeNativeCall')) {
+            Reflect.apply(Reflect.get(this.entity, 'hookBeforeNativeCall'), this.entity, [])
+        }
+    }
+
+    hookAfterNativeCall() {
+        if (this.entity && Reflect.has(this.entity, 'hookAfterNativeCall')) {
+            Reflect.apply(Reflect.get(this.entity, 'hookAfterNativeCall'), this.entity, [])
+        }
+    }
+
+    constructor(id: string) {
+        this.id = id
+        return new Proxy(this, {
+            get: (target, p: any) => {
+                if (Reflect.has(target, p)) {
+                    return Reflect.get(target, p)
+                } else {
+                    const namespace = p
+                    return new Proxy({}, {
+                        get: (target, p: any) => {
+                            if (Reflect.has(target, p)) {
+                                return Reflect.get(target, p)
+                            } else {
+                                const context = this
+                                return function () {
+                                    const args = []
+                                    args.push(namespace)
+                                    args.push(p)
+                                    for (let arg of arguments) {
+                                        args.push(arg)
+                                    }
+                                    return Reflect.apply(context.callNative, context, args)
+                                }
+                            }
+                        }
+                    })
+                }
+            }
+        })
+    }
+    callNative(namespace: string, method: string, args?: any): Promise<any> {
+        const callbackId = uniqueId('callback')
+        nativeBridge(this.id, namespace, method, callbackId, args)
+        return new Promise((resolve, reject) => {
+            this.callbacks.set(callbackId, {
+                resolve,
+                reject,
+            })
+        })
+    }
+    register(instance: Object) {
+        this.entity = instance
+    }
+}
+
+
+const gContexts: Map<string, Context> = new Map
+const gModules: Map<string, any> = new Map
+
+export function jsObtainContext(id: string) {
+    if (gContexts.has(id)) {
+        const context = gContexts.get(id)
+        setContext(context)
+        return context
+    } else {
+        const context: Context = new Context(id)
+        gContexts.set(id, context)
+        setContext(context)
+        return context
+    }
+}
+
+export function jsReleaseContext(id: string) {
+    const context = gContexts.get(id)
+    const args = arguments
+    if (context) {
+        timerInfos.forEach((v, k) => {
+            if (v.context === context) {
+                if (global.nativeClearTimer === undefined) {
+                    return Reflect.apply(_clearTimeout, undefined, args)
+                }
+                timerInfos.delete(k)
+                nativeClearTimer(k)
+            }
+        })
+    }
+    gContexts.delete(id)
+}
+
+export function __require__(name: string): any {
+    if (gModules.has(name)) {
+        return gModules.get(name)
+    } else {
+        if (nativeRequire(name)) {
+            return gModules.get(name)
+        } else {
+            return undefined
+        }
+    }
+}
+
+export function jsRegisterModule(name: string, moduleObject: any) {
+    gModules.set(name, moduleObject)
+}
+
+export function jsCallEntityMethod(contextId: string, methodName: string, args?: any) {
+    const context = gContexts.get(contextId)
+    if (context === undefined) {
+        loge(`Cannot find context for context id:${contextId}`)
+        return
+    }
+    if (context.entity === undefined) {
+        loge(`Cannot find holder for context id:${contextId}`)
+        return
+    }
+    if (Reflect.has(context.entity, methodName)) {
+        const argumentsList: any = []
+        for (let i = 2; i < arguments.length; i++) {
+            argumentsList.push(arguments[i])
+        }
+        hookBeforeNativeCall(context)
+        const ret = Reflect.apply(Reflect.get(context.entity, methodName), context.entity, argumentsList)
+        hookAfterNativeCall(context)
+        return ret
+    } else {
+        loge(`Cannot find method for context id:${contextId},method name is:${methodName}`)
+    }
+}
+
+export function jsObtainEntry(contextId: string) {
+    const context = jsObtainContext(contextId)
+    return <T extends { new(...args: any[]): {} }>(constructor: T) => {
+        const ret = class extends constructor {
+            context = context
+        }
+        if (context) {
+            context.register(new ret)
+        }
+        return ret
+    }
+}
+
+
+const global = Function('return this')()
+let __timerId__ = 0
+
+const timerInfos: Map<number, { callback: () => void, context?: Context }> = new Map
+
+const _setTimeout = global.setTimeout
+
+const _setInterval = global.setInterval
+
+const _clearTimeout = global.clearTimeout
+
+const _clearInterval = global.clearInterval
+
+const doricSetTimeout = function (handler: Function, timeout?: number | undefined, ...args: any[]) {
+    if (global.nativeSetTimer === undefined) {
+        return Reflect.apply(_setTimeout, undefined, arguments)
+    }
+    const id = __timerId__++
+    timerInfos.set(id, {
+        callback: () => {
+            Reflect.apply(handler, undefined, args)
+            timerInfos.delete(id)
+        },
+        context: getContext(),
+    })
+    nativeSetTimer(id, timeout || 0, false)
+    return id
+}
+const doricSetInterval = function (handler: Function, timeout?: number | undefined, ...args: any[]) {
+    if (global.nativeSetTimer === undefined) {
+        return Reflect.apply(_setInterval, undefined, arguments)
+    }
+    const id = __timerId__++
+    timerInfos.set(id, {
+        callback: () => {
+            Reflect.apply(handler, undefined, args)
+        },
+        context: getContext(),
+    })
+    nativeSetTimer(id, timeout || 0, true)
+    return id
+}
+
+const doricClearTimeout = function (timerId: number) {
+    if (global.nativeClearTimer === undefined) {
+        return Reflect.apply(_clearTimeout, undefined, arguments)
+    }
+    timerInfos.delete(timerId)
+    nativeClearTimer(timerId)
+}
+
+const doricClearInterval = function (timerId: number) {
+    if (global.nativeClearTimer === undefined) {
+        return Reflect.apply(_clearInterval, undefined, arguments)
+    }
+    timerInfos.delete(timerId)
+    nativeClearTimer(timerId)
+}
+
+if (!global.setTimeout) {
+    global.setTimeout = doricSetTimeout
+} else {
+    global.doricSetTimeout = doricSetTimeout
+}
+
+if (!global.setInterval) {
+    global.setInterval = doricSetInterval
+} else {
+    global.doricSetInterval = doricSetInterval
+}
+
+if (!global.clearTimeout) {
+    global.clearTimeout = doricClearTimeout
+} else {
+    global.doricClearTimeout = doricClearTimeout
+}
+
+if (!global.clearInterval) {
+    global.clearInterval = doricClearInterval
+} else {
+    global.doricClearInterval = doricClearInterval
+}
+
+export function jsCallbackTimer(timerId: number) {
+    const timerInfo = timerInfos.get(timerId)
+    if (timerInfo === undefined) {
+        return
+    }
+    if (timerInfo.callback instanceof Function) {
+        hookBeforeNativeCall(timerInfo.context)
+        Reflect.apply(timerInfo.callback, timerInfo.context, [])
+        hookAfterNativeCall(timerInfo.context)
+    }
+}
--- a/doric-js/src/ui/animation.ts
+++ b/doric-js/src/ui/animation.ts
@@ -0,0 +1,262 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Modeling, Model } from "../util/types"
+
+export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY"
+
+export enum RepeatMode {
+    RESTART = 1,
+    REVERSE = 2,
+}
+
+export interface IAnimation extends Modeling {
+    duration: number
+    delay?: number
+}
+
+export interface Changeable {
+    fromValue: number
+    toValue: number
+    key: AnimatedKey
+    repeatCount?: number
+    repeatMode?: RepeatMode
+}
+export enum FillMode {
+    /**
+     * The receiver is removed from the presentation when the animation is completed.
+     */
+    Removed = 0,
+    /**
+     * The receiver remains visible in its final state when the animation is completed.
+     */
+    Forward = 0x1,
+    /**
+     * The receiver clamps values before zero to zero when the animation is completed.
+     */
+    Backward = 0x2,
+    /**
+     * The receiver clamps values at both ends of the object’s time space
+     */
+    Both = 0x3,
+}
+
+export enum TimingFunction {
+    /**
+     * The system default timing function. Use this function to ensure that the timing of your animations matches that of most system animations.
+     */
+    Default = 0,
+    /**
+     * Linear pacing, which causes an animation to occur evenly over its duration.
+     */
+    Linear,
+    /**
+     * Ease-in pacing, which causes an animation to begin slowly and then speed up as it progresses.
+     */
+    EaseIn,
+    /**
+     * Ease-out pacing, which causes an animation to begin quickly and then slow as it progresses.
+     */
+    EaseOut,
+    /**
+     * Ease-in-ease-out pacing, which causes an animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.
+     */
+    EaseInEaseOut,
+}
+
+abstract class Animation implements IAnimation {
+    changeables: Map<AnimatedKey, Changeable> = new Map
+    duration = 0
+    repeatCount?: number
+    repeatMode?: RepeatMode
+    delay?: number
+    fillMode = FillMode.Forward
+    timingFunction?: TimingFunction
+    toModel() {
+        const changeables = []
+        for (let e of this.changeables.values()) {
+            changeables.push({
+                key: e.key,
+                fromValue: e.fromValue,
+                toValue: e.toValue,
+            })
+        }
+        return {
+            type: this.constructor.name,
+            delay: this.delay,
+            duration: this.duration,
+            changeables,
+            repeatCount: this.repeatCount,
+            repeatMode: this.repeatMode,
+            fillMode: this.fillMode,
+            timingFunction: this.timingFunction
+        }
+    }
+}
+
+export class ScaleAnimation extends Animation {
+    private scaleXChangeable: Changeable = {
+        key: "scaleX",
+        fromValue: 1,
+        toValue: 1,
+    }
+    private scaleYChangeable: Changeable = {
+        key: "scaleY",
+        fromValue: 1,
+        toValue: 1,
+    }
+    constructor() {
+        super()
+        this.changeables.set("scaleX", this.scaleXChangeable)
+        this.changeables.set("scaleY", this.scaleYChangeable)
+    }
+
+
+    set fromScaleX(v: number) {
+        this.scaleXChangeable.fromValue = v
+    }
+
+    get fromScaleX() {
+        return this.scaleXChangeable.fromValue
+    }
+
+    set toScaleX(v: number) {
+        this.scaleXChangeable.toValue = v
+    }
+
+    get toScaleX() {
+        return this.scaleXChangeable.toValue
+    }
+    set fromScaleY(v: number) {
+        this.scaleYChangeable.fromValue = v
+    }
+
+    get fromScaleY() {
+        return this.scaleYChangeable.fromValue
+    }
+
+    set toScaleY(v: number) {
+        this.scaleYChangeable.toValue = v
+    }
+
+    get toScaleY() {
+        return this.scaleYChangeable.toValue
+    }
+}
+
+export class TranslationAnimation extends Animation {
+    private translationXChangeable: Changeable = {
+        key: "translationX",
+        fromValue: 1,
+        toValue: 1,
+    }
+    private translationYChangeable: Changeable = {
+        key: "translationY",
+        fromValue: 1,
+        toValue: 1,
+    }
+    constructor() {
+        super()
+        this.changeables.set("translationX", this.translationXChangeable)
+        this.changeables.set("translationY", this.translationYChangeable)
+    }
+
+    set fromTranslationX(v: number) {
+        this.translationXChangeable.fromValue = v
+    }
+
+    get fromTranslationX() {
+        return this.translationXChangeable.fromValue
+    }
+
+    set toTranslationX(v: number) {
+        this.translationXChangeable.toValue = v
+    }
+
+    get toTranslationX() {
+        return this.translationXChangeable.toValue
+    }
+    set fromTranslationY(v: number) {
+        this.translationYChangeable.fromValue = v
+    }
+
+    get fromTranslationY() {
+        return this.translationYChangeable.fromValue
+    }
+
+    set toTranslationY(v: number) {
+        this.translationYChangeable.toValue = v
+    }
+
+    get toTranslationY() {
+        return this.translationYChangeable.toValue
+    }
+}
+
+export class RotationAnimation extends Animation {
+    private rotationChaneable: Changeable = {
+        key: "rotation",
+        fromValue: 1,
+        toValue: 1,
+    }
+    constructor() {
+        super()
+        this.changeables.set("rotation", this.rotationChaneable)
+    }
+
+    set fromRotation(v: number) {
+        this.rotationChaneable.fromValue = v
+    }
+
+    get fromRotation() {
+        return this.rotationChaneable.fromValue
+    }
+
+    set toRotation(v: number) {
+        this.rotationChaneable.toValue = v
+    }
+
+    get toRotation() {
+        return this.rotationChaneable.toValue
+    }
+}
+
+export class AnimationSet implements IAnimation {
+    private animations: IAnimation[] = []
+    _duration = 0
+    delay?: number
+    addAnimation(anim: IAnimation) {
+        this.animations.push(anim)
+    }
+
+    get duration() {
+        return this._duration
+    }
+
+    set duration(v: number) {
+        this._duration = v
+        this.animations.forEach(e => e.duration = v)
+    }
+
+    toModel() {
+        return {
+            animations: this.animations.map(e => {
+                return e.toModel()
+            }) as Model,
+            delay: this.delay,
+        }
+    }
+}
--- a/doric-js/src/ui/index.ui.ts
+++ b/doric-js/src/ui/index.ui.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './view'
+export * from './panel'
+export * from './animation'
--- a/doric-js/src/ui/panel.ts
+++ b/doric-js/src/ui/panel.ts
@@ -0,0 +1,169 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '../runtime/global'
+import { View, Group } from "./view"
+import { loge } from '../util/log'
+import { Model } from '../util/types'
+import { Root } from '../widget/layouts'
+
+
+export function NativeCall(target: Panel, propertyKey: string, descriptor: PropertyDescriptor) {
+    const originVal = descriptor.value
+    descriptor.value = function () {
+        const ret = Reflect.apply(originVal, this, arguments)
+        return ret
+    }
+    return descriptor
+}
+
+type Frame = { width: number, height: number }
+
+declare function nativeEmpty(): void
+
+export abstract class Panel {
+    context?: any
+    onCreate() { }
+    onDestroy() { }
+    onShow() { }
+    onHidden() { }
+
+    abstract build(rootView: Group): void
+
+    private __data__?: object
+    private __root__ = new Root
+    private headviews: Map<string, View> = new Map
+
+    addHeadView(v: View) {
+        this.headviews.set(v.viewId, v)
+    }
+    allHeadViews() {
+        return this.headviews.values()
+    }
+    removeHeadView(v: View | string) {
+        if (v instanceof View) {
+            this.headviews.delete(v.viewId)
+        } else {
+            this.headviews.delete(v)
+        }
+    }
+
+    clearHeadViews() {
+        this.headviews.clear()
+    }
+
+    getRootView() {
+        return this.__root__
+    }
+
+    getInitData() {
+        return this.__data__
+    }
+
+    @NativeCall
+    private __init__(frame: Frame, data?: string) {
+        if (data) {
+            this.__data__ = JSON.parse(data)
+        }
+        this.__root__.width = frame.width
+        this.__root__.height = frame.height
+        this.__root__.children.length = 0
+        this.build(this.__root__)
+    }
+
+    @NativeCall
+    private __onCreate__() {
+        this.onCreate()
+    }
+
+    @NativeCall
+    private __onDestroy__() {
+        this.onDestroy()
+    }
+
+    @NativeCall
+    private __onShow__() {
+        this.onShow()
+    }
+
+    @NativeCall
+    private __onHidden__(): void {
+        this.onHidden()
+    }
+
+    @NativeCall
+    private __build__() {
+        this.build(this.__root__)
+    }
+
+    @NativeCall
+    private __response__(viewIds: string[], callbackId: string) {
+        const v = this.retrospectView(viewIds)
+        if (v === undefined) {
+            loge(`Cannot find view for ${viewIds}`)
+        } else {
+            const argumentsList: any = [callbackId]
+            for (let i = 2; i < arguments.length; i++) {
+                argumentsList.push(arguments[i])
+            }
+            return Reflect.apply(v.responseCallback, v, argumentsList)
+        }
+    }
+
+    private retrospectView(ids: string[]): View | undefined {
+        return ids.reduce((acc: View | undefined, cur) => {
+            if (acc === undefined) {
+                if (cur === this.__root__.viewId) {
+                    return this.__root__
+                }
+                return this.headviews.get(cur)
+            } else {
+                if (Reflect.has(acc, "subviewById")) {
+                    return Reflect.apply(Reflect.get(acc, "subviewById"), acc, [cur])
+                }
+                return acc
+            }
+        }, undefined)
+    }
+
+    private nativeRender(model: Model) {
+        if (this.context) {
+            this.context.shader.render(model)
+        }
+    }
+
+    private hookBeforeNativeCall() {
+        this.__root__.clean()
+        for (let v of this.headviews.values()) {
+            v.clean()
+        }
+    }
+
+    private hookAfterNativeCall() {
+        //Here insert a native call to ensure the promise is resolved done.
+        nativeEmpty()
+        if (this.__root__.isDirty()) {
+            const model = this.__root__.toModel()
+            this.nativeRender(model)
+        }
+        for (let v of this.headviews.values()) {
+            if (v.isDirty()) {
+                const model = v.toModel()
+                this.nativeRender(model)
+            }
+        }
+    }
+
+}
--- a/doric-js/src/ui/view.ts
+++ b/doric-js/src/ui/view.ts
@@ -0,0 +1,401 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Color, GradientColor } from "../util/color"
+import { Modeling, Model, obj2Model } from "../util/types";
+import { uniqueId } from "../util/uniqueId";
+import { loge } from "../util/log";
+import { BridgeContext } from "../runtime/global";
+import { LayoutConfig } from '../util/layoutconfig'
+import { IAnimation } from "./animation";
+
+export function Property(target: Object, propKey: string) {
+    Reflect.defineMetadata(propKey, true, target)
+}
+
+export interface IView {
+    width?: number
+    height?: number
+    backgroundColor?: Color | GradientColor
+    corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
+    border?: { width: number; color: Color; }
+    shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
+    /**
+     * float [0,..1]
+     */
+    alpha?: number
+    hidden?: boolean
+    padding?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+    layoutConfig?: LayoutConfig
+    onClick?: Function
+    identifier?: string
+
+    /**++++++++++transform++++++++++*/
+    translationX?: number
+
+    translationY?: number
+
+    scaleX?: number
+
+    scaleY?: number
+    /**
+     * float [0,..1]
+     */
+    pivotX?: number
+    /**
+     * float [0,..1]
+     */
+    pivotY?: number
+    /**
+     * rotation*PI
+     */
+    rotation?: number
+    /**----------transform----------*/
+}
+
+
+export abstract class View implements Modeling, IView {
+    @Property
+    width: number = 0
+
+    @Property
+    height: number = 0
+
+    @Property
+    x: number = 0
+
+    @Property
+    y: number = 0
+
+    @Property
+    backgroundColor?: Color | GradientColor
+
+    @Property
+    corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
+
+    @Property
+    border?: { width: number; color: Color; }
+
+    @Property
+    shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
+
+    @Property
+    alpha?: number
+
+    @Property
+    hidden?: boolean
+
+    @Property
+    viewId = uniqueId('ViewId')
+
+    @Property
+    padding?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+
+    @Property
+    layoutConfig?: LayoutConfig
+
+    @Property
+    onClick?: Function
+
+    superview?: Superview
+
+    callbacks: Map<String, Function> = new Map
+
+    private callback2Id(f: Function) {
+        const id = uniqueId('Function')
+        this.callbacks.set(id, f)
+        return id
+    }
+
+    private id2Callback(id: string) {
+        let f = this.callbacks.get(id)
+        if (f === undefined) {
+            f = Reflect.get(this, id) as Function
+        }
+        return f
+    }
+
+    constructor() {
+        return new Proxy(this, {
+            get: (target, p, receiver) => {
+                return Reflect.get(target, p, receiver)
+            },
+            set: (target, p, v, receiver) => {
+                const oldV = Reflect.get(target, p, receiver)
+                const ret = Reflect.set(target, p, v, receiver)
+                if (Reflect.getMetadata(p, target) && oldV !== v) {
+                    receiver.onPropertyChanged(p.toString(), oldV, v)
+                }
+                return ret
+            }
+        })
+    }
+    /** Anchor start*/
+    get left() {
+        return this.x
+    }
+    set left(v: number) {
+        this.x = v
+    }
+
+    get right() {
+        return this.x + this.width
+    }
+    set right(v: number) {
+        this.x = v - this.width
+    }
+
+    get top() {
+        return this.y
+    }
+
+    set top(v: number) {
+        this.y = v
+    }
+
+    get bottom() {
+        return this.y + this.height
+    }
+
+    set bottom(v: number) {
+        this.y = v - this.height
+    }
+
+    get centerX() {
+        return this.x + this.width / 2
+    }
+
+    get centerY() {
+        return this.y + this.height / 2
+    }
+
+    set centerX(v: number) {
+        this.x = v - this.width / 2
+    }
+
+    set centerY(v: number) {
+        this.y = v - this.height / 2
+    }
+    /** Anchor end*/
+
+    private __dirty_props__: { [index: string]: Model | undefined } = {}
+
+    get dirtyProps() {
+        return this.__dirty_props__
+    }
+
+    nativeViewModel = {
+        id: this.viewId,
+        type: this.constructor.name,
+        props: this.__dirty_props__,
+    }
+
+    onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
+        if (newV instanceof Function) {
+            newV = this.callback2Id(newV)
+        } else {
+            newV = obj2Model(newV)
+        }
+        this.__dirty_props__[propKey] = newV
+    }
+
+    clean() {
+        for (const key in this.__dirty_props__) {
+            if (Reflect.has(this.__dirty_props__, key)) {
+                Reflect.deleteProperty(this.__dirty_props__, key)
+            }
+        }
+    }
+
+    isDirty() {
+        return Reflect.ownKeys(this.__dirty_props__).length !== 0
+    }
+
+    responseCallback(id: string, ...args: any) {
+        const f = this.id2Callback(id)
+        if (f instanceof Function) {
+            const argumentsList: any = []
+            for (let i = 1; i < arguments.length; i++) {
+                argumentsList.push(arguments[i])
+            }
+            return Reflect.apply(f, this, argumentsList)
+        } else {
+            loge(`Cannot find callback:${id} for ${JSON.stringify(this.toModel())}`)
+        }
+    }
+
+    toModel() {
+        return this.nativeViewModel
+    }
+
+    let(block: (it: this) => void) {
+        block(this)
+    }
+
+    also(block: (it: this) => void) {
+        block(this)
+        return this
+    }
+
+    apply(config: IView) {
+        for (let key in config) {
+            Reflect.set(this, key, Reflect.get(config, key, config), this)
+        }
+        return this
+    }
+
+    in(group: Group) {
+        group.addChild(this)
+        return this
+    }
+
+    nativeChannel(context: any, name: string) {
+        let thisView: View | undefined = this
+        return function (args: any = undefined) {
+            const func = context.shader.command
+            const viewIds = []
+            while (thisView != undefined) {
+                viewIds.push(thisView.viewId)
+                thisView = thisView.superview
+            }
+            const params = {
+                viewIds: viewIds.reverse(),
+                name,
+                args,
+            }
+            return Reflect.apply(func, undefined, [params]) as Promise<any>
+        }
+    }
+
+    getWidth(context: BridgeContext) {
+        return this.nativeChannel(context, 'getWidth')() as Promise<number>
+    }
+
+    getHeight(context: BridgeContext) {
+        return this.nativeChannel(context, 'getHeight')() as Promise<number>
+    }
+
+    getLocationOnScreen(context: BridgeContext) {
+        return this.nativeChannel(context, "getLocationOnScreen")() as Promise<{ x: number, y: number }>
+    }
+
+    /**++++++++++transform++++++++++*/
+    @Property
+    translationX?: number
+
+    @Property
+    translationY?: number
+
+    @Property
+    scaleX?: number
+
+    @Property
+    scaleY?: number
+
+    @Property
+    pivotX?: number
+
+    @Property
+    pivotY?: number
+
+    @Property
+    rotation?: number
+    /**----------transform----------*/
+
+    doAnimation(context: BridgeContext, animation: IAnimation) {
+        return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
+            for (let key in args) {
+                Reflect.set(this, key, Reflect.get(args, key, args), this)
+                Reflect.deleteProperty(this.__dirty_props__, key)
+            }
+        })
+    }
+}
+
+export abstract class Superview extends View {
+    subviewById(id: string): View | undefined {
+        for (let v of this.allSubviews()) {
+            if (v.viewId === id) {
+                return v
+            }
+        }
+    }
+    abstract allSubviews(): Iterable<View>
+
+    isDirty() {
+        if (super.isDirty()) {
+            return true
+        } else {
+            for (const v of this.allSubviews()) {
+                if (v.isDirty()) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    clean() {
+        for (let v of this.allSubviews()) {
+            v.clean()
+        }
+        super.clean()
+    }
+
+    toModel() {
+        const subviews = []
+        for (let v of this.allSubviews()) {
+            if (v != undefined) {
+                v.superview = this
+                if (v.isDirty()) {
+                    subviews.push(v.toModel())
+                }
+            }
+        }
+        this.dirtyProps.subviews = subviews
+        return super.toModel()
+    }
+}
+
+export abstract class Group extends Superview {
+
+    readonly children: View[] = new Proxy([], {
+        set: (target, index, value) => {
+            const ret = Reflect.set(target, index, value)
+            // Let getDirty return true
+            this.dirtyProps.children = this.children.map(e => e.viewId)
+            return ret
+        }
+    })
+
+    allSubviews() {
+        return this.children
+    }
+
+    addChild(view: View) {
+        this.children.push(view)
+    }
+}
+
--- a/doric-js/src/util/color.ts
+++ b/doric-js/src/util/color.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Modeling } from "./types";
+
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+export class Color implements Modeling {
+    static BLACK = new Color(0xFF000000)
+    static DKGRAY = new Color(0xFF444444)
+    static GRAY = new Color(0xFF888888)
+    static LTGRAY = new Color(0xFFCCCCCC)
+    static WHITE = new Color(0xFFFFFFFF)
+    static RED = new Color(0xFFFF0000)
+    static GREEN = new Color(0xFF00FF00)
+    static BLUE = new Color(0xFF0000FF)
+    static YELLOW = new Color(0xFFFFFF00)
+    static CYAN = new Color(0xFF00FFFF)
+    static MAGENTA = new Color(0xFFFF00FF)
+    static TRANSPARENT = new Color(0)
+
+    _value: number = 0
+
+    constructor(v: number) {
+        this._value = v | 0x0
+    }
+
+    static parse(str: string) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`)
+        }
+        const val = parseInt(str.substr(1), 16)
+        if (str.length === 7) {
+            return new Color(val | 0xff000000)
+        } else if (str.length === 9) {
+            return new Color(val)
+        } else {
+            throw new Error(`Parse color error with ${str}`)
+        }
+    }
+
+    static safeParse(str: string, defVal: Color = Color.TRANSPARENT) {
+        let color = defVal
+        try {
+            color = Color.parse(str)
+        } catch (e) {
+        } finally {
+            return color
+        }
+    }
+
+    alpha(v: number) {
+        v = v * 255
+        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24))
+    }
+
+    toModel() {
+        return this._value
+    }
+}
+export enum GradientOrientation {
+    /** draw the gradient from the top to the bottom */
+    TOP_BOTTOM = 0,
+    /** draw the gradient from the top-right to the bottom-left */
+    TR_BL,
+    /** draw the gradient from the right to the left */
+    RIGHT_LEFT,
+    /** draw the gradient from the bottom-right to the top-left */
+    BR_TL,
+    /** draw the gradient from the bottom to the top */
+    BOTTOM_TOP,
+    /** draw the gradient from the bottom-left to the top-right */
+    BL_TR,
+    /** draw the gradient from the left to the right */
+    LEFT_RIGHT,
+    /** draw the gradient from the top-left to the bottom-right */
+    TL_BR,
+}
+
+export interface GradientColor {
+    start: Color
+    end: Color
+    orientation: GradientOrientation
+}
+
--- a/doric-js/src/util/gravity.ts
+++ b/doric-js/src/util/gravity.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Modeling } from "./types";
+
+const SPECIFIED = 1
+const START = 1 << 1
+const END = 1 << 2
+
+const SHIFT_X = 0
+const SHIFT_Y = 4
+
+export const LEFT = (START | SPECIFIED) << SHIFT_X
+export const RIGHT = (END | SPECIFIED) << SHIFT_X
+
+export const TOP = (START | SPECIFIED) << SHIFT_Y
+export const BOTTOM = (END | SPECIFIED) << SHIFT_Y
+
+export const CENTER_X = SPECIFIED << SHIFT_X
+export const CENTER_Y = SPECIFIED << SHIFT_Y
+
+export const CENTER = CENTER_X | CENTER_Y
+
+export class Gravity implements Modeling {
+    val = 0
+
+    left() {
+        const val = this.val | LEFT
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    right() {
+        const val = this.val | RIGHT
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    top() {
+        const val = this.val | TOP
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    bottom() {
+        const val = this.val | BOTTOM
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    center() {
+        const val = this.val | CENTER
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    centerX() {
+        const val = this.val | CENTER_X
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+    centerY() {
+        const val = this.val | CENTER_Y
+        const ret = new Gravity
+        ret.val = val
+        return ret
+    }
+
+
+    toModel() {
+        return this.val
+    }
+    private static origin = new Gravity
+
+    static Center = Gravity.origin.center()
+    static Left = Gravity.origin.left()
+    static Right = Gravity.origin.right()
+    static Top = Gravity.origin.top()
+    static Bottom = Gravity.origin.bottom()
+}
+export function gravity() {
+    return new Gravity
+}
--- a/doric-js/src/util/index.util.ts
+++ b/doric-js/src/util/index.util.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './color'
+export * from './gravity'
+export * from './layoutconfig'
+export * from './log'
+export * from './types'
+export * from './uniqueId'
--- a/doric-js/src/util/layoutconfig.ts
+++ b/doric-js/src/util/layoutconfig.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Gravity } from "./gravity";
+import { Modeling } from "./types";
+
+export enum LayoutSpec {
+    /** 
+     * Depends on what's been set on width or height.
+    */
+    JUST = 0,
+    /**
+     * Depends on it's content.
+     */
+    FIT = 1,
+    /**
+     * Extend as much as parent let it take.
+     */
+    MOST = 2,
+}
+
+export interface LayoutConfig {
+    widthSpec?: LayoutSpec
+    heightSpec?: LayoutSpec
+    margin?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+    alignment?: Gravity
+    //Only affective in VLayout or HLayout
+    weight?: number
+}
+
+export class LayoutConfigImpl implements LayoutConfig, Modeling {
+    widthSpec?: LayoutSpec
+    heightSpec?: LayoutSpec
+    margin?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+    alignment?: Gravity
+    //Only affective in VLayout or HLayout
+    weight?: number
+
+    fit() {
+        this.widthSpec = LayoutSpec.FIT
+        this.heightSpec = LayoutSpec.FIT
+        return this
+    }
+
+    most() {
+        this.widthSpec = LayoutSpec.MOST
+        this.heightSpec = LayoutSpec.MOST
+        return this
+    }
+
+    just() {
+        this.widthSpec = LayoutSpec.JUST
+        this.heightSpec = LayoutSpec.JUST
+        return this
+    }
+
+    configWidth(w: LayoutSpec) {
+        this.widthSpec = w
+        return this
+    }
+
+    configHeight(h: LayoutSpec) {
+        this.heightSpec = h
+        return this
+    }
+
+    configMargin(m: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }) {
+        this.margin = m
+        return this
+    }
+
+    configAligmnet(a: Gravity) {
+        this.alignment = a
+        return this
+    }
+
+    configWeight(w: number) {
+        this.weight = w
+        return this
+    }
+
+    toModel() {
+        return {
+            widthSpec: this.widthSpec,
+            heightSpec: this.heightSpec,
+            margin: this.margin,
+            alignment: this.alignment ? this.alignment.toModel() : undefined,
+            weight: this.weight,
+        }
+    }
+}
+
+export function layoutConfig() {
+    return new LayoutConfigImpl
+}
--- a/doric-js/src/util/log.ts
+++ b/doric-js/src/util/log.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+declare function nativeLog(type: 'd' | 'w' | 'e', message: string): void
+
+function toString(message: any) {
+    if (message instanceof Function) {
+        return message.toString()
+    } else if (message instanceof Object) {
+        try {
+            return JSON.stringify(message)
+        } catch (e) {
+            return message.toString()
+        }
+    } else if (message === undefined) {
+        return "undefined"
+    } else {
+        return message.toString()
+    }
+}
+
+export function log(...args: any) {
+    let out = ""
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ','
+        }
+        out += toString(arguments[i])
+    }
+    nativeLog('d', out)
+}
+
+export function loge(...message: any) {
+    let out = ""
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ','
+        }
+        out += toString(arguments[i])
+    }
+    nativeLog('e', out)
+}
+
+export function logw(...message: any) {
+    let out = ""
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ','
+        }
+        out += toString(arguments[i])
+    }
+    nativeLog('w', out)
+}
--- a/doric-js/src/util/types.ts
+++ b/doric-js/src/util/types.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Modeling {
+    toModel(): Model
+}
+export function obj2Model(obj: Model): Model {
+    if (obj instanceof Array) {
+        return obj.map(e => obj2Model(e)) as Model
+    } else if (obj instanceof Object) {
+        if (Reflect.has(obj, 'toModel') && Reflect.get(obj, 'toModel') instanceof Function) {
+            obj = Reflect.apply(Reflect.get(obj, 'toModel'), obj, [])
+            return obj
+        } else {
+            for (let key in obj) {
+                const val = Reflect.get(obj, key)
+                Reflect.set(obj, key, obj2Model(val))
+            }
+            return obj
+        }
+    } else {
+        return obj
+    }
+}
+
+type _M = string | number | boolean | Modeling | { [index: string]: Model } | undefined
+export type Model = _M | Array<_M>
+
+export type Binder<T> = (v: T) => void
+
+export class Mutable<T>{
+    private val: T
+
+    private binders: Set<Binder<T>> = new Set
+
+    get = () => {
+        return this.val
+    }
+
+    set = (v: T) => {
+        this.val = v
+        this.binders.forEach(e => {
+            Reflect.apply(e, undefined, [this.val])
+        })
+    }
+
+    private constructor(v: T) {
+        this.val = v
+    }
+
+    bind(binder: Binder<T>) {
+        this.binders.add(binder)
+        Reflect.apply(binder, undefined, [this.val])
+    }
+
+    static of<E>(v: E) {
+        return new Mutable(v)
+    }
+}
--- a/doric-js/src/util/uniqueId.ts
+++ b/doric-js/src/util/uniqueId.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+let __uniqueId__ = 0
+export function uniqueId(prefix: string) {
+    return `__${prefix}_${__uniqueId__++}__`;
+}
--- a/doric-js/src/widget/flowlayout.ts
+++ b/doric-js/src/widget/flowlayout.ts
@@ -0,0 +1,129 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Stack } from './layouts'
+import { Property, IView, Superview, View } from '../ui/view'
+import { layoutConfig } from '../util/index.util'
+
+export class FlowLayoutItem extends Stack {
+    /**
+    * Set to reuse native view
+    */
+    @Property
+    identifier?: string
+}
+export interface IFlowLayout extends IView {
+    renderItem: (index: number) => FlowLayoutItem
+
+    itemCount: number
+
+    batchCount?: number
+
+    columnCount?: number
+
+    columnSpace?: number
+
+    rowSpace?: number
+}
+
+export class FlowLayout extends Superview implements IFlowLayout {
+    private cachedViews: Map<string, FlowLayoutItem> = new Map
+    private ignoreDirtyCallOnce = false
+
+    allSubviews() {
+        if (this.loadMoreView) {
+            return [...this.cachedViews.values(), this.loadMoreView]
+        } else {
+            return this.cachedViews.values()
+        }
+    }
+
+    @Property
+    columnCount = 2
+
+    @Property
+    columnSpace?: number
+
+    @Property
+    rowSpace?: number
+
+    @Property
+    itemCount = 0
+
+    @Property
+    renderItem!: (index: number) => FlowLayoutItem
+
+    @Property
+    batchCount = 15
+
+    @Property
+    onLoadMore?: () => void
+
+    @Property
+    loadMore?: boolean
+
+    @Property
+    loadMoreView?: FlowLayoutItem
+
+    reset() {
+        this.cachedViews.clear()
+        this.itemCount = 0
+    }
+    private getItem(itemIdx: number) {
+        let view = this.renderItem(itemIdx)
+        view.superview = this
+        this.cachedViews.set(`${itemIdx}`, view)
+        return view
+    }
+
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false
+            //Ignore the dirty call once.
+            return false
+        }
+        return super.isDirty()
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx)
+            return listItem.toModel()
+        })
+    }
+
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId
+        }
+        return super.toModel()
+    }
+}
+
+export function flowlayout(config: IFlowLayout) {
+    const ret = new FlowLayout
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export function flowItem(item: View) {
+    return (new FlowLayoutItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit()
+        it.addChild(item)
+    })
+}
--- a/doric-js/src/widget/image.ts
+++ b/doric-js/src/widget/image.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { IView, View, Property } from "../ui/view"
+import { layoutConfig } from "../util/layoutconfig"
+
+export enum ScaleType {
+    ScaleToFill = 0,
+    ScaleAspectFit,
+    ScaleAspectFill,
+}
+
+export interface IImage extends IView {
+    imageUrl?: string
+    imageBase64?: string
+    scaleType?: ScaleType
+    isBlur?: boolean
+    loadCallback?: (image: { width: number; height: number } | undefined) => void
+}
+
+export class Image extends View implements IImage {
+    @Property
+    imageUrl?: string
+    @Property
+    imageBase64?: string
+    @Property
+    scaleType?: ScaleType
+    @Property
+    isBlur?: boolean
+
+    @Property
+    loadCallback?: (image: { width: number; height: number } | undefined) => void
+}
+
+export function image(config: IImage) {
+    const ret = new Image
+    ret.layoutConfig = layoutConfig().fit()
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
--- a/doric-js/src/widget/index.widget.ts
+++ b/doric-js/src/widget/index.widget.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './layouts'
+export * from './text'
+export * from './image'
+export * from './list'
+export * from './slider'
+export * from './scroller'
+export * from './refreshable'
+export * from './flowlayout'
+export * from './input'
+export * from './nestedSlider'
--- a/doric-js/src/widget/input.ts
+++ b/doric-js/src/widget/input.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { View, IView, Property } from "../ui/view";
+import { Color } from "../util/color";
+import { Gravity } from "../util/gravity";
+import { BridgeContext } from "../runtime/global";
+
+export interface IInput extends IView {
+    text?: string
+    textColor?: Color
+    textSize?: number
+    hintText?: string
+    hintTextColor?: Color
+    multilines?: boolean
+    textAlignment?: Gravity
+    onTextChange?: (text: string) => void
+    onFocusChange?: (focused: boolean) => void
+}
+
+export class Input extends View implements IInput {
+
+    @Property
+    text?: string
+
+    @Property
+    textColor?: Color
+
+    @Property
+    textSize?: number
+
+    @Property
+    hintText?: string
+
+    @Property
+    hintTextColor?: Color
+
+    @Property
+    multiline?: boolean
+
+    @Property
+    textAlignment?: Gravity
+
+    @Property
+    onTextChange?: (text: string) => void
+
+    @Property
+    onFocusChange?: (focused: boolean) => void
+
+    getText(context: BridgeContext) {
+        return this.nativeChannel(context, 'getText')() as Promise<string>
+    }
+
+    setSelection(context: BridgeContext, start: number, end: number = start) {
+        return this.nativeChannel(context, 'setSelection')({
+            start,
+            end,
+        }) as Promise<string>
+    }
+
+    requestFocus(context: BridgeContext) {
+        return this.nativeChannel(context, 'requestFocus')()
+    }
+
+    releaseFocus(context: BridgeContext) {
+        return this.nativeChannel(context, 'releaseFocus')()
+    }
+}
--- a/doric-js/src/widget/layouts.ts
+++ b/doric-js/src/widget/layouts.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Group, Property, IView, View } from "../ui/view";
+import { Gravity } from "../util/gravity";
+import { layoutConfig } from "../util/layoutconfig";
+
+export interface IStack extends IView {
+}
+
+export class Stack extends Group implements IStack {
+}
+
+export class Root extends Stack {
+
+}
+class LinearLayout extends Group {
+    @Property
+    space?: number
+
+    @Property
+    gravity?: Gravity
+}
+
+export interface IVLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+
+export class VLayout extends LinearLayout implements VLayout {
+}
+
+
+export interface IHLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+
+export class HLayout extends LinearLayout implements IHLayout {
+}
+
+export function stack(views: View[]) {
+    const ret = new Stack
+    ret.layoutConfig = layoutConfig().fit()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function hlayout(views: View[]) {
+    const ret = new HLayout
+    ret.layoutConfig = layoutConfig().fit()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function vlayout(views: View[]) {
+    const ret = new VLayout
+    ret.layoutConfig = layoutConfig().fit()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
--- a/doric-js/src/widget/list.ts
+++ b/doric-js/src/widget/list.ts
@@ -0,0 +1,117 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { View, Property, Superview, IView } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig, LayoutSpec } from "../util/layoutconfig";
+
+export class ListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    @Property
+    identifier?: string
+}
+
+export interface IList extends IView {
+    renderItem: (index: number) => ListItem
+    itemCount: number
+    batchCount?: number
+}
+
+export class List extends Superview implements IList {
+    private cachedViews: Map<string, ListItem> = new Map
+    private ignoreDirtyCallOnce = false
+
+    allSubviews() {
+        if (this.loadMoreView) {
+            return [...this.cachedViews.values(), this.loadMoreView]
+        } else {
+            return this.cachedViews.values()
+        }
+    }
+
+    @Property
+    itemCount = 0
+
+    @Property
+    renderItem!: (index: number) => ListItem
+
+    @Property
+    batchCount = 15
+
+    @Property
+    onLoadMore?: () => void
+
+    @Property
+    loadMore?: boolean
+
+    @Property
+    loadMoreView?: ListItem
+
+    reset() {
+        this.cachedViews.clear()
+        this.itemCount = 0
+    }
+    private getItem(itemIdx: number) {
+        let view = this.cachedViews.get(`${itemIdx}`)
+        if (view === undefined) {
+            view = this.renderItem(itemIdx)
+            view.superview = this
+            this.cachedViews.set(`${itemIdx}`, view)
+        }
+        return view
+    }
+
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false
+            //Ignore the dirty call once.
+            return false
+        }
+        return super.isDirty()
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx)
+            return listItem.toModel()
+        })
+    }
+
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId
+        }
+        return super.toModel()
+    }
+}
+
+export function list(config: IList) {
+    const ret = new List
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export function listItem(item: View) {
+    return (new ListItem).also((it) => {
+        it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
+        it.addChild(item)
+    })
+}
--- a/doric-js/src/widget/nestedSlider.ts
+++ b/doric-js/src/widget/nestedSlider.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Group, View, Property } from '../ui/view'
+import { BridgeContext } from '../runtime/global'
+
+
+export class NestedSlider extends Group {
+    @Property
+    onPageSlided?: (index: number) => void
+
+    addSlideItem(view: View) {
+        this.addChild(view)
+    }
+
+    slidePage(context: BridgeContext, page: number, smooth = false) {
+        return this.nativeChannel(context, "slidePage")({ page, smooth })
+    }
+
+    getSlidedPage(context: BridgeContext) {
+        return this.nativeChannel(context, "getSlidedPage")() as Promise<number>
+    }
+}
--- a/doric-js/src/widget/refreshable.ts
+++ b/doric-js/src/widget/refreshable.ts
@@ -0,0 +1,74 @@
+import { View, Property, Superview, IView } from "../ui/view";
+import { List } from "./list";
+import { Scroller } from "./scroller";
+import { BridgeContext } from "../runtime/global";
+import { layoutConfig } from "../util/layoutconfig";
+
+export interface IRefreshable extends IView {
+    content: View
+    header?: View
+    onRefresh?: () => void
+}
+
+export class Refreshable extends Superview implements IRefreshable {
+
+    content!: List | Scroller
+
+    header?: View
+
+    @Property
+    onRefresh?: () => void
+
+    allSubviews() {
+        const ret: View[] = [this.content]
+        if (this.header) {
+            ret.push(this.header)
+        }
+        return ret
+    }
+
+    setRefreshable(context: BridgeContext, refreshable: boolean) {
+        return this.nativeChannel(context, 'setRefreshable')(refreshable)
+    }
+
+    setRefreshing(context: BridgeContext, refreshing: boolean) {
+        return this.nativeChannel(context, 'setRefreshing')(refreshing)
+    }
+
+    isRefreshable(context: BridgeContext) {
+        return this.nativeChannel(context, 'isRefreshable')() as Promise<boolean>
+    }
+
+    isRefreshing(context: BridgeContext) {
+        return this.nativeChannel(context, 'isRefreshing')() as Promise<boolean>
+    }
+
+    toModel() {
+        this.dirtyProps.content = this.content.viewId
+        this.dirtyProps.header = (this.header || {}).viewId
+        return super.toModel()
+    }
+}
+
+export function refreshable(config: IRefreshable) {
+    const ret = new Refreshable
+    ret.layoutConfig = layoutConfig().fit()
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export interface IPullable {
+    startAnimation(): void
+    stopAnimation(): void
+    setPullingDistance(distance: number): void
+}
+
+
+export function pullable(v: View, config: IPullable) {
+    Reflect.set(v, 'startAnimation', config.startAnimation)
+    Reflect.set(v, 'stopAnimation', config.stopAnimation)
+    Reflect.set(v, 'setPullingDistance', config.setPullingDistance)
+    return v
+}
--- a/doric-js/src/widget/scroller.ts
+++ b/doric-js/src/widget/scroller.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Superview, View, IView } from '../ui/view'
+import { layoutConfig } from '../util/layoutconfig'
+
+export function scroller(content: View) {
+    return (new Scroller).also(v => {
+        v.layoutConfig = layoutConfig().fit()
+        v.content = content
+    })
+}
+
+export interface IScroller extends IView {
+    content: View
+}
+
+export class Scroller extends Superview implements IScroller {
+    content!: View
+
+    allSubviews() {
+        return [this.content]
+    }
+
+    toModel() {
+        this.dirtyProps.content = this.content.viewId
+        return super.toModel()
+    }
+}
--- a/doric-js/src/widget/slider.ts
+++ b/doric-js/src/widget/slider.ts
@@ -0,0 +1,91 @@
+import { Superview, View, Property, IView } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+import { BridgeContext } from "../runtime/global";
+
+export class SlideItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    @Property
+    identifier?: string
+}
+
+export interface ISlider extends IView {
+    renderPage: (index: number) => SlideItem
+    itemCount: number
+    batchCount?: number
+    onPageSlided?: (index: number) => void
+}
+
+export class Slider extends Superview implements ISlider {
+    private cachedViews: Map<string, SlideItem> = new Map
+
+    private ignoreDirtyCallOnce = false
+
+    allSubviews() {
+        return this.cachedViews.values()
+    }
+    @Property
+    itemCount = 0
+
+    @Property
+    renderPage!: (index: number) => SlideItem
+
+    @Property
+    batchCount = 3
+
+    @Property
+    onPageSlided?: (index: number) => void
+
+    private getItem(itemIdx: number) {
+        let view = this.cachedViews.get(`${itemIdx}`)
+        if (view === undefined) {
+            view = this.renderPage(itemIdx)
+            view.superview = this
+            this.cachedViews.set(`${itemIdx}`, view)
+        }
+        return view
+    }
+
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false
+            //Ignore the dirty call once.
+            return false
+        }
+        return super.isDirty()
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const slideItem = this.getItem(start + idx)
+            return slideItem.toModel()
+        })
+    }
+
+    slidePage(context: BridgeContext, page: number, smooth = false) {
+        return this.nativeChannel(context, "slidePage")({ page, smooth })
+    }
+
+    getSlidedPage(context: BridgeContext) {
+        return this.nativeChannel(context, "getSlidedPage")() as Promise<number>
+    }
+
+}
+
+export function slideItem(item: View) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit()
+        it.addChild(item)
+    })
+}
+
+export function slider(config: ISlider) {
+    const ret = new Slider
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
--- a/doric-js/src/widget/text.ts
+++ b/doric-js/src/widget/text.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { IView, View, Property } from "../ui/view"
+import { Color } from "../util/color"
+import { Gravity } from "../util/gravity"
+import { layoutConfig } from "../util/layoutconfig"
+
+export interface IText extends IView {
+    text?: string
+    textColor?: Color
+    textSize?: number
+    maxLines?: number
+    textAlignment?: Gravity
+}
+
+export class Text extends View implements IText {
+    @Property
+    text?: string
+
+    @Property
+    textColor?: Color
+
+    @Property
+    textSize?: number
+
+    @Property
+    maxLines?: number
+
+    @Property
+    textAlignment?: Gravity
+}
+
+export function text(config: IText) {
+    const ret = new Text
+    ret.layoutConfig = layoutConfig().fit()
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
--- a/doric-js/tsconfig.json
+++ b/doric-js/tsconfig.json
@@ -0,0 +1,62 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": [], /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "build/", /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true, /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "**/*.ts",
+  ]
+}