houhaoyu@huawei.com

update ets-loader

Signed-off-by: houhaoyu <houhaoyu@huawei.com>
Change-Id: I1ec5569e82ab5d841a90ee57b0d8f5de88eca911

BUILD.gn

@@ -134,21 +134,21 @@ action("build_ets_sysResource") {
   ]
 }
 
+ets_loader_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,
+]
+
 ohos_copy("ets_loader") {
   deps = [ ":build_ets_loader_library" ]
-  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,
-  ]
-  if (!is_standard_system) {
-    deps += [ ":build_ets_sysResource" ]
-    sources += [ ets_sysResource ]
-  }
+  sources = ets_loader_sources
+  deps += [ ":build_ets_sysResource" ]
+  sources += [ ets_sysResource ]
 
   outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
   module_source_dir = target_out_dir + "/$target_name"
@@ -192,3 +192,69 @@ ohos_copy("ets_loader_declaration") {
   module_source_dir = target_out_dir + "/$target_name"
   module_install_name = ""
 }
+
+ohos_copy("ets_loader_ark") {
+  deps = [ ":build_ets_loader_library" ]
+  sources = ets_loader_sources
+  deps += [ ":build_ets_sysResource" ]
+  sources += [ ets_sysResource ]
+  outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
+}
+
+ohos_copy("ets_loader_ark_lib") {
+  deps = [
+    ":build_ets_loader_library",
+    ":ets_loader_ark",
+  ]
+  sources = [ ets_loader_lib_dir ]
+  outputs = [ target_out_dir + "/ets_loader_ark/lib" ]
+}
+
+ohos_copy("ets_loader_ark_declaration") {
+  deps = [
+    ":build_ets_loader_library",
+    ":ets_loader_ark",
+  ]
+  sources = [ ets_loader_declarations_dir ]
+  outputs = [ target_out_dir + "/ets_loader_ark/declarations" ]
+}
+
+ohos_copy("ets_loader_ark_components") {
+  deps = [
+    ":build_ets_loader_library",
+    ":ets_loader_ark",
+  ]
+  sources = [ "compiler/components" ]
+  outputs = [ target_out_dir + "/ets_loader_ark/components" ]
+}
+
+ohos_copy("ets_loader_ark_server") {
+  deps = [
+    ":build_ets_loader_library",
+    ":ets_loader_ark",
+  ]
+  sources = [ "compiler/server" ]
+  outputs = [ target_out_dir + "/ets_loader_ark/server" ]
+}
+
+ohos_copy("ets_loader_ark_syntax") {
+  deps = [
+    ":build_ets_loader_library",
+    ":ets_loader_ark",
+  ]
+  sources = [ ets_loader_syntax_dir ]
+  outputs = [ target_out_dir + "/ets_loader_ark/syntax_parser/dist" ]
+}
+
+ohos_copy("ets_loader_node_modules") {
+  deps = [
+    ":ets_loader_ark",
+    ":ets_loader_ark_components",
+    ":ets_loader_ark_declaration",
+    ":ets_loader_ark_lib",
+    ":ets_loader_ark_server",
+    ":ets_loader_ark_syntax",
+  ]
+  sources = [ "//developtools/ace-ets2bundle/compiler/node_modules" ]
+  outputs = [ target_out_dir + "/ets_loader_ark/node_modules" ]
+}

compiler/build_declarations_file.js

@@ -49,6 +49,7 @@ function generateTargetFile(filePath, output) {
     fs.writeFile(fileName, newContent, err => {
       if (err) {
         console.error(err);
+        return;
       }
     });
   });

compiler/components/sheet.json

@@ -1,5 +1,5 @@
 {
-  "name": "sheet",
+  "name": "Sheet",
   "children": ["Section"],
   "attrs": []
 }

compiler/main.js

@@ -197,4 +197,4 @@ exports.loadEntryObj = loadEntryObj;
 exports.readAppResource = readAppResource;
 exports.resources = resources;
 exports.loadWorker = loadWorker;
-exports.abilityConfig = abilityConfig;
+exports.abilityConfig = abilityConfig;

compiler/package.json

@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "lint": "eslint --fix ./src --ext .ts",
-    "build": "npm run generateSyntaxParser && npm run generateDeclarations && ./node_modules/.bin/babel ./src --out-dir lib --extensions .ts && node uglify-source.js lib",
+    "build": "npm run generateSyntaxParser && 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 mocha-context/register test/test.js",
@@ -31,7 +31,7 @@
     "mocha": "^8.2.1",
     "mocha-context": "^0.1.5",
     "ts-node": "^9.1.1",
-    "uglify-js": "^3.13.0",
+    "uglify-es": "^3.3.10",
     "pegjs": "^0.10.0"
   },
   "dependencies": {

compiler/sample/pages/home.ets

@@ -42,4 +42,4 @@ struct HomeComponent {
     }
     .height(500)
   }
-}
+}

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

@@ -31,4 +31,4 @@ struct MyComponent1 {
       Text(this.value3)
     }
   }
-}
+}

compiler/sample/pages/testcases/componentListTest.ets

@@ -60,4 +60,4 @@ struct ListRootView {
             })
         }
     }
-}
+}

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

@@ -32,4 +32,4 @@ struct MyStateComponent {
   build() {
 
   }
-}
+}

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

@@ -27,4 +27,4 @@ struct MyLinkComponent {
   build() {
 
   }
-}
+}

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

@@ -27,4 +27,4 @@ struct MyPropComponent {
   build() {
 
   }
-}
+}

compiler/sample/pages/testcases/forEachComplexModel.ets

@@ -59,4 +59,4 @@ struct CalendarDemo {
                 (item: Month) => (item.year * 12 + item.month).toString()) // outer ForEach
         }
     }
-}
+}

compiler/sample/pages/testcases/image.ets

@@ -30,4 +30,4 @@ struct UserView1 {
           })
         }
     }
-}
+}

compiler/sample/pages/testcases/import-api-01.ets

@@ -33,4 +33,4 @@ struct HomeComponent {
     }
     .height(500)
   }
-}
+}

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

@@ -48,4 +48,4 @@ struct LinkTest {
       })
     }
   }
-}
+}

compiler/sample/pages/testcases/linkPropCombo.ets

@@ -45,4 +45,4 @@ struct ChildB {
         }
         .onClick(() => this.counterRef += 1)
     }
-}
+}

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

@@ -27,4 +27,4 @@ struct MyComponent3 {
       Text(this.value3)
     }
   }
-}
+}

compiler/sample/pages/testcases/new-0101.ets

@@ -27,4 +27,4 @@ struct MyComponent3 {
       Text(this.value3)
     }
   }
-}
+}

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

@@ -27,4 +27,4 @@ struct MyComponent4 {
       Text(this.value3)
     }
   }
-}
+}

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

@@ -35,4 +35,4 @@ struct MyComponent5 {
       Banner()
     }
   }
-}
+}

compiler/sample/pages/testcases/new-04.ets

@@ -35,4 +35,4 @@ struct MyComponent6 {
       new Banner()
     }
   }
-}
+}

compiler/sample/pages/testcases/showcaseCovid19.ets

@@ -21,6 +21,7 @@
  *
  * ACE @ Web Helsinki
  *
+
  */
 
 const enum FlexAlign {

compiler/sample/pages/testcases/simpleText.ets

@@ -80,4 +80,4 @@ struct UserView {
             }
         }
     }
-}
+}

compiler/sample/pages/testcases/stacktestsuite.ets

@@ -145,4 +145,4 @@ struct TestView {
         }
         .alignItems(HorizontalAlign.Center)
     }
-}
+}

compiler/sample/pages/testcases/stateStateBindingProp.ets

@@ -103,4 +103,4 @@ struct ShufflingContainer {
             }
         }
     }
-}
+}

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

@@ -18,4 +18,4 @@
 struct MyComponent7 {
     build() {
     }
-}
+}

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

@@ -16,4 +16,4 @@
 struct MyComponent8 {
     build() {
     }
-}
+}

compiler/sample/pages/todo.ets

@@ -24,7 +24,6 @@
  * https://rnd-gitlab-eu-c.huawei.com/zidanehbs/ace/ace/-/blob/fin-hmf-dev-ace-diff-clean/samples/common/res/hi_topapp/assets/js/default/acediff/todoListForEach.js
  * This is the ouput the eDSL transpiler should generate.
  */
-
 let tasks: Array<any> = [
   { label: "Wash the car" },
   { label: "Buy some milk" },

compiler/src/compile_info.ts

@@ -50,7 +50,7 @@ configure({
 });
 export const logger = getLogger('ETS');
 
-const props: string[] = [];
+export const props: string[] = [];
 const GLOBAL_COMMON_MODULE_CACHE: string = `
 globalThis["__common_module_cache__"] = globalThis["__common_module_cache__"] || {};
 globalThis["webpackChunkcompilier"].forEach((item)=> {
@@ -252,7 +252,7 @@ export class ResultStates {
     }
   }
   private validateError(message: string): boolean {
-    const propInfoReg: RegExp = /Cannot find name\s*'(\$?[_a-zA-Z0-9]+)'/;
+    const propInfoReg: RegExp = /Cannot find name\s*'(\$?\$?[_a-zA-Z0-9]+)'/;
     const componentNameReg: RegExp = /'typeof\s*(\$?[_a-zA-Z0-9]+)' is not callable/;
     const stateInfoReg: RegExp = /Property\s*'(\$[_a-zA-Z0-9]+)' does not exist on type/;
     const extendInfoReg: RegExp =

compiler/src/gen_abc_plugin.ts

@@ -20,33 +20,34 @@ import * as path from 'path';
 import Compiler from 'webpack/lib/Compiler';
 import { logger } from './compile_info';
 
-const arkDir: string = path.join(__dirname, '..', 'bin', 'ark');
-
 const firstFileEXT: string = '_.js';
 let output: string;
 let webpackPath: string;
 let isWin: boolean = false;
 let isMac: boolean = false;
 let isDebug: boolean = false;
+let arkDir: string;
+let nodeJs: string;
 
 const red: string = '\u001b[31m';
 const blue: string = '\u001b[34m';
 const reset: string = '\u001b[39m';
 
 export class GenAbcPlugin {
-  constructor(output_, webpackPath_, isDebug_) {
+  constructor(output_, arkDir_, nodeJs_, isDebug_) {
     output = output_;
-    webpackPath = webpackPath_;
+    arkDir = arkDir_;
+    nodeJs = nodeJs_;
     isDebug = isDebug_;
   }
   apply(compiler: Compiler) {
-    if (fs.existsSync(path.resolve(webpackPath, 'ark/build-win'))) {
+    if (fs.existsSync(path.resolve(arkDir, 'build-win'))) {
       isWin = true;
     } else {
-      if (fs.existsSync(path.resolve(webpackPath, 'ark/build-mac'))) {
+      if (fs.existsSync(path.resolve(arkDir, 'build-mac'))) {
         isMac = true;
       } else {
-        if (!fs.existsSync(path.resolve(webpackPath, 'ark/build'))) {
+        if (!fs.existsSync(path.resolve(arkDir, 'build'))) {
           logger.error(red, 'ETS:ERROR find build fail', reset);
           return;
         }
@@ -56,7 +57,7 @@ export class GenAbcPlugin {
     compiler.hooks.emit.tap('GenAbcPlugin', (compilation) => {
       Object.keys(compilation.assets).forEach(key => {
         // choice *.js
-        if (output && webpackPath && path.extname(key) === '.js') {
+        if (output && path.extname(key) === '.js') {
           const newContent: string = compilation.assets[key].source();
           const keyPath: string = key.replace(/\.js$/, firstFileEXT);
           writeFileSync(newContent, path.resolve(output, keyPath), key);
@@ -100,7 +101,7 @@ function js2abcFirst(inputPath: string): void {
     js2abc = path.join(arkDir, 'build-mac', 'src', 'index.js');
   }
 
-  const cmd: string = `node --expose-gc "${js2abc}" "${inputPath}" ${param}`;
+  const cmd: string = `${nodeJs} --expose-gc "${js2abc}" "${inputPath}" ${param}`;
 
   try {
     process.execSync(cmd);

compiler/src/pre_define.ts

@@ -184,3 +184,10 @@ export const BUILD_SHARE_PATH: string = '../share';
 export const THIS: string = 'this';
 export const STYLES: string = 'Styles';
 export const VISUAL_STATE: string = 'visualState';
+export const VIEW_STACK_PROCESSOR: string = 'ViewStackProcessor';
+
+export const BIND_POPUP: string = 'bindPopup';
+export const $$_VALUE: string = 'value';
+export const $$_CHANGE_EVENT: string = 'changeEvent';
+export const $$_THIS: string = '$$this';
+export const $$_NEW_VALUE: string = 'newValue';

compiler/src/process_component_build.ts

@@ -46,7 +46,13 @@ import {
   COMPONENT_DEBUGLINE_FUNCTION,
   ATTRIBUTE_STATESTYLES,
   THIS,
-  VISUAL_STATE
+  VISUAL_STATE,
+  VIEW_STACK_PROCESSOR,
+  BIND_POPUP,
+  $$_VALUE,
+  $$_CHANGE_EVENT,
+  $$_THIS,
+  $$_NEW_VALUE
 } from './pre_define';
 import {
   INNER_COMPONENT_NAMES,
@@ -72,6 +78,7 @@ import {
 } from './utils';
 import { projectConfig } from '../main';
 import { transformLog } from './process_ui_syntax';
+import { props } from './compile_info';
 
 export const appComponentCollection: Set<string> = new Set();
 
@@ -479,6 +486,44 @@ export function bindComponentAttr(node: ts.ExpressionStatement, identifierNode:
   }
 }
 
+function createArrowFunctionFor$$ ($$varExp: ts.Expression): ts.ArrowFunction {
+  return ts.factory.createArrowFunction(
+    undefined, undefined,
+    [ts.factory.createParameterDeclaration(
+      undefined, undefined, undefined,
+      ts.factory.createIdentifier($$_NEW_VALUE),
+      undefined, undefined, undefined
+    )],
+    undefined,
+    ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+    ts.factory.createBlock(
+      [ts.factory.createExpressionStatement(ts.factory.createBinaryExpression(
+        $$varExp,
+        ts.factory.createToken(ts.SyntaxKind.EqualsToken),
+        ts.factory.createIdentifier($$_NEW_VALUE)
+      ))],
+      false
+    )
+  );
+}
+
+function updateArgumentFor$$(argument: any): ts.Expression {
+  if (ts.isElementAccessExpression(argument)) {
+    return ts.factory.updateElementAccessExpression
+      (argument, updateArgumentFor$$(argument.expression), argument.argumentExpression);
+  } else if (ts.isIdentifier(argument)) {
+    props.push(argument.getText());
+    if (argument.getText() === $$_THIS) {
+      return ts.factory.createThis();
+    } else if (argument.getText().match(/^\$\$(.|\n)+/)) {
+      return ts.factory.createIdentifier(argument.getText().replace(/\$\$/, ''));
+    }
+  } else if (ts.isPropertyAccessExpression(argument)) {
+    return ts.factory.updatePropertyAccessExpression
+      (argument, updateArgumentFor$$(argument.expression), argument.name);
+  }
+}
+
 function addComponentAttr(temp: any, node: ts.Identifier, lastStatement: any,
   statements: ts.Statement[], identifierNode: ts.Identifier, log: LogInfo[],
   isStylesAttr): void {
@@ -520,6 +565,15 @@ function addComponentAttr(temp: any, node: ts.Identifier, lastStatement: any,
       GLOBAL_STYLE_FUNCTION.get(propName) || INNER_STYLE_FUNCTION.get(propName);
     bindComponentAttr(styleBlock.statements[0] as ts.ExpressionStatement, identifierNode,
       statements, log, false, true);
+  } else if (propName === BIND_POPUP && temp.arguments.length === 2 &&
+    temp.arguments[0].getText().match(/^\$\$(.|\n)+/)) {
+    const argumentsArr: ts.Expression[] = [];
+    const varExp: ts.Expression = updateArgumentFor$$(temp.arguments[0]);
+    argumentsArr.push(generateObjectFor$$(varExp));
+    argumentsArr.push(temp.arguments[1]);
+    statements.push(ts.factory.createExpressionStatement(
+      createFunction(identifierNode, node, argumentsArr)));
+    lastStatement.kind = true;
   } else {
     if (isStylesAttr && !COMMON_ATTRS.has(propName)) {
       validateStateStyleSyntax(temp, log);
@@ -530,14 +584,30 @@ function addComponentAttr(temp: any, node: ts.Identifier, lastStatement: any,
   }
 }
 
-function createViewStackProcessor(item: any, endViewStack: boolean) {
-  const argument: ts.StringLiteral[] = []
+function generateObjectFor$$(varExp: ts.Expression): ts.ObjectLiteralExpression {
+  return ts.factory.createObjectLiteralExpression(
+    [
+      ts.factory.createPropertyAssignment(
+        ts.factory.createIdentifier($$_VALUE),
+        varExp
+      ),
+      ts.factory.createPropertyAssignment(
+        ts.factory.createIdentifier($$_CHANGE_EVENT),
+        createArrowFunctionFor$$(varExp)
+      )
+    ],
+    false
+  );
+}
+
+function createViewStackProcessor(item: any, endViewStack: boolean): ts.ExpressionStatement {
+  const argument: ts.StringLiteral[] = [];
   if (!endViewStack && item.name) {
     argument.push(ts.factory.createStringLiteral(item.name.getText()));
   }
   return ts.factory.createExpressionStatement(ts.factory.createCallExpression(
     ts.factory.createPropertyAccessExpression(
-      ts.factory.createIdentifier(GLOBAL_CONTEXT),
+      ts.factory.createIdentifier(VIEW_STACK_PROCESSOR),
       ts.factory.createIdentifier(VISUAL_STATE)
     ),
     undefined,
@@ -546,7 +616,7 @@ function createViewStackProcessor(item: any, endViewStack: boolean) {
 }
 
 function traverseStateStylesAttr(temp: any, statements: ts.Statement[],
-  identifierNode: ts.Identifier, log: LogInfo[]) {
+  identifierNode: ts.Identifier, log: LogInfo[]): void {
   temp.arguments[0].properties.reverse().forEach((item: ts.PropertyAssignment) => {
     if (ts.isPropertyAccessExpression(item.initializer) &&
       item.initializer.expression.getText() === THIS &&
@@ -770,7 +840,7 @@ function validateExtendParameterCount(temp: any, identifierNode: ts.Identifier,
   }
 }
 
-export function validateStateStyleSyntax(temp: any, log: LogInfo[]) {
+export function validateStateStyleSyntax(temp: any, log: LogInfo[]): void {
   log.push({
     type: LogType.ERROR,
     message: `.stateStyles doesn't conform standard.`,

compiler/src/validate_ui_syntax.ts

@@ -63,7 +63,7 @@ import {
   hasDecorator
 } from './utils';
 import { projectConfig } from '../main';
-const parser = require('../syntax_parser/dist/syntax_parser.js');
+const parser = require('../syntax_parser/dist/exclude_comment.js');
 
 export interface ComponentCollection {
   entryComponent: string;

compiler/syntax_parser/src/exclude_comment.peg

@@ -0,0 +1,37 @@
+/*
+ * 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 syntax_parser = require('./syntax_parser.js');
+}
+
+start = blocks: block*
+{
+  return syntax_parser.parse(blocks.join(''));
+}
+
+block = comments/notComment
+
+comments = comment:$("/*" (!"*/" .)* "*/") {
+  let num = comment.split("\n").length-1;
+  let result = '';
+  while (num>0) {
+    result += '\n';
+    num -= 1;
+  }
+  return result;
+}
+
+notComment = $((!comments .)+)

compiler/syntax_parser/src/parse_extend.peg

@@ -13,14 +13,15 @@
  * limitations under the License.
  */
 
-start = extendAttributes:extendAttribute+
+start = extendAttributes:whiteSpace extendAttribute+
 {
   return {location: location()};
 }
 
-extendAttribute = whiteSpace '.' whiteSpace attribute item
+extendAttribute = (whiteSpace '.' whiteSpace attribute item)/(comment)
 attribute = attr_head attr_tail
 attr_head = $ [a-zA-Z_$]+
 attr_tail = $ [a-zA-Z0-9_$]*
 item = whiteSpace '(' [^()]* item* [^()]* ')' whiteSpace
+comment = "//" (![\r\n] .)* whiteSpace
 whiteSpace = [ \t\r\n]*

compiler/test/ut/decorator/extend.ts

@@ -82,4 +82,4 @@ class FancyText extends View {
     }
 }
 loadDocument(new FancyText("1", undefined, {}));
-`
+`

compiler/uglify-source.js

@@ -15,7 +15,7 @@
 
 const fs = require('fs')
 const path = require('path')
-const uglifyJS = require('uglify-js')
+const uglifyJS = require('uglify-es')
 
 readCode(process.argv[2])
 

compiler/webpack.config.js

@@ -211,7 +211,16 @@ module.exports = (env, argv) => {
   if (env.isPreview !== "true") {
     loadWorker(projectConfig);
     if (env.compilerType && env.compilerType === 'ark') {
-      config.plugins.push(new GenAbcPlugin(projectConfig.buildPath, path.join(__dirname, 'bin'), env.buildMode === 'debug'));
+      let arkDir = path.join(__dirname, 'bin', 'ark');
+      if (env.arkFrontendDir) {
+        arkDir = env.arkFrontendDir;
+      }
+      let nodeJs = 'node';
+      if (env.nodeJs) {
+        nodeJs = env.nodeJs
+      }
+      config.plugins.push(new GenAbcPlugin(projectConfig.buildPath, arkDir, nodeJs,
+        env.buildMode === 'debug'));
     }
   } else {
     projectConfig.isPreview = true;
@@ -239,4 +248,4 @@ module.exports = (env, argv) => {
     readAppResource(resources, appResourcePath);
   }
   return config;
-}
+}