vueact / babel-plugin-transform-react-to-vue Goto Github PK

eg:

Appear.defaultProps = {
  transitionDuration: 300
};

Appear.propTypes = {
  children: PropTypes.node,
  fragment: PropTypes.object,
  route: PropTypes.object,
  style: PropTypes.object,
  transitionDuration: PropTypes.number
};

and

class Appear extends Component {
  static propTypes = {}
}

https://goo.gl/Wq1fxi

example:

import React from 'react';

class Display extends React.Component {
  render() {
    return (
      <div className="component-display">
        <div>
          {this.props.value}
        </div>
      </div>
    );
  }
}
Display.propTypes = {
  value: React.PropTypes.string,
};
export default Display;

propTypes can be used to make 2 thinks in react:

1. events in vue
2. props in vue

we can determine this based on value of property if its React.PropTypes.func than this is an $emit

Hey, I like what you're doing here 👍 is there any way we can help you get this project going or is this just a huge undertaking?

When i tried to transform https://github.com/ahfarmer/calculator/blob/master/src/component/App.js
its not working React.Component !== Component

see: https://github.com/vueact/babel-plugin-transform-react-to-vue/blob/master/index.js#L350
we should also check if imported Identifier is React and do additional checks in ClassDeclaration

I want to render a react component inside a Vue Component. I am using this plugin for that. But I'm not able to. Not able to figure out where I'm going wrong. Please help.

This is my Vue component:

This is my React component:

And this is .babelrc file:

And I am getting this error: "Cannot call a class as a function"

Thanks!

Current behavior is a naive conversion between this.setState and this.*.
setState is more complicated then this, however.

1. It takes a second argument which is a callback when the setState has been applied.
2. It can take a function which takes the previous and current props and returns the next state.

Also in general the semantics are not 100% similar. If I'm not mistaken, this.setState doesn't even mutate the state right away, while obviously this.* does, just that the DOM updates get batched. I have no idea if this difference will be a cause of bugs...I guess time and lot's of testing will tell.

As in the title, the React this.refs is not transformed to the equivalent Vue this.$refs.

Also, ref callbacks do not work (ie the api replacing string refs https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs). This is important since ref strings are removed in React 16.x

For example this common React idiom won't work: <canvas ref={c => this.canvasRef = c} />

Fantastic idea and work so far. If I have time I'll try and get a pull request in.

As in the title, componentDidUpdate is not transformed to a Vue equivalent.

Hello, first of all thanks for such an awesome transformer!

Currently a component which looks like that gets transpiled into a naive this.$attrs.renderProp(this.$data) call, which of course is not correct. The best way would be to take advantage of scoped slots.

import React from 'react'

class Mouse extends React.Component {
  render() {
    return (
      <div>
        {this.props.renderProp(this.state)}
      </div>
    )
  }
}

A description of render props in React can be found here and a real world usage of scoped lots in Vue can be found here.

Thanks for considering that!

class App extends Component {
  constructor(props) {
    super(props)
    const bar = 'bar'
    this.state = { foo: props.foo + bar }
    this.something = bar
  }
}

Maybe transform to this? not sure 😅

const App = {
  data() {
    var props = this.$props
    const bar = 'bar'
    return  { foo: props.foo + bar }
  },
  created() {
    const bar = 'bar'
    this.something = bar
  }
}

Or:

const App = {
  data() {
    var props = this.$props
    const bar = 'bar'
    var __state = { foo: props.foo + bar }
    this.something = bar
    return __state
  }
}

I think the componentWillReceiveProps transfrom result was wrong

I think it can be transfrom to this:

 watch: {
    $props: {
      deep: true,
      handler(nextProps={}) {
        //xxx
      }
    }
  }

I own some classes written this way:

class PivotTable extends React.PureComponent {
  render() {
    const Renderer = this.props.renderers[
      this.props.rendererName in this.props.renderers
        ? this.props.rendererName
        : Object.keys(this.props.renderers)[0]
    ];
    return <Renderer {...this.props} />;
  }
}

But, the output, I do not think it's appropriate conversion to Vue.

class PivotTable extends React.PureComponent {
  render() {
    const Renderer = this.props.renderers[this.props.rendererName in this.props.renderers ? this.props.rendererName : Object.keys(this.props.renderers)[0]];
    return <Renderer {...this.props} />;
  }

}

What would be the correct equivalent conversion? Is this in the plans to enter Lib?