Add `applyPureVueInReact` like `applyPureReactInVue`

gloriasoft / veaury

Use React in Vue3 and Vue3 in React, And as perfect as possible!

MIT License

1.31k stars 83 forks source link

Add `applyPureVueInReact` like `applyPureReactInVue` #23

Closed devilwjp closed 2 years ago

anhcuong203 commented 2 years ago

Hi, I'm using applyPureReactInVue but react component wrap still appear. I tried run project dev-project-vue3 to check if it works but got error

This dependency was not found:

veaury in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/pages/basic/index.vue?vue&type=script&lang=js, ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/pages/context/index.vue?vue&type=script&lang=js and 8 others

Please give me some suggestions or example that worked with applyPureReactInVue. Thanks!

devilwjp commented 2 years ago

@anhcuong203 applyPureReactInVue works on the children of the component, which means that the children will not be wrapped by the new react container layer, and the component itself still needs a container wrapping.
>>learn more about how the pure mode works

devilwjp commented 2 years ago

The correct way to run project dev-project-vue3 should be to debug the complete veaury project directly. Step 1: Clone veaury project.
Step 2: Run the command npm run setup:yarn or npm run setup:npm in the root directory of the main project(veaury project) to install the main project and two subprojects.
Step 3: Run the commands npm run dev:vue and npm run dev:react in the root directory of the main project(veaury project) for development.

anhcuong203 commented 2 years ago

@anhcuong203 applyPureReactInVue works on the children of the component, which means that the children will not be wrapped by the new react container layer, and the component itself still needs a container wrapping. >>learn more about how the pure mode works

thank you! is there any way to use react in vue without wrapper? It might need to be re-styled such as .class-name > div

devilwjp commented 2 years ago

@anhcuong203 This is a very difficult problem to solve. The existence of the wrapper is to solve the problem of conversion between vue and react. A react component must be mounted in a separate dom element, which is the wrapper.

In fact, it is not recommended to directly affect the style of the child component through the classname of the parent component. It is recommended that you pass the style or classname as a property to the child component, and then the child component consumes this property.

anhcuong203 commented 2 years ago

thank you so much!

devilwjp commented 2 years ago

veaury@2.3.0 supports