@textbus/adapter-viewfly 4.0.0-alpha.3 → 4.0.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/adapter.d.ts +11 -10
- package/bundles/index.esm.js +32 -9
- package/bundles/index.js +31 -8
- package/package.json +6 -6
package/bundles/adapter.d.ts
CHANGED
@@ -1,22 +1,23 @@
|
|
1
|
-
import {
|
1
|
+
import { JSXInternal, JSXNode, DynamicRef } from '@viewfly/core';
|
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:
|
7
|
-
rootRef:
|
5
|
+
export interface ViewComponentProps<T extends Component> {
|
6
|
+
component: T;
|
7
|
+
rootRef: DynamicRef<HTMLElement>;
|
8
8
|
}
|
9
9
|
export interface ViewflyAdapterComponents {
|
10
|
-
[key: string]: JSXInternal.ComponentSetup<ViewComponentProps
|
10
|
+
[key: string]: JSXInternal.ComponentSetup<ViewComponentProps<any>>;
|
11
11
|
}
|
12
12
|
/**
|
13
13
|
* Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器,用于在 Viewfly 项目中渲染 Textbus 数据
|
14
14
|
*/
|
15
|
-
export declare class Adapter extends DomAdapter<
|
15
|
+
export declare class Adapter extends DomAdapter<JSXNode, JSXInternal.Element> {
|
16
16
|
onViewUpdated: Subject<void>;
|
17
17
|
private components;
|
18
18
|
private componentRefs;
|
19
|
-
|
20
|
-
|
21
|
-
|
19
|
+
private componentRendingStack;
|
20
|
+
constructor(components: ViewflyAdapterComponents, mount: (host: HTMLElement, root: JSXNode) => (void | (() => void)));
|
21
|
+
componentRender(component: Component): JSXInternal.ViewNode;
|
22
|
+
slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | Component>) => VElement, renderEnv?: any): JSXInternal.Element;
|
22
23
|
}
|
package/bundles/index.esm.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { getCurrentInstance, onUpdated, createDynamicRef, jsx, DynamicRef } from '@viewfly/core';
|
2
2
|
import { Subject } from '@tanbo/stream';
|
3
3
|
import { makeError, VElement, VTextNode, replaceEmpty } from '@textbus/core';
|
4
4
|
import { DomAdapter } from '@textbus/platform-browser';
|
@@ -13,10 +13,11 @@ class Adapter extends DomAdapter {
|
|
13
13
|
this.onViewUpdated = new Subject();
|
14
14
|
this.components = {};
|
15
15
|
this.componentRefs = new WeakMap();
|
16
|
+
this.componentRendingStack = [];
|
16
17
|
let isRoot = true;
|
17
18
|
Object.keys(components).forEach(key => {
|
18
19
|
this.components[key] = (props) => {
|
19
|
-
const comp =
|
20
|
+
const comp = getCurrentInstance();
|
20
21
|
const textbusComponent = props.component;
|
21
22
|
textbusComponent.changeMarker.onChange.subscribe(() => {
|
22
23
|
if (textbusComponent.changeMarker.dirty) {
|
@@ -32,17 +33,34 @@ class Adapter extends DomAdapter {
|
|
32
33
|
onUpdated(() => {
|
33
34
|
textbusComponent.changeMarker.rendered();
|
34
35
|
});
|
35
|
-
|
36
|
+
const component = props.component;
|
37
|
+
const instance = components[key](props);
|
38
|
+
if (typeof instance === 'function') {
|
39
|
+
return () => {
|
40
|
+
component.__slots__.length = 0;
|
41
|
+
this.componentRendingStack.push(component);
|
42
|
+
const vNode = instance();
|
43
|
+
this.componentRendingStack.pop();
|
44
|
+
return vNode;
|
45
|
+
};
|
46
|
+
}
|
47
|
+
const self = this;
|
48
|
+
return Object.assign(Object.assign({}, instance), { $render() {
|
49
|
+
component.__slots__.length = 0;
|
50
|
+
self.componentRendingStack.push(component);
|
51
|
+
const vNode = instance.$render();
|
52
|
+
self.componentRendingStack.pop();
|
53
|
+
return vNode;
|
54
|
+
} });
|
36
55
|
};
|
37
56
|
});
|
38
57
|
}
|
39
58
|
componentRender(component) {
|
40
59
|
const comp = this.components[component.name] || this.components['*'];
|
41
60
|
if (comp) {
|
42
|
-
component.changeMarker.rendered();
|
43
61
|
let ref = this.componentRefs.get(component);
|
44
62
|
if (!ref) {
|
45
|
-
ref =
|
63
|
+
ref = createDynamicRef(rootNode => {
|
46
64
|
this.componentRootElementCaches.set(component, rootNode);
|
47
65
|
return () => {
|
48
66
|
this.componentRootElementCaches.remove(component);
|
@@ -57,8 +75,10 @@ class Adapter extends DomAdapter {
|
|
57
75
|
}
|
58
76
|
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
59
77
|
}
|
60
|
-
slotRender(slot, slotHostRender) {
|
61
|
-
const
|
78
|
+
slotRender(slot, slotHostRender, renderEnv) {
|
79
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
80
|
+
context.__slots__.push(slot);
|
81
|
+
const vElement = slot.toTree(slotHostRender, renderEnv);
|
62
82
|
this.slotRootVElementCaches.set(slot, vElement);
|
63
83
|
const vNodeToJSX = (vNode) => {
|
64
84
|
const children = [];
|
@@ -94,10 +114,13 @@ class Adapter extends DomAdapter {
|
|
94
114
|
};
|
95
115
|
const jsxNode = vNodeToJSX(vElement);
|
96
116
|
const currentRef = jsxNode.props.ref;
|
97
|
-
const ref =
|
117
|
+
const ref = createDynamicRef(nativeNode => {
|
98
118
|
this.slotRootNativeElementCaches.set(slot, nativeNode);
|
119
|
+
return () => {
|
120
|
+
this.slotRootNativeElementCaches.remove(slot);
|
121
|
+
};
|
99
122
|
});
|
100
|
-
if (currentRef instanceof
|
123
|
+
if (currentRef instanceof DynamicRef) {
|
101
124
|
jsxNode.props.ref = [currentRef, ref];
|
102
125
|
}
|
103
126
|
else if (Array.isArray(currentRef)) {
|
package/bundles/index.js
CHANGED
@@ -15,10 +15,11 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
15
15
|
this.onViewUpdated = new stream.Subject();
|
16
16
|
this.components = {};
|
17
17
|
this.componentRefs = new WeakMap();
|
18
|
+
this.componentRendingStack = [];
|
18
19
|
let isRoot = true;
|
19
20
|
Object.keys(components).forEach(key => {
|
20
21
|
this.components[key] = (props) => {
|
21
|
-
const comp = core$1.
|
22
|
+
const comp = core$1.getCurrentInstance();
|
22
23
|
const textbusComponent = props.component;
|
23
24
|
textbusComponent.changeMarker.onChange.subscribe(() => {
|
24
25
|
if (textbusComponent.changeMarker.dirty) {
|
@@ -34,17 +35,34 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
34
35
|
core$1.onUpdated(() => {
|
35
36
|
textbusComponent.changeMarker.rendered();
|
36
37
|
});
|
37
|
-
|
38
|
+
const component = props.component;
|
39
|
+
const instance = components[key](props);
|
40
|
+
if (typeof instance === 'function') {
|
41
|
+
return () => {
|
42
|
+
component.__slots__.length = 0;
|
43
|
+
this.componentRendingStack.push(component);
|
44
|
+
const vNode = instance();
|
45
|
+
this.componentRendingStack.pop();
|
46
|
+
return vNode;
|
47
|
+
};
|
48
|
+
}
|
49
|
+
const self = this;
|
50
|
+
return Object.assign(Object.assign({}, instance), { $render() {
|
51
|
+
component.__slots__.length = 0;
|
52
|
+
self.componentRendingStack.push(component);
|
53
|
+
const vNode = instance.$render();
|
54
|
+
self.componentRendingStack.pop();
|
55
|
+
return vNode;
|
56
|
+
} });
|
38
57
|
};
|
39
58
|
});
|
40
59
|
}
|
41
60
|
componentRender(component) {
|
42
61
|
const comp = this.components[component.name] || this.components['*'];
|
43
62
|
if (comp) {
|
44
|
-
component.changeMarker.rendered();
|
45
63
|
let ref = this.componentRefs.get(component);
|
46
64
|
if (!ref) {
|
47
|
-
ref = core$1.
|
65
|
+
ref = core$1.createDynamicRef(rootNode => {
|
48
66
|
this.componentRootElementCaches.set(component, rootNode);
|
49
67
|
return () => {
|
50
68
|
this.componentRootElementCaches.remove(component);
|
@@ -59,8 +77,10 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
59
77
|
}
|
60
78
|
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
61
79
|
}
|
62
|
-
slotRender(slot, slotHostRender) {
|
63
|
-
const
|
80
|
+
slotRender(slot, slotHostRender, renderEnv) {
|
81
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
82
|
+
context.__slots__.push(slot);
|
83
|
+
const vElement = slot.toTree(slotHostRender, renderEnv);
|
64
84
|
this.slotRootVElementCaches.set(slot, vElement);
|
65
85
|
const vNodeToJSX = (vNode) => {
|
66
86
|
const children = [];
|
@@ -96,10 +116,13 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
96
116
|
};
|
97
117
|
const jsxNode = vNodeToJSX(vElement);
|
98
118
|
const currentRef = jsxNode.props.ref;
|
99
|
-
const ref = core$1.
|
119
|
+
const ref = core$1.createDynamicRef(nativeNode => {
|
100
120
|
this.slotRootNativeElementCaches.set(slot, nativeNode);
|
121
|
+
return () => {
|
122
|
+
this.slotRootNativeElementCaches.remove(slot);
|
123
|
+
};
|
101
124
|
});
|
102
|
-
if (currentRef instanceof core$1.
|
125
|
+
if (currentRef instanceof core$1.DynamicRef) {
|
103
126
|
jsxNode.props.ref = [currentRef, ref];
|
104
127
|
}
|
105
128
|
else if (Array.isArray(currentRef)) {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@textbus/adapter-viewfly",
|
3
|
-
"version": "4.0.0-alpha.
|
3
|
+
"version": "4.0.0-alpha.30",
|
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",
|
@@ -25,10 +25,10 @@
|
|
25
25
|
"typescript editor"
|
26
26
|
],
|
27
27
|
"dependencies": {
|
28
|
-
"@tanbo/stream": "^1.2.
|
29
|
-
"@textbus/core": "^4.0.0-alpha.
|
30
|
-
"@textbus/platform-browser": "^4.0.0-alpha.
|
31
|
-
"@viewfly/core": "^0.
|
28
|
+
"@tanbo/stream": "^1.2.3",
|
29
|
+
"@textbus/core": "^4.0.0-alpha.30",
|
30
|
+
"@textbus/platform-browser": "^4.0.0-alpha.30",
|
31
|
+
"@viewfly/core": "^0.6.0"
|
32
32
|
},
|
33
33
|
"devDependencies": {
|
34
34
|
"@rollup/plugin-commonjs": "^23.0.2",
|
@@ -48,5 +48,5 @@
|
|
48
48
|
"bugs": {
|
49
49
|
"url": "https://github.com/textbus/textbus.git/issues"
|
50
50
|
},
|
51
|
-
"gitHead": "
|
51
|
+
"gitHead": "9b14d8cf2a2473f31a36b51ee3d988ddecf776fb"
|
52
52
|
}
|