Smart-vscode - React micro-frontends component that loads vue

Overview

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 [email protected]
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.
Owner
第一名的小蝌蚪
每当情绪低落的时候,记住,你曾是第一名的小蝌蚪
第一名的小蝌蚪
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Udit Kumar 5 Jun 25, 2021
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 1 Dec 28, 2021
💅 Micro-library to write stylesheets with a non-opinionated approach, free of dependencies, and in the easiest way possible.

react-native-styl is a micro-library for React Native developers whose goal is to write stylesheets with a non-opinionated library, free of dependenci

Danilo Woznica 30 Jan 17, 2022
Electron-mirror - Electron application for Smart Mirror using React via the electron-react-boilerplate repository.

Electron-Mirror Electron application for Smart Mirror using React via the electron-react-boilerplate repository. Starting Development Start the app in

null 0 Jan 7, 2022
An NFT Marketplace React dApp demo on the Polygon blockchain with basic functionalities such as acquire and mint NFTs using ERC721 Smart Contract and Interplanetary File System IPFS.

Polygon-NFT-marketplace generated from jellydn/dapp-starter Opinionated Dapp Starter Template Homepage - Marketplace NFT Minting Features The React Fr

null 37 Jan 17, 2022
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 2 Jan 5, 2022
Payment Processor in smart contract and pay with crypto for business

Decentralized Pay With Crypto Implementation Tech Stack Node.js React Solidity S

Sercan ÇELENK 4 Dec 21, 2021
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App

Open Source Nft Marketplace [Onprogress %1] Reactjs And Smart Contracts Open Sou

Özgür 25 Jan 20, 2022
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips ?? All the code in these repos was created and explained by

EtherCluster 1 Jan 6, 2022
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

salvia-kit 324 Jan 13, 2022
⚡️ Super-fast electron + vite boilerplate. Support React/Vue template.

electron-vite-template Run Setup # clone the project git clone [email protected]:caoxiemeihao/electron-vite-template.git # enter the project directory c

草鞋没号 122 Jan 11, 2022
Functional props composition for UI components (React.js & Vue.js)

Functional props composition for components A 1.5kB library integrating with your favourite UI framework Website | Documentation | Packages | Contribu

Fahad Heylaal 938 Dec 13, 2021
YoutubeDownloader - A test project for learning React, Vue and TS

Requirements: Node.js 10.x Vue.JS 2.x Python 2.6+ FFMPEG Youtube-DL Installation Run command below in root directory npm install --production And inst

Matthias 0 Jan 1, 2022
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

null 12 Dec 4, 2021
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Kai Hotz 189 Jan 6, 2022
A react library to convert react jsx svg component to image dataurl.

Jsx To Png A react library to convert react jsx svg component to image dataurl. Motivation I wrote many react-svg components. Practically, I need to c

qefeng 1 Dec 23, 2021
React-quizlet-flashcard - A replica of quizlet's flashcard component built with react and typescript

react-quizlet-flashcard A replica of quizlet's flashcard component built with ty

A.B.Santhosh 2 Jan 21, 2022
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian José Torrealba Rondón 4 Dec 20, 2021
Warp `TinyMCE` into `React Component`

mb-react-tinymce Online DEMO Try to deal with: Warp TinyMCE into React Component Also provides a hackable EditorToolbar Component Basic Usage You can

MockingBot 3 Aug 29, 2019