English | 简体中文

React micro-frontends component that loads vue

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

I have a dream, I hope that can load a components of other frameworks as simple as loading a <iframe> tag in a react project.

Experience an demo

git clone git@github.com:y805939188/react-vue-micro-frame.git
cd react-vue-micro-frame
npm install
npm run start

How to use

npm install --save react-vue-micro-frame

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

  /** Load local components **/
  import React from 'react';
  import VueFrame from 'react-vue-micro-frame';
  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 'react-vue-micro-frame';
  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
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

[x] Load remote vue components
[x] Load local vue or react components
[x] Cross domain loading
[x] Static resource loading
[x] 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 , so the component can not render content to outside)</li> <li>[ ] 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)</li> </ul> <h1>Potential problem</h1> <ol> <li>The style isolation uses the shadow dom method, so temporarily does not support ie</li> <li>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.</li> <li>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: <pre><code class="language-js">/** vue-cli's vue.config.js */ module.exports = { css: { extract: false, }, }</code></pre></li> <li>Please try and mention more bugs, I will continue to improve. If it is convenient, please give a star by the way.</li> </ol></div> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

y805939188 / react-vue-micro-frame

readme