weex-rx-framework

weex-rx-framework

Global API Rx Framework provide

• window
  • devicePixelRatio
  • open()
  • postMessage()
  • addEventListener()
  • removeEventListener()
• navigator
  • platform
  • product
  • appName
  • appVersion
• screen
  • width
  • height
  • availWidth
  • availHeight
  • colorDepth
  • pixelDepth
• location
  • hash
  • search
  • pathname
  • port
  • hostname
  • host
  • protocol
  • origin
  • href
• fetch
• URL
  • href
  • origin
  • searchParams
  • toString()
• URLSearchParams
  • append()
  • delete()
  • entries()
  • get()
  • getAll()
  • has()
  • keys()
  • set()
  • values()
  • toString()
• alert
• define
• require
• __weex_downgrade__
• __weex_data__
• __weex_options__
• __weex_define__
• __weex_require__

How to custom builtin modules?

1. Build module use factory mode

const webpack = require('webpack');
const RxPlugin = require('rx-webpack-plugin');

module.exports = {
  target: 'node',
  entry: {
    // Entry name should ends with `.factory`
    'your-module.factory' : './src/index.js',
  },
  output: {
    path: './dist/',
    filename: '[name].js',
  },
  plugins: [
    new RxPlugin({
      // Your could config builtinModules here
      externalBuiltinModules: false,
      builtinModules: RxPlugin.BuiltinModules,
    });
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015', 'rx']
      }
    }]
  }
}

Then publish module with factory build file to npm registry:

npm publish

Or link module in local:

npm link

2. Config builtin.js in framework source

Install builtin module from npm:

npm install your-module --save

Or link from local:

npm link your-module

Config builtin.js and add your custom builtin module:

export let BuiltinModulesFactory = {
  '@universal/rx': require('universal-rx/dist/rx.factory'),
  '@universal/env': require('universal-env/dist/env.factory'),
  '@universal/transition': require('universal-transition/dist/transition.factory'),
  // Add your builtin module
  'your-module': require('your-module/dist/your-module.factory'),
};

3. Build framework use framework mode

const webpack = require('webpack');
const RxPlugin = require('rx-webpack-plugin');

module.exports = {
  target: 'node',
  entry: {
    // Entry name should ends with `.framework`
    'rx.framework': './packages/weex-rx-framework/src/index.js',
  },
  output: {
    path: './packages/weex-rx-framework/dist/',
    filename: '[name].js',
  },
  plugins: [
    new RxPlugin();
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015']
      }
    }]
  }
}

How to build weex jsfm including weex-rx-framework?

1. Clone the weex repository and install prerequisites

git clone [e-mail]:alibaba/weex.git
cd weex
npm install

2. Install weex-rx-framework

cd weex
npm install weex-rx-framework --save

3. Config weex-rx-framework

Update html5/frameworks/index.js file with below content:

import * as Weex from './legacy/index'
import * as Rx from 'weex-rx-framework'

export default {
  Rx,
  Weex
}

4. Build jsfm for native renderer to dist/native.js

npm run build:native

5. Copy dist/native.js to weex-sdk

cp -vf ./dist/native.js ./android/sdk/assets/main.js
cp -vf ./dist/native.js ./ios/sdk/WeexSDK/Resources/main.js