element-loader

    0.6.5 • Public • Published

    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

    Keywords

    none

    Install

    npm i element-loader

    DownloadsWeekly Downloads

    4

    Version

    0.6.5

    License

    BSD-3-Clause

    Unpacked Size

    43.2 kB

    Total Files

    23

    Last publish

    Collaborators

    • zeroling
    • wintercn
    • yuanyan
    • yacheng
    • rax-publisher