Skip to content

Commit

Permalink
Feat/compile flexview (#15596)
Browse files Browse the repository at this point in the history 
* feat: text组件改成@builder

* feat: 完成flex支持

---------

Co-authored-by: mayintao3 <mayintao3@jd.com>
  • Loading branch information
@yoturg
2 people authored and xuanzebin committed Apr 29, 2024
1 parent 4664502 commit 1fd76af
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 142 deletions.
19 changes: 9 additions & 10 deletions crates/swc_plugin_compile_mode/src/transform_harmony.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ pub struct PreVisitor {}
pub enum EtsDirection {
Row,
Column,
Flex,
}

impl PreVisitor {
Expand Down Expand Up @@ -145,10 +146,6 @@ impl TransformVisitor {
}
}

fn build_loop_children_ets_element(&mut self, el: &mut JSXElement) -> String {
"".to_owned()
}

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()
Expand Down Expand Up @@ -311,7 +308,7 @@ impl TransformVisitor {
);

children_string.push_str(code.as_str());
self.component_set.insert(TEXT_TAG.clone().to_string());
self.component_set.insert(TEXT_TAG.to_string());
retain_child_counter += 1;
}
}
Expand Down Expand Up @@ -436,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
Expand Down Expand Up @@ -608,7 +607,6 @@ impl VisitMut for TransformVisitor {
);
let tmpl_contents =
HARMONY_IMPORTER.to_owned() +
utils::get_harmony_component_style(self).as_str() +
format!(
r#"@Component
export default struct TARO_TEMPLATES_{name} {{
Expand All @@ -624,7 +622,8 @@ export default struct TARO_TEMPLATES_{name} {{
"#,
name = tmpl_name,
content = tmpl_main_contents
).as_str();
).as_str() +
utils::get_harmony_component_style(self).as_str();

self.templates.insert(tmpl_name, format!("`{}`", tmpl_contents));

Expand Down
173 changes: 87 additions & 86 deletions crates/swc_plugin_compile_mode/src/utils/constants.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,57 +61,11 @@ import type {
TaroTextStyleType
} from '@tarojs/runtime'
import { isString } from '@tarojs/shared'
";

pub const HARMONY_TEXT_HELPER_FUNCITON: &str = r#"
@Builder
function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
if (item.tagName === 'IMAGE') {
ImageSpan(item.getAttribute('src'))
.objectFit(getImageMode(item.getAttribute('mode')))
.verticalAlign(align)
.width(item._st.hmStyle.width)
.height(item._st.hmStyle.height)
.margin({
top: item._st.hmStyle.marginTop,
left: item._st.hmStyle.marginLeft,
right: item._st.hmStyle.marginRight,
bottom: item._st.hmStyle.marginBottom,
})
.padding({
top: item._st.hmStyle.paddingTop,
left: item._st.hmStyle.paddingLeft,
right: item._st.hmStyle.paddingRight,
bottom: item._st.hmStyle.paddingBottom,
})
.textBackgroundStyle({
color: item._st.hmStyle.backgroundColor,
radius: {
topLeft: item._st.hmStyle.borderTopLeftRadius,
topRight: item._st.hmStyle.borderTopRightRadius,
bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
bottomRight: item._st.hmStyle.borderBottomRightRadius,
}
})
.onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
} else if (item.nodeType === NodeType.TEXT_NODE) {
Span(item.textContent)
} else if (item.tagName === 'TEXT') {
Span(item.textContent)
.attributeModifier((new SpanStyleModify()).setNode(item as TaroTextElement))
.letterSpacing(item._st.hmStyle.letterSpacing)
.textBackgroundStyle({
color: item._st.hmStyle.backgroundColor,
radius: {
topLeft: item._st.hmStyle.borderTopLeftRadius,
topRight: item._st.hmStyle.borderTopRightRadius,
bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
bottomRight: item._st.hmStyle.borderBottomRightRadius,
}
})
.onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
}
}
class SpanStyleModify implements AttributeModifier<SpanAttribute> {
node: TaroTextElement | null = null
Expand Down Expand Up @@ -153,6 +107,12 @@ function getSpanVerticalAlign (verticalAlign?: Alignment) {
return ImageSpanAlignment.BASELINE
}
function getButtonFontSize (node: TaroButtonElement): string | number {
const isMini = node._attrs.size === 'mini'
return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
}
function getTextInViewWidth (node: TaroElement | null): TaroAny {
if (node) {
const hmStyle = node.hmStyle || {}
Expand All @@ -166,46 +126,87 @@ function getTextInViewWidth (node: TaroElement | null): TaroAny {
"#;

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_BUILDER: &str = r#"@Builder
function createText (node: TaroTextElement) {
if (node.nodeType === NodeType.TEXT_NODE) {
if (node.parentNode) {
if ((node.parentNode as TaroElement).tagName === 'BUTTON') {
Text(node.textContent)
.attributeModifier(textModify.setNode(node?.parentElement as TaroElement, {
fontSize: getButtonFontSize(node.parentNode as TaroButtonElement),
color: getButtonColor(node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((node.parentNode as TaroButtonElement)._attrs.type || '').text)
}))
} else {
Text(node.textContent)
.attributeModifier(textModify.setNode(node?.parentElement as TaroElement))
.width(getTextInViewWidth(node.parentElement))
}
}
} else {
Text(node.textContent) {
// text 下还有标签
if (node.childNodes.length > 1 || ((node.childNodes[0] && node.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {
ForEach(node.childNodes, (item: TaroElement) => {
createTextChildNode(item, getSpanVerticalAlign(node.hmStyle?.verticalAlign))
}, (item: TaroElement) => item._nid)
}
}
.onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
.attributeModifier(textModify.setNode(node).withNormalStyle())
.onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
.onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
node._nodeInfo.areaInfo = res[1]
}))
}
}
"#;
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
@Builder
function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
if (item.tagName === 'IMAGE') {
ImageSpan(item.getAttribute('src'))
.objectFit(getImageMode(item.getAttribute('mode')))
.verticalAlign(align)
.width(item._st.hmStyle.width)
.height(item._st.hmStyle.height)
.margin({
top: item._st.hmStyle.marginTop,
left: item._st.hmStyle.marginLeft,
right: item._st.hmStyle.marginRight,
bottom: item._st.hmStyle.marginBottom,
})
.padding({
top: item._st.hmStyle.paddingTop,
left: item._st.hmStyle.paddingLeft,
right: item._st.hmStyle.paddingRight,
bottom: item._st.hmStyle.paddingBottom,
})
.textBackgroundStyle({
color: item._st.hmStyle.backgroundColor,
radius: {
topLeft: item._st.hmStyle.borderTopLeftRadius,
topRight: item._st.hmStyle.borderTopRightRadius,
bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
bottomRight: item._st.hmStyle.borderBottomRightRadius,
}
})
.onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
} else if (item.nodeType === NodeType.TEXT_NODE) {
Span(item.textContent)
} else if (item.tagName === 'TEXT') {
Span(item.textContent)
.attributeModifier((new SpanStyleModify()).setNode(item as TaroTextElement))
.letterSpacing(item._st.hmStyle.letterSpacing)
.textBackgroundStyle({
color: item._st.hmStyle.backgroundColor,
radius: {
topLeft: item._st.hmStyle.borderTopLeftRadius,
topRight: item._st.hmStyle.borderTopRightRadius,
bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
bottomRight: item._st.hmStyle.borderBottomRightRadius,
}
})
.onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
}
}
"#;

71 changes: 27 additions & 44 deletions crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
View file
Original file line number Diff line number Diff line change
@@ -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" {
Expand Down Expand Up @@ -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
)
}

Expand All @@ -53,39 +68,7 @@ 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
)
format!("createText({node_id} as TaroTextElement)", node_id = node_name)
}

pub fn create_component_event(event_name: &str, node_name: &str) -> String {
Expand Down
5 changes: 3 additions & 2 deletions crates/swc_plugin_compile_mode/src/utils/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,8 @@ pub fn get_harmony_component_style(visitor: &mut TransformVisitor) -> String {
};

// build_component(IMAGE_TAG, HARMONY_IMAGE_STYLE_BIND);
build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND);
// build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND);
build_component(TEXT_TAG, HARMONY_TEXT_BUILDER);
build_component(TEXT_TAG, HARMONY_TEXT_HELPER_FUNCITON);

harmony_component_style
Expand Down Expand Up @@ -360,7 +361,7 @@ pub fn create_normal_text_template(visitor: &mut TransformVisitor, disable_this:

let code = add_spaces_to_lines(get_text_component_str(&node_name).as_str());

visitor.component_set.insert(TEXT_TAG.clone().to_string());
visitor.component_set.insert(TEXT_TAG.to_string());
code
}

Expand Down

0 comments on commit 1fd76af

Please sign in to comment.