rml
React Markup Language. An alternate markup language to react jsx. inspired by wxml.
usage
npm i rml rml-runtime
rml-runtime is for compiled code.
preview
http://yiminghe.github.io/rml/examples/playground.html
<div r:for="{{items}}" r:key="key">
<div r:if="{{item.value > 1}}" onClick="{{this.onClick}}">
{{item.value}} more than one
</div>
</div>API
const { Transformer } = require('rml');
new Transformer(template, config).transform((error, code) => {});
config object
| name | description | type | default |
|---|---|---|---|
| allowImportModule | whether allow import-module tag | boolean | false |
| strictDataMember | whether render error when encounter {{x.y}} if x is undefined | boolean | true |
webpack-loader
https://github.com/yiminghe/rml-loader
syntax
for details checkout: https://github.com/yiminghe/rml/blob/master/tests/specs
data binding
{{x}}
loop
<tag r:for="{{items}}" r:key="key" r:for-item="item" r:for-index="index">
{{item.value}} at {{index}}
</tag>condition
<tag r:if="{{x>3}}">
</tag>
<tag r:elif="{{x>2}}">
</tag>
<tag r:else="{{x>1}}">
</tag>block
will render no actual jsx
<block r:if="{{x>1}}">
<tag />
</block>template
<template name="t">
<div>{{z}}</div> <!-- from data attribute-->
</template>
<div>
<template is="{{x%2 ? 't' : 'z'}}" data="{{...o}}" />
</div>import
<import src="./a.rml" /> <!-- will define template t and z-->
<div>
<template is="{{x%2 ? 't' : 'z'}}" data="{{...o}}" />
</div>include
<div>
<include src="./a.rml" /> <!-- embed-->
</div>import-module, need to activate allowImportModule flag, defaults to false.
<import-module name="{View, Text}" from="react-native" />
<View><Text>Hello, rml</Text></View>Development
npm start
http://localhost:8011/examples/playground.html
Test Case
npm test
npm run coverage
License
rml is released under the MIT license.
