config js project

demo/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+bundle/

demo/index.ts

@@ -0,0 +1,4 @@
+export default [
+    'src/Counter',
+    'src/Snake',
+]

demo/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "demo",
+    "version": "0.1.0",
+    "main": "index.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"
+    },
+    "license": "Apache-2.0",
+    "dependencies": {
+        "doric": "file:../js-framework",
+        "reflect-metadata": "^0.1.13",
+        "rollup": "^1.17.0",
+        "rollup-plugin-commonjs": "^10.0.1",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-watch": "^4.3.1",
+        "tslib": "^1.10.0",
+        "typescript": "^3.5.3"
+    }
+}

demo/rollup.config.js

@@ -0,0 +1,18 @@
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+import bundles from './build/index'
+
+export default bundles.map(bundle => {
+    return {
+        input: `build/${bundle}.js`,
+        output: {
+            format: "cjs",
+            file: `bundle/${bundle}.js`,
+        },
+        plugins: [
+            resolve({ jsnext: true, main: true }),
+            commonjs()
+        ],
+        external: ['reflect-metadata', 'doric'],
+    }
+})

demo/src/Counter.ts

@@ -0,0 +1,112 @@
+import { Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, VLayout, log, logw, loge, Group, } from "doric"
+
+
+interface CountModel {
+    count: number
+}
+
+class CounterView extends ViewHolder {
+    number = new Text
+    counter = new Text
+    build(root: Group) {
+        const vlayout = new VLayout
+        vlayout.width = 200
+        vlayout.height = 200
+        vlayout.gravity = new Gravity().center()
+        this.number.textSize = 40
+        this.number.layoutConfig = {
+            alignment: new Gravity().center()
+        }
+        this.counter = new Text
+        this.counter.text = "点击计数"
+        this.counter.border = {
+            width: 1,
+            color: Color.parse('#000000'),
+        }
+        this.counter.textSize = 20
+        this.counter.corners = 5
+        vlayout.space = 20
+        vlayout.layoutConfig = {
+            alignment: new Gravity().center()
+        }
+        vlayout.border = {
+            width: 1,
+            color: Color.parse("#000000"),
+        }
+        this.counter.shadow = {
+            color: Color.parse("#00ff00"),
+            opacity: 0.5,
+            radius: 20,
+            offsetX: 10,
+            offsetY: 10,
+        }
+        vlayout.shadow = {
+            color: Color.parse("#ffff00"),
+            opacity: 0.5,
+            radius: 20,
+            offsetX: 10,
+            offsetY: 10,
+        }
+        vlayout.corners = 20
+        vlayout.addChild(this.number)
+        vlayout.addChild(this.counter)
+        // root.bgColor = Color.parse('#00ff00')
+        vlayout.bgColor = Color.parse('#ff00ff')
+        root.addChild(vlayout)
+        const iv = new Image
+        // iv.width = iv.height = 100
+        iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png"
+        //iv.bgColor = Color.parse('#00ff00')
+        root.addChild(iv)
+    }
+
+    setNumber(n: number) {
+        this.number.text = n.toString()
+    }
+
+    setCounter(v: Function) {
+        this.counter.onClick = v
+    }
+}
+
+class CounterVM extends ViewModel<CountModel, CounterView> {
+
+    binding(v: CounterView, model: CountModel): void {
+        v.setNumber(model.count)
+        v.setCounter(() => {
+            this.getModel().count++
+        })
+    }
+}
+
+@Entry
+class MyPage extends VMPanel<CountModel, CounterView>{
+
+    getVMClass() {
+        return CounterVM
+    }
+
+    getModel() {
+        return {
+            count: 0,
+            add: function () {
+                this.count++
+            },
+        }
+    }
+
+    getViewHolder() {
+        return new CounterView
+    }
+
+
+    @NativeCall
+    log() {
+        log("Hello.HEGO")
+        logw("Hello.HEGO")
+        loge("Hello.HEGO")
+        context.modal.toast('This is a toast.').then((r) => {
+            loge(r)
+        })
+    }
+}

demo/src/Snake.ts

@@ -0,0 +1,310 @@
+import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel } from "doric";
+
+type SnakeNode = {
+    x: number
+    y: number
+    prev?: SnakeNode
+    next?: SnakeNode
+}
+
+
+enum Direction {
+    left = 0,
+    right = 1,
+    up = 2,
+    down = 3,
+}
+
+enum State {
+    idel,
+    run,
+    fail,
+}
+
+class SnakeModel {
+    state = State.idel
+    direction = Direction.right
+
+    width: number
+    height: number
+
+    constructor(w: number, h: number) {
+        this.width = w
+        this.height = h
+    }
+    food = { x: -1, y: -1 }
+
+    head: SnakeNode = {
+        x: 0,
+        y: 0,
+    }
+
+    refreshFood() {
+        this.food.x = Math.floor(Math.random() * (this.width - 1))
+        this.food.y = Math.floor(Math.random() * (this.height - 1))
+    }
+
+    get tail() {
+        let node = this.head
+        while (node.next !== undefined) {
+            node = node.next
+        }
+        return node
+    }
+    get score() {
+        let node = this.head
+        let n = 0
+        while (node.next !== undefined) {
+            n++
+            node = node.next
+        }
+        return n
+    }
+
+    forward(node: SnakeNode) {
+        switch (this.direction) {
+            case Direction.left:
+                node.x -= 1
+                break;
+            case Direction.right:
+                node.x += 1
+                break;
+            case Direction.up:
+                node.y -= 1
+                break;
+            case Direction.down:
+                node.y += 1
+                break;
+        }
+    }
+
+
+    step() {
+        if (this.state !== State.run) {
+            return
+        }
+        let tail = this.tail
+        while (tail.prev != undefined) {
+            tail.x = tail.prev.x
+            tail.y = tail.prev.y
+            tail = tail.prev
+        }
+        this.forward(this.head)
+        if (this.head.x < 0 || this.head.x >= this.width
+            || this.head.y < 0 || this.head.y >= this.height) {
+            //If out of bound
+            loge('out of bound')
+            this.state = State.fail
+        } else if (this.head.x == this.food.x && this.head.y == this.food.y) {
+            //If eat food
+
+            let head: SnakeNode = { x: this.food.x, y: this.food.y }
+            log('eat food', head)
+            this.forward(head)
+            this.head.prev = head
+            head.next = this.head
+            this.head = head
+            this.refreshFood()
+        }
+        if (this.crashAtSelf()) {
+            //If crash at self
+            loge('crash at self')
+            this.state = State.fail
+        }
+    }
+
+    crashAtSelf() {
+        let cur = this.head.next
+        while (cur !== undefined) {
+            if (cur.x == this.head.x && cur.y == this.head.y) {
+                return true
+            }
+            cur = cur.next
+        }
+        return false
+    }
+
+    reset() {
+        this.direction = Direction.right
+        this.state = State.run
+        this.head.x = 0
+        this.head.y = 0
+        this.head.next = undefined
+        this.refreshFood()
+    }
+}
+
+class SnakeView extends ViewHolder {
+    panel: Stack = new Stack
+    start: Text = new Text
+    up?: Text
+    down?: Text
+    left?: Text
+    right?: Text
+
+    build(root: Group): void {
+        root.bgColor = Color.parse('#000000')
+        const vlayout = new VLayout
+        const title = new Text
+        title.text = "Snake"
+        title.textSize = 20
+        title.textColor = Color.parse("#ffffff")
+        title.layoutConfig = {
+            alignment: new Gravity().centerX(),
+            margin: {
+                top: 20
+            },
+        }
+        vlayout.space = 20
+        vlayout.layoutConfig = {
+            alignment: new Gravity().centerX().top()
+        }
+        this.panel.bgColor = Color.parse('#00ff00')
+        vlayout.addChild(title)
+        vlayout.addChild(this.panel)
+        root.addChild(vlayout)
+
+        const hlayout = new HLayout
+        this.start.text = "Start"
+        this.start.textSize = 30
+        this.start.textColor = Color.parse("#ffffff")
+
+        hlayout.addChild(this.start)
+        vlayout.addChild(hlayout)
+
+
+        this.up = this.buildController("↑")
+        this.down = this.buildController("↓")
+        this.left = this.buildController("←")
+        this.right = this.buildController("→")
+
+        const controlArea = new VLayout
+        controlArea.gravity = new Gravity().centerX()
+        controlArea.space = 10
+        controlArea.layoutConfig = {
+            alignment: new Gravity().centerX()
+        }
+        const line1 = new HLayout
+        const line2 = new HLayout
+        line2.space = 10
+        line1.addChild(this.up)
+        line2.addChild(this.left)
+        line2.addChild(this.down)
+        line2.addChild(this.right)
+        controlArea.addChild(line1)
+        controlArea.addChild(line2)
+        vlayout.addChild(controlArea)
+    }
+
+    buildController(text: string) {
+        const ret = new Text
+        ret.width = ret.height = 50
+        ret.bgColor = Color.parse('#ffff00')
+        ret.text = text
+        ret.textSize = 30
+        ret.textAlignment = new Gravity().center()
+        return ret
+    }
+}
+
+class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
+
+    timerId?: any
+
+    start = () => {
+        if (this.timerId !== undefined) {
+            clearInterval(this.timerId)
+        }
+        this.getModel().reset()
+        this.timerId = setInterval(() => {
+            this.getModel().step()
+        }, 500)
+    }
+
+    stop = () => {
+        if (this.timerId !== undefined) {
+            clearInterval(this.timerId)
+            this.timerId = undefined
+        }
+    }
+
+    left = () => {
+        this.getModel().direction = Direction.left
+    }
+
+    right = () => {
+        this.getModel().direction = Direction.right
+    }
+
+    up = () => {
+        this.getModel().direction = Direction.up
+    }
+
+    down = () => {
+        this.getModel().direction = Direction.down
+    }
+
+    binding(v: SnakeView, model: SnakeModel) {
+        if (model.state === State.fail) {
+            loge('Game Over')
+            this.stop()
+        }
+        v.start.onClick = this.start
+        v.panel.width = model.width * 10
+        v.panel.height = model.height * 10
+        let node: SnakeNode | undefined = model.head
+        let nodes: SnakeNode[] = []
+        while (node != undefined) {
+            nodes.push(node)
+            node = node.next
+        }
+        nodes.push(model.food)
+        nodes.forEach((e, index) => {
+
+            let item = v.panel.children[index]
+            if (item === undefined) {
+                item = new Stack
+                item.width = item.height = 10
+                v.panel.addChild(item)
+            }
+            if (index === nodes.length - 1) {
+                item.bgColor = Color.parse('#ffff00')
+            } else {
+                item.bgColor = Color.parse('#ff0000')
+            }
+            item.x = e.x * 10
+            item.y = e.y * 10
+        })
+
+        if (nodes.length < v.panel.children.length) {
+            v.panel.children.length = nodes.length
+        }
+        if (v.left) {
+            v.left.onClick = this.left
+        }
+        if (v.right) {
+            v.right.onClick = this.right
+        }
+        if (v.up) {
+            v.up.onClick = this.up
+        }
+        if (v.down) {
+            v.down.onClick = this.down
+        }
+    }
+}
+@Entry
+class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
+
+    getVMClass() {
+        return SnakeVM
+    }
+
+    getModel() {
+        return new SnakeModel(35, 35)
+    }
+
+    getViewHolder() {
+        return new SnakeView
+    }
+}

demo/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",
+  ]
+}