Vue code and React code intertransition (component library synchronization)

background

Some scenarios require the VUE and React codes to interswitch

  • For example, components with the same function are synchronized between the Vue and React libraries. Or some template code that requires multiple versions

Manual synchronization, the number is still very annoying. Back found a tool can be converted! This article mainly introduces some transformation tools (note the pros and cons and points to note, listed below).

The following three scenarios are mainly introduced :(there are basically open source tools that can be used directly)

  1. Vue turned the react
  2. Turn the react vue
  3. Turn vue2 vue3

1. Turn the react vue

Github.com/mcuking/vue…

  • The specific usage, there is documentation
  • (online browsing the site: http://122.51.132.117/vue2react/)

Advantages:

  1. More or less, we can save a lot of time

Disadvantages:

  1. Because the open source library is several years old, the newer apis are not supported. Such as hooks, functional components
  2. Some old or obsolete APIS may be converted and need to be manually adjusted by the developers themselves

Note:

  • If conversion fails, look for errors in the newspaper.
  • If you really can’t understand the error, you will comment out part of the source code and eventually locate the error. Let’s see if we can modify it or copy it manually
  • Tips: There are often issues with props, and there are some vUE specific apis that developers need to handle after conversion, such as $emit (this will not cause conversion failures).

2. Turn the react vue

Github.com/vicwang163/…

Transformation before

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super(a);this.state = {
      hello: 'world'
    }
  }
  componentDidMount () {
    console.log(this.state)
  }
  myMethod () {
    this.setState({ hello: 'world'})}render() {
    return (
      <div className="App">
        <div className="App-header" onClick={this.myMethod}>
          <h2>
            Hello {this.state.hello}
          </h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>)}}export default App
Copy the code

After the transformation

// export component
export default {
  name: 'app',
  data () {
    return {hello: 'world'}},methods: {
    myMethod () {
      this.hello = 'world'
    }
  },
  mounted () {
    console.log(this)
  },
  render () {
    return (
      <div class="App">
        <div class="App-header" onClick={this.myMethod}>
          <h2>Hello {this.hello}</h2>
        </div>
        <p class="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>)}}Copy the code

Advantages (ibid.) :

  1. More or less, we can save a lot of time

Disadvantages:

  1. Because the open source library is several years old, only older versions of React and class components are supported. Newer apis are not supported. Such as hooks, functional components
  2. The vUE converted is JSX syntax version, and the project needs to be configured to support JSX syntax

Note:

  • If conversion fails, look for errors in the newspaper.
  • If you really can’t understand the error, you will comment out part of the source code and eventually locate the error. Let’s see if we can modify it or copy it manually
  • Tips: Only older versions of React and class components are supported. Newer apis are not supported

3. Turn vue2 vue3

Use gogocode: gogocode. IO/useful/docs/vue…

  • The documentation is very detailed, if you are interested, you can click on it

conclusion

The Vue and React code are interchangeable and there are open source tools available, but the tools were developed 3 or 4 years ago.

  • Both Vue and React are currently being updated and iterated, so the tool may not be able to handle newer code and apis. Others are syntactic differences between the two frameworks that can be successfully converted but need to be handled manually by the developer

But overall

Advantages:

  1. More or less, you can save a lot of time, but pay attention to the conditions of use

Disadvantages:

  1. In this article above each item has marked shortcomings, interested can be pulled up to see. The main drawback is the scope of application

Note:

  • If the conversion fails, pay attention to the error of the newspaper (there are notes in each item above the article, you can take a closer look)

Write an article later explaining how transcoding works. The idea is to use code -> AST -> process to get a new AST -> new code

Code word is not easy, praise encouragement!!