element-loader

element-loader

A webpack loader converts markup to react component(compatible with all react systems. eg. rax、react、react-native、preact)

Install

npm install --save-dev element-loader

Usage

Config loader in webpack.config.js:

// webpack.config.js

module.exports = {
  // Webpack 3+
  module: {
    rules: [
      {
        test: /\.html/,
        use: 'element-loader',
        options: {
          // React & Component is required
          banner: `import React, { Component } from 'react';`
        }
      }
    ]
  },
  // Webpack 2
  module: {
    loaders: [
      {
        test: /\.html/,
        loader: 'element-loader',
        query: {
          // React & Component is required
          banner: `import React, { Component } from 'react';`
        }
      }
    ]
  },
};

Write in .babelrc:

{
  "presets": ["es2015", "react"]
}

Input Container.html:

<link rel="import" href="./Hello.html" />

<template>
  <div>
    <span class="text" :if="{{show}}">{{text}}</span>
    <div class="item" :for="{{item in items}}">
      <span class="name">{{item}}</span>
    </div>
    <Hello message="world"></Hello>
  </div>
</template>

<script>
  export default class extends Component {
    constructor(props) {
      super(props);
      console.log(props);
    }
    componentWillMount() {
      this.customMethod();
      console.log('will mount', this);
    }
    componentDidMount() {
      console.log('did mount', this);
    }
    customMethod() {
      console.log('custom');
    }
  }
</script>

<style>
  .text {
    font-size: 25rem;
    color: gray;
  }
  .name {
    color: red;
    font-size: 40rem;
  }
  .item {
    width: 200rem;
    height: 60rem;
    background-color: blue;
  }
</style>

Input Hello.html:

<link rel="stylesheet" href="./hello.css" />

<template>
 <span class="textMessage">{{message}}</span>
</template>

Input hello.css:

.textMessage {
  color: red;
}

Use react in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Container from './Container.html';

ReactDOM.render(
  <Container text="hello world" show={true} items={[1, 2, 3]} />,
  document.getElementById('body')
);

Rax

Of cource, You also can use rax with es6.

Use rax in index.js:

import { createElement, Component, render } from 'rax';
import Container from './Container.html';

class App extends Component {
  render() {
    return <Container text="hello world" show={true} items={[1, 2, 3]} />;
  }
}

render(<App />);

Config webpack.config.js:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.html/,
        loader: 'element-loader',
        query: {
          banner: `import { createElement, Component } from 'rax';`
        }
      }
    ]
  }
};

In .babelrc:

{
  "presets": ["es2015", "rax"]
}

Options

banner

Code inserted into each element. You can use it in any framework(eg. rax、react、react-native...) by configuring this option.

For example:

// webpack.config.js
banner: `
  import { createElement, Component } from 'rax';
  import { View, Text, Link } from 'rax-components';
`;

babel

option babel readed by default, If there is no written in query, We'll get data from the .babelrc file.

query: {
  babel: {
    presets: ['es2015', 'rax'];
  }
}

engine

template engine option you can see list.

Config in webpack.config.js:

query: {
  engine: 'jade';
}

Write in html:

<template>
div.header
  span hello world
</template>

Directives

• :for: repeat a array eg. "{{item in items}}"
• :if: show or hide eg. "{{x < 5}}"

TODO

• compile script
• [] support else、elif directive