Update dependencies & test for React hooks

.babelrc

@@ -1,23 +1,24 @@
 {
   "presets": [
     [
-      "latest",
+      "@babel/preset-env",
       {
-        "es2015": {
-          "modules": false
-        }
+        "modules": false
       }
     ],
-    "react"
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
   ],
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"],
   "env": {
     "rollup": {
       "plugins": ["external-helpers"]
     },
     "test": {
-      "presets": ["es2015"],
-      "plugins": ["transform-class-properties"]
+      "presets": ["@babel/preset-env"],
+      "plugins": ["@babel/plugin-proposal-class-properties"]
     }
   }
 }

.travis.yml

@@ -7,11 +7,11 @@ env:
     - REACT_VERSION=15.2.0
     - REACT_VERSION=15.6.1
     - REACT_VERSION=16.0.0
-    - REACT_VERSION=16.5.2
+    - REACT_VERSION=16.13.1
     - VUE_VERSION=2.2.0
     - VUE_VERSION=2.3.4
     - VUE_VERSION=2.4.4
-    - VUE_VERSION=2.5.17
+    - VUE_VERSION=2.6.11
 install:
   - yarn install
   - yarn add -D react@$REACT_VERSION react-dom@$REACT_VERSION vue@$VUE_VERSION vue-template-compiler@$VUE_VERSION

jest.config.js

@@ -1,8 +1,8 @@
 /* eslint-env node */
 module.exports = {
-  browser: true,
+  // resolver: 'browser-resolve',
   collectCoverageFrom: ['src/**/*.js', 'babel.js'],
-  setupFiles: ['./tests/__setup__.js'],
+  setupFiles: ['<rootDir>/tests/__setup__.js'],
   testMatch: ['<rootDir>/tests/**/*-test.js'],
   moduleFileExtensions: ['js', 'json', 'node', 'vue'],
   transform: {

package.json

@@ -8,45 +8,58 @@
   "main": "dist/vuera.cjs.js",
   "modules": "dist/vuera.es.js",
   "unpkg": "dist/vuera.iife.js",
-  "files": ["dist", "babel.js"],
-  "keywords": ["vue", "react", "interop", "adapter", "migrate", "seamless-integration"],
+  "files": [
+    "dist",
+    "babel.js"
+  ],
+  "keywords": [
+    "vue",
+    "react",
+    "interop",
+    "adapter",
+    "migrate",
+    "seamless-integration"
+  ],
   "peerDependencies": {
     "react": ">= 15.2.0",
     "react-dom": ">= 15.2.0",
     "vue": ">= 2.2"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.2.0",
+    "@babel/core": "^7.11.1",
+    "@babel/parser": "^7.11.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.3.0",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-latest": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
+    "browser-resolve": "^2.0.0",
     "coveralls": "^3.0.0",
-    "cross-env": "^5.2.0",
-    "eslint": "3.19.0",
-    "eslint-config-umbrellio": "^0.4.5",
+    "cross-env": "^7.0.2",
+    "eslint": "7.6.0",
+    "eslint-config-umbrellio": "^5.0.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-node": "^5.1.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.4.0",
-    "eslint-plugin-vue": "^2.1.0",
-    "husky": "^0.14.3",
-    "jest": "^21.2.1",
-    "jest-vue-preprocessor": "1.2.0",
-    "lint-staged": "^4.2.3",
-    "prettier": "^1.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "husky": "^4.2.5",
+    "jest": "^26.3.0",
+    "jest-vue-preprocessor": "1.7.1",
+    "lint-staged": "^10.2.11",
+    "prettier": "^2.0.5",
     "react": "16",
     "react-dom": "16",
-    "rollup": "0.51",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "vue": "2.5",
-    "vue-template-compiler": "2.5",
+    "rollup": "2.23.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "typescript": "^3.9.7",
+    "vue": "2.6.11",
+    "vue-template-compiler": "2.6.11",
     "vue-template-es2015-compiler": "^1.5.3"
   },
   "scripts": {
@@ -58,10 +71,29 @@
     "precommit": "lint-staged && yarn run build && git add dist"
   },
   "lint-staged": {
-    "*.json": ["prettier --write", "git add"],
-    "src/**/*.js": ["prettier --write", "eslint --fix", "git add"],
-    "tests/**/*.js": ["prettier --write", "eslint --fix", "git add"],
-    "/*.js": ["prettier --write", "eslint --fix", "git add"],
-    "babel.js": ["prettier --write", "eslint --fix", "git add"]
+    "*.json": [
+      "prettier --write",
+      "git add"
+    ],
+    "src/**/*.js": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "tests/**/*.js": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "/*.js": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "babel.js": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ]
   }
 }

src/VuePlugin.js

@@ -15,12 +15,12 @@ export default {
       const mergedValue = originalComponentsMergeStrategy(parent, ...args)
       const wrappedComponents = mergedValue
         ? Object.entries(mergedValue).reduce(
-            (acc, [k, v]) => ({
-              ...acc,
-              [k]: isReactComponent(v) ? VueResolver(v) : v,
-            }),
-            {}
-          )
+          (acc, [k, v]) => ({
+            ...acc,
+            [k]: isReactComponent(v) ? VueResolver(v) : v,
+          }),
+          {}
+        )
         : mergedValue
       return Object.assign(mergedValue, wrappedComponents)
     }

src/wrappers/React.js

@@ -35,9 +35,7 @@ const makeReactContainer = Component => {
       const wrappedChildren = this.wrapVueChildren(children)
 
       return (
-        <Component {...rest}>
-          {children && <VueWrapper component={wrappedChildren} />}
-        </Component>
+        <Component {...rest}>{children && <VueWrapper component={wrappedChildren} />}</Component>
       )
     }
   }

src/wrappers/Vue.js

@@ -33,11 +33,11 @@ export default class VueContainer extends React.Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    const { component, ...props } = nextProps
+  componentDidUpdate (prevProps, _prevState) {
+    const { component, ...props } = this.props
 
     if (this.currentVueComponent !== component) {
-      this.updateVueComponent(this.props.component, component)
+      this.updateVueComponent(prevProps.component, component)
     }
     /**
      * NOTE: we're not comparing this.props and nextProps here, because I didn't want to write a

tests/VuePlugin-test.js

@@ -4,6 +4,7 @@ import { VuePlugin } from '../src'
 import VueComponent from './fixtures/VueComponent'
 import ReactComponent from './fixtures/ReactComponent'
 import ReactPureFunctionalComponent from './fixtures/ReactPureFunctionalComponent'
+import ReactComponentWithHooks from './fixtures/ReactComponentWithHooks'
 import './fixtures/VueRegisteredComponent' // globally registered Vue component
 import VueSingleFileComponent from './fixtures/VueSingleFileComponent.vue'
 import olderVueCompat from './utils/olderVueCompat'
@@ -22,11 +23,12 @@ describe('VuePlugin', () => {
         'react-component': ReactComponent,
         'react-pure-functional-component': ReactPureFunctionalComponent,
         'react-with-children': ({ children }) => <div>{children}</div>,
+        'react-component-with-hooks': ReactComponentWithHooks,
         'vue-component': VueComponent,
         'vue-single-file-component': VueSingleFileComponent,
       },
       render (createElement) {
-        return createElement('div', [
+        const elements = [
           createElement('vue-component', {
             props: {
               message: 'VUE',
@@ -68,7 +70,13 @@ describe('VuePlugin', () => {
             })
           ),
           createElement('react-with-children', ['child1', createElement('div', 'child2')]),
-        ])
+        ]
+
+        if (React.version >= '16.8.0') {
+          elements.push(createElement('react-component-with-hooks'))
+        }
+
+        return createElement('div', elements)
       },
     })
     return Vue.nextTick().then(() => {
@@ -102,6 +110,9 @@ describe('VuePlugin', () => {
                 <button></button>
               </div>
             </div>
+            ${React.version >= '16.8.0' ? `<div>
+              <input type="text" value="">
+            </div>` : ''}
             <div>
               <div>
                 <div>

tests/babel-test.js

@@ -1,6 +1,5 @@
-import fs from 'fs'
 import path from 'path'
-import * as babel from 'babel-core'
+import * as babel from '@babel/core'
 import prettier from 'prettier'
 import plugin from '../babel'
 
@@ -14,9 +13,13 @@ const compare = (source, expectedResult) => {
     babel.transformFileSync(source, {
       babelrc: false,
       plugins: [plugin],
-    }).code
+    }).code,
+    { printWidth: 80, parser: 'babel' }
+  )
+  const expectedCode = prettier.format(
+    babel.transformFileSync(expectedResult, { babelrc: false }).code,
+    { printWidth: 80, parser: 'babel' }
   )
-  const expectedCode = prettier.format(fs.readFileSync(expectedResult, 'UTF-8'))
   expect(transformedCode).toBe(expectedCode)
 }
 

tests/fixtures/ReactComponentWithHooks.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => {
+  const [value, setValue] = React.useState('')
+
+  return <input type='text' value={value} onChange={e => setValue(e.currentTarget.value)} />
+}

tests/polyfills/raf.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // https://gist.github.com/paulirish/1579671
-;(function() {
+;(function () {
   var lastTime = 0
   var vendors = ['ms', 'moz', 'webkit', 'o']
   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
@@ -11,18 +11,18 @@
   }
 
   if (!window.requestAnimationFrame)
-    window.requestAnimationFrame = function(callback, element) {
+    window.requestAnimationFrame = function (callback, element) {
       var currTime = new Date().getTime()
       var timeToCall = Math.max(0, 16 - (currTime - lastTime))
-      var id = window.setTimeout(function() {
+      var id = window.setTimeout(function () {
         callback(currTime + timeToCall)
       }, timeToCall)
       lastTime = currTime + timeToCall
       return id
     }
 
   if (!window.cancelAnimationFrame)
-    window.cancelAnimationFrame = function(id) {
+    window.cancelAnimationFrame = function (id) {
       clearTimeout(id)
     }
 })()

tests/resolvers/ReactResolver-test.js

@@ -21,39 +21,28 @@ describe('VueInReact', () => {
   })
 
   it('returns given component when a React functional component is given', () => {
-    expect(VueInReact(ReactPureFunctionalComponent)).toBe(
-      ReactPureFunctionalComponent
-    )
+    expect(VueInReact(ReactPureFunctionalComponent)).toBe(ReactPureFunctionalComponent)
   })
 
   it('wraps Vue component', () => {
     const Component = VueInReact(VueComponent)
-    ReactDOM.render(
-      <Component message='hi' reset={jest.fn()} />,
-      document.getElementById('root')
-    )
+    ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
     expect(document.getElementById('root').innerHTML).toBe(
       '<div><span>hi</span><button></button></div>'
     )
   })
 
   it('wraps Vue registered component', () => {
     const Component = VueInReact(VueRegisteredComponent)
-    ReactDOM.render(
-      <Component message='hi' reset={jest.fn()} />,
-      document.getElementById('root')
-    )
+    ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
     expect(document.getElementById('root').innerHTML).toBe(
       '<div><span>hi</span><button></button></div>'
     )
   })
 
   it('wraps Vue single file component', () => {
     const Component = VueInReact(VueSingleFileComponent)
-    ReactDOM.render(
-      <Component message='hi' reset={jest.fn()} />,
-      document.getElementById('root')
-    )
+    ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
     expect(document.getElementById('root').innerHTML).toBe(
       '<div><span>hi</span> <button></button></div>'
     )