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