background

Although component references across technology stacks are rarely encountered in daily work, there is still a need for pages and components to be embedded between different project teams, and even between different subsidiaries of a group. This article addresses this problem.

Plan to introduce

After a bit of searching, the solution was to do the middle tier via Web Components (see Caniuse for compatibility).

However, there is a problem with how to convert react or Vue components into Web components and how to pass in functions. Bytedance’s @magic-Microservices/Magic repository is designed to solve these problems.

Let’s take the react component embedded in Vue as an example:

Creating the React component

mkdir react-hello && cd react-hello
yarn add father-build -D Use this to build the React component
yarn add react react-dom
touch index.js # to create index. Js
Copy the code
Create a father-build configuration file
echo "export default { entry: './index.js', esm: 'rollup' }" > .fatherrc.js
Copy the code
// index.js
import React, { createElement } from 'react';
import ReactDOM from 'react-dom';

// Define the component
const Hello = ({name}) = > {
  return <div>hello { name }</div>
}

/ / initialization
export function bootstrap() {}

/ / a mount
export function mount(container, props) {
  console.log(props)
  ReactDOM.render(createElement(Hello, props, null), container);
}

/ / update
export function updated(attrName, value, container, props) {
  ReactDOM.render(createElement(Hello, props, null), container);
}
Copy the code

Modify package.json to add version and name:

{
  "name": "react-hello"."version": "0.0.1"."main": "./dist/index.esm.js"."scripts": {
    "build": "father-build"
  },
  "dependencies": {
    "react": "^ 17.0.2"."react-dom": "^ 17.0.2"
  },
  "devDependencies": {
    "father-build": "^ 1.20.1"}}Copy the code

Run yarn link to establish a global link.

The Vue project renders the React component

yarn create @vitejs/app my-vue-app --template vue
Copy the code

Install the following:

yarn link "react-hello" # link component
yarn add react react-dom Because it is packaged as es Module, we need to install dependencies here
yarn add @magic-microservices/magic # magic installation
Copy the code

Modify the main. Js:

import { createApp } from 'vue'
import App from './App.vue'
import magic from '@magic-microservices/magic';
import * as ReactHello from 'react-hello';

// Globally register components
magic('react-hello', ReactHello, {
  // It is important here that Web Components require the declaration properties to be displayed
  propTypes: {
    name: String}}); createApp(App).mount('#app')
Copy the code

Modify the vite. Config. Js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Treat all tags that contain dash lines as custom elements
          isCustomElement: tag= > tag === 'react-hello'}}})]})Copy the code

Modify the App. Vue

<template>
  <react-hello name="react"></react-hello>
</template>
Copy the code

The DEMO link is: [email protected]: dream2023 / cross – stack…

✿ Angry, (° °) Blue ✿