mpkit-view-transformer

Template transformer

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>

Transformation

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>

Transform Details

Entry

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.

data binding

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

keywords, boolean and number literal

<view foo={42} />
<view foo={false} />
<view foo={null} />

// transform to

<view foo="{{42}}" />
<view foo="{{false}}" />
<view foo="{{null}}" />

conditional express

if

<block>{data.foo && <view>true</view>}</block>

// transform to
<block>
  <view wx:if="{{foo}}">true</view>
</block>

if/else

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

if/else-if/else

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

list map

<block>{data.foo.map(() => <view />)}</block>

// transform to
<block>
  <view wx:for="{{foo}}" />
</block>

Configure

interface Config {
  entry? string,
  namespace?: string,
  negatingAttributeNames?: string[],
  transformAttributeNames?: string[],
  eventAttributeNames?: string[],
  dataProperties?: string[],
}

config.entry: String = 'render'

The entry function name, default to render.

config.namespace: String = 'wx

Used to transform keyword attribute. e.g. if will transform to wx:if, default to wx.

config.negatingAttributeNames: Array<String> = ['no-', 'no_', 'without-', 'without_']

The negating attribute prefix, default ['no-', 'no_', 'without-', 'without_'].

config.transformAttributeNames: Array<String>

Keyword attributes, default ['if', 'elif', 'else', 'for', 'for-index', 'for-item', 'key'].

config.eventAttributeNames: Array<String>

Event prefix, default ['on-', 'on_']

config.dataProperties: Array<String>

Used for data binding transform, e.g. data.foo will transform to foo, defaults ['prop', 'data', 'method']

Roadmap

• [0.1] CURRENT attributes, if/else/switch, for
• [0.2] slot, components map generator
• [0.3] util call

FAQ

Q: Could be used in production?

A: No.