rml-loader

rml-loader JS library homepage rml-loader JS library on npm Download rml-loader JS library

webpack loader for rml

Version 0.3.0 License MIT
rml-loader JS library homepage
rml-loader JS library on GitHub
rml-loader JS library on npm
Download rml-loader JS library
Keywords
reactjsxrmlwebpack
<script type="module"> import rmlLoader from 'https://cdn.jsdelivr.net/npm/rml-loader@0.3.0/+esm' </script>
Learn more

rml-loader


webpack loader for rml(react markup language)

NPM version npm download

usage

module: {
  loaders: [
    {
      test: /\.rml$/,
      loaders: ['babel','rml-loader?allowImportComponent']
    },
  ],
},

see index.js webpack.config.js index.html inside tests dir.

preview

index.js

import render from './index.rml';

const Page = React.createClass({
  getInitialState() {
    return {
      items: [
        {
          title: 'item1',
        },
        {
          title: 'item2'
        },
      ],
    };
  },
  render() {
    return render.call(this, this.state);
  },
});

index.rml

<import src="./item.rml" />
<div>
    <div r:for="{{items}}" r:key="title">
        <p>index: {{index}}</p>
        <template is="item" data="{{...item}}" />
    </div>
</div>

item.rml

<template name="item">
    <div>
        <p>title: {{title}}</p>
    </div>
</template>