feat: init

egoist · Jul 6, 2019 · 4125bfc · 4125bfc
1 parent 323c6b9
commit 4125bfc
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -1,31 +1,43 @@
-# react-to-vue
+# vue-to-react
 
-[![NPM version](https://badgen.net/npm/v/@egoist/react-to-vue)](https://npmjs.com/package/@egoist/react-to-vue) [![NPM downloads](https://badgen.net/npm/dm/@egoist/react-to-vue)](https://npmjs.com/package/@egoist/react-to-vue) [![CircleCI](https://badgen.net/circleci/github/egoist/react-to-vue/master)](https://circleci.com/gh/egoist/react-to-vue/tree/master) [![donate](https://badgen.net/badge/support%20me/donate/ff69b4)](https://patreon.com/egoist) [![chat](https://badgen.net/badge/chat%20on/discord/7289DA)](https://chat.egoist.moe)
+[![NPM version](https://badgen.net/npm/v/@egoist/vue-to-react)](https://npmjs.com/package/@egoist/vue-to-react) [![NPM downloads](https://badgen.net/npm/dm/@egoist/vue-to-react)](https://npmjs.com/package/@egoist/vue-to-react) [![CircleCI](https://badgen.net/circleci/github/egoist/vue-to-react/master)](https://circleci.com/gh/egoist/vue-to-react/tree/master) [![donate](https://badgen.net/badge/support%20me/donate/ff69b4)](https://patreon.com/egoist) [![chat](https://badgen.net/badge/chat%20on/discord/7289DA)](https://chat.egoist.moe)
 
 ## Install
 
 ```bash
-yarn add @egoist/react-to-vue
+yarn add @egoist/vue-to-react
 ```
 
 ## Usage
 
 ```js
-import Vue from 'vue'
 import React from 'react'
-import toVue from '@egoist/react-to-vue'
-
-const ReactComponent = () => {
-  const [count, setCount] = React.useState(0)
-  return <button onClick={() => setCount(count + 1)}>{count}</button>
+import { render } from 'react-dom'
+import toReact from '@egoist/vue-to-react'
+
+const VueComponent = {
+  data() {
+    return {
+      count: 0
+    }
+  },
+
+  render(h) {
+    return h(
+      'button',
+      {
+        on: {
+          click: () => this.count++
+        }
+      },
+      [this.count]
+    )
+  }
 }
 
-const VueComponent = toVue(ReactComponent)
+const ReactComponent = toReact(VueComponent)
 
-new Vue({
-  el: '#app',
-  render: h => h(VueComponent)
-})
+render(<ReactComponent />, document.getElementById('app'))
 ```
 
 ## Contributing
@@ -38,7 +50,7 @@ new Vue({
 
 ## Author
 
-**@egoist/react-to-vue** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
-Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/react-to-vue/contributors)).
+**@egoist/vue-to-react** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-to-react/contributors)).
 
 > [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)
diff --git a/demo/index.js b/demo/index.js
@@ -1,25 +1,27 @@
-import Vue from 'vue'
 import React from 'react'
-import toVue from '../src'
+import { render } from 'react-dom'
+import toReact from '../src'
 
-const App = toVue(() => {
-  const [count, setCount] = React.useState(0)
-
-  React.useEffect(() => {
-    return () => {
-      console.log('Goodbye!')
+const App = toReact({
+  data() {
+    return {
+      count: 0
     }
-  })
-
-  return (
-    <div className="app">
-      <button onClick={() => setCount(count + 1)}>{count}</button>
-      <button onClick={() => app.$destroy()}>Destroy</button>
-    </div>
-  )
-})
+  },
 
-const app = new Vue({
-  el: '#app',
-  render: h => h(App)
+  render(h) {
+    return h(
+      'button',
+      {
+        on: {
+          click: () => {
+            this.count++
+          }
+        }
+      },
+      [this.count]
+    )
+  }
 })
+console.log(App)
+render(<App />, document.getElementById('app'))
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@egoist/react-to-vue",
+  "name": "@egoist/vue-to-react",
   "version": "0.0.0",
-  "description": "Turn a React component into a Vue component.",
+  "description": "Turn a Vue component into a React component.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "files": [
@@ -17,7 +17,7 @@
     "access": "public"
   },
   "repository": {
-    "url": "egoist/react-to-vue",
+    "url": "egoist/vue-to-react",
     "type": "git"
   },
   "author": "egoist<[email protected]>",
@@ -27,6 +27,7 @@
     "eslint-config-prettier": "^3.3.0",
     "eslint-config-rem": "^4.0.0",
     "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.14.2",
     "husky": "^1.0.0-rc.13",
     "lint-staged": "^7.2.0",
     "poi": "^12.7.0",
@@ -39,8 +40,15 @@
   "xo": {
     "extends": [
       "rem",
+      "plugin:react/recommended",
       "plugin:prettier/recommended"
-    ]
+    ],
+    "envs": [
+      "browser"
+    ],
+    "rules": {
+      "react/display-name": "off"
+    }
   },
   "husky": {
     "hooks": {
@@ -59,6 +67,6 @@
   },
   "peerDependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "vue": "^2.6.10"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,19 @@
 import React from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import Vue from 'vue'
 
 export default Component => {
-  return {
-    mounted() {
-      render(React.createElement(Component, null), this.$el)
-    },
+  return () => {
+    const el = React.useRef(null)
 
-    beforeDestroy() {
-      unmountComponentAtNode(this.$el)
-    },
+    React.useEffect(() => {
+      const app = new Vue({
+        el: el.current,
+        render: h => h(Component)
+      })
 
-    render(h) {
-      return h('div')
-    }
+      return () => app.$destroy()
+    })
+
+    return React.createElement('div', { ref: el })
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2775,6 +2775,13 @@ [email protected]:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -2957,7 +2964,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.12.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
+es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
   integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
@@ -3134,6 +3141,21 @@ eslint-plugin-promise@^4.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
   integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
 
+eslint-plugin-react@^7.14.2:
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.2.tgz#94c193cc77a899ac0ecbb2766fbef88685b7ecc1"
+  integrity sha512-jZdnKe3ip7FQOdjxks9XPN0pjUKZYq48OggNMd16Sk+8VXx6JOvXmlElxROCgp7tiUsTsze3jd78s/9AFJP2mA==
+  dependencies:
+    array-includes "^3.0.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.1.0"
+    object.entries "^1.1.0"
+    object.fromentries "^2.0.0"
+    object.values "^1.1.0"
+    prop-types "^15.7.2"
+    resolve "^1.10.1"
+
 eslint-plugin-unicorn@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-6.0.1.tgz#4a97f0bc9449e20b82848dad12094ee2ba72347e"
@@ -4836,6 +4858,14 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
+jsx-ast-utils@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz#4d4973ebf8b9d2837ee91a8208cc66f3a2776cfb"
+  integrity sha512-v3FxCcAf20DayI+uxnCuw795+oOIkVu6EnJ1+kSzhqqTZHNkTZ7B66ZgLp4oLJ/gbA64cI0B7WRoHZMSRdyVRQ==
+  dependencies:
+    array-includes "^3.0.3"
+    object.assign "^4.1.0"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -5808,6 +5838,26 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.entries@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
+  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.fromentries@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
+  integrity sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.11.0"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -6826,7 +6876,7 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
-prop-types@^15.6.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7301,7 +7351,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.11.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
   integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==