From c8fd0c6ff20cf651ecc2037ab57b8250a1bc3ab6 Mon Sep 17 00:00:00 2001 From: mayintao3 Date: Mon, 29 Apr 2024 15:00:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90flex=E6=94=AF?= =?UTF-8?q?=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/transform_harmony.rs | 13 +-- .../src/utils/constants.rs | 50 ------------ .../src/utils/harmony/components.rs | 80 +++++++------------ 3 files changed, 36 insertions(+), 107 deletions(-) diff --git a/crates/swc_plugin_compile_mode/src/transform_harmony.rs b/crates/swc_plugin_compile_mode/src/transform_harmony.rs index 94c2a50fa556..9d4795795c88 100644 --- a/crates/swc_plugin_compile_mode/src/transform_harmony.rs +++ b/crates/swc_plugin_compile_mode/src/transform_harmony.rs @@ -11,6 +11,7 @@ pub struct PreVisitor {} pub enum EtsDirection { Row, Column, + Flex, } impl PreVisitor { @@ -145,7 +146,6 @@ impl TransformVisitor { } } - pub fn get_dynmaic_node_name(&mut self, name: String) -> String { let node_name = if self.deal_loop_now { name } else { format!("this.{}", name) }; node_name.to_string() @@ -433,9 +433,11 @@ impl TransformVisitor { let jsx_attr_name = name.to_string(); if jsx_attr_name == DIRECTION_ATTR { if let Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))) = &jsx_attr.value { - if value == "row" { - direction = EtsDirection::Row; - } + direction = match value.as_str() { + "row" => EtsDirection::Row, + "flex" => EtsDirection::Flex, + _ => EtsDirection::Column, + }; } } else if jsx_attr_name == STYLE_ATTR { if @@ -620,7 +622,8 @@ export default struct TARO_TEMPLATES_{name} {{ "#, name = tmpl_name, content = tmpl_main_contents - ).as_str() + utils::get_harmony_component_style(self).as_str(); + ).as_str() + + utils::get_harmony_component_style(self).as_str(); self.templates.insert(tmpl_name, format!("`{}`", tmpl_contents)); diff --git a/crates/swc_plugin_compile_mode/src/utils/constants.rs b/crates/swc_plugin_compile_mode/src/utils/constants.rs index c7bcfc73eac2..5ad0ca6b7526 100644 --- a/crates/swc_plugin_compile_mode/src/utils/constants.rs +++ b/crates/swc_plugin_compile_mode/src/utils/constants.rs @@ -210,53 +210,3 @@ function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) { } "#; -// pub const HARMONY_TEXT_STYLE_BIND: &str = r#"@Extend(Text) -// function textNormalFontStyle (style: HarmonyStyle) { -// .id(style.id) -// .key(style.id) -// .opacity(style.opacity) -// .fontColor(style.color) -// .fontSize(style.fontSize) -// .fontWeight(style.fontWeight) -// .fontStyle(style.fontStyle) -// .fontFamily(style.fontFamily) -// .lineHeight(style.lineHeight) -// .decoration({ -// type: style.textDecoration?.type, -// color: style.color -// }) -// } - -// @Extend(Text) -// function textSpecialFontStyle(attr: TaroTextStyleType) { -// .textAlign(attr.textAlign) -// .textOverflow(attr.textOverflow) -// .maxLines(attr.WebkitLineClamp) -// .letterSpacing(attr.letterSpacing) -// } - -// function getButtonFontSize (node: TaroButtonElement) { -// const isMini = node._attrs.size === 'mini' - -// return isMini ? convertNumber2VP(26) : convertNumber2VP(36) -// } -// "#; - -// pub const HARMONY_TEXT_STYLE_BIND: &str = r#"function getButtonFontSize (node: TaroButtonElement): string | number { -// const isMini = node._attrs.size === 'mini' - -// return isMini ? convertNumber2VP(26) : convertNumber2VP(36) -// } -// "#; - -// pub const HARMONY_IMAGE_STYLE_BIND: &str = r#"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 -// } -// } -// "#; diff --git a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs index a5aa7fc55130..fd4565e7dcc0 100644 --- a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs +++ b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs @@ -1,4 +1,4 @@ -use crate::{ transform_harmony::EtsDirection, utils }; +use crate::{ transform_harmony::EtsDirection, utils::{ self, harmony::components } }; pub fn get_component_attr_str(node_name: &str, tag_name: &str) -> String { if tag_name == "text" { @@ -29,18 +29,33 @@ pub fn get_component_style_str(node_name: &str, tag_name: &str) -> String { } pub fn get_view_component_str(node_name: &str, child_content: &str, direction: EtsDirection) -> String { - let container = match direction { - EtsDirection::Row => "Row", - EtsDirection::Column => "Column", + let component_name; + let mut component_param = "".to_string(); + let component_children = match child_content { + "" => "".to_string(), + _ => format!("\n{}", child_content), }; + + match direction { + EtsDirection::Row => { + component_name = "Row"; + } + EtsDirection::Column => { + component_name = "Column"; + } + EtsDirection::Flex => { + component_name = "Flex"; + component_param = format!("FlexManager.flexOptions({})", node_name); + } + } + let style = get_component_style_str(node_name, component_name.to_lowercase().as_str()); + format!( - "{container}() {{{children}}}\n{style}", - container = container, - children = match child_content { - "" => "".to_string(), - _ => format!("\n{}", child_content), - }, - style = get_component_style_str(node_name, container.to_lowercase().as_str()) + "{name}({param}) {{{children}}}\n{style}", + name = component_name, + param = component_param, + children = component_children, + style = style ) } @@ -52,48 +67,9 @@ pub fn get_image_component_str(node_name: &str) -> String { ) } -// pub fn get_text_component_str(node_name: &str) -> String { -// format!( -// "if ({node_id}.nodeType === NodeType.TEXT_NODE) {{ -// if ({node_id}.parentNode) {{ -// if (({node_id}.parentNode as TaroElement).tagName === 'BUTTON') {{ -// Text({node_id}.textContent) -// .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement, {{ -// fontSize: getButtonFontSize({node_id}.parentNode as TaroButtonElement), -// color: getButtonColor({node_id}.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get(({node_id}.parentNode as TaroButtonElement)._attrs.type || '').text) -// }})) -// }} else {{ -// Text({node_id}.textContent) -// .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement)) -// .width(getTextInViewWidth({node_id}.parentElement)) -// }} -// }} -// }} else {{ -// Text({node_id}.textContent) {{ -// // text 下还有标签 -// if ({node_id}.childNodes.length > 1 || (({node_id}.childNodes[0] && {node_id}.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {{ -// ForEach({node_id}.childNodes, (item: TaroElement) => {{ -// createTextChildNode(item, getSpanVerticalAlign(({node_id} as TaroElement).hmStyle?.verticalAlign)) -// }}, (item: TaroElement) => item._nid) -// }} -// }} -// .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', {node_id} as TaroElement), {node_id} as TaroElement, ['click'])) -// .attributeModifier(textModify.setNode({node_id} as TaroElement).withNormalStyle()) -// .onVisibleAreaChange(getNodeThresholds(({node_id} as TaroElement)) || [0.0, 1.0], getComponentEventCallback(({node_id} as TaroElement), VISIBLE_CHANGE_EVENT_NAME)) -// .onAreaChange(getComponentEventCallback(({node_id} as TaroElement), AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {{ -// ({node_id} as TaroElement)._nodeInfo.areaInfo = res[1] -// }})) -// }}", -// node_id = node_name -// ) -// } - pub fn get_text_component_str(node_name: &str) -> String { - format!( - "createText({node_id} as TaroTextElement)", - node_id = node_name - ) - } + format!("createText({node_id} as TaroTextElement)", node_id = node_name) +} pub fn create_component_event(event_name: &str, node_name: &str) -> String { let process_event_trigger_name = |name: &str| -> String {