From 4125bfcc8c286da954d06298311860871713a2a5 Mon Sep 17 00:00:00 2001 From: EGOIST <0x142857@gmail.com> Date: Sat, 6 Jul 2019 21:22:32 +0800 Subject: [PATCH] feat: init --- README.md | 44 +++++++++++++++++++++++++--------------- demo/index.js | 42 ++++++++++++++++++++------------------ package.json | 18 ++++++++++++----- src/index.js | 23 +++++++++++---------- yarn.lock | 56 ++++++++++++++++++++++++++++++++++++++++++++++++--- 5 files changed, 128 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 9fc1dd9..d6ca641 100644 --- 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 +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(, 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.
-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.
+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 index 8e089d5..a672f32 100644 --- 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 ( -
- - -
- ) -}) + }, -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(, document.getElementById('app')) diff --git a/package.json b/package.json index 02f3e8a..fa2329a 100644 --- 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<0x142857@gmail.com>", @@ -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 index c140bf0..f19a37c 100644 --- 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 index 0eeb20b..66d7405 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2775,6 +2775,13 @@ doctrine@1.5.0: 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==