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

package/swc/plugin-compile-mode/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "example_plugin"
+name = "swc_plugin_compile_mode"
 version = "0.1.0"
 edition = "2021"
 
@@ -7,13 +7,15 @@ edition = "2021"
 crate-type = ["cdylib"]
 
 [profile.release]
-lto = true
+lto = false # https://github.com/swc-project/swc/issues/7479
 
 [dependencies]
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0.105"
-swc_atoms = "0.5.8"
-swc_core = { version = "0.79.*", features = ["ecma_plugin_transform", "__parser", "ecma_codegen"] }
+swc_core = { version = "0.86.*", features = ["ecma_plugin_transform", "ecma_utils"] }
+
+[dev-dependencies]
+swc_core = { version = "0.86.*", features = ["ecma_plugin_transform", "ecma_utils", "ecma_parser", "ecma_codegen"] }
 
 # .cargo/config defines few alias to build plugin.
 # cargo build-wasi generates wasm-wasi32 binary

package/swc/plugin-compile-mode/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "swc-plugin-taro-compile-mode",
+  "version": "0.1.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [
+    "swc-plugin"
+  ],
+  "main": "target/wasm32-wasi/release/swc_plugin_compile_mode.wasm",
+  "files": [
+    "target"
+  ],
+  "preferUnplugged": true
+}

package/swc/plugin-compile-mode/src/lib.rs

@@ -1,7 +1,7 @@
 use swc_core::{
     ecma::{
         ast::Program,
-        visit::{as_folder, FoldWith},
+        visit::{as_folder, FoldWith, VisitMut},
     },
     plugin::{
         plugin_transform,
@@ -14,14 +14,26 @@ use core::fmt::Debug;
 
 mod utils;
 mod transform;
+mod transform_harmony;
 #[cfg(test)]
 mod tests;
 
+
 #[derive(Serialize, Deserialize, Debug)]
 pub struct PluginConfig {
     pub tmpl_prefix: String,
+    #[serde(default)]
+    pub is_harmony: bool,
+    #[serde(default)]
     pub components: HashMap<String, HashMap<String, String>>,
+    #[serde(default)]
     pub adapter: HashMap<String, String>,
+    #[serde(default)]
+    pub support_events: Vec<String>,
+    #[serde(default)]
+    pub support_components: Vec<String>,
+    #[serde(default)]
+    pub event_adapter: HashMap<String, String>,
 }
 
 /// An example plugin function with macro support.
@@ -47,6 +59,13 @@ pub fn process_transform(program: Program, metadata: TransformPluginProgramMetad
             .unwrap()
     )
     .unwrap();
-    let visitor = transform::TransformVisitor::new(config);
+
+    // 如果 config 中的 is_harmony 字段为 true 则走 harmony_transform, 否则则走 transform
+    let visitor: Box<dyn VisitMut> = if config.is_harmony {
+        Box::new(transform_harmony::TransformVisitor::new(config))
+    } else {
+        Box::new(transform::TransformVisitor::new(config))
+    };
+
     program.fold_with(&mut as_folder(visitor))
 }

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

@@ -9,18 +9,10 @@ test!(
     function Index () {
         return (
           <View compileMode>
-            <Image className="my_img" src="https://taro.com/x.png" lazyLoad />
+            <Image className="my_img" src="https://taro.com/x.png" lazyLoad key="image" ref={myRefCb} />
           </View>
         )
       }
-    "#,
-    r#"
-    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">
-            
-          </View>
-    }
     "#
 );
 
@@ -41,19 +33,6 @@ test!(
           </View>
         )
       }
-    "#,
-    r#"
-    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>
-    }
     "#
 );
 
@@ -71,15 +50,5 @@ test!(
           </View>
         )
       }
-    "#,
-    r#"
-    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/src/tests/children.rs

@@ -0,0 +1,86 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_render_fn,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <View>{renderHeader()}</View>
+            <View>{this.methods.renderFooter()}</View>
+            <View>{normalFunc()}</View>
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_fragment,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {content0}
+            <>
+              <View>{content1}</View>
+              <View>hello</View>
+              <View>
+                <>
+                  <View>{content2}</View>
+                  <View>hello!</View>
+                </>
+              </View>
+              <View>{content3}</View>
+            </>
+            <View>{content4}</View>
+            <>
+              <View>{content5}</View>
+            </>
+            <>
+              <View>hello!!</View>
+            </>
+            <View>hello!!!</View>
+            <View>{content6}</View>
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_render_react_component,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <Foo />
+            <Foo title={myTitle} loading onClick={() => {}} />
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_render_native_component,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <comp />
+            <comp type="primary" loading loading-text={loadingText} onMyevent={() => {}} />
+          </View>
+        )
+    }
+    "#
+);

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

@@ -15,22 +15,14 @@ test!(
             )}
             {condition1 && "condition2" && condition3 && <View hoverClass={myClass}>{content}</View>}
             {condition1 && 'Hello'}
+            {condition1 && <View onClick={() => condition2 && doSth()} />}
             <View hoverClass={myClass}></View>
+            <View>{condition1 && ident}</View>
+            <View>{condition1 && obj.property}</View>
+            <View>{condition1 && fn()}</View>
           </View>
         )
     }
-    "#,
-    r#"
-    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 hover-class="{{xs.b(i.cn[4].p1,\'none\')}}"></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"}
-            <View hoverClass={myClass}></View>
-          </View>
-    }
     "#
 );
 test!(
@@ -47,25 +39,12 @@ test!(
             {condition1 ? <View>{a}</View> : (condition2 ? <View>{b}</View> : <Text>{c}</Text>)}
             {condition1 ? condition2 && <View>{a}</View> : <View>{b}</View>}
             {condition1 ? <View>{a}</View> : condition2 && <View>{b}</View>}
-            {condition1 ? "someText" : 789 }
+            {condition1 ? "someText" : 789}
+            {condition1 ? <View className={condition2 ? '' : ''} /> : <View/>}
+            {condition1 ? <View>{condition2 ? <View/> : <View/>}</View> : <View/>}
             <View hoverClass={myClass}></View>
           </View>
         )
     }
-    "#,
-    r#"
-    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 hover-class="{{xs.b(i.cn[7].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> }
-            <View hoverClass={myClass}></View>
-          </View>
-    }
     "#
-);
+);

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

@@ -16,17 +16,5 @@ test!(
           </View>
         )
       }
-    "#,
-    r#"
-    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/src/tests/harmony/attributes.rs

@@ -0,0 +1,45 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_turn_dynamic_attrs,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <View class={myClass}>
+              <View style={myStyle} customProp={myCustomProp}></View>
+              <View class="center" />
+              <View onTouch={myTime}>
+                <View hoverClass={myHoverClass}></View>
+              </View>
+            </View>
+            <Image alt="占位符" src="https://www.jd.com/test.jpg" />
+            <Image alt="占位符" src={src} />
+          </View>
+        )
+      }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_handle_events,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <View onClick={() => { console.log("click done") }}></View>
+            <View onClick={function clickFn () { console.log("click done") }}></View>
+            <View onClick={handleViewClick}></View>
+            <View onAnimationStart={() => {}} id={myId}></View>
+            <Image onLoad={() => { console.log("load done") }} id="myImg" />
+            <View onClick={() => { console.log("click done") }} onTouchStart={() => { console.log("touch start done") }} />
+          </View>
+        )
+      }
+    "#
+);

package/swc/plugin-compile-mode/src/tests/harmony/children.rs

@@ -0,0 +1,74 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_render_fn,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <View>{renderHeader()}</View>
+            <View>
+              {renderHeader()}
+              {normalFunc()}
+            </View>
+            <View>{this.methods.renderFooter()}</View>
+            <View>{normalFunc()}</View>
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_fragment,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {content0}
+            <>
+              <View>{content1}</View>
+              <View>hello</View>
+              <View>
+                <>
+                  <View>{content2}</View>
+                  <View>hello!</View>
+                </>
+              </View>
+              <View>{content3}</View>
+            </>
+            <View>{content4}</View>
+            <>
+              <View>{content5}</View>
+            </>
+            <>
+              <View>hello!!</View>
+            </>
+            <View>hello!!!</View>
+            <View>{content6}</View>
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_render_react_component,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            <Foo />
+            <Foo title={myTitle} loading onClick={() => {}} />
+          </View>
+        )
+    }
+    "#
+);

package/swc/plugin-compile-mode/src/tests/harmony/condition.rs

@@ -0,0 +1,79 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_and_expr,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {condition && <View hoverClass={myClass}>{content}</View>}
+            {condition && (
+                <View hoverClass={myClass}>{content}</View>
+            )}
+            {condition1 && "condition2" && condition3 && <View hoverClass={myClass}>{content}</View>}
+            {condition1 && 'Hello'}
+            <View hoverClass={myClass}></View>
+          </View>
+        )
+    }
+    "#
+);
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_support_conditional_expr,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {condition ? <View hoverClass={myClass}>{content}</View> : <Text selectable>hello</Text>}
+            {condition1 ? condition2 ? <View>{a}</View> : <Text>{b}</Text> : <View>{c}</View>}
+            {condition1 ? <View>{a}</View> : condition2 ? <View>{b}</View> : <Text>{c}</Text>}
+            {condition1 ? <View>{a}</View> : (condition2 ? <View>{b}</View> : <Text>{c}</Text>)}
+            {condition1 ? condition2 && <View>{a}</View> : <View>{b}</View>}
+            {condition1 ? <View>{a}</View> : condition2 && <View>{b}</View>}
+            {condition1 ? "someText" : 789 }
+            <View hoverClass={myClass}></View>
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_conditional_and_unkonw_component,
+  r#"
+  function Index () {
+      return (
+        <View compileMode>
+          {condition ? <View hoverClass='test'>hello</View> : <UnKnow selectable>hello</UnKnow>}
+        </View>
+      )
+  }
+  "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_complex_condition,
+  r#"
+  function Index () {
+      return (
+        <View compileMode>
+          {condition1 && <View onClick={() => condition2 && doSth()} />}
+          <View>{condition1 && ident}</View>
+          <View>{condition1 && obj.property}</View>
+          <View>{condition1 && fn()}</View>
+          {condition1 ? <View className={condition2 ? '' : ''} /> : <View/>}
+          {condition1 ? <View>{condition2 ? <View/> : <View/>}</View> : <View/>}
+        </View>
+      )
+  }
+  "#
+);

package/swc/plugin-compile-mode/src/tests/harmony/entry.rs

@@ -0,0 +1,67 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_single_compile_mode,
+  r#"
+  function Index () {
+    return (
+      <View compileMode></View>
+    )
+  }
+  "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_component_not_in_config,
+  r#"
+  function Index () {
+    return (
+      <View compileMode>
+        <View><Slider /></View>
+        <View><Test1 /></View>
+      </View>
+    )
+  }
+  "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_compile_child_node,
+  r#"
+  function Index () {
+    return (
+      <View compileMode>
+        <View />
+        <View>
+          <Image />
+        </View>
+      </View>
+    )
+  }
+  "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_support_multi_compile_mode,
+  r#"
+  function Index () {
+    return (
+      <View>
+        <Image src={mySrc} compileMode />
+        <View compileMode>
+          <Text>{myText}</Text>
+        </View>
+      </View>
+    )
+  }
+  "#
+);

package/swc/plugin-compile-mode/src/tests/harmony/looping.rs

@@ -0,0 +1,62 @@
+use swc_core::ecma::transforms::testing::test;
+use super::{tr, get_syntax_config};
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_loop_with_function_expr,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {list.map(function(item, index) {
+              return (
+                <View hoverClass={myClass}>
+                  <Text>index:</Text>
+                  <Text>{index}</Text>
+                  <Text>item:</Text>
+                  <Text>{item}</Text>
+                </View>
+              )
+            })}
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+    get_syntax_config(),
+    |_| tr(),
+    should_loop_with_arrow_function_with_blockstmt,
+    r#"
+    function Index () {
+        return (
+          <View compileMode>
+            {list.map(item => {
+              return <View>{item}</View>
+            })}
+          </View>
+        )
+    }
+    "#
+);
+
+test!(
+  get_syntax_config(),
+  |_| tr(),
+  should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id,
+  r#"
+  function Index () {
+      return (
+        <View compileMode>
+          <View>
+            {list.map(item => {
+              return <View>{item}</View>
+            })}
+          </View>
+        </View>
+      )
+  }
+  "#
+);