Skip to content

Commit

Permalink
feat: text组件改成@builder
Browse files Browse the repository at this point in the history
  • Loading branch information
mayintao3 committed Apr 28, 2024
1 parent 9af54b0 commit a8ebb1c
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 127 deletions.
8 changes: 2 additions & 6 deletions crates/swc_plugin_compile_mode/src/transform_harmony.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,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) };
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 @@ -608,7 +605,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 +620,7 @@ 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
221 changes: 136 additions & 85 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,137 @@ 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
})
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]
}))
}
}
@Extend(Text)
function textSpecialFontStyle(attr: TaroTextStyleType) {
.textAlign(attr.textAlign)
.textOverflow(attr.textOverflow)
.maxLines(attr.WebkitLineClamp)
.letterSpacing(attr.letterSpacing)
@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']))
}
}
"#;

function getButtonFontSize (node: TaroButtonElement) {
const isMini = node._attrs.size === 'mini'
// 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
// })
// }

return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
}
"#;
// @Extend(Text)
// function textSpecialFontStyle(attr: TaroTextStyleType) {
// .textAlign(attr.textAlign)
// .textOverflow(attr.textOverflow)
// .maxLines(attr.WebkitLineClamp)
// .letterSpacing(attr.letterSpacing)
// }

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
}
}
"#;
// 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
// }
// }
// "#;
75 changes: 41 additions & 34 deletions crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,41 +52,48 @@ 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!(
"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 {
let process_event_trigger_name = |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 a8ebb1c

Please sign in to comment.