@tarojs/helper 3.8.0-canary.0 → 4.0.0-beta.0

package/swc/plugin-compile-mode/src/utils/harmony/components.rs

@@ -0,0 +1,61 @@
+pub fn get_component_attr_str (node_name: &str, tag_name: &str) -> String {
+  if tag_name == "text" {
+    format!(".textStyle(getNormalAttributes(this.{} as TaroElement))\n.textAttr(getFontAttributes(this.{} as TaroElement))", node_name, node_name)
+  } else if tag_name == "image" {
+    format!(".attrsImage(getNormalAttributes(this.{} as TaroElement))", node_name)
+  } else {
+    format!(".attrs(getNormalAttributes(this.{} as TaroElement))", node_name)
+  }
+}
+
+pub fn get_component_style_str (node_name: &str, tag_name: &str) -> String {
+  format!(
+r#"{}
+.onVisibleAreaChange(getNodeThresholds(this.{node_id} as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.{node_id} as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+.onAreaChange(getComponentEventCallback(this.{node_id} as TaroElement, AREA_CHANGE_EVENT_NAME, res => {{
+  const eventResult: TaroAny = res.eventResult
+  this.nodeInfoMap[this.{node_id}._nid].areaInfo = eventResult[1]
+}}))"#,
+    get_component_attr_str(node_name, tag_name),
+    node_id = node_name,
+  )
+}
+
+
+pub fn get_view_component_str (node_name: &str, child_content: &str) -> String {
+  format!("Flex(FlexManager.flexOptions(this.{node_id} as TaroElement)) {{{children}}}\n{style}",
+    node_id = node_name,
+    children = match child_content {
+      "" => "".to_string(),
+      _ => format!("\n{}", child_content)
+    },
+    style = get_component_style_str(node_name, "view")
+  )
+}
+
+pub fn get_image_component_str (node_name: &str) -> String {
+  format!("Image((this.{node_id} as TaroElement).getAttribute('src'))\n.objectFit(getImageMode((this.{node_id} as TaroElement).getAttribute('mode')))\n{style}",
+    node_id = node_name,
+    style = get_component_style_str(node_name, "image")
+  )
+}
+
+pub fn get_text_component_str (node_name: &str) -> String {
+  format!("Text(this.{node_id}.textContent)\n{style}",
+    node_id = node_name,
+    style = get_component_style_str(node_name, "text")
+  )
+}
+
+
+pub fn create_component_event (event_name: &str, node_name: &str) -> String {
+  let process_event_trigger_name = |name: &str| -> String {
+    if name == "touch" {
+      String::from("TOUCH_EVENT_MAP.get(e.type)")
+    } else {
+      format!("'{}'", name)
+    }
+  };
+
+  format!("\n.{}(e => eventHandler(e, {}, this.{} as TaroElement))", event_name, process_event_trigger_name(&event_name.get(2..).unwrap().to_lowercase()), node_name)
+}

package/swc/plugin-compile-mode/src/utils/harmony/mod.rs

@@ -0,0 +1 @@
+pub mod components;

package/swc/plugin-compile-mode/src/utils/mod.rs

@@ -1,7 +1,8 @@
 use swc_core::{
     ecma::{
         atoms::Atom,
-        ast::*
+        ast::*,
+        utils::quote_str,
     },
     common::{
         iter::IdentifyLast,
@@ -11,8 +12,11 @@ use swc_core::{
 };
 use std::collections::HashMap;
 
-use self::constants::*;
+use self::{constants::*, harmony::components::get_text_component_str};
+use crate::PluginConfig;
+use crate::transform_harmony::TransformVisitor;
 
+pub mod harmony;
 pub mod constants;
 
 pub fn named_iter (str: String) -> impl FnMut() -> String {
@@ -25,7 +29,7 @@ pub fn named_iter (str: String) -> impl FnMut() -> String {
 
 pub fn jsx_text_to_string (atom: &Atom) -> String {
     let content = atom.replace("\t", " ");
-    
+
     let res = content
         .lines()
         .enumerate()
@@ -55,11 +59,7 @@ pub fn jsx_text_to_string (atom: &Atom) -> String {
     res
 }
 
-pub fn is_empty_jsx_text_line (atom: &Atom) -> bool {
-    let str = jsx_text_to_string(atom);
-    str.is_empty()
-}
-
+// 将驼峰写法转换为 kebab-case，即 aBcD -> a-bc-d
 pub fn to_kebab_case (val: &str) -> String {
     let mut res = String::new();
     val
@@ -96,11 +96,12 @@ pub fn convert_jsx_attr_key (jsx_key: &str, adapter: &HashMap<String, String>) -
     to_kebab_case(jsx_key)
 }
 
+pub fn check_is_event_attr (val: &str) -> bool {
+    val.starts_with("on") && val.chars().nth(2).is_some_and(|x| x.is_uppercase())
+}
+
 pub fn identify_jsx_event_key (val: &str) -> Option<String> {
-    if 
-        val.starts_with("on") &&
-        val.chars().nth(2).is_some_and(|x| x.is_uppercase())
-    {
+    if check_is_event_attr(val) {
         let event_name = val.get(2..).unwrap().to_lowercase();
         let event_name = if event_name == "click" {
             "tap"
@@ -113,6 +114,16 @@ pub fn identify_jsx_event_key (val: &str) -> Option<String> {
     }
 }
 
+pub fn is_inner_component (el: &mut Box<JSXElement>, config: &PluginConfig) -> bool {
+    let opening = &el.opening;
+    if let JSXElementName::Ident(Ident { sym, .. }) = &opening.name {
+        let name = to_kebab_case(&sym);
+        return config.components.get(&name).is_some();
+    }
+
+    false
+}
+
 pub fn is_static_jsx (el: &Box<JSXElement>) -> bool {
     if el.opening.attrs.len() > 0 {
         return false
@@ -170,12 +181,62 @@ pub fn create_jsx_lit_attr (name: &str, lit: Lit) -> JSXAttrOrSpread {
     })
 }
 
+pub fn create_jsx_dynamic_id (el: &mut JSXElement, visitor: &mut TransformVisitor) -> String {
+    let node_name = (visitor.get_node_name)();
+
+    visitor.node_name_vec.push(node_name.clone());
+    el.opening.attrs.push(create_jsx_lit_attr(DYNAMIC_ID, node_name.clone().into()));
+    node_name
+}
+
+pub fn add_spaces_to_lines(input: &str) -> String {
+    let count = 2;
+    let mut result = String::new();
+
+    for line in input.lines() {
+        let spaces = " ".repeat(count);
+        result.push_str(&format!("{}{}\n", spaces, line));
+    }
+
+    result
+}
+
+pub fn get_harmony_component_style (visitor: &mut TransformVisitor) -> String {
+    let component_set = &visitor.component_set;
+    let mut harmony_component_style = String::new();
+
+    let mut build_component = |component_tag: &str, component_style: &str| {
+        if component_set.contains(component_tag) {
+            harmony_component_style.push_str(component_style);
+        }
+    };
+
+    build_component(VIEW_TAG, HARMONY_FLEX_STYLE_BIND);
+    build_component(IMAGE_TAG, HARMONY_IMAGE_STYLE_BIND);
+    build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND);
+
+    harmony_component_style
+}
+
+pub fn check_jsx_element_has_compile_ignore (el: &JSXElement) -> bool {
+    for attr in &el.opening.attrs {
+        if let JSXAttrOrSpread::JSXAttr(JSXAttr { name, .. }) = attr {
+            if let JSXAttrName::Ident(Ident { sym, .. }) = name {
+                if sym == COMPILE_IGNORE {
+                    return true
+                }
+            }
+        }
+    }
+    false
+}
+
 /**
  * identify: `xx.map(function () {})` or `xx.map(() => {})`
  */
 pub fn is_call_expr_of_loop (callee_expr: &mut Box<Expr>, args: &mut Vec<ExprOrSpread>) -> bool {
     if let Expr::Member(MemberExpr { prop: MemberProp::Ident(Ident { sym, ..}), .. }) = &mut **callee_expr {
-        if &**sym == "map" {
+        if sym == "map" {
             if let Some(ExprOrSpread { expr, .. }) = args.get_mut(0) {
                 return expr.is_arrow() || expr.is_fn_expr()
             }
@@ -184,6 +245,21 @@ pub fn is_call_expr_of_loop (callee_expr: &mut Box<Expr>, args: &mut Vec<ExprOrS
     return false
 }
 
+pub fn is_render_fn (callee_expr: &mut Box<Expr>) -> bool {
+    fn is_starts_with_render (name: &str) -> bool {
+        name.starts_with("render")
+    }
+    match &**callee_expr {
+        Expr::Member(MemberExpr { prop: MemberProp::Ident(Ident { sym: name, .. }), .. }) => {
+            is_starts_with_render(name)
+        },
+        Expr::Ident(Ident { sym: name, .. }) => {
+            is_starts_with_render(name)
+        },
+        _ => false
+    }
+}
+
 pub fn extract_jsx_loop <'a> (callee_expr: &mut Box<Expr>, args: &'a mut Vec<ExprOrSpread>) -> Option<&'a mut Box<JSXElement>> {
     if is_call_expr_of_loop(callee_expr, args) {
         if let Some(ExprOrSpread { expr, .. }) = args.get_mut(0) {
@@ -194,7 +270,7 @@ pub fn extract_jsx_loop <'a> (callee_expr: &mut Box<Expr>, args: &'a mut Vec<Exp
                 if return_value.is_jsx_element() {
                     let el = return_value.as_mut_jsx_element().unwrap();
                     el.opening.attrs.push(create_jsx_bool_attr(COMPILE_FOR));
-                    el.opening.attrs.push(create_jsx_lit_attr(COMPILE_FOR_KEY, Lit::Str(Str { span, value: "sid".into(), raw: None})));
+                    el.opening.attrs.push(create_jsx_lit_attr(COMPILE_FOR_KEY, Lit::Str(quote_str!("sid"))));
                     return Some(el)
                 }
                 None
@@ -226,6 +302,41 @@ pub fn extract_jsx_loop <'a> (callee_expr: &mut Box<Expr>, args: &'a mut Vec<Exp
     None
 }
 
+pub fn check_jsx_element_children_exist_loop (el: &mut JSXElement) -> bool {
+    for child in el.children.iter_mut() {
+        if let JSXElementChild::JSXExprContainer(JSXExprContainer { expr: JSXExpr::Expr(expr), .. }) = child {
+            if let Expr::Call(CallExpr { callee: Callee::Expr(callee_expr), args, .. }) = &mut **expr {
+                if is_call_expr_of_loop(callee_expr, args) {
+                    return true
+                }
+            }
+        }
+    }
+
+    false
+}
+
+pub fn create_original_node_renderer_foreach (visitor: &mut TransformVisitor) -> String {
+    add_spaces_to_lines(format!("ForEach(this.{}.childNodes, (item: TaroElement) => {{\n  createNode(item)\n}}, (item: TaroElement) => item._nid)", visitor.get_current_node_path()).as_str())
+}
+
+pub fn create_original_node_renderer (visitor: &mut TransformVisitor) -> String {
+    add_spaces_to_lines(format!("createNode(this.{} as TaroElement)", visitor.get_current_node_path()).as_str())
+}
+
+pub fn create_normal_text_template (visitor: &mut TransformVisitor) -> String {
+    let node_path = visitor.get_current_node_path();
+    let code = add_spaces_to_lines(get_text_component_str(&node_path).as_str());
+
+    visitor.component_set.insert(TEXT_TAG.clone().to_string());
+
+    code
+}
+
+pub fn gen_template_v (node_path: &str) -> String {
+    format!("{{{{{}.v}}}}", node_path)
+}
+
 #[test]
 fn test_jsx_text () {
     assert_eq!("   span  ", jsx_text_to_string(&"   span  ".into()));
@@ -233,4 +344,4 @@ fn test_jsx_text () {
     assert_eq!("a   b", jsx_text_to_string(&"   \n    \n   a   b  \n   ".into()));
     assert_eq!("", jsx_text_to_string(&"\n\n\n\n\n\n                   \n\n                ".into()));
     assert_eq!("", jsx_text_to_string(&"".into()));
-}
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js

@@ -0,0 +1,8 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view bindtap="eh" data-sid="{{i.cn[0].sid}}" id="{{i.cn[0].sid}}"></view><view bindanimationstart="eh" data-sid="{{i.cn[1].sid}}" id="{{i.cn[1].id}}"></view><image bindload="eh" data-sid="{{i.cn[2].sid}}" id="myImg"></image></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            <View onClick={handleViewClick}></View>
+            <View onAnimationStart={() => {}} id={myId}></View>
+            <Image onLoad={() => {}} />
+          </View>
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_keep_static_attrs_only_in_templates.js

@@ -0,0 +1,8 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><image class="my_img" lazy-load="true" src="https://taro.com/x.png"></image></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+
+            <Image key="image" ref={myRefCb}/>
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_turn_dynamic_attrs.js

@@ -0,0 +1,11 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view class="{{i.cn[0].cl}}"><view custom-prop="{{i.cn[0].cn[0].customProp}}" style="{{i.cn[0].cn[0].st}}"></view><view hover-stay-time="{{xs.b(i.cn[0].cn[1].p3,400)}}"><view hover-class="{{xs.b(i.cn[0].cn[1].cn[0].p1,\'none\')}}"></view></view></view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            <View class={myClass}>
+              <View style={myStyle} customProp={myCustomProp}></View>
+              <View hoverStayTime={myTime}>
+                <View hoverClass={myHoverClass}></View>
+              </View>
+            </View>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/children.rs/should_render_native_component.js

@@ -0,0 +1,7 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><template is="{{xs.a(c, i.cn[0].nn, l)}}" data="{{i:i.cn[0],c:c+1,l:xs.f(l,i.cn[0].nn)}}" /><template is="{{xs.a(c, i.cn[1].nn, l)}}" data="{{i:i.cn[1],c:c+1,l:xs.f(l,i.cn[1].nn)}}" /></view></template>'
+function Index() {
+    return <View compileMode="f0t0">
+            <comp />
+            <comp type="primary" loading loading-text={loadingText} onMyevent={() => {}} />
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/children.rs/should_render_react_component.js

@@ -0,0 +1,7 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><template is="{{xs.a(c, i.cn[0].nn, l)}}" data="{{i:i.cn[0],c:c+1,l:xs.f(l,i.cn[0].nn)}}" /><template is="{{xs.a(c, i.cn[1].nn, l)}}" data="{{i:i.cn[1],c:c+1,l:xs.f(l,i.cn[1].nn)}}" /></view></template>'
+function Index() {
+    return <View compileMode="f0t0">
+            <Foo/>
+            <Foo title={myTitle} loading onClick={()=>{}}/>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/children.rs/should_support_fragment.js

@@ -0,0 +1,44 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view>{{i.cn[0].v}}<view>{{i.cn[1].cn[0].v}}</view><view>hello</view><view><view>{{i.cn[2].cn[0].cn[0].v}}</view><view>hello!</view></view><view>{{i.cn[3].cn[0].v}}</view><view>{{i.cn[4].cn[0].v}}</view><view>{{i.cn[5].cn[0].v}}</view><view>hello!!</view><view>hello!!!</view><view>{{i.cn[6].cn[0].v}}</view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+
+            {content0}
+
+            <>
+
+              <View>{content1}</View>
+
+              
+
+              <View>
+
+                <>
+
+                  <View>{content2}</View>
+
+                  
+
+                </>
+
+              </View>
+
+              <View>{content3}</View>
+
+            </>
+
+            <View>{content4}</View>
+
+            <>
+
+              <View>{content5}</View>
+
+            </>
+
+            
+
+            
+
+            <View>{content6}</View>
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/children.rs/should_support_render_fn.js

@@ -0,0 +1,8 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view><template is="{{xs.a(c, i.cn[0].cn[0].nn, l)}}" data="{{i:i.cn[0].cn[0],c:c+1,l:xs.f(l,i.cn[0].cn[0].nn)}}" /></view><view><template is="{{xs.a(c, i.cn[1].cn[0].nn, l)}}" data="{{i:i.cn[1].cn[0],c:c+1,l:xs.f(l,i.cn[1].cn[0].nn)}}" /></view><view>{{i.cn[2].cn[0].v}}</view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            <View>{renderHeader()}</View>
+            <View>{this.methods.renderFooter()}</View>
+            <View>{normalFunc()}</View>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/condition.rs/should_support_and_expr.js

@@ -0,0 +1,14 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view hover-class="{{xs.b(i.cn[0].p1,\'none\')}}" wx:if="{{i.cn[0].compileIf}}">{{i.cn[0].cn[0].v}}</view><view hover-class="{{xs.b(i.cn[1].p1,\'none\')}}" wx:if="{{i.cn[1].compileIf}}">{{i.cn[1].cn[0].v}}</view><view hover-class="{{xs.b(i.cn[2].p1,\'none\')}}" wx:if="{{i.cn[2].compileIf}}">{{i.cn[2].cn[0].v}}</view>{{i.cn[3].v==="compileIgnore"?"":i.cn[3].v}}<view bindtap="eh" data-sid="{{i.cn[4].sid}}" id="{{i.cn[4].sid}}" wx:if="{{i.cn[4].compileIf}}"></view><view hover-class="{{xs.b(i.cn[5].p1,\'none\')}}"></view><view><block wx:if="{{i.cn[6].cn[0].compileIf}}">{{i.cn[6].cn[0].cn[0].v}}</block></view><view><block wx:if="{{i.cn[7].cn[0].compileIf}}">{{i.cn[7].cn[0].cn[0].v}}</block></view><view><block wx:if="{{i.cn[8].cn[0].compileIf}}">{{i.cn[8].cn[0].cn[0].v}}</block></view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            {condition ? <View hoverClass={myClass} compileIf={condition}>{content}</View> : <View/>}
+            {condition ? <View hoverClass={myClass} compileIf={condition}>{content}</View> : <View/>}
+            {condition1 && "condition2" && condition3 ? <View hoverClass={myClass} compileIf={condition1 && "condition2" && condition3}>{content}</View> : <View/>}
+            {condition1 ? 'Hello' : "compileIgnore"}
+            {condition1 ? <View onClick={()=>condition2 && doSth()} compileIf={condition1}/> : <View/>}
+            <View hoverClass={myClass}></View>
+            <View>{condition1 ? <block compileIf={condition1}>{ident}</block> : <block/>}</View>
+            <View>{condition1 ? <block compileIf={condition1}>{obj.property}</block> : <block/>}</View>
+            <View>{condition1 ? <block compileIf={condition1}>{fn()}</block> : <block/>}</View>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/condition.rs/should_support_conditional_expr.js

@@ -0,0 +1,15 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view hover-class="{{xs.b(i.cn[0].p1,\'none\')}}" wx:if="{{i.cn[0].compileIf}}">{{i.cn[0].cn[0].v}}</view><text selectable="true" wx:else>hello</text><block wx:if="{{i.cn[1].compileIf}}"><view wx:if="{{i.cn[1].cn[0].compileIf}}">{{i.cn[1].cn[0].cn[0].v}}</view><text wx:else>{{i.cn[1].cn[0].cn[0].v}}</text></block><view wx:else>{{i.cn[1].cn[0].v}}</view><view wx:if="{{i.cn[2].compileIf}}">{{i.cn[2].cn[0].v}}</view><block wx:else><view wx:if="{{i.cn[2].cn[0].compileIf}}">{{i.cn[2].cn[0].cn[0].v}}</view><text wx:else>{{i.cn[2].cn[0].cn[0].v}}</text></block><view wx:if="{{i.cn[3].compileIf}}">{{i.cn[3].cn[0].v}}</view><block wx:else><view wx:if="{{i.cn[3].cn[0].compileIf}}">{{i.cn[3].cn[0].cn[0].v}}</view><text wx:else>{{i.cn[3].cn[0].cn[0].v}}</text></block><block wx:if="{{i.cn[4].compileIf}}"><view wx:if="{{i.cn[4].cn[0].compileIf}}">{{i.cn[4].cn[0].cn[0].v}}</view></block><view wx:else>{{i.cn[4].cn[0].v}}</view><view wx:if="{{i.cn[5].compileIf}}">{{i.cn[5].cn[0].v}}</view><block wx:else><view wx:if="{{i.cn[5].cn[0].compileIf}}">{{i.cn[5].cn[0].cn[0].v}}</view></block><block wx:if="{{i.cn[6].compileIf}}">{{i.cn[6].cn[0].v}}</block><block wx:else>{{i.cn[6].cn[0].v}}</block><view class="{{i.cn[7].cl}}" wx:if="{{i.cn[7].compileIf}}"></view><view wx:else></view><view wx:if="{{i.cn[8].compileIf}}"><view wx:if="{{i.cn[8].cn[0].compileIf}}"></view><view wx:else></view></view><view wx:else></view><view hover-class="{{xs.b(i.cn[9].p1,\'none\')}}"></view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            {condition ? <View hoverClass={myClass} compileIf={condition}>{content}</View> : <Text></Text>}
+            {condition1 ? <block compileIf={condition1}>{condition2 ? <View compileIf={condition2}>{a}</View> : <Text>{b}</Text>}</block> : <View>{c}</View>}
+            {condition1 ? <View compileIf={condition1}>{a}</View> : <block>{condition2 ? <View compileIf={condition2}>{b}</View> : <Text>{c}</Text>}</block>}
+            {condition1 ? <View compileIf={condition1}>{a}</View> : <block>{condition2 ? <View compileIf={condition2}>{b}</View> : <Text>{c}</Text>}</block>}
+            {condition1 ? <block compileIf={condition1}>{condition2 ? <View compileIf={condition2}>{a}</View> : <View/>}</block> : <View>{b}</View>}
+            {condition1 ? <View compileIf={condition1}>{a}</View> : <block>{condition2 ? <View compileIf={condition2}>{b}</View> : <View/>}</block>}
+            {condition1 ? <block compileIf={condition1}>{"someText"}</block> : <block>{789}</block>}
+            {condition1 ? <View className={condition2 ? '' : ''} compileIf={condition1}/> : <View/>}
+            {condition1 ? <View compileIf={condition1}>{condition2 ? <View compileIf={condition2}/> : <View/>}</View> : <View/>}
+            <View hoverClass={myClass}></View>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/entry.rs/should_support_multi_compile_mode.js

@@ -0,0 +1,10 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><image src="{{i.p3}}"></image></template>';
+const TARO_TEMPLATES_f0t1 = '<template name="tmpl_0_f0t1"><view><text>{{i.cn[0].cn[0].v}}</text></view></template>';
+function Index() {
+    return <View>
+            <Image src={mySrc} compileMode="f0t0" />
+            <View compileMode="f0t1">
+              <Text>{myText}</Text>
+            </View>
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js

@@ -0,0 +1,183 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+function attrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+@Extend(Image)
+function attrsImage (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+function getImageMode (mode: string): ImageFit {
+  switch (mode) {
+    case 'aspectFit': return ImageFit.Contain
+    case 'aspectFill': return ImageFit.Cover
+    case 'scaleToFill': return ImageFit.Fill
+    case 'widthFix': return ImageFit.Auto
+    case 'heightFix': return ImageFit.Auto
+    default: return ImageFit.Contain
+  }
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  @State node1: TaroElement = new TaroIgnoreElement()
+  @State node2: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Flex(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = eventResult[1]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node0.childNodes[1] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = eventResult[1]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[1] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node1 as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node1 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node1._nid].areaInfo = eventResult[1]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node1 as TaroElement))
+      Flex(FlexManager.flexOptions(this.node2 as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node2 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node2._nid].areaInfo = eventResult[1]
+      }))
+      Image((this.node0.childNodes[4] as TaroElement).getAttribute('src'))
+      .objectFit(getImageMode((this.node0.childNodes[4] as TaroElement).getAttribute('mode')))
+      .attrsImage(getNormalAttributes(this.node0.childNodes[4] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[4] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[4] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[4] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[4]._nid].areaInfo = eventResult[1]
+      }))
+      .onComplete(e => eventHandler(e, 'complete', this.node0.childNodes[4] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node0.childNodes[5] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[5] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[5] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[5] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[5]._nid].areaInfo = eventResult[1]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[5] as TaroElement))
+      .onTouch(e => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node0.childNodes[5] as TaroElement))
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0">
+
+            <View onClick={()=>{
+        console.log("click done");
+    }}></View>
+
+            <View onClick={function clickFn() {
+        console.log("click done");
+    }}></View>
+
+            <View onClick={handleViewClick} _dynamicID="node1"></View>
+
+            <View onAnimationStart={()=>{}} id={myId} _dynamicID="node2"></View>
+
+            <Image onLoad={()=>{
+        console.log("load done");
+    }} id="myImg"/>
+
+            <View onClick={()=>{
+        console.log("click done");
+    }} onTouchStart={()=>{
+        console.log("touch start done");
+    }}/>
+
+          </View>;
+}