@textbus/adapter-viewfly 4.0.0-alpha.5 → 4.0.0-alpha.51

package/bundles/index.esm.js

@@ -1,24 +1,108 @@
-import { provide, onUpdated, useRef, jsx, Ref } from '@viewfly/core';
-import { Subject } from '@tanbo/stream';
-import { makeError, VElement, VTextNode, replaceEmpty } from '@textbus/core';
+import { makeError, VElement, VTextNode, merge, Adapter, Subject } from '@textbus/core';
+import { createDynamicRef, DynamicRef, jsx, withAnnotation, getCurrentInstance, onUpdated } from '@viewfly/core';
 import { DomAdapter } from '@textbus/platform-browser';
+import { VDOMElement } from '@viewfly/platform-browser';
 
-const adapterError = makeError('ViewflyAdapter');
-/**
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
- */
-class Adapter extends DomAdapter {
+const adapterError$1 = makeError('ViewflyDOMRenderer');
+class ViewflyAdapter extends DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new Subject();
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                const ref = createDynamicRef(node => {
+                    updateNativeCompositionNode(node);
+                    return () => {
+                        updateNativeCompositionNode(null);
+                    };
+                });
+                return new VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref
+                }, [
+                    new VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parentNode;
+            },
+            getChildNodes(parentElement) {
+                return Array.from(parentElement.childNodes);
+            },
+            isNativeElementNode(node) {
+                return node instanceof HTMLElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.childNodes[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                const ref = createDynamicRef(nativeNode => {
+                    update(nativeNode);
+                    return () => {
+                        update(null);
+                    };
+                });
+                if (currentRef instanceof DynamicRef) {
+                    vEle.attrs.set('ref', [currentRef, ref]);
+                }
+                else if (Array.isArray(currentRef)) {
+                    currentRef.push(ref);
+                }
+                else {
+                    vEle.attrs.set('ref', ref);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let ref = this.componentRefs.get(component);
+                    if (!ref) {
+                        ref = createDynamicRef(rootNode => {
+                            this.componentRootElementCaches.set(component, rootNode);
+                            return () => {
+                                this.componentRootElementCaches.remove(component);
+                            };
+                        });
+                        this.componentRefs.set(component, ref);
+                    }
+                    return jsx(comp, {
+                        component,
+                        rootRef: ref
+                    }, component.id);
+                }
+                throw adapterError$1(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const key = vNode.attrs.get('key');
+                vNode.attrs.delete('key');
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
+                    a[b[0]] = b[1];
+                    return a;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.class = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                if (children.length) {
+                    props.children = children;
+                }
+                return jsx(vNode.tagName, props, key);
+            }
+        }, mount);
         this.components = {};
         this.componentRefs = new WeakMap();
         let isRoot = true;
-        Object.keys(components).forEach(key => {
-            this.components[key] = (props) => {
-                const comp = provide([]);
+        Object.entries(components).forEach(([key, viewFlyComponent]) => {
+            this.components[key] = withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
+                const comp = getCurrentInstance();
                 const textbusComponent = props.component;
-                textbusComponent.changeMarker.onChange.subscribe(() => {
+                merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
                     if (textbusComponent.changeMarker.dirty) {
                         comp.markAsDirtied();
                     }
@@ -30,85 +114,187 @@ class Adapter extends DomAdapter {
                     isRoot = false;
                 }
                 onUpdated(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
                     textbusComponent.changeMarker.rendered();
+                    if (!this.componentRootElementCaches.get(textbusComponent)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError$1(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
                 });
-                return components[key](props);
-            };
+                const component = props.component;
+                const instance = viewFlyComponent(props);
+                if (typeof instance === 'function') {
+                    return () => {
+                        component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        this.componentRendingStack.push(component);
+                        return instance();
+                    };
+                }
+                const self = this;
+                return Object.assign(Object.assign({}, instance), { $render() {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return instance.$render();
+                    } });
+            });
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            let ref = this.componentRefs.get(component);
-            if (!ref) {
-                ref = useRef(rootNode => {
-                    this.componentRootElementCaches.set(component, rootNode);
+    copy() {
+        document.execCommand('copy');
+    }
+}
+
+const adapterError = makeError('ViewflyHTMLRenderer');
+class ViewflyVDomAdapter extends Adapter {
+    constructor(components, mount) {
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                const ref = createDynamicRef(node => {
+                    updateNativeCompositionNode(node);
                     return () => {
-                        this.componentRootElementCaches.remove(component);
+                        updateNativeCompositionNode(null);
                     };
                 });
-                this.componentRefs.set(component, ref);
-            }
-            return jsx(comp, {
-                component,
-                rootRef: ref
-            }, component.id);
-        }
-        throw adapterError(`cannot found view component \`${component.name}\`!`);
-    }
-    slotRender(slot, slotHostRender, renderEnv) {
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            for (let i = 0; i < vNode.children.length; i++) {
-                const child = vNode.children[i];
-                if (child instanceof VElement) {
-                    children.push(vNodeToJSX(child));
-                }
-                else if (child instanceof VTextNode) {
-                    children.push(replaceEmpty(child.textContent));
+                return new VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref
+                }, [
+                    new VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parent;
+            },
+            getChildNodes(parentElement) {
+                return parentElement.children.slice();
+            },
+            isNativeElementNode(node) {
+                return node instanceof VDOMElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.children[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                const ref = createDynamicRef(nativeNode => {
+                    update(nativeNode);
+                    return () => {
+                        update(null);
+                    };
+                });
+                if (currentRef instanceof DynamicRef) {
+                    vEle.attrs.set('ref', [currentRef, ref]);
+                }
+                else if (Array.isArray(currentRef)) {
+                    currentRef.push(ref);
                 }
                 else {
-                    children.push(this.componentRender(child));
+                    vEle.attrs.set('ref', ref);
                 }
-            }
-            const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
-                a[b[0]] = b[1];
-                return a;
-            }, {})));
-            if (vNode.classes.size) {
-                props.class = Array.from(vNode.classes).join(' ');
-            }
-            if (vNode.styles) {
-                props.style = Array.from(vNode.styles).reduce((a, b) => {
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let ref = this.componentRefs.get(component);
+                    if (!ref) {
+                        ref = createDynamicRef(rootNode => {
+                            this.componentRootElementCaches.set(component, rootNode);
+                            return () => {
+                                this.componentRootElementCaches.remove(component);
+                            };
+                        });
+                        this.componentRefs.set(component, ref);
+                    }
+                    return jsx(comp, {
+                        component,
+                        rootRef: ref
+                    }, component.id);
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const key = vNode.attrs.get('key');
+                vNode.attrs.delete('key');
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
                     a[b[0]] = b[1];
                     return a;
-                }, {});
-            }
-            if (children.length) {
-                props.children = children;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.class = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                if (children.length) {
+                    props.children = children;
+                }
+                return jsx(vNode.tagName, props, key);
             }
-            return jsx(vNode.tagName, props);
-        };
-        const jsxNode = vNodeToJSX(vElement);
-        const currentRef = jsxNode.props.ref;
-        const ref = useRef(nativeNode => {
-            this.slotRootNativeElementCaches.set(slot, nativeNode);
+        }, mount);
+        this.onViewUpdated = new Subject();
+        this.host = new VDOMElement('body');
+        this.components = {};
+        this.componentRefs = new WeakMap();
+        let isRoot = true;
+        Object.entries(components).forEach(([key, viewFlyComponent]) => {
+            this.components[key] = withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
+                const comp = getCurrentInstance();
+                const textbusComponent = props.component;
+                merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
+                    if (textbusComponent.changeMarker.dirty) {
+                        comp.markAsDirtied();
+                    }
+                });
+                if (isRoot) {
+                    onUpdated(() => {
+                        this.onViewUpdated.next();
+                    });
+                    isRoot = false;
+                }
+                onUpdated(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
+                    textbusComponent.changeMarker.rendered();
+                    if (!this.componentRootElementCaches.get(textbusComponent)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
+                });
+                const component = props.component;
+                const instance = viewFlyComponent(props);
+                if (typeof instance === 'function') {
+                    return () => {
+                        component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        this.componentRendingStack.push(component);
+                        return instance();
+                    };
+                }
+                const self = this;
+                return Object.assign(Object.assign({}, instance), { $render() {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return instance.$render();
+                    } });
+            });
         });
-        if (currentRef instanceof Ref) {
-            jsxNode.props.ref = [currentRef, ref];
-        }
-        else if (Array.isArray(currentRef)) {
-            currentRef.push(ref);
-        }
-        else {
-            jsxNode.props.ref = ref;
-        }
-        slot.changeMarker.rendered();
-        return jsxNode;
+    }
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-export { Adapter };
+export { ViewflyAdapter, ViewflyVDomAdapter };

package/bundles/index.js

@@ -1,26 +1,110 @@
 'use strict';
 
-var core$1 = require('@viewfly/core');
-var stream = require('@tanbo/stream');
 var core = require('@textbus/core');
+var core$1 = require('@viewfly/core');
 var platformBrowser = require('@textbus/platform-browser');
+var platformBrowser$1 = require('@viewfly/platform-browser');
 
-const adapterError = core.makeError('ViewflyAdapter');
-/**
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
- */
-class Adapter extends platformBrowser.DomAdapter {
+const adapterError$1 = core.makeError('ViewflyDOMRenderer');
+class ViewflyAdapter extends platformBrowser.DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new stream.Subject();
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                const ref = core$1.createDynamicRef(node => {
+                    updateNativeCompositionNode(node);
+                    return () => {
+                        updateNativeCompositionNode(null);
+                    };
+                });
+                return new core.VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref
+                }, [
+                    new core.VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parentNode;
+            },
+            getChildNodes(parentElement) {
+                return Array.from(parentElement.childNodes);
+            },
+            isNativeElementNode(node) {
+                return node instanceof HTMLElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.childNodes[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                const ref = core$1.createDynamicRef(nativeNode => {
+                    update(nativeNode);
+                    return () => {
+                        update(null);
+                    };
+                });
+                if (currentRef instanceof core$1.DynamicRef) {
+                    vEle.attrs.set('ref', [currentRef, ref]);
+                }
+                else if (Array.isArray(currentRef)) {
+                    currentRef.push(ref);
+                }
+                else {
+                    vEle.attrs.set('ref', ref);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let ref = this.componentRefs.get(component);
+                    if (!ref) {
+                        ref = core$1.createDynamicRef(rootNode => {
+                            this.componentRootElementCaches.set(component, rootNode);
+                            return () => {
+                                this.componentRootElementCaches.remove(component);
+                            };
+                        });
+                        this.componentRefs.set(component, ref);
+                    }
+                    return core$1.jsx(comp, {
+                        component,
+                        rootRef: ref
+                    }, component.id);
+                }
+                throw adapterError$1(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const key = vNode.attrs.get('key');
+                vNode.attrs.delete('key');
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
+                    a[b[0]] = b[1];
+                    return a;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.class = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                if (children.length) {
+                    props.children = children;
+                }
+                return core$1.jsx(vNode.tagName, props, key);
+            }
+        }, mount);
         this.components = {};
         this.componentRefs = new WeakMap();
         let isRoot = true;
-        Object.keys(components).forEach(key => {
-            this.components[key] = (props) => {
-                const comp = core$1.provide([]);
+        Object.entries(components).forEach(([key, viewFlyComponent]) => {
+            this.components[key] = core$1.withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
+                const comp = core$1.getCurrentInstance();
                 const textbusComponent = props.component;
-                textbusComponent.changeMarker.onChange.subscribe(() => {
+                core.merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
                     if (textbusComponent.changeMarker.dirty) {
                         comp.markAsDirtied();
                     }
@@ -32,85 +116,188 @@ class Adapter extends platformBrowser.DomAdapter {
                     isRoot = false;
                 }
                 core$1.onUpdated(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
                     textbusComponent.changeMarker.rendered();
+                    if (!this.componentRootElementCaches.get(textbusComponent)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError$1(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
                 });
-                return components[key](props);
-            };
+                const component = props.component;
+                const instance = viewFlyComponent(props);
+                if (typeof instance === 'function') {
+                    return () => {
+                        component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        this.componentRendingStack.push(component);
+                        return instance();
+                    };
+                }
+                const self = this;
+                return Object.assign(Object.assign({}, instance), { $render() {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return instance.$render();
+                    } });
+            });
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            let ref = this.componentRefs.get(component);
-            if (!ref) {
-                ref = core$1.useRef(rootNode => {
-                    this.componentRootElementCaches.set(component, rootNode);
+    copy() {
+        document.execCommand('copy');
+    }
+}
+
+const adapterError = core.makeError('ViewflyHTMLRenderer');
+class ViewflyVDomAdapter extends core.Adapter {
+    constructor(components, mount) {
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                const ref = core$1.createDynamicRef(node => {
+                    updateNativeCompositionNode(node);
                     return () => {
-                        this.componentRootElementCaches.remove(component);
+                        updateNativeCompositionNode(null);
                     };
                 });
-                this.componentRefs.set(component, ref);
-            }
-            return core$1.jsx(comp, {
-                component,
-                rootRef: ref
-            }, component.id);
-        }
-        throw adapterError(`cannot found view component \`${component.name}\`!`);
-    }
-    slotRender(slot, slotHostRender, renderEnv) {
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            for (let i = 0; i < vNode.children.length; i++) {
-                const child = vNode.children[i];
-                if (child instanceof core.VElement) {
-                    children.push(vNodeToJSX(child));
-                }
-                else if (child instanceof core.VTextNode) {
-                    children.push(core.replaceEmpty(child.textContent));
+                return new core.VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref
+                }, [
+                    new core.VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parent;
+            },
+            getChildNodes(parentElement) {
+                return parentElement.children.slice();
+            },
+            isNativeElementNode(node) {
+                return node instanceof platformBrowser$1.VDOMElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.children[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                const ref = core$1.createDynamicRef(nativeNode => {
+                    update(nativeNode);
+                    return () => {
+                        update(null);
+                    };
+                });
+                if (currentRef instanceof core$1.DynamicRef) {
+                    vEle.attrs.set('ref', [currentRef, ref]);
+                }
+                else if (Array.isArray(currentRef)) {
+                    currentRef.push(ref);
                 }
                 else {
-                    children.push(this.componentRender(child));
+                    vEle.attrs.set('ref', ref);
                 }
-            }
-            const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
-                a[b[0]] = b[1];
-                return a;
-            }, {})));
-            if (vNode.classes.size) {
-                props.class = Array.from(vNode.classes).join(' ');
-            }
-            if (vNode.styles) {
-                props.style = Array.from(vNode.styles).reduce((a, b) => {
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let ref = this.componentRefs.get(component);
+                    if (!ref) {
+                        ref = core$1.createDynamicRef(rootNode => {
+                            this.componentRootElementCaches.set(component, rootNode);
+                            return () => {
+                                this.componentRootElementCaches.remove(component);
+                            };
+                        });
+                        this.componentRefs.set(component, ref);
+                    }
+                    return core$1.jsx(comp, {
+                        component,
+                        rootRef: ref
+                    }, component.id);
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const key = vNode.attrs.get('key');
+                vNode.attrs.delete('key');
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
                     a[b[0]] = b[1];
                     return a;
-                }, {});
-            }
-            if (children.length) {
-                props.children = children;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.class = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                if (children.length) {
+                    props.children = children;
+                }
+                return core$1.jsx(vNode.tagName, props, key);
             }
-            return core$1.jsx(vNode.tagName, props);
-        };
-        const jsxNode = vNodeToJSX(vElement);
-        const currentRef = jsxNode.props.ref;
-        const ref = core$1.useRef(nativeNode => {
-            this.slotRootNativeElementCaches.set(slot, nativeNode);
+        }, mount);
+        this.onViewUpdated = new core.Subject();
+        this.host = new platformBrowser$1.VDOMElement('body');
+        this.components = {};
+        this.componentRefs = new WeakMap();
+        let isRoot = true;
+        Object.entries(components).forEach(([key, viewFlyComponent]) => {
+            this.components[key] = core$1.withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
+                const comp = core$1.getCurrentInstance();
+                const textbusComponent = props.component;
+                core.merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
+                    if (textbusComponent.changeMarker.dirty) {
+                        comp.markAsDirtied();
+                    }
+                });
+                if (isRoot) {
+                    core$1.onUpdated(() => {
+                        this.onViewUpdated.next();
+                    });
+                    isRoot = false;
+                }
+                core$1.onUpdated(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
+                    textbusComponent.changeMarker.rendered();
+                    if (!this.componentRootElementCaches.get(textbusComponent)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
+                });
+                const component = props.component;
+                const instance = viewFlyComponent(props);
+                if (typeof instance === 'function') {
+                    return () => {
+                        component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        this.componentRendingStack.push(component);
+                        return instance();
+                    };
+                }
+                const self = this;
+                return Object.assign(Object.assign({}, instance), { $render() {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return instance.$render();
+                    } });
+            });
         });
-        if (currentRef instanceof core$1.Ref) {
-            jsxNode.props.ref = [currentRef, ref];
-        }
-        else if (Array.isArray(currentRef)) {
-            currentRef.push(ref);
-        }
-        else {
-            jsxNode.props.ref = ref;
-        }
-        slot.changeMarker.rendered();
-        return jsxNode;
+    }
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-exports.Adapter = Adapter;
+exports.ViewflyAdapter = ViewflyAdapter;
+exports.ViewflyVDomAdapter = ViewflyVDomAdapter;

package/bundles/public-api.d.ts

@@ -1 +1,2 @@
-export * from './adapter';
+export * from './viewfly-adapter';
+export * from './viewfly-v-dom-adapter';

package/bundles/viewfly-adapter.d.ts

@@ -0,0 +1,16 @@
+import { Component, ViewMount } from '@textbus/core';
+import { DynamicRef } from '@viewfly/core';
+import { DomAdapter } from '@textbus/platform-browser';
+export interface ViewComponentProps<T extends Component> {
+    component: T;
+    rootRef: DynamicRef<HTMLElement>;
+}
+export interface ViewflyAdapterComponents {
+    [key: string]: JSXInternal.ComponentSetup<ViewComponentProps<any>>;
+}
+export declare class ViewflyAdapter extends DomAdapter<JSXInternal.ViewNode, JSXInternal.Element> {
+    private components;
+    private componentRefs;
+    constructor(components: ViewflyAdapterComponents, mount: ViewMount<JSXInternal.ViewNode, HTMLElement>);
+    copy(): void;
+}

package/bundles/viewfly-v-dom-adapter.d.ts

@@ -0,0 +1,18 @@
+import { Component, ViewMount, Adapter, Subject } from '@textbus/core';
+import { VDOMElement, VDOMText } from '@viewfly/platform-browser';
+import { DynamicRef } from '@viewfly/core';
+export interface ViewVDomComponentProps<T extends Component> {
+    component: T;
+    rootRef: DynamicRef<VDOMElement>;
+}
+export interface ViewflyVDomAdapterComponents {
+    [key: string]: JSXInternal.ComponentSetup<ViewVDomComponentProps<any>>;
+}
+export declare class ViewflyVDomAdapter extends Adapter<VDOMElement, VDOMText, JSXInternal.ViewNode, JSXInternal.Element> {
+    onViewUpdated: Subject<void>;
+    host: VDOMElement;
+    private components;
+    private componentRefs;
+    constructor(components: ViewflyVDomAdapterComponents, mount: ViewMount<JSXInternal.ViewNode, VDOMElement>);
+    copy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/adapter-viewfly",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.51",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -25,10 +25,11 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/stream": "^1.2.0",
-    "@textbus/core": "^4.0.0-alpha.5",
-    "@textbus/platform-browser": "^4.0.0-alpha.5",
-    "@viewfly/core": "^0.2.4"
+    "@tanbo/stream": "^1.2.3",
+    "@textbus/core": "^4.0.0-alpha.50",
+    "@textbus/platform-browser": "^4.0.0-alpha.51",
+    "@viewfly/core": "^1.0.0-alpha.4",
+    "@viewfly/platform-browser": "^1.0.0-alpha.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -48,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "072831527fe07e7c21a14f3141d55b24d321a690"
+  "gitHead": "0b54e3b23238b09096449e8fccf0127820f8e206"
 }

package/bundles/adapter.d.ts

@@ -1,22 +0,0 @@
-import { JSXComponent, JSXInternal, Ref } from '@viewfly/core';
-import { Subject } from '@tanbo/stream';
-import { Component, ComponentInstance, ExtractComponentInstanceType, Slot, VElement, VTextNode } from '@textbus/core';
-import { DomAdapter } from '@textbus/platform-browser';
-export interface ViewComponentProps<T extends Component = Component> {
-    component: ExtractComponentInstanceType<T>;
-    rootRef: Ref<HTMLElement>;
-}
-export interface ViewflyAdapterComponents {
-    [key: string]: JSXInternal.ComponentSetup<ViewComponentProps>;
-}
-/**
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
- */
-export declare class Adapter extends DomAdapter<JSXComponent, JSXInternal.Element> {
-    onViewUpdated: Subject<void>;
-    private components;
-    private componentRefs;
-    constructor(components: ViewflyAdapterComponents, mount: (host: HTMLElement, root: JSXComponent) => (void | (() => void)));
-    componentRender(component: ComponentInstance): JSXInternal.JSXNode;
-    slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | ComponentInstance>) => VElement, renderEnv: any): JSXInternal.Element;
-}