zhongjianfei@huawei.com

Signed-off-by: zhongjianfei <zhongjianfei@huawei.com>

BUILD.gn

@@ -0,0 +1,130 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2021-2021. All rights reserved.
+
+import("//build/ohos.gni")
+import("//build/ohos/ace/ace.gni")
+import("//foundation/ace/ace_engine/ace_config.gni")
+
+ets_loader_lib_dir =
+    get_label_info(":build_ets_loader_library", "target_out_dir") + "/lib"
+ets_loader_declarations_dir = get_label_info(":build_ets_loader_library",
+                                             "target_out_dir") + "/declarations"
+ets_loader_component_config_file =
+    get_label_info(":build_ets_loader_library", "target_out_dir") +
+    "/component_config.json"
+ets_sysResource = get_label_info(":build_ets_sysResource", "target_out_dir") +
+                  "/sysResource.js"
+
+action("build_ets_loader_library") {
+  script = "//foundation/ace/huawei_proprietary/tools/ets-loader/build_ets_loader_library.py"
+  depfile = "$target_gen_dir/$target_name.d"
+  outputs = [
+    ets_loader_lib_dir,
+    ets_loader_declarations_dir,
+    ets_loader_component_config_file,
+  ]
+
+  _ets_loader_dir =
+      "//foundation/ace/huawei_proprietary/tools/ets-loader/compiler"
+  _ace_toolkit_dir = "//prebuilts/ace-toolkit/ets-loader/compiler"
+  _declarations_file_dir = "//interface/sdk-js/api/@internal/component/ets"
+
+  _babel_js = _ace_toolkit_dir + "/node_modules/@babel/cli/bin/babel.js"
+  _babel_config_js = _ace_toolkit_dir + "/babel.config.js"
+  _uglify_source_js = _ace_toolkit_dir + "/uglify-source.js"
+  _build_declarations_file_js = _ace_toolkit_dir + "/build_declarations_file.js"
+
+  inputs = [
+    _babel_config_js,
+    _babel_js,
+    _uglify_source_js,
+    _build_declarations_file_js,
+  ]
+
+  # different host platform nodejs tool directory
+  if (host_os == "linux") {
+    nodejs_path =
+        "//prebuilts/ace-toolkit/nodejs/node-v12.18.4-linux-x64/bin/node"
+  } else if (host_os == "mac") {
+    nodejs_path =
+        "//prebuilts/ace-toolkit/nodejs/node-v12.18.4-darwin-x64/bin/node"
+  } else {
+    assert(false, "Unsupported host_os: $host_os")
+  }
+
+  args = [
+    "--depfile",
+    rebase_path(depfile, root_build_dir),
+    "--node",
+    rebase_path(nodejs_path, root_build_dir),
+    "--babel-js",
+    rebase_path(_babel_js, root_build_dir),
+    "--ets-loader-src-dir",
+    rebase_path(_ets_loader_dir + "/src", root_build_dir),
+    "--babel-config-js",
+    rebase_path(_babel_config_js, root_build_dir),
+    "--uglify-source-js",
+    rebase_path(_uglify_source_js, root_build_dir),
+    "--output-dir",
+    rebase_path(ets_loader_lib_dir, root_build_dir),
+    "--declarations-file-dir",
+    rebase_path(_declarations_file_dir, root_build_dir),
+    "--build-declarations-file-js",
+    rebase_path(_build_declarations_file_js, root_build_dir),
+    "--output-declarations-dir",
+    rebase_path(ets_loader_declarations_dir, root_build_dir),
+    "--output-component-config-file",
+    rebase_path(ets_loader_component_config_file, root_build_dir),
+  ]
+}
+
+action("build_ets_sysResource") {
+  script = "//foundation/ace/huawei_proprietary/tools/ets-loader/generateSysResource.py"
+  outputs = [ ets_sysResource ]
+
+  _id_defined_json =
+      "//utils/resources/systemres/main/resources/base/element/id_defined.json"
+  inputs = [ _id_defined_json ]
+
+  args = [
+    "--input-json",
+    rebase_path(_id_defined_json, root_build_dir),
+    "--output-js",
+    rebase_path(ets_sysResource, root_build_dir),
+  ]
+}
+
+ohos_copy("ets_loader") {
+  deps = [
+    ":build_ets_loader_library",
+    ":build_ets_sysResource",
+  ]
+  sources = [
+    "compiler/main.js",
+    "compiler/npm-install.js",
+    "compiler/package-lock.json",
+    "compiler/package.json",
+    "compiler/tsconfig.json",
+    "compiler/webpack.config.js",
+    ets_loader_component_config_file,
+    ets_sysResource,
+  ]
+  outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
+  module_source_dir = target_out_dir + "/$target_name"
+  module_install_name = ""
+}
+
+ohos_copy("ets_loader_library") {
+  deps = [ ":build_ets_loader_library" ]
+  sources = [ ets_loader_lib_dir ]
+  outputs = [ target_out_dir + "/$target_name" ]
+  module_source_dir = target_out_dir + "/$target_name"
+  module_install_name = ""
+}
+
+ohos_copy("ets_loader_declaration") {
+  deps = [ ":build_ets_loader_library" ]
+  sources = [ ets_loader_declarations_dir ]
+  outputs = [ target_out_dir + "/$target_name" ]
+  module_source_dir = target_out_dir + "/$target_name"
+  module_install_name = ""
+}

build_ets_loader_library.py

@@ -0,0 +1,88 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+# Copyright (c) 2021 Huawei Device Co., Ltd.
+# 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 os
+import sys
+import subprocess
+import argparse
+
+sys.path.append(
+    os.path.join(os.path.dirname(__file__), os.pardir, os.pardir, os.pardir,
+                 os.pardir, os.pardir, 'build'))
+from maple.java.util import build_utils  # noqa: E402
+
+
+def parse_args():
+
+    parser = argparse.ArgumentParser()
+    build_utils.add_depfile_option(parser)
+
+    parser.add_argument('--node', help='path to nodejs exetuable')
+    parser.add_argument('--babel-js', help='path to babel.js')
+    parser.add_argument('--ets-loader-src-dir', help='path to compiler/src')
+    parser.add_argument('--babel-config-js', help='path babel.config.js')
+    parser.add_argument('--uglify-source-js', help='path uglify-source.js')
+    parser.add_argument('--output-dir', help='path to output')
+    parser.add_argument('--declarations-file-dir',
+        help='path declarations file')
+    parser.add_argument('--build-declarations-file-js',
+        help='path build_declarations_file.js')
+    parser.add_argument('--output-declarations-dir',
+        help='path declarations file to output')
+    parser.add_argument('--output-component-config-file',
+        help='path component config file to output')
+
+    options = parser.parse_args()
+    return options
+
+
+def do_build(build_cmd, uglify_cmd, build_declarations_file_cmd):
+    for cmd in [build_cmd, uglify_cmd, build_declarations_file_cmd]:
+        build_utils.check_output(cmd)
+
+
+def main():
+    options = parse_args()
+    build_cmd = [
+        options.node, options.babel_js, options.ets_loader_src_dir
+    ]
+    build_cmd.extend(['--out-dir', options.output_dir])
+    build_cmd.extend(['--extensions', '.ts'])
+    build_cmd.extend(['--config-file', options.babel_config_js])
+    depfile_deps = [options.node, options.babel_js, options.babel_config_js]
+    depfile_deps.extend(build_utils.get_all_files(options.ets_loader_src_dir))
+
+    uglify_cmd = [options.node, options.uglify_source_js, options.output_dir]
+    depfile_deps.append(options.uglify_source_js)
+
+    build_declarations_file_cmd = [options.node,
+        options.build_declarations_file_js,
+        options.declarations_file_dir,
+        options.output_declarations_dir,
+        options.output_dir]
+    depfile_deps.append(options.build_declarations_file_js)
+
+    build_utils.call_and_write_depfile_if_stale(
+        lambda: do_build(build_cmd, uglify_cmd, build_declarations_file_cmd),
+        options,
+        depfile_deps=depfile_deps,
+        input_paths=depfile_deps,
+        output_paths=([
+            options.output_dir,
+            options.output_declarations_dir,
+            options.output_component_config_file]))
+
+if __name__ == '__main__':
+    sys.exit(main())

compiler/.eslintrc

@@ -0,0 +1,89 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true
+  },
+
+  "extends": "eslint:recommended",
+  "parser": "@typescript-eslint/parser",
+
+  "rules": {
+    "camelcase": [2, { "properties": "never" }],
+    "accessor-pairs": 2,
+    "arrow-spacing": 2,
+    "block-spacing": 2,
+    "brace-style": 2,
+    "comma-dangle": 2,
+    "comma-spacing": 2,
+    "comma-style": 2,
+    "curly": 2,
+    "dot-location": [2, "property"],
+    "eol-last": 2,
+    "eqeqeq": 2,
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": 2,
+    "keyword-spacing": 2,
+    "new-cap": 2,
+    "new-parens": 2,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-parens": 2,
+    "no-floating-decimal": 2,
+    "no-implied-eval": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-new-object": 2,
+    "no-new-wrappers": 2,
+    "no-octal-escape": 2,
+    "no-proto": 2,
+    "no-return-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "func-call-spacing": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef-init": 2,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-useless-computed-key": 2,
+    "no-useless-constructor": 2,
+    "no-whitespace-before-property": 2,
+    "one-var": [2, { "initialized": "never" }],
+    "padded-blocks": [2, "never"],
+    "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}],
+    "semi": 2,
+    "semi-spacing": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, "never"],
+    "space-in-parens": 2,
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": 2,
+    "template-curly-spacing": 2,
+    "wrap-iife": [2, "any"],
+    "no-var": 2,
+    "prefer-const": 2,
+    "array-bracket-spacing": 2
+  },
+
+  "settings": {
+    "flowtype": {
+      "onlyFilesWithFlowAnnotation": true
+    }
+  }
+}

compiler/README.md

@@ -0,0 +1,81 @@
+# compiler
+
+**The compiler tool chain for ace2.0.**
+
+## Usage
+Here are simplified instructions of how to get started. The following commands work both on **Windows** and **Linux** platforms.
+
+### 1. Install
+
+First, enter the root directory of the compiler:
+```
+$ cd compiler/
+```
+And then install the npm dependencies(You must have node&npm installed):
+```
+$ npm install
+```
+**Note**: If some errors occur, delete the generated package `node_modules`, please check the following items:
+
+First, check whether your node version is 12.x or later;
+Secondly, config npm proxy and run `npm install` again.
+```
+npm config set strict-ssl false
+npm config set registry https://cmc.centralrepo.rnd.huawei.com/npm/
+```
+
+### 2. Quick Start
+
+For a quick start
+
+In the root directory of `compiler/`:
+```
+$ npm run build
+$ npm run compile
+```
+The `sample` project will be compiled. The output is in the `sample/build` directory.
+
+### 3. Create a new project
+
+The way to create a new project
+
+In the root directory of `compiler/`:
+```
+$ npm run build
+$ npm run create [projectName]
+```
+
+**Note**: If `projectName` is empty, create the `HelloAce` project by default.
+
+For example, use the following line to create a project named `foo`:
+```
+$ npm run create foo
+```
+The directory structure of project `foo`:
+- foo
+  - pages
+    - index.ets
+  - app.ets
+  - manifest.json
+
+### 4. Create a new page
+
+For example, create a file `bar.ets` in the `page` directory. And then add the following lines to `"page"` field in `manifest.json`:
+```
+  "pages": [
+    "pages/index",
+    "pages/bar"
+  ]
+```
+
+### 5. Compile a project
+
+The way to compile a project
+
+In the root directory of `compiler/`:
+```
+$ npm run build
+$ npm run compile [projectName]
+```
+
+**Note**: If `projectName` is empty, compile the `sample` project by default. In the project root directory, the compilation result is in the `build` directory.

compiler/babel.config.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * 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.
+ */
+
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = ['@babel/preset-env', '@babel/typescript'];
+  const plugins = [
+    '@babel/plugin-transform-modules-commonjs',
+    '@babel/plugin-proposal-class-properties',
+    [
+      '@babel/plugin-transform-arrow-functions',
+      {
+        spec: true
+      }
+    ]
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+};

compiler/build_declarations_file.js

@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * 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.
+ */
+
+const ts = require('typescript')
+const path = require('path')
+const fs = require('fs')
+
+generateTargetFile();
+function generateTargetFile() {
+  const filePath = path.resolve(__dirname, '../../../../../../interface/sdk-js/api/@internal/component/ets');
+  const output = path.resolve(__dirname, './declarations');
+  const files = [];
+  const globalTsFile = path.resolve(filePath, '../../global.d.ts');
+  if (fs.existsSync(globalTsFile)) {
+    files.push(globalTsFile);
+  }
+  readFile(filePath, files);
+  if (!fs.existsSync(output)) {
+    mkDir(output);
+  }
+  const license = `/*
+  * Copyright (c) 2021 Huawei Device Co., Ltd.
+  * 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.
+  */`;
+  files.forEach((item) => {
+    const content = fs.readFileSync(item, 'utf8');
+    const fileName = path.resolve(output, path.basename(item));
+    const newContent = license + '\n\n' + processsFile(content, fileName);
+    fs.writeFile(fileName, newContent, err => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+    });
+  });
+}
+
+function readFile(dir, fileDir) {
+  const files = fs.readdirSync(dir);
+  files.forEach((element) => {
+    const filePath = path.join(dir, element);
+    const status = fs.statSync(filePath);
+    if (status.isDirectory()) {
+      readFile(filePath, fileDir);
+    } else {
+      fileDir.push(filePath);
+    }
+  });
+}
+
+function mkDir(filePath) {
+  const parent = path.join(filePath, '..');
+  if (!(fs.existsSync(parent) && !fs.statSync(parent).isFile())) {
+    mkDir(parent);
+  }
+  fs.mkdirSync(filePath);
+}
+
+function processsFile(content, fileName) {
+  let sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  const newStatements = [];
+  if (sourceFile.statements && sourceFile.statements.length) {
+    sourceFile.statements.forEach((node) => {
+      if (!ts.isImportDeclaration(node)) {
+        if (node.modifiers && node.modifiers.length && node.modifiers[0].kind === ts.SyntaxKind.ExportKeyword) {
+          node.modifiers.splice(0, 1);
+        }
+        if (isVariable(node)) {
+          const name = node.declarationList.declarations[0].name.getText();
+          const type = node.declarationList.declarations[0].type.getText();
+          if (name.indexOf(type) !== -1) {
+            const declarationNode = ts.factory.updateVariableDeclaration(node.declarationList.declarations[0],
+              ts.factory.createIdentifier(type), node.declarationList.declarations[0].exclamationToken,
+              node.declarationList.declarations[0].type, node.declarationList.declarations[0].initializer);
+            node.declarationList = ts.factory.updateVariableDeclarationList(node.declarationList, [declarationNode]);
+          }
+        }
+        newStatements.push(node);
+      }
+    });
+  }
+  sourceFile = ts.factory.updateSourceFile(sourceFile, newStatements);
+  const printer = ts.createPrinter({ removeComments: true, newLine: ts.NewLineKind.LineFeed });
+  const result = printer.printNode(ts.EmitHint.Unspecified, sourceFile, sourceFile);
+  return result;
+}
+
+function isVariable(node) {
+  if (ts.isVariableStatement(node) && node.declarationList && node.declarationList.declarations &&
+    node.declarationList.declarations.length && ts.isVariableDeclaration(node.declarationList.declarations[0]) &&
+    node.declarationList.declarations[0].name && node.declarationList.declarations[0].type) {
+    return true;
+  }
+  return false;
+}

compiler/examples/calendar/app.ets

@@ -0,0 +1,8 @@
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}

compiler/examples/calendar/manifest.json

@@ -0,0 +1,10 @@
+{
+  "appID": "com.huawei.calendar",
+  "appName": "calendar",
+  "versionName": "1.0.0",
+  "versionCode": 1,
+  "minPlatformVersion": "2.0.0",
+  "pages": [
+    "pages/calendar"
+  ]
+}

compiler/examples/calendar/pages/calendar.ets

@@ -0,0 +1,147 @@
+@Component
+struct Title {
+  @Prop currentMonth: number
+  @Prop currentYear: number
+  private weekNames: string[] = ['日', '一', '二', '三', '四', '五', '六']
+  build() {
+    Column() {
+      Column() {
+        Text(`${this.currentYear} 年 ${this.currentMonth+1} 月`)
+          .fontSize(17)
+          .fontWeight(FontWeight.Bold)
+      }.height(39)
+      Grid() {
+        ForEach(
+          this.weekNames,
+          item => {
+            GridItem() {
+              Text(item)
+                .fontSize(10)
+            }
+          },
+          item => item
+        )
+      }.rowsTemplate('1fr').columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr').height(34)
+    }
+  }
+}
+
+@Component
+struct Day {
+  @Prop day: number
+  @Prop month: number
+  @Prop lunarDay: string
+  @Prop lunarMonth: number
+  @Link private selectedDay?: number
+  @Link private selectedLunarMonth?: number
+  @Link private selectedLunarDay?: string
+  build() {
+    Column() {
+      Text(`${this.day}`)
+        .fontSize(17)
+        .fontWeight(FontWeight.Bold)
+        .color(this.selectedDay === this.day ? Color.Red : Color.Black)
+      Text(`${this.lunarDay}`)
+        .fontSize(10)
+        .color(this.selectedDay === this.day ? Color.Red : Color.Black)
+    }.height(72)
+    .alignItems(HorizontalAlign.Center)
+    .onClick(() => {
+      this.selectedLunarDay = this.lunarDay
+      this.selectedLunarMonth = this.lunarMonth
+      this.selectedDay = this.day
+    })
+  }
+}
+
+@Component
+struct MonthView {
+  @Prop month: number
+  private lunarMonthDays: string[] = [
+  '初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
+  '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
+  '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十']
+  private lunarMonthNames: string[] = [
+    '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月']
+  @State selectedLunarDay: string = '初十'
+  @State selectedLunarMonth: number = new Date().getMonth() + 1
+  @State selectedDay: number = new Date().getDate()
+
+  build() {
+    Column() {
+      Row() {
+        Grid() {
+          ForEach(
+            Array.from({length: 35}, (a, i) => i + 1),
+            item => {
+              GridItem() {
+                Day({day: item,
+                  month: this.month,
+                  lunarDay: this.lunarMonthDays[item % 30],
+                  lunarMonth: this.month,
+                  selectedLunarDay: this.$selectedLunarDay,
+                  selectedLunarMonth: this.$selectedLunarMonth,
+                  selectedDay: this.$selectedDay})
+              }
+            },
+            item => item
+          )
+        }.rowsTemplate('1fr 1fr 1fr 1fr 1fr').columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr').height(288)
+      }.alignItems(VerticalAlign.Center)
+
+      Row() {
+        Column() {
+          Row() {
+            Text(`农历 ${this.lunarMonthNames[this.selectedLunarMonth]}${this.selectedLunarDay}`)
+              .fontSize(15)
+              .margin(10)
+          }
+          Row() {
+            Text('今日无日程')
+              .fontSize(15)
+          }.alignItems(VerticalAlign.Center)
+        }
+      }.alignItems(VerticalAlign.Center)
+    }
+  }
+}
+
+@Component
+struct SwiperView {
+  private monthList: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+  @Link private month?: number
+  @Link private year?: number
+  build() {
+    Swiper() {
+      ForEach(
+        this.monthList,
+        item => {
+          Column() {
+            MonthView({month: item})
+          }.margin({left: 20, right: 20, bottom: 20, top: 3})
+        },
+        item => item)
+    }.indicator(false)
+    .index(this.month)
+    .onChange(e => {
+      this.month = e.index
+    })
+    }
+  }
+}
+
+@Entry
+@Component
+struct MyCalendar {
+  @State monthIdx: number = new Date().getMonth()
+  @State yearIdx: number = new Date().getFullYear()
+  build() {
+    Column() {
+      Row() {
+        Title({currentMonth:this.monthIdx, currentYear:this.yearIdx})
+      }.height(72)
+      .margin({left: 20, right: 20, top: 20})
+      SwiperView({month: this.$monthIdx, year: this.$yearIdx})
+    }
+  }
+}

compiler/examples/taobao/app.ets

@@ -0,0 +1,8 @@
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}

compiler/examples/taobao/manifest.json

@@ -0,0 +1,11 @@
+{
+  "appID": "com.huawei.taobao",
+  "appName": "taobao",
+  "versionName": "1.0.0",
+  "versionCode": 1,
+  "minPlatformVersion": "2.0.0",
+  "pages": [
+    "pages/index",
+    "pages/detail"
+  ]
+}

compiler/examples/taobao/pages/detail.ets

@@ -0,0 +1,72 @@
+const detailList = [
+  {
+    uri: 'resources/rawfile/table/list_one.jpg',
+    title: '创意日式环保原木纸巾架 榉木无漆卷纸收纳架 卫生纸柱厨房纸巾架'
+  },
+  {
+    uri: 'resources/rawfile/table/list_two.jpg',
+    title: '展示篮海草编新中式收纳筐矮收纳盒藤编制把手托盘杂物家居整理篮'
+  },
+  {
+    uri: 'resources/rawfile/table/list_three.jpg',
+    title: '门后挂钩金属门背后衣物挂架免钉无痕衣帽钩创意门上挂衣架挂衣钩'
+  },
+  {
+    uri: 'resources/rawfile/table/list_four.jpg',
+    title: '可折叠桌面置物架分层小型架子厨房杂物整理落地收纳架衣柜隔层架'
+  },
+  {
+    uri: 'resources/rawfile/table/list_five.jpg',
+    title: 'Castle Garden亲肤水貂绒3D立体树叶双层多功能绒毯 白'
+  },
+  {
+    uri: 'resources/rawfile/table/list_six.jpg',
+    title: 'DORA HOUSE欧式法式复古木质烛台 仿古做旧酒吧别墅装饰配烛杯'
+  },
+  {
+    uri: 'resources/rawfile/table/list_seven.jpg',
+    title: '美式装饰品北欧创意家居客厅书房电视柜发光地球仪样板房摆件礼品'
+  },
+  {
+    uri: 'resources/rawfile/table/list_eight.jpg',
+    title: '树可珐琅 日式收纳筒加厚搪瓷筷子筒笔筒工具筒厨房收纳复古笔筒'
+  },
+  {
+    uri: 'resources/rawfile/table/list_nine.jpg',
+    title: '包邮家用陶瓷盘子圆形菜盘 创意碗盘骨瓷西餐具牛扒盘 清新水果盘'
+  },
+  {
+    uri: 'resources/rawfile/table/list_ten.jpg',
+    title: '朵颐创意北欧不锈钢西餐餐具黑柄手柄刀叉勺套装甜品叉勺主餐刀叉'
+  }
+]
+
+@Entry
+@Component
+struct Detail {
+  build() {
+    Column() {
+      List() {
+        ForEach(
+          detailList,
+          (item) => {
+            ListItem() {
+              Column() {
+                Image(item.uri)
+                  .width(275).height(300)
+                  .borderRadius(15)
+                Text(item.title)
+                  .fontSize(16)
+                  .width(220).height(50)
+              }.width(300).height(400)
+              .borderRadius(15)
+              .alignItems(HorizontalAlign.Center)
+            }.height(410)
+          },
+          item => item.title)
+      }.width(300)
+    }.width(360)
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Center)
+  }
+}

compiler/examples/taobao/pages/index.ets

@@ -0,0 +1,293 @@
+const SelectItems = [
+  {
+    uri1: 'class/type_new.png', title1: '天猫新品', uri2: 'class/type_recharge.png', title2: '充值中心'
+  },
+  {
+    uri1: 'class/type_international.png', title1: '天猫国际', uri2: 'class/type_garden.png', title2: '金币庄园'
+  },
+  {
+    uri1: 'class/type_order.png', title1: '饿了么', uri2: 'class/type_auction.png', title2: '阿里拍卖'
+  },
+  {
+    uri1: 'class/type_market.png', title1: '天猫超市', uri2: 'class/type_eat.png', title2: '淘宝吃货'
+  },
+  {
+    uri1: 'class/type_all.png', title1: '分类', uri2: 'class/type_used.png', title2: '咸鱼'
+  },
+  {
+    uri1: 'class/type_food.png', title1: '天猫美食', uri2: 'class/type_vip.png', title2: '会员中心'
+  },
+  {
+    uri1: 'class/type_health.png', title1: '阿里健康', uri2: 'class/type_movie.png', title2: '淘票票'
+  },
+  {
+    uri1: 'class/type_life.png', title1: '口碑生活', uri2: 'class/type_membership.png', title2: '会员店'
+  },
+]
+
+const ProductItems = [
+  {
+    uri1: 'table/list_one.jpg', description1: '创意日式环保原木纸巾架 榉木无漆卷纸收纳架 卫生纸柱厨房纸巾架', price1:'￥29.9', soldNumber1: '79人已购买',
+    uri2: 'table/list_two.jpg', description2: '展示篮海草编新中式收纳筐矮收纳盒藤编制把手托盘杂物家居整理篮', price2: '￥35.1', soldNumber2: '24人已购买'
+  },
+  {
+    uri1: 'table/list_three.jpg', description1: '门后挂钩金属门背后衣物挂架免钉无痕衣帽钩创意门上挂衣架挂衣钩', price1: '￥27.9', soldNumber1: '214人已购买',
+    uri2: 'table/list_four.jpg', description2: '可折叠桌面置物架分层小型架子厨房杂物整理落地收纳架衣柜隔层架', price2: '￥8', soldNumber2: '1234人已购买'
+  },
+  {
+    uri1: 'table/list_five.jpg', description1: 'Castle Garden亲肤水貂绒3D立体树叶双层多功能绒毯白', price1: '￥198.8', soldNumber1: '38人已购买',
+    uri2: 'table/list_six.jpg', description2: 'DORA HOUSE欧式法式复古木质烛台 仿古做旧酒吧别墅装饰配烛杯', price2: '￥168', soldNumber2: '82人已购买'
+  },
+  {
+    uri1: 'table/list_seven.jpg', description1: '美式装饰品北欧创意家居客厅书房电视柜发光地球仪样板房摆件礼品', price1: '￥148', soldNumber1: '19人已购买',
+    uri2: 'table/list_eight.jpg', description2: '树可珐琅 日式收纳筒加厚搪瓷筷子筒笔筒工具筒厨房收纳复古笔筒', price2: '￥39', soldNumber2: '113人已购买'
+  },
+  {
+    uri1: 'table/list_nine.jpg', description1: '包邮家用陶瓷盘子圆形菜盘 创意碗盘骨瓷西餐具牛扒盘 清新水果盘', price1: '￥24.9', soldNumber1: '21人已购买',
+    uri2: 'table/list_ten.jpg', description2: '朵颐创意北欧不锈钢西餐餐具黑柄手柄刀叉勺套装甜品叉勺主餐刀叉', price2: '￥19', soldNumber2: '25人已购买'
+  },
+  {
+    uri1: 'table/list_eleven.jpg', description1: '「番茄设计出品 / 千鸟格纹路」设计师高靠背布艺软床', price1: '￥3,625', soldNumber1: '11人已购买',
+    uri2: 'table/list_twelve.jpg', description2: '复古做旧实木多肉花架 田园乡村置物架托盘 储物架 花园园艺杂货', price2: '￥275', soldNumber2: '8人已购买'
+  },
+  {
+    uri1: 'table/list_thirteen.jpg', description1: '北欧简约胡桃木色门厅柜玄关柜鞋柜组合定做隔断柜镂空屏风鞋柜', price1: '￥2,290', soldNumber1: '78人已购买',
+    uri2: 'table/list_fourteen.jpg', description2: '厨房创意竹木陶瓷调味罐三件套胡椒盐罐味精瓶调料盒套装调味瓶罐', price2: '￥35', soldNumber2: '25人已购买'
+  },
+  {
+    uri1: 'table/list_fifteen.jpg', description1: 'Moreover原创设计耐高温水杯玻璃杯饮料杯酒杯早餐杯牛奶杯简约', price1: '￥22', soldNumber1: '66人已购买',
+    uri2: 'table/list_sixteen.jpg', description2: '乐尚多功能碎菜器 家用手动蔬菜绞碎器 蒜肉搅碎机绞肉机饺子馅机', price2: '￥45', soldNumber2: '23人已购买'
+  },
+  {
+    uri1: 'table/list_seventeen.jpg', description1: '满天星云南干花束雏菊小向日葵太阳花家居装饰插花送朋友满包邮', price1: '￥21.5', soldNumber1: '30人已购买',
+    uri2: 'table/list_eighteen.jpg', description2: '厨房创意竹木陶瓷调味罐三件套胡椒盐罐味精瓶调料盒套装调味瓶罐', price2: '￥16', soldNumber2: '23人已购买'
+  },
+  {
+    uri1: 'table/list_ninteen.jpg', description1: '梵辰组装现代简约复古做旧靠背实木扶手酒店餐厅餐椅休闲网红椅子', price1: '￥229', soldNumber1: '382人已购买',
+    uri2: 'table/list_twenty.png', description2: '烘焙工具 软瓷裱花枪  家用奶油挤花器 蛋糕裱花笔diy套装', price2: '￥24.8', soldNumber2: '23人已购买'
+  },
+  {
+    uri1: 'table/list_twentyone.jpg', description1: '汇安 实木床双人1.5m1.8米北欧日式经济型木床现代简约主卧家具', price1: '￥1,288', soldNumber1: '0人已购买',
+    uri2: 'table/list_twentytwo.jpg', description2: '旅侣 天然植物干花永生花黄金球金槌花花束搭配家居装饰摆拍道具', price2: '￥30.9', soldNumber2: '100人已购买'
+  },
+  {
+    uri1: 'table/list_twentythree.jpg', description1: '北欧风格ins文艺范工作室店铺墙面铁丝网格照片装饰墙挂件收纳', price1: '￥88', soldNumber1: '15人已购买',
+    uri2: 'table/list_twentyfour.jpg', description2: '北欧餐椅现代简约家用实木靠背曲木椅奶茶店设计创意餐厅椅子ins', price2: '￥315', soldNumber2: '23人已购买'
+  },
+  {
+    uri1: 'table/list_twentyfive.jpg', description1: '大号裱花嘴套装 不锈钢9头裱花咀超大八齿圆孔大玫瑰大寿桃大10齿', price1: '￥25', soldNumber1: '116人已购买',
+    uri2: 'table/list_twentysix.jpg', description2: '【Home deco】【现货】日本进口冰箱保鲜盒食品密封盒带盖收纳盒', price2: '￥18.5', soldNumber2: '67人已购买'
+  },
+]
+
+const resourcePath = 'resources/rawfile/'
+
+class ProductItem {
+  public uri1: string
+  public description1: string
+  public price1: string
+  public soldNumber1: string
+  public uri2: string
+  public description2: string
+  public price2: string
+  public soldNumber2: string
+}
+
+@Entry
+@Component
+struct MainPage {
+  build() {
+    Column() {
+      List() {
+        ListItem() {
+          TopList()
+        }
+        ListItem() {
+          Banner()
+        }
+        ListItem() {
+          SelectItemList()
+        }
+        ListItem() {
+          SpecialItemList()
+        }
+        ListItem() {
+          Row() {
+            Image(resourcePath + 'double_twelve.gif')
+              .width(327).height(87)
+              .objectFit(ImageFit.Fill)
+          }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
+        }
+        ForEach(
+          ProductItems,
+          (item) => {
+            ListItem() {
+              ProductListItem({item: item})
+            }
+          },
+          item => item.uri1)
+        ForEach(
+          ProductItems,
+          (item) => {
+            ListItem() {
+              ProductListItem({item: item})
+            }
+          },
+          item => item.uri1)
+        ForEach(
+          ProductItems,
+          (item) => {
+            ListItem() {
+              ProductListItem({item: item})
+            }
+          },
+          item => item.uri1)
+      }
+    }.alignItems(HorizontalAlign.Center)
+  }
+}
+
+@Component
+struct TopList {
+  private topList: string[] = ['首页','生鲜','食品','女装','鞋靴','饰品','百货','母婴','箱包','男装','内衣','手机','美妆',
+      '家装','运动','电器','洗护','数码','车品','企业','保健']
+  build() {
+    List() {
+      ForEach(
+        this.topList,
+        (item) => {
+          ListItem() {
+            Text(item)
+              .fontSize(14)
+              .width(39)
+              .textAlign(TextAlign.Center)
+          }
+        },
+        item => item)
+    }.height(34)
+    .listDirection(ListDirection.Horizontal)
+  }
+}
+
+@Component
+struct Banner {
+  private bannerList: string[] = ['swiper/swiper_one.jpg','swiper/swiper_two.jpg', 'swiper/swiper_three.jpg',
+      'swiper/swiper_four.jpg','swiper/swiper_five.jpg']
+  build() {
+    Row() {
+      Swiper() {
+        ForEach(
+          this.bannerList,
+          (item) => { Image(resourcePath + item) },
+          item => item)
+      }.width(288).height(96)
+      .autoPlay(true)
+    }.alignItems(VerticalAlign.Center)
+  }
+}
+
+@Component
+struct SelectItemList {
+  build() {
+    List() {
+      ForEach(
+        SelectItems,
+        (item) => {
+          ListItem() {
+            Column() {
+              Image(resourcePath + item.uri1)
+                .width(48).height(44)
+              Text(item.title1)
+                .fontSize(12)
+              Image(resourcePath + item.uri2)
+                .width(48).height(44)
+              Text(item.title2)
+                .fontSize(12)
+            }.width(68).height(130)
+            .alignItems(HorizontalAlign.Center)
+          }
+        },
+        item => item.title1)
+      }.height(144).padding(8)
+      .listDirection(ListDirection.Horizontal)
+  }
+}
+
+@Component
+struct SpecialItemList {
+  private SpecialItems: Object[] = [
+    {uri1: 'special/attention_doubletwelve.png', uri2:'special/attention_double_one.png', uri3: 'special/attention_double_two.jpg'},
+    {uri1: 'special/attention_best.png', uri2:'special/attention_best_one.png', uri3: 'special/attention_best_two.jpg'},
+    {uri1: 'special/attention_live.png', uri2:'special/attention_live_one.png', uri3: 'special/attention_live_two.jpg'},
+    {uri1: 'special/attention_video.png', uri2:'special/attention_video_one.png', uri3: 'special/attention_video_two.png'},
+  ]
+
+  build() {
+    Column() {
+      Grid() {
+        ForEach(
+          this.SpecialItems,
+          (item) => {
+            GridItem() {
+              Column() {
+                Image(resourcePath + item.uri1)
+                  .width(154).height(22)
+                  .objectFit(ImageFit.Fill)
+                Row() {
+                  Image(resourcePath + item.uri2)
+                    .width(72).height(87)
+                    .objectFit(ImageFit.Fill)
+                  Image(resourcePath + item.uri3)
+                    .width(72).height(87)
+                    .objectFit(ImageFit.Fill)
+                }.justifyContent(FlexAlign.SpaceAround)
+              }.alignItems(HorizontalAlign.Center)
+            }
+          },
+          item => item.uri1)
+      }.width(360).height(240)
+      .columnsTemplate('1fr, 1fr').rowsTemplate('1fr, 1fr')
+    }.width(360)
+      .alignItems(HorizontalAlign.Center)
+  }
+}
+
+@Component
+struct ProductListItem {
+  private item: ProductItem
+
+  build() {
+    Row() {
+      Product({uri: this.item.uri1, description: this.item.description1, price: this.item.price1, soldNumber: this.item.soldNumber1})
+      Product({uri: this.item.uri2, description: this.item.description2, price: this.item.price2, soldNumber: this.item.soldNumber2})
+    }
+  }
+}
+
+@Component
+struct Product {
+  private uri: string
+  private description: string
+  private price: string
+  private soldNumber: string
+  build() {
+    Column() {
+      Image(resourcePath + this.uri)
+        .width(144).height(144)
+        .borderRadius(15)
+      Text(this.description)
+        .fontSize(15).height(63)
+      Row() {
+        Text(this.price)
+          .color(0xffff4500)
+          .fontSize(14).width(58)
+          .textAlign(TextAlign.Start)
+        Text(this.soldNumber)
+          .color(0xff808080)
+          .fontSize(11)
+      }.width(144).height(20)
+      .alignItems(VerticalAlign.Center)
+    }.width(168).height(245)
+    .alignItems(HorizontalAlign.Center)
+  }
+}

compiler/main.js

@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * 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.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { readFile } = require('./lib/utils');
+const { WORKERS_DIR } = require('./lib/pre_define');
+
+const {
+  configure,
+  getLogger
+} = require('log4js');
+
+configure({
+  appenders: { 'ETS': {type: 'stderr', layout: {type: 'messagePassThrough'}}},
+  categories: {'default': {appenders: ['ETS'], level: 'info'}}
+});
+const logger = getLogger('ETS');
+
+const staticPreviewPage = process.env.aceStaticPreview;
+const projectConfig = {};
+const resources = {
+  app: {},
+  sys: {}
+};
+
+function initProjectConfig(projectConfig) {
+  projectConfig.entryObj = {};
+  projectConfig.projectPath = projectConfig.projectPath || process.env.aceModuleRoot ||
+    path.join(process.cwd(), 'sample');
+  projectConfig.buildPath = projectConfig.buildPath || process.env.aceModuleBuild ||
+    path.resolve(projectConfig.projectPath, 'build');
+  projectConfig.manifestFilePath = projectConfig.manifestFilePath || process.env.aceManifestPath ||
+    path.join(projectConfig.projectPath, 'manifest.json');
+}
+
+function loadEntryObj(projectConfig) {
+  initProjectConfig(projectConfig);
+  const appEtsPath = path.join(projectConfig.projectPath, 'app.ets');
+  let manifest = {};
+  try {
+    const jsonString = fs.readFileSync(projectConfig.manifestFilePath).toString();
+    manifest = JSON.parse(jsonString);
+  } catch (error) {
+    throw Error('\u001b[31m ERROR: the manifest file is lost or format is invalid. \u001b[39m').message;
+  }
+
+  if (!fs.existsSync(appEtsPath)) {
+    throw Error('\u001b[31m ERROR: missing app.ets. \u001b[39m').message;
+  }
+  projectConfig.entryObj['./app'] = projectConfig.projectPath + '/app.ets?entry';
+
+  if(staticPreviewPage) {
+    projectConfig.entryObj['./' + staticPreviewPage] = projectConfig.projectPath + path.sep +
+      staticPreviewPage + '.ets?entry';
+  } else {
+    if (manifest.pages) {
+      const pages = manifest.pages;
+      pages.forEach((element) => {
+        const fileName = projectConfig.projectPath + path.sep + element + '.ets';
+        if (fs.existsSync(fileName)) {
+          projectConfig.entryObj['./' + element] = fileName + '?entry';
+        } else {
+          throw Error(`\u001b[31m ERROR: page '${fileName}' does not exist. \u001b[39m`).message;
+        }
+      });
+    } else {
+      throw Error('\u001b[31m ERROR: missing pages attribute in manifest.json. \u001b[39m').message;
+    }
+  }
+}
+
+function loadWorker(projectConfig) {
+  const workerPath = path.resolve(projectConfig.projectPath, WORKERS_DIR);
+  if (fs.existsSync(workerPath)) {
+    const workerFiles = [];
+    readFile(workerPath, workerFiles);
+    workerFiles.forEach((item) => {
+      if (/\.(ts|js)$/.test(item)) {
+        const relativePath = path.relative(workerPath, item).replace(/\.(ts|js)$/, '');
+        projectConfig.entryObj[`./${WORKERS_DIR}/` + relativePath] = item;
+      }
+    })
+  }
+}
+
+;(function initSystemResource() {
+  const sysResourcePath = path.resolve('./sysResource.js');
+  if (fs.existsSync(sysResourcePath)) {
+    resources.sys = require(sysResourcePath).sys;
+  }
+})()
+
+function readAppResource(resources, filePath) {
+  if (fs.existsSync(filePath)) {
+    const appResource = fs.readFileSync(filePath, "utf-8");
+    const resourceArr = appResource.split(/\n/);
+    let resourceMap = new Map();
+    for (let i = 0; i < resourceArr.length; i++) {
+      if (!resourceArr[i].length) {
+        continue;
+      }
+      const resourceData = resourceArr[i].split(/\s/);
+      if (resourceData.length === 3 && Number(resourceData[2]) !== NaN ) {
+        if (resourceMap.get(resourceData[0])) {
+          const resourceKeys = resourceMap.get(resourceData[0]);
+          if (!resourceKeys[resourceData[1]] || resourceKeys[resourceData[1]] !== Number(resourceData[2])) {
+            resourceKeys[resourceData[1]] = Number(resourceData[2]);
+          }
+        } else {
+          let obj = {};
+          obj[resourceData[1]] = Number(resourceData[2]);
+          resourceMap.set(resourceData[0], obj);
+        }
+      } else {
+        logger.warn(`\u001b[31m ETS:WARN The format of file '${filePath}' is incorrect. \u001b[39m`);
+        break;
+      }
+    }
+    for (let [key, value] of resourceMap) {
+      resources.app[key] = value;
+    }
+  }
+}
+
+exports.projectConfig = projectConfig;
+exports.loadEntryObj = loadEntryObj;
+exports.readAppResource = readAppResource;
+exports.resources = resources;
+exports.loadWorker = loadWorker;

compiler/npm-install.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * 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.
+ */
+
+'use strict';
+const path = require('path');
+const fs = require('fs');
+const exec = require('child_process').exec;
+
+if (!fs.existsSync(path.resolve(__dirname, 'bin', 'ark'))) {
+  return;
+}
+
+let isWin = !1;
+let isMac = !1;
+
+if (fs.existsSync(path.resolve(__dirname, 'bin', 'ark/build-win'))) {
+  isWin = !0;
+} else if (fs.existsSync(path.resolve(__dirname, 'bin', 'ark/build-mac'))) {
+  isMac = !0;
+} else if (!fs.existsSync(path.resolve(__dirname, 'bin', 'ark/build'))) {
+  console.error('[31m', 'find build fail', '[39m');
+  return;
+}
+
+let cwd;
+if (isWin) {
+  cwd = path.join(__dirname, 'bin', 'ark', 'build-win');
+} else if (isMac) {
+  cwd = path.join(__dirname, 'bin', 'ark', 'build-mac');
+} else {
+  cwd = path.join(__dirname, 'bin', 'ark', 'build');
+}
+
+exec('npm install', { cwd: cwd }, function(err, stdout, stderr) {
+  console.log('[31m', stdout, '[39m');
+  if (err !== null) {
+    console.error('[31m', `npm install filed: ${err}`, '[39m');
+  }
+});

compiler/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "compilier",
+  "version": "0.0.1",
+  "description": "Transpile ace2.0 ui-syntax to support UI control render, Component and State management.",
+  "private": true,
+  "keywords": [
+    "ace",
+    "loader",
+    "webpack"
+  ],
+  "scripts": {
+    "lint": "eslint --fix ./src --ext .ts",
+    "build": "npm run generateDeclarations && ./node_modules/.bin/babel ./src --out-dir lib --extensions .ts",
+    "create": "node ./lib/create.js --env projectName",
+    "compile": "webpack --config webpack.config.js --env buildMode=debug projectName",
+    "test": "npm run build && mocha -r ts-node/register test/test.ts",
+    "generateDeclarations": "node ./build_declarations_file.js",
+    "postinstall": "node npm-install.js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/runtime": "^7.0.0",
+    "@typescript-eslint/parser": "^4.11.0",
+    "chai": "^4.2.0",
+    "eslint": "^7.16.0",
+    "mocha": "^8.2.1",
+    "ts-node": "^9.1.1",
+    "uglify-es": "^3.3.10"
+  },
+  "dependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^8.1.0",
+    "deccjsunit": "latest",
+    "log4js": "^6.3.0",
+    "ts-loader": "^8.0.12",
+    "typescript": "^4.1.3",
+    "webpack": "^5.48.0",
+    "webpack-cli": "^4.2.0"
+  }
+}

compiler/sample/app.ets

@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info('Application onCreate')
+    },
+    onDestroy() {
+        console.info('Application onDestroy')
+    },
+}

compiler/sample/manifest.json

@@ -0,0 +1,35 @@
+{
+  "appID": "com.huawei.ace.helloworld",
+  "appName": "HelloAce",
+  "versionName": "1.0.0",
+  "versionCode": 1,
+  "minPlatformVersion": "1.0.1",
+  "pages": [
+    "pages/todo",
+    "pages/index",
+    "pages/home",
+    "pages/home_preview",
+
+    "pages/testcases/componentGridTest",
+    "pages/testcases/componentListTest",
+    "pages/testcases/image",
+    "pages/testcases/onclicktest",
+    "pages/testcases/simpleText",
+    "pages/testcases/stacktestsuite",
+
+    "pages/testcases/forEachComplexModel",
+    "pages/testcases/forEachSimpleModel",
+    "pages/testcases/linkArrayModel",
+    "pages/testcases/linkPropCombo",
+    "pages/testcases/linkSimpleModel",
+    "pages/testcases/propSimpleModel",
+    "pages/testcases/stateArrayReverse",
+    "pages/testcases/stateArrayReverseCustomView",
+    "pages/testcases/stateComplexType",
+    "pages/testcases/stateStateBindingProp"
+  ],
+  "window": {
+    "designWidth": 750,
+    "autoDesignWidth": false
+  }
+}

compiler/sample/pages/home.ets

@@ -0,0 +1,30 @@
+@Entry
+@Component
+struct HomeComponent {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.value1)
+        Text(this.value2)
+        Text(this.value3)
+      }
+      Row() {
+        Button() {
+          Text(this.value1)
+            .fontSize(20)
+        }
+        .width(100)
+        .height(20)
+        Text(this.value2)
+          .fontSize(100)
+        Text(this.value3)
+      }
+      .width(20)
+    }
+    .height(500)
+  }
+}

compiler/sample/pages/home_preview.ets

@@ -0,0 +1,40 @@
+@Entry
+@Component
+struct HomePreviewComponent {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.value1)
+        Text(this.value2)
+        Text(this.value3)
+      }
+      Row() {
+        Button() {
+          Text(this.value1)
+            .fontSize(20)
+        }
+        .width(100)
+        .height(20)
+        Text(this.value2)
+          .fontSize(100)
+        Text(this.value3)
+      }
+      .width(20)
+    }
+    .height(500)
+  }
+}
+
+@Preview
+@Component
+struct HomePreviewComponent_Preview {
+  build() {
+    Column() {
+      HomePreviewComponent()
+    }
+  }
+}

compiler/sample/pages/index.ets

@@ -0,0 +1,32 @@
+@Component
+struct Banner {
+  private value1: string = "hello world 4"
+  private value2: string = "hello world 5"
+  private value3: string = "hello world 6"
+
+  build() {
+    Column() {
+      Text(this.value1)
+      Text(this.value2)
+      Text(this.value3)
+    }
+  }
+}
+
+@Component
+@Entry
+struct MyComponent {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+  @State private idx:number = 0
+
+  build() {
+    Column() {
+      Text(this.value1)
+      Text(this.value2)
+      Text(this.value3)
+      Banner()
+    }
+  }
+}

compiler/sample/pages/testcases/component-01.ets

@@ -0,0 +1,19 @@
+@Component
+@Entry
+struct MyComponent1 {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+
+  constructor() {
+      console.info('into constructor');
+  }
+
+  build() {
+    new Column() {
+      new Text(this.value1)
+      Text(this.value2)
+      Text(this.value3)
+    }
+  }
+}

compiler/sample/pages/testcases/componentGridTest.ets

@@ -0,0 +1,55 @@
+@Entry
+@Component
+struct GridRootView {
+    changeColor:boolean = true;
+    dataArrayA:string[] = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    @State itemColor:number = 0xffff00;
+
+    build(){
+        Column(){
+            Text('--------------- Grid : foreach test --------------->')
+            Grid(){
+                ForEach(
+                    this.dataArrayA, //Data array
+                    (item) => {
+                        GridItem(){
+                            Text(item)
+                        }.width(100).height(50).backgroundColor(0x00ff00)
+                    },
+                    item => item
+                )
+            }
+            .height(100).width(650)
+            .columnsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr").columnsGap(50) //Grid
+            Text('--------------- Grid : item start-end test --------------->')
+            Grid(){
+                GridItem(){
+                    Text('1').fontSize(11)
+                }
+                .height(100).width(150).backgroundColor(0x00ff00).borderWidth(2.0)
+                GridItem(){
+                    Text('2').fontSize(22)
+                }
+                .height(100).width(150).backgroundColor(0x00ffff).borderWidth(2.0).borderStyle(2)
+                GridItem(){
+                    Text('3').fontSize(33)
+                }
+                .height(100).width(150).backgroundColor(0x0000ff).borderWidth(2.0).borderColor(0xff46f7).borderStyle(1)
+                GridItem(){
+                    Text('click me').fontSize(24)
+                }
+                .height(100).width(150).backgroundColor(this.itemColor).borderWidth(2.0).borderColor(0xff46f7).borderStyle(3)
+                .onClick(() => {
+                    if (this.changeColor == true) {
+                        this.itemColor = 0x0000ff;
+                    } else {
+                        this.itemColor = 0xffff00;
+                    }
+                    this.changeColor = !this.changeColor;
+                })
+            }
+            .width(350).height(250)
+            .columnsTemplate("1fr 1fr 1fr").rowsTemplate("1fr 1fr").columnsGap(50).rowsGap(50)
+        }
+    }
+}

compiler/sample/pages/testcases/componentListTest.ets

@@ -0,0 +1,48 @@
+@Entry
+@Component
+struct ListRootView {
+
+    dataArrayList:string[] = [
+        "item0", "item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9",
+        "item10", "item11", "item12", "item13", "item14", "item15", "item16", "item17", "item18", "item19",
+        "item20", "item21", "item22", "item23", "item24", "item25", "item26", "item27", "item28", "item29",
+    ];
+
+    @State listidx:number = 50;
+
+    build(){
+        Column(){
+            Text('--------------- List :foreach test --------------->')
+            Text("index:" + this.listidx)
+            List(){
+                ForEach(
+                    this.dataArrayList,
+                    (item) => {
+                        ListItem(){
+                            Text(item)
+                        }
+                        .backgroundColor(0x6495ED).height(50)
+                        .onClick(() => {
+                            this.listidx ++;
+                        })
+                    },
+                    (item) => item
+                )
+            }
+            .height(600).width(500)
+            .divider({ strokeWidth: 2, color:"#FF00ff"}).scrollBar(BarState.Off)
+            .onReachStart(() => {
+                console.info("list-demo reachStart ");
+            })
+            .onReachEnd(() => {
+                console.info("list-demo reachEnd ");
+            })
+            .onScrollStop(() => {
+                console.info("list-demo scrollStop ");
+            })
+            .onScroll((offset: number, state: ScrollState) => {
+                console.info('list-demo scroll:offset:' + offset + ",State:" + state)
+            })
+        }
+    }
+}

compiler/sample/pages/testcases/constructor-01.ets

@@ -0,0 +1,20 @@
+class DataModel{
+  private myData1: number = 0
+}
+
+@Entry
+@Component
+struct MyStateComponent {
+  @State myState1: any = { count: 0 }
+  @State myState2: number = 0
+  @State myState3: boolean = false
+  @State myState4: string = 'Home'
+  @State myState5: DataModel = new DataModel()
+
+  private myVar : number = 0
+  private myVar2 : number
+
+  build() {
+
+  }
+}

compiler/sample/pages/testcases/constructor-02.ets

@@ -0,0 +1,15 @@
+@Entry
+@Component
+struct MyLinkComponent {
+  @Link myLink1?: any
+  @Link myLink2?: number
+  @Link myLink3?: boolean
+  @Link myLink4?: string
+
+  private myVar: number = 0
+  private myVar2: number
+
+  build() {
+
+  }
+}

compiler/sample/pages/testcases/constructor-03.ets

@@ -0,0 +1,15 @@
+@Entry
+@Component
+struct MyPropComponent {
+  @Prop myProp1?: any
+  @Prop myProp2?: number
+  @Prop myProp3?: boolean
+  @Prop myProp4?: string
+
+  private myVar: number = 0
+  private myVar2: number
+
+  build() {
+
+  }
+}

compiler/sample/pages/testcases/expected/component-01-expected.js

@@ -0,0 +1,11 @@
+class MyComponent extends View {
+    constructor() {
+        super();
+        this.value1 = value1;
+        this.value2 = value2;
+        this.value3 = value3;
+        console.info('into constructor');
+    }
+    render() { return new Column(new Text(this.value1), new Text(this.value2), new Text(this.value3)); }
+}
+loadDocument(new MyComponent());

compiler/sample/pages/testcases/expected/constructor-01-expected.js

@@ -0,0 +1,18 @@
+class MyStateComponent extends View {
+    constructor(inputParams) {
+        super();
+        this.myState1 = { count: 0 };
+        this.myState2 = 0;
+        this.myState3 = false;
+        this.myState4 = 'Home';
+        this.myVar = 0;
+        Object.assign(this, inputParams);
+        this.createState("myState1");
+        this.createState("myState2");
+        this.createState("myState3");
+        this.createState("myState4");
+    }
+    render() {
+    }
+}
+loadDocument(new MyStateComponent());