houhaoyu

update code from wagner

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

.gitignore

@@ -1,7 +1,7 @@
-./vscode
+.vscode/
 compiler/node_modules/
 compiler/lib/
 compiler/declarations/
 compiler/sample/build/
 compiler/component_config.json
-compiler/syntax_parser/dist
+compiler/syntax_parser/dist/

BUILD.gn

@@ -28,6 +28,7 @@ ets_sysResource = get_label_info(":build_ets_sysResource", "target_out_dir") +
                   "/sysResource.js"
 
 action("build_ets_loader_library") {
+  deps = [ ":components", ":server" ]
   script = "build_ets_loader_library.py"
   depfile = "$target_gen_dir/$target_name.d"
   outputs = [
@@ -111,7 +112,11 @@ action("build_ets_loader_library") {
 }
 
 action("build_ets_sysResource") {
-  script = "//foundation/ace/huawei_proprietary/tools/ets-loader/generateSysResource.py"
+  if (is_standard_system) {
+    script = "//developtools/ace-ets2bundle/generateSysResource.py"
+  } else {
+    script = "//foundation/ace/huawei_proprietary/tools/ets-loader/generateSysResource.py"
+  }
   outputs = [ ets_sysResource ]
 
   _id_defined_json =
@@ -137,10 +142,9 @@ ohos_copy("ets_loader") {
     "compiler/webpack.config.js",
     ets_loader_component_config_file,
   ]
-  if (!is_standard_system) {
-    deps += [ ":build_ets_sysResource" ]
-    sources += [ ets_sysResource ]
-  }
+  deps += [ ":build_ets_sysResource" ]
+  sources += [ ets_sysResource ]
+
   outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
   module_source_dir = target_out_dir + "/$target_name"
   module_install_name = ""
@@ -162,6 +166,20 @@ ohos_copy("ets_loader_syntax") {
   module_install_name = ""
 }
 
+ohos_copy("components") {
+  sources = [ "compiler/components" ]
+  outputs = [ target_out_dir + "/$target_name" ]
+  module_source_dir = target_out_dir + "/$target_name"
+  module_install_name = ""
+}
+
+ohos_copy("server") {
+  sources = [ "compiler/server" ]
+  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 ]

LICENSE

@@ -1,4 +1,4 @@
- 
+
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/

OAT.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="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.
+
+    This is the configuration file template for OpenHarmony OSS Audit Tool, please copy it to your project root dir and modify it refer to OpenHarmony/tools_oat/README.
+
+-->
+
+<configuration>
+    <oatconfig>
+        <licensefile></licensefile>
+        <filefilterlist>
+            <filefilter name="defaultFilter" desc="Files not to check">
+                <filteritem type="filepath" name="compiler/node_modules/.*" desc="dependencies of ets-loader"/>
+                <filteritem type="filepath" name="compiler/lib/.*" desc="files generated by ets-loader"/>
+                <filteritem type="filepath" name="compiler/syntax_parser/dist/.*" desc="files generated by ets-loader"/>
+            </filefilter>
+        </filefilterlist>
+    </oatconfig>
+</configuration>

build_ets_loader_library.py

@@ -83,7 +83,7 @@ def main():
     depfile_deps.append(options.uglify_source_js)
 
     syntax_cmd = [options.node, options.build_parser_js,
-        options.output_syntax_dir]
+        options.output_syntax_dir, options.ets_loader_src_dir]
     depfile_deps.append(options.build_parser_js)
 
     build_declarations_file_cmd = [options.node,

compiler/README.md

@@ -21,7 +21,7 @@ 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 http://registry.npm.taobao.org
+npm config set registry https://registry.npm.taobao.org
 ```
 
 ### 2. Quick Start

compiler/build_parser.js

@@ -25,7 +25,7 @@ function generateSyntaxParser(inputFile, nodePath) {
   const catalogPath = path.resolve(inputFile, '..');
   const catalogSubFiles = fs.readdirSync(catalogPath)
   const parserPath = path.resolve(__dirname, './node_modules/pegjs/bin/pegjs');
-  
+
   if (catalogSubFiles.includes('dist')) {
     exec('rm -rf ' + catalogPath + '/dist/*.js');
   } else {

compiler/components/ability_component.json

@@ -0,0 +1,4 @@
+{
+  "name": "AbilityComponent",
+  "attrs": ["onReady", "onDestroy", "onAbilityCreated", "onAbilityMoveToFront", "onAbilityWillRemove"]
+}

compiler/components/action_sheet.json

@@ -0,0 +1,4 @@
+{
+  "name": "ActionSheet",
+  "attrs": ["show"]
+}

compiler/components/alphabet_indexer.json

@@ -0,0 +1,7 @@
+{
+  "name": "AlphabetIndexer",
+  "attrs": [
+    "onSelected", "selectedColor", "popupColor", "selectedBackgroundColor", "popupBackground", "usingPopup",
+    "selectedFont", "popupFont", "itemSize", "font", "color", "alignStyle"
+  ]
+}

compiler/components/animator.json

@@ -0,0 +1,9 @@
+{
+  "name": "Animator",
+  "atomic": true,
+  "noDebugLine": true,
+  "attrs": [
+    "state", "duration", "curve", "delay", "fillMode", "iterations", "playMode", "motion",
+    "onStart", "onPause", "onRepeat", "onCancel", "onFinish", "onFrame"
+  ]
+}

compiler/components/badge.json

@@ -0,0 +1,5 @@
+{
+  "name": "Badge",
+  "atomics": true,
+  "attrs": []
+}

compiler/components/blank.json

@@ -0,0 +1,6 @@
+{
+  "name": "Blank",
+  "parents": ["Row", "Column"],
+  "atomic": true,
+  "attrs": ["color"]
+}

compiler/components/button.json

@@ -0,0 +1,4 @@
+{
+  "name": "Button",
+  "attrs": ["type", "stateEffect", "fontColor", "fontSize", "fontWeight", "fontStyle", "fontFamily"]
+}

compiler/components/calendar.json

@@ -0,0 +1,8 @@
+{
+  "name": "Calendar",
+  "attrs": [
+    "date", "showLunar", "startOfWeek", "offDays", "onSelectChange", "onRequestData",
+    "currentData", "preData", "nextData", "needSlide", "showHoliday", "direction",
+    "currentDayStyle", "nonCurrentDayStyle", "todayStyle", "weekStyle", "workStateStyle"
+  ]
+}

compiler/components/camera.json

@@ -0,0 +1,5 @@
+{
+  "name": "Camera",
+  "atomic": true,
+  "attrs": ["devicePosition"]
+}

compiler/components/canvas.json

@@ -0,0 +1,6 @@
+{
+  "name": "Canvas",
+  "attrs": [
+    "onReady"
+  ]
+}

compiler/components/circle.json

@@ -0,0 +1,4 @@
+{
+  "name": "Circle",
+  "atomic": true
+}

compiler/components/colorPicker.json

@@ -0,0 +1,4 @@
+{
+  "name": "ColorPicker",
+  "attrs": ["colors", "onSelect", "setAlignment", "setColunms", "setRows"]
+}

compiler/components/colorPickerDialog.json

@@ -0,0 +1,4 @@
+{
+  "name": "ColorPickerDialog",
+  "attrs": ["show"]
+}

compiler/components/column.json

@@ -0,0 +1,4 @@
+{
+  "name": "Column",
+  "attrs": ["alignItems"]
+}

compiler/components/column_split.json

@@ -0,0 +1,4 @@
+{
+  "name": "ColumnSplit",
+  "attrs": ["resizeable"]
+}

compiler/components/common_attrs.json

@@ -0,0 +1,24 @@
+{
+  "attrs": [
+    "width", "height", "size", "constraintSize", "layoutPriority", "layoutWeight",
+    "padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
+    "margin", "marginLeft", "marginRight", "marginTop", "marginBottom",
+    "border", "borderStyle", "borderWidth", "borderColor", "borderRadius",
+    "backgroundColor", "backgroundImage", "backgroundImageSize", "backgroundImagePosition",
+    "opacity", "animation", "transition", "stateStyles",
+    "onClick", "onTouch", "touchable", "onKeyEvent", "onHover","onAreaChange",
+    "blur", "backdropBlur", "windowBlur", "translate", "rotate", "scale", "transform",
+    "onAppear", "onDisAppear", "visibility", "flexBasis", "flexShrink", "flexGrow", "alignSelf",
+    "useAlign", "zIndex", "sharedTransition", "direction", "align", "position", "markAnchor",
+    "offset", "enabled", "aspectRatio", "displayPriority",
+    "onDrag", "onDragEnter", "onDragMove", "onDragLeave", "onDrop",
+    "overlay", "linearGradient", "sweepGradient", "radialGradient",
+    "gridOffset", "gridSpan", "useSizeType",
+    "motionPath", "clip", "shadow", "mask", "key",
+    "accessibilityGroup", "accessibilityText", "accessibilityDescription",
+    "accessibilityImportance", "onAccessibility", "grayscale", "brightness", "contrast",
+    "saturate", "geometryTransition",
+    "bindPopup", "colorBlend", "invert", "sepia", "hueRotate", "bindMenu", "hoverEffect",
+    "onFocus", "onBlur", "onFocusMove", "focusable", "responseRegion"
+  ]
+}

compiler/components/counter.json

@@ -0,0 +1,7 @@
+{
+  "name": "Counter",
+  "attrs": [
+    "onStateChange", "onInc",
+    "onDec", "height", "width"
+  ]
+}

compiler/components/datapanel.json

@@ -0,0 +1,5 @@
+{
+  "name": "DataPanel",
+  "atomic": false,
+  "attrs": ["closeEffect"]
+}

compiler/components/datePicker.json

@@ -0,0 +1,4 @@
+{
+  "name": "DatePicker",
+  "attrs": ["lunar", "onChange", "useMilitaryTime"]
+}

compiler/components/divider.json

@@ -0,0 +1,5 @@
+{
+  "name": "Divider",
+  "atomic": true,
+  "attrs": ["color", "vertical", "strokeWidth", "lineCap"]
+}

compiler/components/ellipse.json

@@ -0,0 +1,4 @@
+{
+  "name": "Ellipse",
+  "atomic": true
+}

compiler/components/flex.json

@@ -0,0 +1,4 @@
+{
+  "name": "Flex",
+  "attrs": []
+}

compiler/components/form_component.json

@@ -0,0 +1,8 @@
+{
+  "name": "FormComponent",
+  "atomic": true,
+  "attrs": [
+    "size", "moduleName", "dimension", "allowUpdate", "visibility",
+    "onAcquired", "onError", "onRouter"
+  ]
+}

compiler/components/friction_motion.json

@@ -0,0 +1,4 @@
+{
+  "name": "FrictionMotion",
+  "atomic": true
+}

compiler/components/gauge.json

@@ -0,0 +1,7 @@
+{
+  "name": "Gauge",
+  "atomic": true,
+  "attrs": [
+    "value", "startAngle", "endAngle", "colors", "strokeWidth", "labelConfig"
+  ]
+}

compiler/components/geometryView.json

@@ -0,0 +1,4 @@
+{
+  "name": "GeometryView",
+  "atomic": true
+}

compiler/components/grid.json

@@ -0,0 +1,8 @@
+{
+  "name": "Grid",
+  "children": ["GridItem"],
+  "attrs": [
+    "columnsTemplate", "rowsTemplate", "columnsGap", "rowsGap", "scrollBar", "scrollBarWidth",
+    "scrollBarColor"
+  ]
+}

compiler/components/gridItem.json

@@ -0,0 +1,6 @@
+{
+  "name": "GridItem",
+  "parents": ["Grid"],
+  "single": true,
+  "attrs": ["rowStart", "rowEnd", "columnStart", "columnEnd", "forceRebuild"]
+}

compiler/components/grid_container.json

@@ -0,0 +1,4 @@
+{
+  "name": "GridContainer",
+  "attrs": ["columns", "sizeType", "gutter", "margin"]
+}

compiler/components/hyperlink.json

@@ -0,0 +1,4 @@
+{
+  "name": "Hyperlink",
+  "attrs": ["color"]
+}

compiler/components/image.json

@@ -0,0 +1,9 @@
+{
+  "name": "Image",
+  "atomic": true,
+  "attrs": [
+    "alt", "objectFit", "matchTextDirection", "fitOriginalSize", "objectRepeat", "renderMode",
+    "interpolation", "onComplete", "onError", "onFinish", "sourceSize", "fillColor", "autoResize",
+    "syncLoad"
+  ]
+}

compiler/components/image_animator.json

@@ -0,0 +1,8 @@
+{
+  "name": "ImageAnimator",
+  "atomic": true,
+  "attrs": [
+    "images", "state", "duration", "reverse", "fixedSize", "preDecode", "fillMode", "iterations",
+    "onStart", "onPause", "onRepeat", "onCancel", "onFinish"
+  ]
+}

compiler/components/line.json

@@ -0,0 +1,7 @@
+{
+  "name": "Line",
+  "atomic": true,
+  "attrs": [
+    "startPoint","endPoint"
+  ]
+}

compiler/components/list.json

@@ -0,0 +1,9 @@
+{
+  "name": "List",
+  "children": ["ListItem", "Section"],
+  "attrs": [
+    "listDirection", "scrollBar", "edgeEffect", "divider", "editMode", "cachedCount",
+    "chainAnimation", "onScroll", "onReachStart", "onReachEnd", "onScrollStop", "onItemDelete",
+    "onItemMove", "onItemDragStart", "onItemDragEnter", "onItemDragMove", "onItemDragLeave", "onItemDrop"
+  ]
+}

compiler/components/listItem.json

@@ -0,0 +1,6 @@
+{
+  "name": "ListItem",
+  "parents": ["List"],
+  "single": true,
+  "attrs": ["sticky", "editable"]
+}

compiler/components/loadingProgress.json

@@ -0,0 +1,5 @@
+{
+  "name": "LoadingProgress",
+  "atomic": true,
+  "attrs": ["color"]
+}

compiler/components/marquee.json

@@ -0,0 +1,7 @@
+{
+  "name": "Marquee",
+  "attrs": [
+    "fontColor", "fontSize", "allowScale", "fontWeight", "fontFamily", "onStart",
+    "onBounce", "onFinish"
+  ]
+}

compiler/components/menu.json

@@ -0,0 +1,5 @@
+{
+  "name": "Menu",
+  "children": ["Option"],
+  "attrs": ["show", "showPosition", "fontColor", "fontSize", "fontWeight", "fontFamily"]
+}

compiler/components/navigation.json

@@ -0,0 +1,5 @@
+{
+  "name": "Navigation",
+  "attrs": ["title", "subTitle", "hideTitleBar", "hideBackButton", "titleMode", "menus",
+    "toolBar", "hideToolBar", "onTitleModeChanged"]
+}

compiler/components/navigator.json

@@ -0,0 +1,5 @@
+{
+  "name": "Navigator",
+  "single": true,
+  "attrs": ["target", "type", "params", "active"]
+}

compiler/components/option.json

@@ -0,0 +1,5 @@
+{
+  "name": "Option",
+  "parents": ["Menu"],
+  "attrs": ["fontColor", "fontSize", "fontWeight", "fontFamily"]
+}

compiler/components/pageTransition_enter.json

@@ -0,0 +1,6 @@
+{
+  "name": "PageTransitionEnter",
+  "atomic": true,
+  "noDebugLine": true,
+  "attrs": ["onEnter"]
+}

compiler/components/pageTransition_exit.json

@@ -0,0 +1,6 @@
+{
+  "name": "PageTransitionExit",
+  "atomic": true,
+  "noDebugLine": true,
+  "attrs": ["onExit"]
+}

compiler/components/panel.json

@@ -0,0 +1,7 @@
+{
+  "name": "Panel",
+  "attrs": [
+    "type", "mode", "dragBar", "fullHeight",
+    "halfHeight", "miniHeight", "show", "onChange"
+  ]
+}

compiler/components/path.json

@@ -0,0 +1,7 @@
+{
+  "name": "Path",
+  "atomic": true,
+  "attrs": [
+    "commands"
+  ]
+}

compiler/components/piece.json

@@ -0,0 +1,5 @@
+{
+  "name": "Piece",
+  "attrs": ["iconPosition", "fontColor", "fontSize", "fontStyle",
+    "fontWeight","fontFamily", "showDelete", "onClose"]
+}

compiler/components/polygon.json

@@ -0,0 +1,5 @@
+{
+  "name": "Polygon",
+  "atomic": true,
+  "attrs": ["points"]
+}

compiler/components/polyline.json

@@ -0,0 +1,5 @@
+{
+  "name": "Polyline",
+  "atomic": true,
+  "attrs": ["points"]
+}

compiler/components/progress.json

@@ -0,0 +1,7 @@
+{
+  "name": "Progress",
+  "atomic": true,
+  "attrs": [
+    "value", "color", "cricularStyle", "circularStyle"
+  ]
+}

compiler/components/qrcode.json

@@ -0,0 +1,4 @@
+{
+  "name": "QRCode",
+  "attrs": ["color", "backgroundColor"]
+}

compiler/components/radio.json

@@ -0,0 +1,5 @@
+{
+  "name": "Radio",
+  "atomic": true,
+  "attrs": ["checked", "onChange"]
+}

compiler/components/rating.json

@@ -0,0 +1,4 @@
+{
+  "name": "Rating",
+  "attrs": ["stars", "stepSize", "starStyle", "onChange"]
+}

compiler/components/rect.json

@@ -0,0 +1,7 @@
+{
+  "name": "Rect",
+  "atomic": true,
+  "attrs": [
+    "radiusWidth", "radiusHeight", "radius"
+  ]
+}

compiler/components/refresh.json

@@ -0,0 +1,7 @@
+{
+  "name": "Refresh",
+  "single": true,
+  "attrs": [
+    "refreshing", "offset", "friction", "onStateChange", "onRefreshing"
+  ]
+}

compiler/components/row.json

@@ -0,0 +1,4 @@
+{
+  "name": "Row",
+  "attrs": ["alignItems"]
+}

compiler/components/row_split.json

@@ -0,0 +1,4 @@
+{
+  "name": "RowSplit",
+  "attrs": ["resizeable"]
+}

compiler/components/scroll.json

@@ -0,0 +1,7 @@
+{
+  "name": "Scroll",
+  "attrs": [
+    "scrollable", "onScroll", "onScrollEdge", "onScrollEnd", "scrollBar", "scrollBarColor",
+    "scrollBarWidth", "edgeEffect"
+  ]
+}

compiler/components/scroll_bar.json

@@ -0,0 +1,6 @@
+{
+    "name": "ScrollBar",
+    "attrs": [],
+    "atomic": false,
+    "single": true
+}

compiler/components/scroll_motion.json

@@ -0,0 +1,4 @@
+{
+  "name": "ScrollMotion",
+  "atomic": true
+}

compiler/components/search.json

@@ -0,0 +1,8 @@
+{
+  "name": "Search",
+  "atomic": true,
+  "attrs": [
+    "searchButton", "placeholderColor", "placeholderFont", "textFont", "onSubmit", "onChange",
+    "onCopy", "OnCut", "OnPaste"
+  ]
+}

compiler/components/section.json

@@ -0,0 +1,4 @@
+{
+  "name": "Section",
+  "attrs": []
+}

compiler/components/shape.json

@@ -0,0 +1,13 @@
+{
+  "name": "Shape",
+  "children": [
+    "Rect", "Path", "Circle", "Ellipse", "Shape", "Polyline", "Polygon", "Image", "Text", "Column",
+    "Row"
+  ],
+  "attrs": [
+    "stroke", "fill", "strokeDashOffset", "strokeLineCap",
+    "strokeLineJoin", "strokeMiterLimit", "strokeOpacity",
+    "fillOpacity", "strokeWidth", "antiAlias", "strokeDashArray",
+    "viewPort", "mesh"
+  ]
+}

compiler/components/sheet.json

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

compiler/components/sideBar_container.json

@@ -0,0 +1,6 @@
+{
+    "name": "SideBarContainer",
+    "attrs": [
+        "showControlButton", "onChange"
+    ]
+  }

compiler/components/slider.json

@@ -0,0 +1,8 @@
+{
+  "name": "Slider",
+  "atomic": true,
+  "attrs": [
+    "blockColor", "trackColor", "selectedColor", "minLabel", "maxLabel", "showSteps", "showTips",
+    "onChange"
+  ]
+}

compiler/components/span.json

@@ -0,0 +1,8 @@
+{
+  "name": "Span",
+  "atomic": true,
+  "attrs": [
+    "fontColor", "fontSize", "fontStyle", "fontFamily", "fontWeight", "decoration", "letterSpacing",
+    "textCase"
+  ]
+}

compiler/components/spring_motion.json

@@ -0,0 +1,4 @@
+{
+  "name": "SpringMotion",
+  "atomic": true
+}

compiler/components/spring_prop.json

@@ -0,0 +1,4 @@
+{
+  "name": "SpringProp",
+  "atomic": true
+}

compiler/components/stack.json

@@ -0,0 +1,4 @@
+{
+  "name": "Stack",
+  "attrs": ["alignContent"]
+}

compiler/components/stepper.json

@@ -0,0 +1,7 @@
+{
+  "name": "Stepper",
+  "children": ["StepperItem"],
+  "attrs": [
+    "onFinish", "onSkip", "onChange", "onNext", "onPrevious"
+  ]
+}

compiler/components/stepperItem.json

@@ -0,0 +1,6 @@
+{
+  "name": "StepperItem",
+  "parents": ["Stepper"],
+  "single": true,
+  "attrs": ["prevLabel", "nextLabel", "status"]
+}

compiler/components/swiper.json

@@ -0,0 +1,7 @@
+{
+  "name": "Swiper",
+  "attrs": [
+    "index", "autoPlay", "interval", "indicator", "loop", "duration", "vertical", "itemSpace",
+    "cachedCount", "displayMode", "displayCount", "effectMode", "disableSwipe", "onChange"
+  ]
+}

compiler/components/tab_content.json

@@ -0,0 +1,5 @@
+{
+  "name": "TabContent",
+  "parents": ["Tabs"],
+  "attrs": ["tabBar"]
+}

compiler/components/tabs.json

@@ -0,0 +1,8 @@
+{
+  "name": "Tabs",
+  "children": ["TabContent"],
+  "attrs": [
+    "vertical", "scrollable", "barMode", "barWidth", "barHeight", "animationDuration",
+    "onChange"
+  ]
+}

compiler/components/text.json

@@ -0,0 +1,9 @@
+{
+  "name": "Text",
+  "children": ["Span"],
+  "attrs": [
+    "fontColor", "fontSize", "fontStyle", "fontWeight", "textAlign", "lineHeight", "textOverflow",
+    "maxLines", "decoration", "letterSpacing", "textCase", "baselineOffset", "minFontSize",
+    "maxFontSize"
+  ]
+}

compiler/components/textPicker.json

@@ -0,0 +1,4 @@
+{
+  "name": "TextPicker",
+  "attrs": ["defaultPickerItemHeight", "onAccept", "onCancel", "onChange"]
+}

compiler/components/textarea.json

@@ -0,0 +1,8 @@
+{
+  "name": "TextArea",
+  "atomic": true,
+  "attrs": [
+    "placeholderColor", "placeholderFont", "textAlign", "caretColor", "onChange",
+    "onCopy", "OnCut", "OnPaste", "fontSize", "fontColor", "fontStyle", "fontWeight", "fontFamily"
+  ]
+}

compiler/components/textinput.json

@@ -0,0 +1,9 @@
+{
+  "name": "TextInput",
+  "atomic": true,
+  "attrs": [
+    "type", "placeholderColor", "placeholderFont", "enterKeyType", "caretColor", "maxLength",
+    "onEditChanged", "onSubmit", "onChange", "onCopy", "OnCut", "OnPaste", "fontSize",
+    "fontColor", "fontStyle", "fontWeight", "fontFamily"
+  ]
+}

compiler/components/toggle.json

@@ -0,0 +1,4 @@
+{
+  "name": "Toggle",
+  "attrs": ["onChange", "selectedColor", "switchPointColor"]
+}

compiler/components/video.json

@@ -0,0 +1,8 @@
+{
+  "name": "Video",
+  "atomic": true,
+  "attrs": [
+    "muted", "autoPlay", "controls", "loop", "objectFit", "onSeeking", "onFullscreenChange",
+    "onStart", "onPause", "onPrepared", "onFinish", "onSeeked", "onUpdate", "onError"
+  ]
+}

compiler/components/web.json

@@ -0,0 +1,5 @@
+{
+  "name": "Web",
+  "atomic": true,
+  "attrs": ["onPagestart", "onPagefinish", "onError","onMessage"]
+}

compiler/components/xcomponent.json

@@ -0,0 +1,7 @@
+{
+  "name": "XComponent",
+  "atomic": true,
+  "attrs": [
+    "id", "type", "libraryname", "source", "onLoad", "onDestroy"
+  ]
+}

compiler/main.js

@@ -49,6 +49,7 @@ function initProjectConfig(projectConfig) {
     path.resolve(projectConfig.projectPath, 'build');
   projectConfig.manifestFilePath = projectConfig.manifestFilePath || process.env.aceManifestPath ||
     path.join(projectConfig.projectPath, 'manifest.json');
+  projectConfig.aceConfigPath = projectConfig.aceConfigPath || process.env.aceConfigPath;
 }
 
 function loadEntryObj(projectConfig) {
@@ -60,11 +61,14 @@ function loadEntryObj(projectConfig) {
       staticPreviewPage + '.ets?entry';
   } else if (abilityConfig.abilityType === 'page') {
     let manifest = {};
-    try {
+    if (fs.existsSync(projectConfig.manifestFilePath)) {
       const jsonString = fs.readFileSync(projectConfig.manifestFilePath).toString();
       manifest = JSON.parse(jsonString);
-    } catch (error) {
-      throw Error(`\u001b[31m ERROR: the manifest file '${projectConfig.manifestFilePath}' is lost or format is invalid. \u001b[39m`).message;
+    } else if (process.env.aceConfigPath && fs.existsSync( projectConfig.aceConfigPath)) {
+      buildManifest(manifest,  projectConfig.aceConfigPath);
+    } else {
+      throw Error('\u001b[31m ERROR: the manifest file ' + projectConfig.manifestFilePath +
+        ' or config.json is lost or format is invalid. \u001b[39m').message;
     }
     if (manifest.pages) {
       const pages = manifest.pages;
@@ -77,7 +81,49 @@ function loadEntryObj(projectConfig) {
         }
       });
     } else {
-      throw Error(`\u001b[31m ERROR: missing pages attribute in '${projectConfig.manifestFilePath}'. \u001b[39m`).message;
+      throw Error('\u001b[31m ERROR: missing pages attribute in ' + projectConfig.manifestFilePath +
+        '. \u001b[39m').message;
+    }
+  }
+}
+
+function buildManifest(manifest, aceConfigPath) {
+  try {
+    const configJson =  JSON.parse(fs.readFileSync(aceConfigPath).toString());
+    const srcPath = process.env.srcPath;
+    manifest.type = process.env.abilityType;
+    if (configJson.module && configJson.module.abilities) {
+      manifest.pages = getPages(configJson, srcPath);
+    } else {
+      throw Error('\u001b[31m'+
+        'EERROR: the config.json file miss keyword module || module[abilities].' +
+        '\u001b[39m').message;
+    }
+    manifest.minPlatformVersion = configJson.app.apiVersion.compatible;
+  } catch (e) {
+    throw Error("\x1B[31m" + 'ERROR: the config.json file is lost or format is invalid.' +
+      "\x1B[39m").message;
+  }
+}
+
+function getPages(configJson, srcPath) {
+  const pages = []
+  for (const ability of configJson.module.abilities){
+    if (ability.srcPath === srcPath) {
+      readPages(ability, pages, configJson)
+      break;
+    }
+  }
+  return pages;
+}
+
+function readPages(ability, pages, configJson) {
+  for (const js of configJson.module.js){
+    if (ability.name === js.name) {
+      js.pages.forEach(page => {
+        pages.push(page)
+      })
+      break;
     }
   }
 }

compiler/package.json

@@ -13,7 +13,7 @@
     "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 ts-node/register test/test.ts",
+    "test": "npm run build && mocha -r mocha-context/register test/test.js",
     "generateDeclarations": "node ./build_declarations_file.js ../../../interface/sdk-js/api/@internal/component/ets ./declarations ./lib",
     "generateSyntaxParser": "node build_parser.js ./syntax_parser/dist",
     "postinstall": "node npm-install.js"
@@ -29,18 +29,20 @@
     "chai": "^4.2.0",
     "eslint": "^7.16.0",
     "mocha": "^8.2.1",
+    "mocha-context": "^0.1.5",
     "ts-node": "^9.1.1",
-    "uglify-es": "^3.3.10"
+    "uglify-es": "^3.3.10",
+    "pegjs": "^0.10.0"
   },
   "dependencies": {
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^8.1.0",
-    "deccjsunit": "1.0.3",
+    "deccjsunit": "1.0.4",
     "log4js": "^6.3.0",
-    "pegjs": "^0.10.0",
     "ts-loader": "^8.0.12",
     "typescript": "^4.1.3",
     "webpack": "^5.48.0",
-    "webpack-cli": "^4.2.0"
+    "webpack-cli": "^4.2.0",
+    "ws": "^8.3.0"
   }
 }

compiler/sample/manifest.json

@@ -1,5 +1,5 @@
 {
-  "appID": "com.huawei.ace.helloworld",
+  "appID": "com.example.ace.helloworld",
   "appName": "HelloAce",
   "versionName": "1.0.0",
   "versionCode": 1,

compiler/sample/pages/home_preview.ets

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-   
+
 @Entry
 @Component
 struct HomePreviewComponent {

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

@@ -15,7 +15,7 @@
 
 class MyComponent extends View {
     constructor() {
-        super(); 
+        super();
         this.value1 = value1;
         this.value2 = value2;
         this.value3 = value3;

compiler/sample/pages/testcases/showcaseCovid19.ets

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

compiler/sample/pages/todo.ets

@@ -24,7 +24,7 @@
  * 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/server/build_pipe_server.js

@@ -0,0 +1,78 @@
+/*
+ * 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 WebSocket = require('ws');
+const ts = require('typescript');
+
+const { processComponentChild } = require('../lib/process_component_build');
+
+const WebSocketServer = WebSocket.Server;
+
+let pluginSocket = '';
+
+const pluginCommandChannelMessageHandlers = {
+  'compileComponent': handlePluginCompileComponent,
+  'default': handlePluginDefault
+};
+
+function init(port) {
+  const wss = new WebSocketServer({port: port});
+  wss.on('connection', function(ws) {
+    pluginSocket = ws;
+    handlePluginConnect(ws);
+  });
+}
+
+function handlePluginConnect(ws) {
+  ws.on('message', function(message) {
+    const jsonData = JSON.parse(message);
+    handlePluginCommand(jsonData);
+  });
+}
+
+function handlePluginCommand(jsonData) {
+  pluginCommandChannelMessageHandlers[jsonData.command]
+    ? pluginCommandChannelMessageHandlers[jsonData.command](jsonData)
+    : pluginCommandChannelMessageHandlers['default'](jsonData);
+}
+
+function handlePluginDefault() {
+  console.error('Failed to recognize command');
+}
+
+function handlePluginCompileComponent(jsonData) {
+  const received_msg = jsonData;
+  const sourceNode = ts.createSourceFile
+    ('preview.ts', received_msg.data.script, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  const previewStatements = [];
+  processComponentChild(sourceNode, previewStatements, []);
+  const newSource = ts.factory.updateSourceFile(sourceNode, previewStatements);
+  const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+  const result = printer.printNode(ts.EmitHint.Unspecified, newSource, newSource);
+  received_msg.data.script = result;
+  if (pluginSocket.readyState === WebSocket.OPEN){
+    responseToPlugin(received_msg);
+  }
+}
+
+function responseToPlugin(jsonData) {
+  pluginSocket.send(JSON.stringify(jsonData), (err) => {
+    console.error('Failed to send data through websocket');
+  });
+}
+
+module.exports = {
+  init
+};

compiler/src/compile_info.ts

@@ -15,15 +15,22 @@
 
 import Stats from 'webpack/lib/Stats';
 import Compiler from 'webpack/lib/Compiler';
+import Compilation from 'webpack/lib/Compilation';
+import JavascriptModulesPlugin from 'webpack/lib/javascript/JavascriptModulesPlugin';
 import {
   configure,
   getLogger
 } from 'log4js';
 import RawSource from 'webpack-sources/lib/RawSource';
+import path from 'path';
+import fs from 'fs';
+import CachedSource from 'webpack-sources/lib/CachedSource';
+import ConcatSource from 'webpack-sources/lib/ConcatSource';
 
 import {
   BUILDIN_STYLE_NAMES,
-  EXTEND_ATTRIBUTE
+  EXTEND_ATTRIBUTE,
+  STYLES_ATTRIBUTE
 } from './component_map';
 import { transformLog } from './process_ui_syntax';
 import {
@@ -34,6 +41,8 @@ import {
 import { decoratorParamSet } from './process_component_member';
 import { appComponentCollection } from './process_component_build';
 import { projectConfig } from '../main';
+import { circularFile } from './utils';
+import { MODULE_SHARE_PATH, BUILD_SHARE_PATH } from './pre_define';
 
 configure({
   appenders: { 'ETS': {type: 'stderr', layout: {type: 'messagePassThrough'}}},
@@ -42,6 +51,13 @@ configure({
 export const logger = getLogger('ETS');
 
 const props: string[] = [];
+const GLOBAL_COMMON_MODULE_CACHE: string = `
+globalThis["__common_module_cache__"] = globalThis["__common_module_cache__"] || {};
+globalThis["webpackChunkcompilier"].forEach((item)=> {
+  Object.keys(item[1]).forEach((element) => {
+    globalThis["__common_module_cache__"][element] = null;
+  })
+});`;
 
 interface Info {
   message?: string;
@@ -62,6 +78,7 @@ export class ResultStates {
   private yellow: string = '\u001b[33m';
   private blue: string = '\u001b[34m';
   private reset: string = '\u001b[39m';
+  private modulePaths: Set<string> = new Set([]);
 
   public apply(compiler: Compiler): void {
     compiler.hooks.compilation.tap('SourcemapFixer', compilation => {
@@ -73,6 +90,52 @@ export class ResultStates {
         });
       }
       );
+
+      compilation.hooks.buildModule.tap("findModule", (module) => {
+        if (/node_modules/.test(module.context)) {
+          const modulePath: string =
+            path.resolve(module.resourceResolveData.descriptionFileRoot, MODULE_SHARE_PATH);
+          if (fs.existsSync(modulePath)) {
+            this.modulePaths.add(modulePath);
+          }
+        }
+      });
+    });
+
+    compiler.hooks.afterCompile.tap('copyFindModule', () => {
+      this.modulePaths.forEach(modulePath => {
+        circularFile(modulePath, path.resolve(projectConfig.buildPath, BUILD_SHARE_PATH));
+      });
+    });
+
+    compiler.hooks.compilation.tap('CommonAsset', compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: 'GLOBAL_COMMON_MODULE_CACHE',
+          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        (assets) => {
+          if (assets['commons.js']) {
+            assets['commons.js'] = new CachedSource(
+              new ConcatSource(assets['commons.js'], GLOBAL_COMMON_MODULE_CACHE));
+          } else if (assets['vendors.js']) {
+            assets['vendors.js'] = new CachedSource(
+              new ConcatSource(assets['vendors.js'], GLOBAL_COMMON_MODULE_CACHE));
+          }
+        });
+    });
+
+    compiler.hooks.compilation.tap('Require', compilation => {
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderRequire.tap('renderRequire',
+        (source) => {
+          return `var commonCachedModule = globalThis["__common_module_cache__"] ? ` +
+            `globalThis["__common_module_cache__"][moduleId]: null;\n` +
+            `if (commonCachedModule) { return commonCachedModule.exports; }\n` +
+            source.replace('// Execute the module function',
+            `if (globalThis["__common_module_cache__"] && moduleId.indexOf("?name=") < 0 && ` +
+            `Object.keys(globalThis["__common_module_cache__"]).indexOf(moduleId) >= 0) {\n` +
+              `  globalThis["__common_module_cache__"][moduleId] = module;\n}`);
+        });
     });
 
     compiler.hooks.done.tap('Result States', (stats: Stats) => {
@@ -192,11 +255,13 @@ export class ResultStates {
     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 = /Property\s*'([_a-zA-Z0-9]+)' does not exist on type\s*'([_a-zA-Z0-9]+)'\./;
+    const extendInfoReg: RegExp =
+      /Property\s*'([_a-zA-Z0-9]+)' does not exist on type\s*'([_a-zA-Z0-9]+)(Attribute|Interface)'\./;
     if (this.matchMessage(message, props, propInfoReg) ||
       this.matchMessage(message, [...componentCollection.customComponents], componentNameReg) ||
       this.matchMessage(message, props, stateInfoReg) ||
-      this.matchMessage(message, EXTEND_ATTRIBUTE, extendInfoReg, true)) {
+      this.matchMessage(message, EXTEND_ATTRIBUTE, extendInfoReg, true) ||
+      this.matchMessage(message, STYLES_ATTRIBUTE, extendInfoReg)) {
       return false;
     }
     return true;

compiler/src/component_map.ts

@@ -13,382 +13,33 @@
  * limitations under the License.
  */
 
-export const COMPONENT_MAP: any = {
-  Search: {
-    atomic: true,
-    attrs: [
-      'searchButton', 'placeholderColor', 'placeholderFont', 'onSubmit', 'onChange'
-    ]
-  },
-  FormComponent: {
-    atomic: true,
-    attrs: [
-      'size', 'moduleName', 'dimension', 'allowUpdate', 'visibility',
-      'onAcquired', 'onError', 'onRouter'
-    ]
-  },
-  Image: {
-    atomic: true,
-    attrs: [
-      'alt', 'objectFit', 'matchTextDirection', 'fitOriginalSize', 'objectRepeat', 'renderMode', 'interpolation',
-      'onComplete', 'onError', 'onFinish', 'sourceSize', 'fillColor', 'autoResize'
-    ]
-  },
-  ImageAnimator: {
-    atomic: true,
-    attrs: [
-      'images', 'state', 'duration', 'reverse', 'fixedSize', 'preDecode', 'fillMode', 'iterations', 'onStart',
-      'onPause', 'onRepeat', 'onCancel', 'onFinish'
-    ]
-  },
-  Animator: {
-    atomic: true,
-    noDebugLine: true,
-    attrs: [
-      'state', 'duration', 'curve', 'delay', 'fillMode', 'iterations', 'playMode', 'motion', 'onStart',
-      'onPause', 'onRepeat', 'onCancel', 'onFinish', 'onFrame'
-    ]
-  },
-  Refresh: {
-    single: true,
-    attrs: [
-      'refreshing', 'offset', 'friction',
-      'onStateChange', 'onRefreshing'
-    ]
-  },
-  SpringProp: {
-    atomic: true
-  },
-  SpringMotion: {
-    atomic: true
-  },
-  FrictionMotion: {
-    atomic: true
-  },
-  ScrollMotion: {
-    atomic: true
-  },
-  Text: {
-    children: ['Span'],
-    attrs: [
-      'fontColor', 'fontSize', 'fontStyle', 'fontWeight', 'textAlign', 'lineHeight', 'textOverflow', 'maxLines',
-      'decoration', 'letterSpacing', 'textCase', 'baselineOffset', 'minFontSize', 'maxFontSize'
-    ]
-  },
-  TextPicker: {
-    atomic: true,
-    attrs: ['defaultPickerItemHeight', 'onAccept', 'onCancel', 'onChange']
-  },
-  DatePicker: {
-    atomic: true,
-    attrs: ['lunar', 'onChange', 'useMilitaryTime']
-  },
-  Span: {
-    atomic: true,
-    attrs: [
-      'fontColor', 'fontSize', 'fontStyle', 'fontFamily', 'fontWeight', 'decoration', 'letterSpacing', 'textCase'
-    ]
-  },
-  Button: {
-    attrs: ['type', 'stateEffect', 'fontColor', 'fontSize', 'fontWeight']
-  },
-  Divider: {
-    atomic: true,
-    attrs: ['color', 'vertical', 'strokeWidth', 'lineCap']
-  },
-  Piece: {
-    atomic: true,
-    attrs: ['iconPosition']
-  },
-  Slider: {
-    atomic: true,
-    attrs: ['blockColor', 'trackColor', 'selectedColor', 'minLabel','maxLabel', 'showSteps', 'showTips', 'onChange']
-  },
-  Counter: {
-    attrs: [
-      'onStateChange', 'onInc',
-      'onDec', 'height', 'width'
-    ]
-  },
-  Row: {
-    attrs: ['alignItems']
-  },
-  Column: {
-    attrs: ['alignItems']
-  },
-  Stack: {
-    attrs: ['alignContent']
-  },
-  List: {
-    children: ['ListItem', 'Section'],
-    attrs: [
-      'listDirection', 'scrollBar', 'edgeEffect', 'divider', 'editMode', 'cachedCount', 'chainAnimation',
-      'onScroll', 'onReachStart', 'onReachEnd', 'onScrollStop', 'onItemDelete', 'onItemMove'
-    ]
-  },
-  ListItem: {
-    parents: ['List'],
-    single: true,
-    attrs: ['sticky', 'editable']
-  },
-  Grid: {
-    children: ['GridItem'],
-    attrs: ['columnsTemplate', 'rowsTemplate', 'columnsGap', 'rowsGap', 'scrollBar', 'scrollBarWidth', 'scrollBarColor']
-  },
-  GridItem: {
-    parents: ['Grid'],
-    single: true,
-    attrs: ['rowStart', 'rowEnd', 'columnStart', 'columnEnd', 'forceRebuild']
-  },
-  GridContainer: {
-    attrs: ['columns', 'sizeType', 'gutter', 'margin']
-  },
-  Hyperlink: {
-    attrs: ['color']
-  },
-  Swiper: {
-    attrs: [
-      'index', 'autoPlay', 'interval', 'indicator',
-      'loop', 'duration', 'vertical', 'itemSpace', 'displayMode', 'onChange'
-    ]
-  },
-  Stepper: {
-    children: ['StepperItem'],
-    attrs: [
-      'onFinish', 'onSkip', 'onChange', 'onNext', 'onPrevious'
-    ]
-  },
-  StepperItem: {
-    parents: ['Stepper'],
-    single: true,
-    attrs: ['prevLabel', 'nextLabel', 'status']
-  },
-  Rating: {
-    attrs: ['stars', 'stepSize', 'starStyle', 'onChange']
-  },
-  Calendar: {
-    attrs: [
-      'date', 'showLunar', 'startOfWeek', 'offDays', 'onSelectChange', 'onRequestData',
-      'currentData', 'preData', 'nextData', 'needSlide', 'showHoliday', 'direction',
-      'currentDayStyle', 'nonCurrentDayStyle', 'todayStyle', 'weekStyle', 'workStateStyle'
-    ]
-  },
-  Panel: {
-    attrs: [
-      'type', 'mode', 'dragBar', 'fullHeight',
-      'halfHeight', 'miniHeight', 'show', 'onChange'
-    ]
-  },
-  Navigator: {
-    single: true,
-    attrs: ['target', 'type', 'params', 'active']
-  },
-  Sheet: {
-    children: ['Section'],
-    attrs: []
-  },
-  Section: {
-    attrs: []
-  },
-  QRCode: {
-    attrs: ['color', 'backgroundColor']
-  },
-  Flex: {
-    attrs: []
-  },
-  LoadingProgress: {
-    atomic: true,
-    attrs: ['color']
-  },
-  NavigationView: {
-    attrs: []
-  },
-  Scroll: {
-    attrs: [
-      'scrollable', 'onScroll', 'onScrollEdge', 'onScrollEnd', 'scrollBar', 'scrollBarColor',
-      'scrollBarWidth', 'edgeEffect'
-    ]
-  },
-  Shape: {
-    children: ['Rect', 'Path', 'Circle', 'Ellipse', 'Shape', 'Polyline', 'Polygon', 'Image', 'Text'],
-    attrs: [
-      'stroke', 'fill', 'strokeDashOffset', 'strokeLineCap',
-      'strokeLineJoin', 'strokeMiterLimit', 'strokeOpacity',
-      'fillOpacity', 'strokeWidth', 'antiAlias', 'strokeDashArray',
-      'viewPort'
-    ]
-  },
-  Progress: {
-    atomic: true,
-    attrs: [
-      'value', 'color', 'cricularStyle', 'circularStyle'
-    ]
-  },
-  Rect: {
-    atomic: true,
-    attrs: [
-      'radiusWidth', 'radiusHeight', 'radius'
-    ]
-  },
-  Path: {
-    atomic: true,
-    attrs: [
-      'commands'
-    ]
-  },
-  Circle: {
-    atomic: true
-  },
-  Ellipse: {
-    atomic: true
-  },
-  Camera: {
-    atomic: true,
-    attrs: ['devicePosition']
-  },
-  Tabs: {
-    children: ['TabContent'],
-    attrs: [
-      'vertical', 'scrollable', 'barMode', 'barWidth', 'barHeight', 'animationDuration',
-      'onChange'
-    ]
-  },
-  TabContent: {
-    parents: ['Tabs'],
-    attrs: ['tabBar']
-  },
-  PageTransitionEnter: {
-    atomic: true,
-    noDebugLine: true,
-    attrs: ['onEnter']
-  },
-  PageTransitionExit: {
-    atomic: true,
-    noDebugLine: true,
-    attrs: ['onExit']
-  },
-  Blank: {
-    parents: ['Row', 'Column'],
-    atomic: true,
-    attrs: ['color']
-  },
-  RowSplit: {
-    attrs: ['resizeable']
-  },
-  ColumnSplit: {
-    attrs: ['resizeable']
-  },
-  Toggle: {
-    attrs: ['onChange', 'selectedColor', 'swithPointStyle']
-  },
-  AlertDialog: {
-    attrs: ['show']
-  },
-  ActionSheet: {
-    attrs: ['show']
-  },
-  Video: {
-    atomic: true,
-    attrs: [
-      'muted', 'autoPlay', 'controls', 'loop', 'objectFit', 'onSeeking', 'onFullscreenChange',
-      'onStart', 'onPause', 'onPrepared', 'onFinish', 'onSeeked', 'onUpdate', 'onError'
-    ]
-  },
-  AbilityComponent: {
-    attrs: ['onReady', 'onDestroy', 'onAbilityCreated', 'onAbilityMoveToFront', 'onAbilityWillRemove']
-  },
-  AlphabetIndexer: {
-    attrs: [
-      'onSelected', 'selectedColor', 'popupColor', 'selectedBackgroundColor', 'popupBackground', 'usingPopup',
-      'selectedFont', 'popupFont', 'itemSize', 'font', 'color', 'alignStyle'
-    ]
-  },
-  Radio: {
-    atomic: true,
-    attrs: ['checked', 'onChange']
-  },
-  Web: {
-    atomic: true,
-    attrs: ['pagestart', 'pagefinish', 'error','message', 'reload']
-  },
-  GeometryView: {
-    atomic: true
-  },
-  DataPanel: {
-    atomic: false,
-    attrs: ['closeEffect']
-  },
-  Badge: {
-    atomics: true,
-    attrs: []
-  },
-  Line: {
-    atomic: true,
-    attrs: [
-      'startPoint','endPoint'
-    ]
-  },
-  Polygon: {
-    atomic: true,
-    attrs: ['points']
-  },
-  Polyline: {
-    atomic: true,
-    attrs: ['points']
-  },
-  Gauge: {
-    atomic: true,
-    attrs: ['value', 'startAngle', 'endAngle', 'colors', 'strokeWidth', 'labelTextConfig', 'labelColorConfig']
-  },
-  TextArea: {
-    atomic: true,
-    attrs: [
-      'placeholderColor', 'placeholderFont', 'textAlign', 'caretColor', 'onChange'
-    ]
-  },
-  TextInput: {
-    atomic: true,
-    attrs: [
-      'type', 'placeholderColor', 'placeholderFont', 'enterKeyType', 'caretColor', 'maxLength', 'onEditChanged',
-      'onSubmit', 'onChange'
-    ]
-  },
-  Marquee: {
-    atomic: true,
-    attrs: ['fontColor', 'fontSize', 'allowScale', 'fontWeight', 'fontFamily', 'onStart', 'onBounce', 'onFinish']
-  },
-  Menu: {
-    children: ['Option'],
-    attrs: ['show', 'showPosition', 'fontColor', 'fontSize', 'fontWeight', 'fontFamily'],
-  },
-  Option: {
-    parents: ['Menu'],
-    attrs: ['fontColor', 'fontSize', 'fontWeight', 'fontFamily'],
-  },
-};
+const fs = require('fs');
+const path = require('path');
+import ts from 'typescript';
+
+export const COMPONENT_MAP: any = {};
+
+export let COMMON_ATTRS: Set<string> = new Set([]);
+
+(function readComponents() {
+  const componentsFile: string = path.join(__dirname, '../components');
+  const files: string[] = fs.readdirSync(componentsFile);
+  files.forEach(function(item) {
+    const fPath: string = path.join(componentsFile, item);
+    const json: any = require(fPath);
+    const stat: any = fs.statSync(fPath);
+    if (stat.isFile()) {
+      if (json.name) {
+        const compName: string = json.name;
+        delete json.name;
+        COMPONENT_MAP[compName] = json;
+      } else {
+        COMMON_ATTRS = new Set(json.attrs);
+      }
+    }
+  });
+})();
 
-const COMMON_ATTRS: Set<string> = new Set([
-  'width', 'height', 'size', 'constraintSize', 'layoutPriority', 'layoutWeight',
-  'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom',
-  'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom',
-  'border', 'borderStyle', 'borderWidth', 'borderColor', 'borderRadius',
-  'backgroundColor', 'backgroundImage', 'backgroundImageSize', 'backgroundImagePosition',
-  'opacity', 'animation', 'transition',
-  'navigationTitle', 'navigationSubTitle', 'hideNavigationBar', 'hideNavigationBackButton',
-  'toolBar', 'hideToolBar', 'onClick', 'onTouch', 'onKeyEvent', 'onHover',
-  'blur', 'backdropBlur', 'windowBlur', 'translate', 'rotate', 'scale', 'transform',
-  'onAppear', 'onDisAppear', 'visibility', 'flexBasis', 'flexShrink', 'flexGrow', 'alignSelf',
-  'useAlign', 'zIndex', 'sharedTransition', 'direction', 'align', 'position', 'markAnchor', 'offset',
-  'enabled', 'aspectRatio', 'displayPriority',
-  'onDrag', 'onDragEnter', 'onDragMove', 'onDragLeave', 'onDrop',
-  'overlay', 'linearGradient', 'sweepGradient', 'radialGradient',
-  'gridOffset', 'gridSpan', 'useSizeType',
-  'motionPath', 'clip', 'shadow', 'mask',
-  'accessibilityGroup', 'accessibilityText', 'accessibilityDescription',
-  'accessibilityImportance', 'onAccessibility', 'grayscale', 'brightness', 'contrast',
-  'saturate', 'geometryTransition',
-  'bindPopup', 'colorBlend', 'invert', 'sepia', 'hueRotate', 'bindMenu'
-]);
 const TRANSITION_COMMON_ATTRS: Set<string> = new Set([
   'slide', 'translate', 'scale', 'opacity'
 ]);
@@ -397,8 +48,9 @@ export const GESTURE_ATTRS: Set<string> = new Set([
 ]);
 
 export const forbiddenUseStateType: Set<string> = new Set(['Scroller', 'SwiperScroller',
-  'VideoController', 'CustomDialogController', 'SwiperController', 'TabsController',
-  'CalendarController', 'AbilityController'
+  'VideoController', 'WebController', 'CustomDialogController', 'SwiperController', 'TabsController',
+  'CalendarController', 'AbilityController',  'RenderingContext', 'CanvasGradient', 'ImageBitmap',
+  'ImageData', 'Path2D', 'RenderingContextSettings', 'OffscreenRenderingContext'
 ]);
 
 export const INNER_COMPONENT_NAMES: Set<string> = new Set();
@@ -411,22 +63,30 @@ export const AUTOMIC_COMPONENT: Set<string> = new Set();
 export const SINGLE_CHILD_COMPONENT: Set<string> = new Set();
 export const SPECIFIC_CHILD_COMPONENT: Map<string, Set<string>> = new Map();
 export const GESTURE_TYPE_NAMES: Set<string> = new Set([
-  'TapGesture', 'LongPressGesture', 'PanGesture', 'PinchGesture', 'RotationGesture', 'GestureGroup'
+  'TapGesture', 'LongPressGesture', 'PanGesture', 'PinchGesture', 'RotationGesture', 'GestureGroup',
+  'SwipeGesture'
 ]);
 export const CUSTOM_BUILDER_METHOD: Set<string> = new Set();
+export const INNER_STYLE_FUNCTION: Map<string, ts.Block> = new Map();
+export const GLOBAL_STYLE_FUNCTION: Map<string, ts.Block> = new Map();
 
 export interface ExtendParamterInterfance {
   attribute: string,
   parameterCount: number
 }
 export const EXTEND_ATTRIBUTE: Map<string, Set<ExtendParamterInterfance>> = new Map();
+export const STYLES_ATTRIBUTE: string[] = [];
 
 export const JS_BIND_COMPONENTS: Set<string> = new Set([
   ...GESTURE_TYPE_NAMES, 'Gesture',
   'PanGestureOption', 'CustomDialogController', 'Storage', 'Scroller', 'SwiperController',
-  'TabsController', 'CalendarController', 'AbilityController', 'VideoController'
+  'TabsController', 'CalendarController', 'AbilityController', 'VideoController', 'WebController',
+  'RenderingContext', 'CanvasGradient', 'ImageBitmap', 'ImageData', 'Path2D','RenderingContextSettings',
+  'OffscreenRenderingContext', 'AlertDialog'
 ]);
 
+export const NEEDPOP_COMPONENT: Set<string> = new Set(['Blank', 'Search']);
+
 (function initComponent() {
   Object.keys(COMPONENT_MAP).forEach((componentName) => {
     INNER_COMPONENT_NAMES.add(componentName);