React micro-frontends component that loads vue

by React

English | 简体中文

React micro-frontends component that loads vue

  This is a single-spa based react micro front-end component

base on single-spa，you can load vue component in the react project

Experience an demo

git clone git@github.com
cd mircro-tech
npm install
npm run start

How to use

npm install --save micro-tech

  /** Load remote components **/
  import React from 'react';
  import VueFrame from 'micro-tech';
  const Test = () => (
    <div>
      <VueFrame jsurl="http://originPath/vueComponent.umd.js"/>
    </div>
  )

  /** Load local components **/
  import React from 'react';
  import VueFrame from 'micro-tech';
  import VueComponent from './vueComponent.vue';
  const Test = () => (
    <div>
      <VueFrame componet={VueComponent} />
    </div>
  )

  /** You can also load a remote react component **/
  import React from 'react';
  import { ReactFrame } from 'micro-tech';
  const Test = () => (
    <div>
      <ReactFrame jsurl="http://reactComponentAddress.umd.js" />
    </div>
  )

  NOTE: Components development must use the umd specification.
  I recommend using “vue-cli” to write a “vue” component.

  How to write a “vue” component with use “vue-cli”
  And you can use the elf-cli to easily create a react component that meets the umd.

Parameter

Only jsurl or component attributes are required, other parameters are optional

parameter type need features
jsurl string jsurl and component must be one of two js script of the remote vue or react component
component VueComponent jsurl and component must be one of two local vue component
extraProps Object not necessary properties passed to the component
visible boolean not necessary whether to show component
cssurl string not necessary The address of the remote css. If determine that this address has a css file, you can use this property
name string not necessary The name of the remote component
loadType ‘xhr’ or ‘script’ not necessary The way to load remote components, using xhr has cross-domain risks. When there is cross-domain risks, it will be forced to use script loading.

Feature

  • Load remote vue components
  • Load local vue or react components
  • Cross domain loading
  • Static resource loading
  • css style isolation

TODO

  • Research if the component can be refactor with qiankun2.x
  • Load the entire vue/react application from origin
  • Render content to outside of the micro-frame. (At present, because of the react-vue-micro-frame be wrote with reference to primordial <iframe />, so the component can not render content to outside)
  • design a pipeline to communication between the micro-frame and outside components. (This is necessary for scenarios with external using state management e.g. redux)

Potential problem

  1. The style isolation uses the shadow dom method, so temporarily does not support ie
  2. Static resources only support resources that are loaded through the src attribute, such as image and other resources, without any processing. For resources like ttf, there may be cross-domain situations.
  3. vue-cli will extract the css file separately by default, you can load the remote css through the cssurl property, or you can put the css into the js file by inline:

/** vue-cli's vue.config.js */
module.exports = {
  css: {
    extract: false,
  },
}
  1. Please try and mention more bugs, I will continue to improve. If it is convenient, please give a star by the way.

GitHub

View Github