Template transformer is a custom typescript transformer convert jsx syntax to microprogram(mp) template.
export const render = ({ data }) => (
<view>
{data.foo ? <view>true</view> : <view>false</view>}
{data.foo.map((record, idx) => (
<view key={idx}>
{idx + 1}: {record.view}
</view>
))}
</view>
)
Transform to:
<view>
<block>
<view wx:if="{{foo}}">true</view>
<view wx:else>false</view>
</block>
<view key="{{idx}}" wx:for="{{foo}}" wx:for-item="record" wx:for-index="idx">
{{idx + 1}}: {{record.view}}
</view>
</view>
Name | Type | Jsx Syntax | Template |
---|---|---|---|
Fragment | Element | <></> |
<block></block> |
binding | Attribute | <view attr={data.foo} /> |
<view attr="{{foo}}"/> |
negating | Attribute | <view no-attr /> |
<view attr="{{false}}" /> |
keywords | Attribute | <view if={42} /> |
<view wx:if="{42}" /> |
literal | Attribute | <view attr={42} /> |
<view attr="{{42}}" /> |
expression | Attribute | <view attr={foo ? bar : baz} /> |
<view attr="{{foo ? bar : baz}}" /> |
template string | Attribute | <view attr={`foo${data.bar}`}/> |
<view attr="{{'foo' + (bar)}}" /> |
binding | Children | <view>{data.foo}</view> |
<view>{{foo}}</view> |
if expression | Children |
<view> {foo && <true />} </view>
|
<view> <true wx:if="{{foo}}" /> </view>
|
if-else expression | Children |
<view> {foo ? <true /> : <false />} </view>
|
<view> <true wx:if="{{foo}}" /> <false wx:else /> </view>
|
switch match | Children |
<view> { foo ? <case1 /> : bar ? <case2 /> : <otherwise /> } </view>
|
<view> <case1 wx:if="{{foo}}" /> <case2 wx:elif="{{bar}}" /> <otherwise wx:else /> </view>
|
data map | Children |
<view> {foo.map(item => <view />} </view>
|
<view> <view wx:for="{{foo}}" /> </view>
|
The entry should be a function named render
and return a jsx node. e.g.
const render = () => <view />
other function defintion also works:
function render() {
return <view />
}
const render = function () {
return <view />
}
Warning: entry function should return a jsx node, any other syntax was invalid, e.g.
function render() { const res = <view /> return res }
The entry name can be config by config.entry
.
when use miniprogram custom component, the properties, data states, and methods can bind to the view, e.g:
<view>{{foo}}</view>
<view bindevent="method"/>
now, you can write data binding to:
<view>{data.foo} {{prop.bar}}</view>
// transform to
<view>{{foo}}{{bar}}</view>
but follow example are not supports, it should be a bad syntax.
<view>{{data.foo}}</view>
methods binding can use method
namespace, the key can use starts with on keyword, camel case onEvent
or snake case on_event
are supported.
<view on_event={method.method_name} />
use string value not transform anything:
<view onEvent="my_method_name">
<view foo={42} />
<view foo={false} />
<view foo={null} />
// transform to
<view foo="{{42}}" />
<view foo="{{false}}" />
<view foo="{{null}}" />
<block>{data.foo && <view>true</view>}</block>
// transform to
<block>
<view wx:if="{{foo}}">true</view>
</block>
<block>{data.foo ? <view>true</view> : <view>false</view>}</block>
// transform to
<block>
<view wx:if="{{foo}}">true</view>
<view wx:else>false</view>
</block>
<block>{
data.value === 1 ? <view>value 1</view>
: data.value === 2 ? <view>value 2</view>
: <view>otherwise</view>
}</block>
// transform to
<block>
<view wx:if="{{value === 1}}">value 1</view>
<view wx:elif="{{value === 2}}">value 2</view>
<view wx:else>otherwise</view>
</block>
<block>{data.foo.map(() => <view />)}</block>
// transform to
<block>
<view wx:for="{{foo}}" />
</block>
interface Config {
entry? string,
namespace?: string,
negatingAttributeNames?: string[],
transformAttributeNames?: string[],
eventAttributeNames?: string[],
dataProperties?: string[],
}
The entry function name, default to render
.
Used to transform keyword attribute. e.g. if
will transform to wx:if
, default to wx
.
The negating attribute prefix, default ['no-', 'no_', 'without-', 'without_']
.
Keyword attributes, default ['if', 'elif', 'else', 'for', 'for-index', 'for-item', 'key']
.
Event prefix, default ['on-', 'on_']
Used for data binding transform, e.g. data.foo
will transform to foo
, defaults ['prop', 'data', 'method']
- [0.1] CURRENT attributes, if/else/switch, for
- [0.2] slot, components map generator
- [0.3] util call
Q: Could be used in production?
A: No.