@textbus/adapter-react 4.0.0-alpha.23 → 4.0.0-alpha.26
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/adapter.d.ts +7 -6
- package/bundles/index.esm.js +8 -1
- package/bundles/index.js +8 -1
- package/package.json +4 -4
package/bundles/adapter.d.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
import { JSX } from 'react';
|
2
2
|
import { Subject } from '@tanbo/stream';
|
3
|
-
import { Component,
|
3
|
+
import { Component, Slot, VElement, VTextNode } from '@textbus/core';
|
4
4
|
import { DomAdapter } from '@textbus/platform-browser';
|
5
|
-
export interface ViewComponentProps<T extends Component
|
6
|
-
component:
|
5
|
+
export interface ViewComponentProps<T extends Component> {
|
6
|
+
component: T;
|
7
7
|
rootRef: ((rootNode: HTMLElement) => void);
|
8
8
|
}
|
9
9
|
export interface ReactAdapterComponents {
|
10
|
-
[key: string]: (props: ViewComponentProps) => JSX.Element;
|
10
|
+
[key: string]: (props: ViewComponentProps<any>) => JSX.Element;
|
11
11
|
}
|
12
12
|
/**
|
13
13
|
* Textbus 桥接 React 渲染能力适配器,用于在 React 项目中渲染 Textbus 数据
|
@@ -15,7 +15,8 @@ export interface ReactAdapterComponents {
|
|
15
15
|
export declare class Adapter extends DomAdapter<JSX.Element, JSX.Element> {
|
16
16
|
onViewUpdated: Subject<void>;
|
17
17
|
private components;
|
18
|
+
private componentRendingStack;
|
18
19
|
constructor(components: ReactAdapterComponents, mount: (host: HTMLElement, root: JSX.Element) => (void | (() => void)));
|
19
|
-
componentRender(component:
|
20
|
-
slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode |
|
20
|
+
componentRender(component: Component): JSX.Element;
|
21
|
+
slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | Component>) => VElement, renderEnv?: any): JSX.Element;
|
21
22
|
}
|
package/bundles/index.esm.js
CHANGED
@@ -24,6 +24,7 @@ class Adapter extends DomAdapter {
|
|
24
24
|
super(mount);
|
25
25
|
this.onViewUpdated = new Subject();
|
26
26
|
this.components = {};
|
27
|
+
this.componentRendingStack = [];
|
27
28
|
Object.keys(components).forEach(key => {
|
28
29
|
this.components[key] = (props) => {
|
29
30
|
const component = props.component;
|
@@ -41,7 +42,9 @@ class Adapter extends DomAdapter {
|
|
41
42
|
useEffect(() => {
|
42
43
|
this.onViewUpdated.next();
|
43
44
|
}, [updateKey]);
|
44
|
-
|
45
|
+
component.__slots__.length = 0;
|
46
|
+
this.componentRendingStack.push(component);
|
47
|
+
const vNode = components[key]({
|
45
48
|
component,
|
46
49
|
rootRef: (rootNode) => {
|
47
50
|
if (rootNode) {
|
@@ -52,6 +55,8 @@ class Adapter extends DomAdapter {
|
|
52
55
|
}
|
53
56
|
}
|
54
57
|
});
|
58
|
+
this.componentRendingStack.pop();
|
59
|
+
return vNode;
|
55
60
|
};
|
56
61
|
});
|
57
62
|
}
|
@@ -67,6 +72,8 @@ class Adapter extends DomAdapter {
|
|
67
72
|
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
68
73
|
}
|
69
74
|
slotRender(slot, slotHostRender, renderEnv) {
|
75
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
76
|
+
context.__slots__.push(slot);
|
70
77
|
const vElement = slot.toTree(slotHostRender, renderEnv);
|
71
78
|
this.slotRootVElementCaches.set(slot, vElement);
|
72
79
|
const vNodeToJSX = (vNode) => {
|
package/bundles/index.js
CHANGED
@@ -26,6 +26,7 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
26
26
|
super(mount);
|
27
27
|
this.onViewUpdated = new stream.Subject();
|
28
28
|
this.components = {};
|
29
|
+
this.componentRendingStack = [];
|
29
30
|
Object.keys(components).forEach(key => {
|
30
31
|
this.components[key] = (props) => {
|
31
32
|
const component = props.component;
|
@@ -43,7 +44,9 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
43
44
|
react.useEffect(() => {
|
44
45
|
this.onViewUpdated.next();
|
45
46
|
}, [updateKey]);
|
46
|
-
|
47
|
+
component.__slots__.length = 0;
|
48
|
+
this.componentRendingStack.push(component);
|
49
|
+
const vNode = components[key]({
|
47
50
|
component,
|
48
51
|
rootRef: (rootNode) => {
|
49
52
|
if (rootNode) {
|
@@ -54,6 +57,8 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
54
57
|
}
|
55
58
|
}
|
56
59
|
});
|
60
|
+
this.componentRendingStack.pop();
|
61
|
+
return vNode;
|
57
62
|
};
|
58
63
|
});
|
59
64
|
}
|
@@ -69,6 +74,8 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
69
74
|
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
70
75
|
}
|
71
76
|
slotRender(slot, slotHostRender, renderEnv) {
|
77
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
78
|
+
context.__slots__.push(slot);
|
72
79
|
const vElement = slot.toTree(slotHostRender, renderEnv);
|
73
80
|
this.slotRootVElementCaches.set(slot, vElement);
|
74
81
|
const vNodeToJSX = (vNode) => {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@textbus/adapter-react",
|
3
|
-
"version": "4.0.0-alpha.
|
3
|
+
"version": "4.0.0-alpha.26",
|
4
4
|
"description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
|
5
5
|
"main": "./bundles/index.js",
|
6
6
|
"module": "./bundles/index.esm.js",
|
@@ -26,8 +26,8 @@
|
|
26
26
|
],
|
27
27
|
"dependencies": {
|
28
28
|
"@tanbo/stream": "^1.2.3",
|
29
|
-
"@textbus/core": "^4.0.0-alpha.
|
30
|
-
"@textbus/platform-browser": "^4.0.0-alpha.
|
29
|
+
"@textbus/core": "^4.0.0-alpha.26",
|
30
|
+
"@textbus/platform-browser": "^4.0.0-alpha.26",
|
31
31
|
"react": "^17.0.0 || ^18.0.0"
|
32
32
|
},
|
33
33
|
"devDependencies": {
|
@@ -49,5 +49,5 @@
|
|
49
49
|
"bugs": {
|
50
50
|
"url": "https://github.com/textbus/textbus.git/issues"
|
51
51
|
},
|
52
|
-
"gitHead": "
|
52
|
+
"gitHead": "36aff3db9897ccd73ba4533972991d537778bd6e"
|
53
53
|
}
|