3 | 
4 |
5 |
7 |
9 |
10 |
11 |
31 |
32 |
42 |
--------------------------------------------------------------------------------
/webpack_vue2/src/react_ui/Test.tsx:
--------------------------------------------------------------------------------
1 | import React, { PropsWithChildren, useEffect, useState } from "react";
2 |
3 | interface FooProps extends PropsWithChildren {
4 | foo: string;
5 | }
6 |
7 | const TestA: React.FC = () => <>TestA;
8 | const TestB = () =>
4 | A vue children in the middle of a React comp
6 | TestB
; 9 | 10 | function Counter(props: FooProps) { 11 | const [seconds, setSeconds] = useState(0); 12 | 13 | useEffect(() => { 14 | const interval = setInterval(() => { 15 | setSeconds((seconds) => seconds + 1); 16 | }, 1000); 17 | return () => clearInterval(interval); 18 | }, []); 19 | 20 | return <>{` ${props.foo} counter: ${seconds}`}; 21 | } 22 | 23 | export const Test: React.FC
33 | Hello world from react. Foo: {foo}
34 |
35 |
38 |
41 | );
42 |
--------------------------------------------------------------------------------
/webpack_vue2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack_vue2",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "build": "webpack --config ./config/webpack.config.dev.js",
7 | "dev": "webpack-dev-server --config ./config/webpack.config.dev.js",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "vue": "^2",
16 | "vue-loader": "^15",
17 | "vuera-ts": "../."
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.21.3",
21 | "@babel/plugin-syntax-dynamic-import": "^7.8.3",
22 | "@babel/preset-env": "^7.20.2",
23 | "@babel/preset-react": "^7.18.6",
24 | "@babel/preset-typescript": "^7.21.0",
25 | "babel-loader": "^9.1.2",
26 | "css-loader": "^6.7.3",
27 | "file-loader": "^6.2.0",
28 | "html-webpack-plugin": "^5.5.0",
29 | "sass": "^1.59.3",
30 | "sass-loader": "^13.2.1",
31 | "style-loader": "^3.3.2",
32 | "typescript-plugin-css-modules": "^5.0.0",
33 | "vue-template-compiler": "^2.7.14",
34 | "webpack": "^5.76.3",
35 | "webpack-cli": "^5.0.1",
36 | "webpack-dev-server": "^4.13.1"
37 | }
38 | }
--------------------------------------------------------------------------------
/src/VuePlugin.ts:
--------------------------------------------------------------------------------
1 | import _Vue from "vue";
2 |
3 | import isReactComponent from "./utils/isReactComponent";
4 | import VueResolver from "./resolvers/Vue";
5 |
6 | /**
7 | * This mixin automatically wraps all React components into Vue.
8 | */
9 | export const VuePlugin = {
10 | install(Vue: typeof _Vue, options: any) {
11 | console.log("Installing Vuera VuePlugin");
12 | /**
13 | * We define a custom merging strategy for the `components` field. This strategy really just
14 | * wraps all the React components while leaving Vue components as is.
15 | */
16 | const originalComponentsMergeStrategy =
17 | Vue.config.optionMergeStrategies.components;
18 |
19 | Vue.config.optionMergeStrategies.components = function (
20 | parent: { [k: string]: Vue.Component },
21 | ...args: any
22 | ) {
23 | const mergedValue = originalComponentsMergeStrategy(parent, ...args);
24 |
25 | const wrappedComponents = mergedValue
26 | ? Object.entries(mergedValue).reduce(
27 | (acc, [k, v]) => ({
28 | ...acc,
29 | [k]: isReactComponent(v) ? VueResolver(v as any) : v,
30 | }),
31 | {}
32 | )
33 | : mergedValue;
34 | return Object.assign(mergedValue, wrappedComponents) as {
35 | [k: string]: Vue.Component;
36 | };
37 | };
38 | Vue.prototype.constructor.isVue = true;
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vuera in TypeScript
2 |
3 | This is the `vuera` lib from `akxcv` (amazing effort man!). Check it [Vuera GH](https://github.com/akxcv/vuera).
4 |
5 | Due to inactivity in `vuera` part, I've decided to move forward with `vuera-ts` and maintain it for my professional work.
6 |
7 | ## Usage
8 |
9 | Check `./webpack_vue2` example. I prefer to control myself how files are loaded, so the project is a simple vue2 project build from scratch using `webpack v5` .
10 | In a nutshell:
11 |
12 | ### Install
13 |
14 | `yarn add vuera-ts`
15 |
16 | ### Usage
17 |
18 | ```tsx
19 | import { ReactInVue } from "vuera-ts";
20 | import { TestComp } from "./react_ui";
21 |
22 | const TestCompInVue = ReactInVue(TestComp);
23 | ```
24 |
25 | Then you can use `TestCompInVue` in your Vue component. Register it in `Vue.components` then add it to your `template` like so:
26 |
27 | ```jsx
28 | 35 |
38 |
3 |
95 |
96 |
97 |
105 |
106 |
107 |
123 |
--------------------------------------------------------------------------------
/src/wrappers/VueWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Vue from "vue";
3 |
4 | import { ReactWrapper } from "./ReactWrapper";
5 |
6 | const VUE_COMPONENT_NAME = "vuera-internal-component-name";
7 |
8 | const wrapReactChildren = (createElement: any, children: any) =>
9 | createElement("vuera-internal-react-wrapper", {
10 | props: {
11 | component: () => {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 | 38 |Essential Links
39 |-
40 |
- 41 | Core Docs 42 | 43 |
- 44 | Forum 47 | 48 |
- 49 | Community Chat 52 | 53 |
- 54 | Twitter 57 | 58 |
- 59 | News 60 | 61 |
Ecosystem
63 |-
64 |
- 65 | vue-router 68 | 69 |
- 70 | vuex 71 | 72 |
- 73 | vue-devtools 79 | 80 |
- 81 | vue-loader 84 | 85 |
- 86 | awesome-vue 92 | 93 |
{children}
,
12 | },
13 | });
14 |
15 | export class VueWrapper extends React.Component {
16 | constructor(props: { component: any }) {
17 | super(props);
18 |
19 | /**
20 | * We have to track the current Vue component so that we can reliably catch updates to the
21 | * `component` prop.
22 | */
23 | (this as any).currentVueComponent = props.component;
24 |
25 | /**
26 | * Modify createVueInstance function to pass this binding correctly. Doing this in the
27 | * constructor to avoid instantiating functions in render.
28 | */
29 | const createVueInstance = this.createVueInstance;
30 | const self = this;
31 | (this as any).createVueInstance = function (
32 | element: any,
33 | component: any,
34 | prevComponent: any
35 | ) {
36 | createVueInstance(element, self, component, prevComponent);
37 | };
38 | }
39 |
40 | componentWillReceiveProps(nextProps: any) {
41 | const { component, ...props } = nextProps;
42 |
43 | if ((this as any).currentVueComponent !== component) {
44 | this.updateVueComponent((this.props as any).component, component);
45 | }
46 | /**
47 | * NOTE: we're not comparing this.props and nextProps here, because I didn't want to write a
48 | * function for deep object comparison. I don't know if this hurts performance a lot, maybe
49 | * we do need to compare those objects.
50 | */
51 | Object.assign((this as any).vueInstance.$data, props);
52 | }
53 |
54 | componentWillUnmount() {
55 | (this as any).vueInstance.$destroy();
56 | }
57 |
58 | /**
59 | * Creates and mounts the Vue instance.
60 | * NOTE: since we need to access the current instance of VueContainer, as well as the Vue instance
61 | * inside of the Vue constructor, we cannot bind this function to VueContainer, and we need to
62 | * pass VueContainer's binding explicitly.
63 | * @param {HTMLElement} targetElement - element to attact the Vue instance to
64 | * @param {ReactInstance} reactThisBinding - current instance of VueContainer
65 | */
66 | createVueInstance(
67 | targetElement: any,
68 | reactThisBinding: any,
69 | _component?: any,
70 | _prevComponent?: any
71 | ) {
72 | const { component, on, ...props } = reactThisBinding.props;
73 |
74 | // `this` refers to Vue instance in the constructor
75 | reactThisBinding.vueInstance = new Vue({
76 | el: targetElement,
77 | data: props,
78 | render(createElement) {
79 | return createElement(
80 | VUE_COMPONENT_NAME,
81 | {
82 | props: this.$data,
83 | on,
84 | },
85 | [wrapReactChildren(createElement, this.children)]
86 | );
87 | },
88 | components: {
89 | [VUE_COMPONENT_NAME]: component,
90 | "vuera-internal-react-wrapper": ReactWrapper,
91 | },
92 | });
93 | }
94 |
95 | updateVueComponent(_prevComponent: any, nextComponent: any) {
96 | (this as any).currentVueComponent = nextComponent;
97 |
98 | /**
99 | * Replace the component in the Vue instance and update it.
100 | */
101 | (this as any).vueInstance.$options.components[VUE_COMPONENT_NAME] =
102 | nextComponent;
103 | (this as any).vueInstance.$forceUpdate();
104 | }
105 |
106 | render() {
107 | return ;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/wrappers/ReactWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Root, createRoot } from "react-dom/client";
3 | import { VueWrapper } from "./VueWrapper";
4 | import { v4 } from "uuid";
5 |
6 | const makeReactContainer = (Component: any) =>
7 | class ReactInVue extends React.Component {
8 |
9 | public reactRef : React.RefObject