babel-plugin-transform-jsx-wxml
Turn JSX to WXML(WeiXin Markup Language)
Requirement
This plugin requires a minimum of Node v6.9 and Babel v7.x.
Usage
Babel Configuration
Node API
const babel = ;const plugin = ; const source = `const array = ['1', '2', '3'];<View> {state.flag && <MyButton>Click Me</MyButton>} {['a', 'b', 'c', 1, 2].map((it, idx) => (<Body1>{it}</Body1>))} {array.map((it, idx) => <Image lazyLoad>{it}</Image>)} </View>`;const options = {};const code = babel;console;
Options
option | type | required | default | description |
---|---|---|---|---|
namespace | string | N | wx |
directive prefix |
tagNameLetterCase | string | N | kebab |
tern <MyButton/> to <my-button/> |
attrNameLetterCase | string | N | kebab |
tern <Image lazyLoad/> to <image lazy-load/> |
delimiterStart | string | N | {{ |
beginning delimiter for escaped locals or expression |
delimiterEnd | string | N | }} |
ending delimiter for escaped locals or expression |
directiveIf | string | N | ${namespace}:if |
conditional directive |
directiveFor | string | N | ${namespace}:for |
loop directive |
directiveForIndex | string | N | ${namespace}:for-index |
loop directive |
directiveForItem | string | N | ${namespace}:for-item |
loop directive |
Example
JSX source code:
const array = '1' '2' '3';<View> stateflag && <MyButton>Click Me</MyButton> 'a' 'b' 'c' 1 2 array</View>;
Result snapshot :
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should tern jsx to wxml 1`] = `"const array = ['1', '2', '3'];<view> <my-button wx:if=\\"{{state.flag}}\\">Click Me</my-button> <body1 wx:for=\\"{{['a','b','c',1,2]}}\\" wx:for-item=\\"{{it}}\\" wx:for-index=\\"{{idx}}\\">{{it}}</body1> <image lazy-load wx:for=\\"{{array}}\\" wx:for-item=\\"{{it}}\\" wx:for-index=\\"{{idx}}\\">{{it}}</image></view>;"`;