@textbus/adapter-viewfly 4.0.0-alpha.40 → 4.0.0-alpha.42
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/index.esm.js +227 -106
- package/bundles/index.js +228 -106
- package/bundles/public-api.d.ts +2 -1
- package/bundles/viewfly-adapter.d.ts +16 -0
- package/bundles/viewfly-v-dom-adapter.d.ts +18 -0
- package/package.json +5 -5
- package/bundles/adapter.d.ts +0 -23
package/bundles/index.esm.js
CHANGED
@@ -1,19 +1,99 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import { makeError, VElement, VTextNode, replaceEmpty, invokeListener } from '@textbus/core';
|
1
|
+
import { makeError, VElement, VTextNode, merge, Adapter, Subject } from '@textbus/core';
|
2
|
+
import { createDynamicRef, DynamicRef, jsx, withAnnotation, getCurrentInstance, onUpdated } from '@viewfly/core';
|
4
3
|
import { DomAdapter } from '@textbus/platform-browser';
|
4
|
+
import { VDOMElement } from '@viewfly/platform-browser';
|
5
5
|
|
6
|
-
const adapterError = makeError('
|
7
|
-
|
8
|
-
* Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器,用于在 Viewfly 项目中渲染 Textbus 数据
|
9
|
-
*/
|
10
|
-
class Adapter extends DomAdapter {
|
6
|
+
const adapterError$1 = makeError('ViewflyDOMRenderer');
|
7
|
+
class ViewflyAdapter extends DomAdapter {
|
11
8
|
constructor(components, mount) {
|
12
|
-
super(
|
13
|
-
|
9
|
+
super({
|
10
|
+
createCompositionNode(compositionState, updateNativeCompositionNode) {
|
11
|
+
const ref = createDynamicRef(node => {
|
12
|
+
updateNativeCompositionNode(node);
|
13
|
+
return () => {
|
14
|
+
updateNativeCompositionNode(null);
|
15
|
+
};
|
16
|
+
});
|
17
|
+
return new VElement('span', {
|
18
|
+
style: {
|
19
|
+
textDecoration: 'underline'
|
20
|
+
},
|
21
|
+
ref
|
22
|
+
}, [
|
23
|
+
new VTextNode(compositionState.text)
|
24
|
+
]);
|
25
|
+
},
|
26
|
+
getParentNode(node) {
|
27
|
+
return node.parentNode;
|
28
|
+
},
|
29
|
+
getChildNodes(parentElement) {
|
30
|
+
return Array.from(parentElement.childNodes);
|
31
|
+
},
|
32
|
+
isNativeElementNode(node) {
|
33
|
+
return node instanceof HTMLElement;
|
34
|
+
},
|
35
|
+
getChildByIndex(parentElement, index) {
|
36
|
+
return parentElement.childNodes[index];
|
37
|
+
},
|
38
|
+
getAndUpdateSlotRootNativeElement(vEle, update) {
|
39
|
+
const currentRef = vEle.attrs.get('ref');
|
40
|
+
const ref = createDynamicRef(nativeNode => {
|
41
|
+
update(nativeNode);
|
42
|
+
});
|
43
|
+
if (currentRef instanceof DynamicRef) {
|
44
|
+
vEle.attrs.set('ref', [currentRef, ref]);
|
45
|
+
}
|
46
|
+
else if (Array.isArray(currentRef)) {
|
47
|
+
currentRef.push(ref);
|
48
|
+
}
|
49
|
+
else {
|
50
|
+
vEle.attrs.set('ref', ref);
|
51
|
+
}
|
52
|
+
},
|
53
|
+
componentRender: (component) => {
|
54
|
+
const comp = this.components[component.name] || this.components['*'];
|
55
|
+
if (comp) {
|
56
|
+
let ref = this.componentRefs.get(component);
|
57
|
+
if (!ref) {
|
58
|
+
ref = createDynamicRef(rootNode => {
|
59
|
+
this.componentRootElementCaches.set(component, rootNode);
|
60
|
+
return () => {
|
61
|
+
this.componentRootElementCaches.remove(component);
|
62
|
+
};
|
63
|
+
});
|
64
|
+
this.componentRefs.set(component, ref);
|
65
|
+
}
|
66
|
+
return jsx(comp, {
|
67
|
+
component,
|
68
|
+
rootRef: ref
|
69
|
+
}, component.id);
|
70
|
+
}
|
71
|
+
throw adapterError$1(`cannot found view component \`${component.name}\`!`);
|
72
|
+
},
|
73
|
+
vElementToViewElement(vNode, children) {
|
74
|
+
const key = vNode.attrs.get('key');
|
75
|
+
vNode.attrs.delete('key');
|
76
|
+
const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
|
77
|
+
a[b[0]] = b[1];
|
78
|
+
return a;
|
79
|
+
}, {})));
|
80
|
+
if (vNode.classes.size) {
|
81
|
+
props.class = Array.from(vNode.classes).join(' ');
|
82
|
+
}
|
83
|
+
if (vNode.styles) {
|
84
|
+
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
85
|
+
a[b[0]] = b[1];
|
86
|
+
return a;
|
87
|
+
}, {});
|
88
|
+
}
|
89
|
+
if (children.length) {
|
90
|
+
props.children = children;
|
91
|
+
}
|
92
|
+
return jsx(vNode.tagName, props, key);
|
93
|
+
}
|
94
|
+
}, mount);
|
14
95
|
this.components = {};
|
15
96
|
this.componentRefs = new WeakMap();
|
16
|
-
this.componentRendingStack = [];
|
17
97
|
let isRoot = true;
|
18
98
|
Object.entries(components).forEach(([key, viewFlyComponent]) => {
|
19
99
|
this.components[key] = withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
|
@@ -38,7 +118,7 @@ class Adapter extends DomAdapter {
|
|
38
118
|
textbusComponent.changeMarker.rendered();
|
39
119
|
if (!this.componentRootElementCaches.get(textbusComponent)) {
|
40
120
|
// eslint-disable-next-line max-len
|
41
|
-
throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
121
|
+
throw adapterError$1(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
42
122
|
}
|
43
123
|
});
|
44
124
|
const component = props.component;
|
@@ -61,113 +141,154 @@ class Adapter extends DomAdapter {
|
|
61
141
|
});
|
62
142
|
});
|
63
143
|
}
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
144
|
+
copy() {
|
145
|
+
document.execCommand('copy');
|
146
|
+
}
|
147
|
+
}
|
148
|
+
|
149
|
+
const adapterError = makeError('ViewflyHTMLRenderer');
|
150
|
+
class ViewflyVDomAdapter extends Adapter {
|
151
|
+
constructor(components, mount) {
|
152
|
+
super({
|
153
|
+
createCompositionNode(compositionState, updateNativeCompositionNode) {
|
154
|
+
const ref = createDynamicRef(node => {
|
155
|
+
updateNativeCompositionNode(node);
|
71
156
|
return () => {
|
72
|
-
|
157
|
+
updateNativeCompositionNode(null);
|
73
158
|
};
|
74
159
|
});
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
const ref = createDynamicRef(node => {
|
101
|
-
this.compositionNode = node;
|
102
|
-
return () => {
|
103
|
-
this.compositionNode = null;
|
104
|
-
};
|
105
|
-
});
|
106
|
-
return new VElement('span', {
|
107
|
-
style: {
|
108
|
-
textDecoration: 'underline'
|
109
|
-
},
|
110
|
-
ref
|
111
|
-
}, [
|
112
|
-
new VTextNode(this.composition.text)
|
113
|
-
]);
|
160
|
+
return new VElement('span', {
|
161
|
+
style: {
|
162
|
+
textDecoration: 'underline'
|
163
|
+
},
|
164
|
+
ref
|
165
|
+
}, [
|
166
|
+
new VTextNode(compositionState.text)
|
167
|
+
]);
|
168
|
+
},
|
169
|
+
getParentNode(node) {
|
170
|
+
return node.parent;
|
171
|
+
},
|
172
|
+
getChildNodes(parentElement) {
|
173
|
+
return parentElement.children.slice();
|
174
|
+
},
|
175
|
+
isNativeElementNode(node) {
|
176
|
+
return node instanceof VDOMElement;
|
177
|
+
},
|
178
|
+
getChildByIndex(parentElement, index) {
|
179
|
+
return parentElement.children[index];
|
180
|
+
},
|
181
|
+
getAndUpdateSlotRootNativeElement(vEle, update) {
|
182
|
+
const currentRef = vEle.attrs.get('ref');
|
183
|
+
const ref = createDynamicRef(nativeNode => {
|
184
|
+
update(nativeNode);
|
114
185
|
});
|
115
|
-
|
116
|
-
|
117
|
-
const child = vNode.children[i];
|
118
|
-
if (child instanceof VElement) {
|
119
|
-
children.push(vNodeToJSX(child));
|
186
|
+
if (currentRef instanceof DynamicRef) {
|
187
|
+
vEle.attrs.set('ref', [currentRef, ref]);
|
120
188
|
}
|
121
|
-
else if (
|
122
|
-
|
189
|
+
else if (Array.isArray(currentRef)) {
|
190
|
+
currentRef.push(ref);
|
123
191
|
}
|
124
192
|
else {
|
125
|
-
|
126
|
-
|
127
|
-
|
193
|
+
vEle.attrs.set('ref', ref);
|
194
|
+
}
|
195
|
+
},
|
196
|
+
componentRender: (component) => {
|
197
|
+
const comp = this.components[component.name] || this.components['*'];
|
198
|
+
if (comp) {
|
199
|
+
let ref = this.componentRefs.get(component);
|
200
|
+
if (!ref) {
|
201
|
+
ref = createDynamicRef(rootNode => {
|
202
|
+
this.componentRootElementCaches.set(component, rootNode);
|
203
|
+
return () => {
|
204
|
+
this.componentRootElementCaches.remove(component);
|
205
|
+
};
|
206
|
+
});
|
207
|
+
this.componentRefs.set(component, ref);
|
128
208
|
}
|
209
|
+
return jsx(comp, {
|
210
|
+
component,
|
211
|
+
rootRef: ref
|
212
|
+
}, component.id);
|
129
213
|
}
|
130
|
-
|
131
|
-
|
132
|
-
vNode
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
}, {})));
|
137
|
-
if (vNode.classes.size) {
|
138
|
-
props.class = Array.from(vNode.classes).join(' ');
|
139
|
-
}
|
140
|
-
if (vNode.styles) {
|
141
|
-
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
214
|
+
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
215
|
+
},
|
216
|
+
vElementToViewElement(vNode, children) {
|
217
|
+
const key = vNode.attrs.get('key');
|
218
|
+
vNode.attrs.delete('key');
|
219
|
+
const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
|
142
220
|
a[b[0]] = b[1];
|
143
221
|
return a;
|
144
|
-
}, {});
|
145
|
-
|
146
|
-
|
147
|
-
|
222
|
+
}, {})));
|
223
|
+
if (vNode.classes.size) {
|
224
|
+
props.class = Array.from(vNode.classes).join(' ');
|
225
|
+
}
|
226
|
+
if (vNode.styles) {
|
227
|
+
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
228
|
+
a[b[0]] = b[1];
|
229
|
+
return a;
|
230
|
+
}, {});
|
231
|
+
}
|
232
|
+
if (children.length) {
|
233
|
+
props.children = children;
|
234
|
+
}
|
235
|
+
return jsx(vNode.tagName, props, key);
|
148
236
|
}
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
237
|
+
}, mount);
|
238
|
+
this.onViewUpdated = new Subject();
|
239
|
+
this.host = new VDOMElement('body');
|
240
|
+
this.components = {};
|
241
|
+
this.componentRefs = new WeakMap();
|
242
|
+
let isRoot = true;
|
243
|
+
Object.entries(components).forEach(([key, viewFlyComponent]) => {
|
244
|
+
this.components[key] = withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
|
245
|
+
const comp = getCurrentInstance();
|
246
|
+
const textbusComponent = props.component;
|
247
|
+
merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
|
248
|
+
if (textbusComponent.changeMarker.dirty) {
|
249
|
+
comp.markAsDirtied();
|
250
|
+
}
|
251
|
+
});
|
252
|
+
if (isRoot) {
|
253
|
+
onUpdated(() => {
|
254
|
+
this.onViewUpdated.next();
|
255
|
+
});
|
256
|
+
isRoot = false;
|
257
|
+
}
|
258
|
+
onUpdated(() => {
|
259
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
260
|
+
if (context === component) {
|
261
|
+
this.componentRendingStack.pop();
|
262
|
+
}
|
263
|
+
textbusComponent.changeMarker.rendered();
|
264
|
+
if (!this.componentRootElementCaches.get(textbusComponent)) {
|
265
|
+
// eslint-disable-next-line max-len
|
266
|
+
throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
267
|
+
}
|
268
|
+
});
|
269
|
+
const component = props.component;
|
270
|
+
const instance = viewFlyComponent(props);
|
271
|
+
if (typeof instance === 'function') {
|
272
|
+
return () => {
|
273
|
+
component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
|
274
|
+
component.__slots__.length = 0;
|
275
|
+
this.componentRendingStack.push(component);
|
276
|
+
return instance();
|
277
|
+
};
|
278
|
+
}
|
279
|
+
const self = this;
|
280
|
+
return Object.assign(Object.assign({}, instance), { $render() {
|
281
|
+
component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
|
282
|
+
component.__slots__.length = 0;
|
283
|
+
self.componentRendingStack.push(component);
|
284
|
+
return instance.$render();
|
285
|
+
} });
|
286
|
+
});
|
158
287
|
});
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
else if (Array.isArray(currentRef)) {
|
163
|
-
currentRef.push(ref);
|
164
|
-
}
|
165
|
-
else {
|
166
|
-
jsxNode.props.ref = ref;
|
167
|
-
}
|
168
|
-
slot.__changeMarker__.rendered();
|
169
|
-
return jsxNode;
|
288
|
+
}
|
289
|
+
copy() {
|
290
|
+
document.execCommand('copy');
|
170
291
|
}
|
171
292
|
}
|
172
293
|
|
173
|
-
export {
|
294
|
+
export { ViewflyAdapter, ViewflyVDomAdapter };
|
package/bundles/index.js
CHANGED
@@ -1,27 +1,107 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
var core$1 = require('@viewfly/core');
|
4
|
-
var stream = require('@tanbo/stream');
|
5
3
|
var core = require('@textbus/core');
|
4
|
+
var core$1 = require('@viewfly/core');
|
6
5
|
var platformBrowser = require('@textbus/platform-browser');
|
6
|
+
var platformBrowser$1 = require('@viewfly/platform-browser');
|
7
7
|
|
8
|
-
const adapterError = core.makeError('
|
9
|
-
|
10
|
-
* Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器,用于在 Viewfly 项目中渲染 Textbus 数据
|
11
|
-
*/
|
12
|
-
class Adapter extends platformBrowser.DomAdapter {
|
8
|
+
const adapterError$1 = core.makeError('ViewflyDOMRenderer');
|
9
|
+
class ViewflyAdapter extends platformBrowser.DomAdapter {
|
13
10
|
constructor(components, mount) {
|
14
|
-
super(
|
15
|
-
|
11
|
+
super({
|
12
|
+
createCompositionNode(compositionState, updateNativeCompositionNode) {
|
13
|
+
const ref = core$1.createDynamicRef(node => {
|
14
|
+
updateNativeCompositionNode(node);
|
15
|
+
return () => {
|
16
|
+
updateNativeCompositionNode(null);
|
17
|
+
};
|
18
|
+
});
|
19
|
+
return new core.VElement('span', {
|
20
|
+
style: {
|
21
|
+
textDecoration: 'underline'
|
22
|
+
},
|
23
|
+
ref
|
24
|
+
}, [
|
25
|
+
new core.VTextNode(compositionState.text)
|
26
|
+
]);
|
27
|
+
},
|
28
|
+
getParentNode(node) {
|
29
|
+
return node.parentNode;
|
30
|
+
},
|
31
|
+
getChildNodes(parentElement) {
|
32
|
+
return Array.from(parentElement.childNodes);
|
33
|
+
},
|
34
|
+
isNativeElementNode(node) {
|
35
|
+
return node instanceof HTMLElement;
|
36
|
+
},
|
37
|
+
getChildByIndex(parentElement, index) {
|
38
|
+
return parentElement.childNodes[index];
|
39
|
+
},
|
40
|
+
getAndUpdateSlotRootNativeElement(vEle, update) {
|
41
|
+
const currentRef = vEle.attrs.get('ref');
|
42
|
+
const ref = core$1.createDynamicRef(nativeNode => {
|
43
|
+
update(nativeNode);
|
44
|
+
});
|
45
|
+
if (currentRef instanceof core$1.DynamicRef) {
|
46
|
+
vEle.attrs.set('ref', [currentRef, ref]);
|
47
|
+
}
|
48
|
+
else if (Array.isArray(currentRef)) {
|
49
|
+
currentRef.push(ref);
|
50
|
+
}
|
51
|
+
else {
|
52
|
+
vEle.attrs.set('ref', ref);
|
53
|
+
}
|
54
|
+
},
|
55
|
+
componentRender: (component) => {
|
56
|
+
const comp = this.components[component.name] || this.components['*'];
|
57
|
+
if (comp) {
|
58
|
+
let ref = this.componentRefs.get(component);
|
59
|
+
if (!ref) {
|
60
|
+
ref = core$1.createDynamicRef(rootNode => {
|
61
|
+
this.componentRootElementCaches.set(component, rootNode);
|
62
|
+
return () => {
|
63
|
+
this.componentRootElementCaches.remove(component);
|
64
|
+
};
|
65
|
+
});
|
66
|
+
this.componentRefs.set(component, ref);
|
67
|
+
}
|
68
|
+
return core$1.jsx(comp, {
|
69
|
+
component,
|
70
|
+
rootRef: ref
|
71
|
+
}, component.id);
|
72
|
+
}
|
73
|
+
throw adapterError$1(`cannot found view component \`${component.name}\`!`);
|
74
|
+
},
|
75
|
+
vElementToViewElement(vNode, children) {
|
76
|
+
const key = vNode.attrs.get('key');
|
77
|
+
vNode.attrs.delete('key');
|
78
|
+
const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
|
79
|
+
a[b[0]] = b[1];
|
80
|
+
return a;
|
81
|
+
}, {})));
|
82
|
+
if (vNode.classes.size) {
|
83
|
+
props.class = Array.from(vNode.classes).join(' ');
|
84
|
+
}
|
85
|
+
if (vNode.styles) {
|
86
|
+
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
87
|
+
a[b[0]] = b[1];
|
88
|
+
return a;
|
89
|
+
}, {});
|
90
|
+
}
|
91
|
+
if (children.length) {
|
92
|
+
props.children = children;
|
93
|
+
}
|
94
|
+
return core$1.jsx(vNode.tagName, props, key);
|
95
|
+
}
|
96
|
+
}, mount);
|
16
97
|
this.components = {};
|
17
98
|
this.componentRefs = new WeakMap();
|
18
|
-
this.componentRendingStack = [];
|
19
99
|
let isRoot = true;
|
20
100
|
Object.entries(components).forEach(([key, viewFlyComponent]) => {
|
21
101
|
this.components[key] = core$1.withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
|
22
102
|
const comp = core$1.getCurrentInstance();
|
23
103
|
const textbusComponent = props.component;
|
24
|
-
|
104
|
+
core.merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
|
25
105
|
if (textbusComponent.changeMarker.dirty) {
|
26
106
|
comp.markAsDirtied();
|
27
107
|
}
|
@@ -40,7 +120,7 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
40
120
|
textbusComponent.changeMarker.rendered();
|
41
121
|
if (!this.componentRootElementCaches.get(textbusComponent)) {
|
42
122
|
// eslint-disable-next-line max-len
|
43
|
-
throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
123
|
+
throw adapterError$1(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
44
124
|
}
|
45
125
|
});
|
46
126
|
const component = props.component;
|
@@ -63,113 +143,155 @@ class Adapter extends platformBrowser.DomAdapter {
|
|
63
143
|
});
|
64
144
|
});
|
65
145
|
}
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
146
|
+
copy() {
|
147
|
+
document.execCommand('copy');
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
const adapterError = core.makeError('ViewflyHTMLRenderer');
|
152
|
+
class ViewflyVDomAdapter extends core.Adapter {
|
153
|
+
constructor(components, mount) {
|
154
|
+
super({
|
155
|
+
createCompositionNode(compositionState, updateNativeCompositionNode) {
|
156
|
+
const ref = core$1.createDynamicRef(node => {
|
157
|
+
updateNativeCompositionNode(node);
|
73
158
|
return () => {
|
74
|
-
|
159
|
+
updateNativeCompositionNode(null);
|
75
160
|
};
|
76
161
|
});
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
const ref = core$1.createDynamicRef(node => {
|
103
|
-
this.compositionNode = node;
|
104
|
-
return () => {
|
105
|
-
this.compositionNode = null;
|
106
|
-
};
|
107
|
-
});
|
108
|
-
return new core.VElement('span', {
|
109
|
-
style: {
|
110
|
-
textDecoration: 'underline'
|
111
|
-
},
|
112
|
-
ref
|
113
|
-
}, [
|
114
|
-
new core.VTextNode(this.composition.text)
|
115
|
-
]);
|
162
|
+
return new core.VElement('span', {
|
163
|
+
style: {
|
164
|
+
textDecoration: 'underline'
|
165
|
+
},
|
166
|
+
ref
|
167
|
+
}, [
|
168
|
+
new core.VTextNode(compositionState.text)
|
169
|
+
]);
|
170
|
+
},
|
171
|
+
getParentNode(node) {
|
172
|
+
return node.parent;
|
173
|
+
},
|
174
|
+
getChildNodes(parentElement) {
|
175
|
+
return parentElement.children.slice();
|
176
|
+
},
|
177
|
+
isNativeElementNode(node) {
|
178
|
+
return node instanceof platformBrowser$1.VDOMElement;
|
179
|
+
},
|
180
|
+
getChildByIndex(parentElement, index) {
|
181
|
+
return parentElement.children[index];
|
182
|
+
},
|
183
|
+
getAndUpdateSlotRootNativeElement(vEle, update) {
|
184
|
+
const currentRef = vEle.attrs.get('ref');
|
185
|
+
const ref = core$1.createDynamicRef(nativeNode => {
|
186
|
+
update(nativeNode);
|
116
187
|
});
|
117
|
-
|
118
|
-
|
119
|
-
const child = vNode.children[i];
|
120
|
-
if (child instanceof core.VElement) {
|
121
|
-
children.push(vNodeToJSX(child));
|
188
|
+
if (currentRef instanceof core$1.DynamicRef) {
|
189
|
+
vEle.attrs.set('ref', [currentRef, ref]);
|
122
190
|
}
|
123
|
-
else if (
|
124
|
-
|
191
|
+
else if (Array.isArray(currentRef)) {
|
192
|
+
currentRef.push(ref);
|
125
193
|
}
|
126
194
|
else {
|
127
|
-
|
128
|
-
|
129
|
-
|
195
|
+
vEle.attrs.set('ref', ref);
|
196
|
+
}
|
197
|
+
},
|
198
|
+
componentRender: (component) => {
|
199
|
+
const comp = this.components[component.name] || this.components['*'];
|
200
|
+
if (comp) {
|
201
|
+
let ref = this.componentRefs.get(component);
|
202
|
+
if (!ref) {
|
203
|
+
ref = core$1.createDynamicRef(rootNode => {
|
204
|
+
this.componentRootElementCaches.set(component, rootNode);
|
205
|
+
return () => {
|
206
|
+
this.componentRootElementCaches.remove(component);
|
207
|
+
};
|
208
|
+
});
|
209
|
+
this.componentRefs.set(component, ref);
|
130
210
|
}
|
211
|
+
return core$1.jsx(comp, {
|
212
|
+
component,
|
213
|
+
rootRef: ref
|
214
|
+
}, component.id);
|
131
215
|
}
|
132
|
-
|
133
|
-
|
134
|
-
vNode
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
}, {})));
|
139
|
-
if (vNode.classes.size) {
|
140
|
-
props.class = Array.from(vNode.classes).join(' ');
|
141
|
-
}
|
142
|
-
if (vNode.styles) {
|
143
|
-
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
216
|
+
throw adapterError(`cannot found view component \`${component.name}\`!`);
|
217
|
+
},
|
218
|
+
vElementToViewElement(vNode, children) {
|
219
|
+
const key = vNode.attrs.get('key');
|
220
|
+
vNode.attrs.delete('key');
|
221
|
+
const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
|
144
222
|
a[b[0]] = b[1];
|
145
223
|
return a;
|
146
|
-
}, {});
|
147
|
-
|
148
|
-
|
149
|
-
|
224
|
+
}, {})));
|
225
|
+
if (vNode.classes.size) {
|
226
|
+
props.class = Array.from(vNode.classes).join(' ');
|
227
|
+
}
|
228
|
+
if (vNode.styles) {
|
229
|
+
props.style = Array.from(vNode.styles).reduce((a, b) => {
|
230
|
+
a[b[0]] = b[1];
|
231
|
+
return a;
|
232
|
+
}, {});
|
233
|
+
}
|
234
|
+
if (children.length) {
|
235
|
+
props.children = children;
|
236
|
+
}
|
237
|
+
return core$1.jsx(vNode.tagName, props, key);
|
150
238
|
}
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
239
|
+
}, mount);
|
240
|
+
this.onViewUpdated = new core.Subject();
|
241
|
+
this.host = new platformBrowser$1.VDOMElement('body');
|
242
|
+
this.components = {};
|
243
|
+
this.componentRefs = new WeakMap();
|
244
|
+
let isRoot = true;
|
245
|
+
Object.entries(components).forEach(([key, viewFlyComponent]) => {
|
246
|
+
this.components[key] = core$1.withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
|
247
|
+
const comp = core$1.getCurrentInstance();
|
248
|
+
const textbusComponent = props.component;
|
249
|
+
core.merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
|
250
|
+
if (textbusComponent.changeMarker.dirty) {
|
251
|
+
comp.markAsDirtied();
|
252
|
+
}
|
253
|
+
});
|
254
|
+
if (isRoot) {
|
255
|
+
core$1.onUpdated(() => {
|
256
|
+
this.onViewUpdated.next();
|
257
|
+
});
|
258
|
+
isRoot = false;
|
259
|
+
}
|
260
|
+
core$1.onUpdated(() => {
|
261
|
+
const context = this.componentRendingStack[this.componentRendingStack.length - 1];
|
262
|
+
if (context === component) {
|
263
|
+
this.componentRendingStack.pop();
|
264
|
+
}
|
265
|
+
textbusComponent.changeMarker.rendered();
|
266
|
+
if (!this.componentRootElementCaches.get(textbusComponent)) {
|
267
|
+
// eslint-disable-next-line max-len
|
268
|
+
throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
|
269
|
+
}
|
270
|
+
});
|
271
|
+
const component = props.component;
|
272
|
+
const instance = viewFlyComponent(props);
|
273
|
+
if (typeof instance === 'function') {
|
274
|
+
return () => {
|
275
|
+
component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
|
276
|
+
component.__slots__.length = 0;
|
277
|
+
this.componentRendingStack.push(component);
|
278
|
+
return instance();
|
279
|
+
};
|
280
|
+
}
|
281
|
+
const self = this;
|
282
|
+
return Object.assign(Object.assign({}, instance), { $render() {
|
283
|
+
component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
|
284
|
+
component.__slots__.length = 0;
|
285
|
+
self.componentRendingStack.push(component);
|
286
|
+
return instance.$render();
|
287
|
+
} });
|
288
|
+
});
|
160
289
|
});
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
else if (Array.isArray(currentRef)) {
|
165
|
-
currentRef.push(ref);
|
166
|
-
}
|
167
|
-
else {
|
168
|
-
jsxNode.props.ref = ref;
|
169
|
-
}
|
170
|
-
slot.__changeMarker__.rendered();
|
171
|
-
return jsxNode;
|
290
|
+
}
|
291
|
+
copy() {
|
292
|
+
document.execCommand('copy');
|
172
293
|
}
|
173
294
|
}
|
174
295
|
|
175
|
-
exports.
|
296
|
+
exports.ViewflyAdapter = ViewflyAdapter;
|
297
|
+
exports.ViewflyVDomAdapter = ViewflyVDomAdapter;
|
package/bundles/public-api.d.ts
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
export * from './adapter';
|
1
|
+
export * from './viewfly-adapter';
|
2
|
+
export * from './viewfly-v-dom-adapter';
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { Component, ViewMount } from '@textbus/core';
|
2
|
+
import { DynamicRef } from '@viewfly/core';
|
3
|
+
import { DomAdapter } from '@textbus/platform-browser';
|
4
|
+
export interface ViewComponentProps<T extends Component> {
|
5
|
+
component: T;
|
6
|
+
rootRef: DynamicRef<HTMLElement>;
|
7
|
+
}
|
8
|
+
export interface ViewflyAdapterComponents {
|
9
|
+
[key: string]: JSXInternal.ComponentSetup<ViewComponentProps<any>>;
|
10
|
+
}
|
11
|
+
export declare class ViewflyAdapter extends DomAdapter<JSXInternal.ViewNode, JSXInternal.Element> {
|
12
|
+
private components;
|
13
|
+
private componentRefs;
|
14
|
+
constructor(components: ViewflyAdapterComponents, mount: ViewMount<JSXInternal.ViewNode, HTMLElement>);
|
15
|
+
copy(): void;
|
16
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { Component, ViewMount, Adapter, Subject } from '@textbus/core';
|
2
|
+
import { VDOMElement, VDOMText } from '@viewfly/platform-browser';
|
3
|
+
import { DynamicRef } from '@viewfly/core';
|
4
|
+
export interface ViewVDomComponentProps<T extends Component> {
|
5
|
+
component: T;
|
6
|
+
rootRef: DynamicRef<VDOMElement>;
|
7
|
+
}
|
8
|
+
export interface ViewflyVDomAdapterComponents {
|
9
|
+
[key: string]: JSXInternal.ComponentSetup<ViewVDomComponentProps<any>>;
|
10
|
+
}
|
11
|
+
export declare class ViewflyVDomAdapter extends Adapter<VDOMElement, VDOMText, JSXInternal.ViewNode, JSXInternal.Element> {
|
12
|
+
onViewUpdated: Subject<void>;
|
13
|
+
host: VDOMElement;
|
14
|
+
private components;
|
15
|
+
private componentRefs;
|
16
|
+
constructor(components: ViewflyVDomAdapterComponents, mount: ViewMount<JSXInternal.ViewNode, VDOMElement>);
|
17
|
+
copy(): void;
|
18
|
+
}
|
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.42",
|
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,9 +26,9 @@
|
|
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.
|
31
|
-
"@viewfly/core": "^1.0.0-alpha.
|
29
|
+
"@textbus/core": "^4.0.0-alpha.42",
|
30
|
+
"@textbus/platform-browser": "^4.0.0-alpha.42",
|
31
|
+
"@viewfly/core": "^1.0.0-alpha.1"
|
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": "690f066925bac5379883f54f470684c74645d12e"
|
52
52
|
}
|
package/bundles/adapter.d.ts
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
import { DynamicRef, JSXNode } from '@viewfly/core';
|
2
|
-
import { Subject } from '@tanbo/stream';
|
3
|
-
import { Component, Slot, VElement, VTextNode } from '@textbus/core';
|
4
|
-
import { DomAdapter } from '@textbus/platform-browser';
|
5
|
-
export interface ViewComponentProps<T extends Component> {
|
6
|
-
component: T;
|
7
|
-
rootRef: DynamicRef<HTMLElement>;
|
8
|
-
}
|
9
|
-
export interface ViewflyAdapterComponents {
|
10
|
-
[key: string]: JSXInternal.ComponentSetup<ViewComponentProps<any>>;
|
11
|
-
}
|
12
|
-
/**
|
13
|
-
* Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器,用于在 Viewfly 项目中渲染 Textbus 数据
|
14
|
-
*/
|
15
|
-
export declare class Adapter extends DomAdapter<JSXNode, JSXInternal.Element> {
|
16
|
-
onViewUpdated: Subject<void>;
|
17
|
-
private components;
|
18
|
-
private componentRefs;
|
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;
|
23
|
-
}
|