boiawang/rax

[🚧 Work In Progress v1.0] The fastest way to build cross-container application.

Community

⚡ Fast: blazing fast virtual DOM.

🎯 Tiny: 12.6 KB minified + gzipped.

🎨 Universal: works in browsers, Weex, Node.js, Mini-program, WebGL and could works more container that implement driver specification.

Quick Start

Install the Rax CLI tools to init project:

$ npm install rax-cli -g
$ rax init <YourProjectName>

Start local server to launch project:

$ cd YourProjectName
$ npm run start

Project Support

WebApp Project
MiniApp Project

WebApp Project

.
├── package.json
├── .gitignore
├── .eslintrc.js
├── src
│   └── index.js
└── public
    └── index.html

MiniApp Project

.
├── app.acss
├── app.js
├── app.json
├── package.json
├── .gitignore
├── .eslintrc.js
└── pages
    ├── page1
    │   ├── page1.acss
    │   ├── page1.axml
    │   ├── page1.js
    │   └── page1.json
    └── page2
        ├── page2.acss
        ├── page2.axml
        ├── page2.js
        └── page2.json

DSL Support

JSX(XML-like syntax extension to ECMAScript) DSL
SFC(Single File Component) DSL
MP(Mini Program) DSL

JSX(XML-like syntax extension to ECMAScript) DSL

Each JSX element is just syntactic sugar for calling createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.

// Hello.jsx
import {createElement, Component} from 'rax';

export default class extends Component {
  state = {
    name: 'world'
  };
  onChange = ()=>{
    this.setState({
      name: 'rax'
    });
  };
  render() {
    return (
      <view style={styles.hello}>
        <text style={styles.title} onClick={this.onChange}>
        Hello {this.state.name}
        </text>
      </view>
    );
  }
}

const styles = {
  hello: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  title: {
    fontSize: '40px',
    textAlign: 'center'
  }
};

// app.js
import {render} from 'rax';
import Hello from './Hello';

render(<Hello name="world" />);

SFC(Single File Component) DSL

SFC is a Vue-like DSL that will compile to rax component.

<!-- hello.html -->
<template>
  <view class="hello">
    <text class="title" @click="change">Hello {{name}}</text>
  </view>
</template>

<script>
  export default {
    data: function () {
      return {
        name: 'world'
      }
    },
    methods: {
      change () {
        this.name = 'rax';
      }
    }
  }
</script>

<style>
  .hello {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }
</style>

// app.js
import {render} from 'rax';
import Hello from './hello';

render(<Hello name="world" />);

MP(Mini Program) DSL

MP DSL will compile to rax component.

Component({
  data: {
    name: 'world'
  },
  methods: {
    onChange(e) {
      this.setData({
        name: 'rax' 
      });
    }
  }
});

/* index.acss */
.hello {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 40px;
  text-align: center;
}

<!-- index.axml -->
<view class="hello">
  <text class="title" onClick="change">Hello {{name}}</text>
</view>

Rax Renderers

🚥 rax-test-renderer: Rax renderer for snapshot testing.
💻 rax-server-renderer: Rax renderer for server-side render.

Developer Tools

React Developer Tools: Allow you inspect and modify the state of your Rax components at runtime in Chrome Developer Tools.

Redux DevTools extension: Provide power-ups for your Redux development workflow.
1. Use the rax-redux module in your app
2. Simply replace code follow the Redux DevTools extension usage doc

Contributing

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.

Development Workflow

After cloning rax, run npm install to fetch its dependencies.
Run npm run setup link and bootstrap project before development. Then, you can run several commands: