mobljs/babel-plugin-transform-jsx-wxml

Turn JSX to WXML

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

{
  "plugins": ["babel-plugin-transform-jsx-wxml"]
}

Node API

const babel = require('@babel/core');
const plugin = require('babel-plugin-transform-jsx-wxml');

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.transform(source, {
  plugins: [[plugin, options]],
});
console.log(code);

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>
  {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>;

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>;"
`;