@textbus/adapter-vue 4.0.0-alpha.6 → 4.0.0-alpha.61

package/bundles/index.esm.js

@@ -1,23 +1,94 @@
-import { getCurrentInstance, onMounted, onUpdated, onUnmounted, ref, h } from 'vue';
-import { Subject } from '@tanbo/stream';
-import { makeError, VElement, VTextNode, replaceEmpty } from '@textbus/core';
+import { makeError, VElement, VTextNode } from '@textbus/core';
+import { ref, h, getCurrentInstance, onMounted, onUpdated, onUnmounted } from 'vue';
 import { DomAdapter } from '@textbus/platform-browser';
 
 const adapterError = makeError('VueAdapter');
-/**
- * Textbus 桥接 Vue 渲染能力适配器，用于在 Vue 项目中渲染 Textbus 数据
- */
-class Adapter extends DomAdapter {
+class VueAdapter extends DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new Subject();
-        this.components = {};
+        super({
+            createCompositionNode: (compositionState, updateNativeCompositionNode) => {
+                return new VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref: updateNativeCompositionNode
+                }, [
+                    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(vElement, update) {
+                const currentRef = vElement.attrs.get('ref');
+                if (currentRef) {
+                    vElement.attrs.set('ref', (v) => {
+                        update(v);
+                        if (typeof currentRef === 'function') {
+                            currentRef(v);
+                        }
+                        else if (!currentRef.value) {
+                            currentRef.value = v;
+                        }
+                    });
+                }
+                else {
+                    vElement.attrs.set('ref', update);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let rootRef = this.componentRefs.get(component);
+                    if (!rootRef) {
+                        rootRef = ref();
+                        this.componentRefs.set(component, rootRef);
+                    }
+                    return h(comp, {
+                        component,
+                        rootRef,
+                        key: component.id
+                    });
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                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;
+                    }, {});
+                }
+                return h(vNode.tagName, props, ...children);
+            }
+        }, mount);
+        // private compositionRef = ref<HTMLElement>()
         this.componentRefs = new WeakMap();
+        this.components = {};
+        // watchEffect(() => {
+        //   this.compositionNode = this.compositionRef.value || null
+        // })
         Object.keys(components).forEach(key => {
             const vueComponent = components[key];
             const setup = vueComponent.setup;
             const self = this;
-            vueComponent.setup = function (props) {
+            vueComponent.setup = function (props, context, ...args) {
                 const component = props.component;
                 const vueInstance = getCurrentInstance();
                 const sub = component.changeMarker.onChange.subscribe(() => {
@@ -34,91 +105,46 @@ class Adapter extends DomAdapter {
                     }
                 });
                 onUpdated(() => {
+                    var _a;
+                    const context = self.componentRendingStack[self.componentRendingStack.length - 1];
+                    if (context === component) {
+                        self.componentRendingStack.pop();
+                    }
+                    component.changeMarker.rendered();
                     self.onViewUpdated.next();
+                    if (!(((_a = self.componentRefs.get(component)) === null || _a === void 0 ? void 0 : _a.value) instanceof HTMLElement)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
                 });
                 onUnmounted(() => {
                     sub.unsubscribe();
                 });
-                return setup(props);
+                const result = setup(props, context, ...args);
+                if (typeof result === 'function') {
+                    return function (...args) {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return result.apply(this, args);
+                    };
+                }
+                return result;
             };
+            if (vueComponent.render) {
+                const oldRender = vueComponent.render;
+                vueComponent.render = function (context, ...args) {
+                    context.component.__slots__.length = 0;
+                    self.componentRendingStack.push(context.component);
+                    return oldRender.apply(this, [context, ...args]);
+                };
+            }
             this.components[key] = vueComponent;
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            let rootRef = this.componentRefs.get(component);
-            if (!rootRef) {
-                rootRef = ref();
-                this.componentRefs.set(component, rootRef);
-            }
-            return h(comp, {
-                component,
-                rootRef,
-                key: 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));
-                }
-                else {
-                    children.push(this.componentRender(child));
-                }
-            }
-            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;
-                }, {});
-            }
-            return h(vNode.tagName, props, ...children);
-        };
-        const refFn = (nativeNode) => {
-            if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(nativeNode);
-            }
-            else {
-                this.slotRootNativeElementCaches.set(slot, nativeNode);
-            }
-        };
-        const currentRef = vElement.attrs.get('ref');
-        if (currentRef) {
-            vElement.attrs.set('ref', (v) => {
-                refFn(v);
-                if (typeof currentRef === 'function') {
-                    currentRef(v);
-                }
-                else if (!currentRef.value) {
-                    currentRef.value = v;
-                }
-            });
-        }
-        else {
-            vElement.attrs.set('ref', refFn);
-        }
-        slot.changeMarker.rendered();
-        return vNodeToJSX(vElement);
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-export { Adapter };
+export { VueAdapter };

package/bundles/index.js

@@ -1,25 +1,96 @@
 'use strict';
 
-var vue = require('vue');
-var stream = require('@tanbo/stream');
 var core = require('@textbus/core');
+var vue = require('vue');
 var platformBrowser = require('@textbus/platform-browser');
 
 const adapterError = core.makeError('VueAdapter');
-/**
- * Textbus 桥接 Vue 渲染能力适配器，用于在 Vue 项目中渲染 Textbus 数据
- */
-class Adapter extends platformBrowser.DomAdapter {
+class VueAdapter extends platformBrowser.DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new stream.Subject();
-        this.components = {};
+        super({
+            createCompositionNode: (compositionState, updateNativeCompositionNode) => {
+                return new core.VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref: updateNativeCompositionNode
+                }, [
+                    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(vElement, update) {
+                const currentRef = vElement.attrs.get('ref');
+                if (currentRef) {
+                    vElement.attrs.set('ref', (v) => {
+                        update(v);
+                        if (typeof currentRef === 'function') {
+                            currentRef(v);
+                        }
+                        else if (!currentRef.value) {
+                            currentRef.value = v;
+                        }
+                    });
+                }
+                else {
+                    vElement.attrs.set('ref', update);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    let rootRef = this.componentRefs.get(component);
+                    if (!rootRef) {
+                        rootRef = vue.ref();
+                        this.componentRefs.set(component, rootRef);
+                    }
+                    return vue.h(comp, {
+                        component,
+                        rootRef,
+                        key: component.id
+                    });
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                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;
+                    }, {});
+                }
+                return vue.h(vNode.tagName, props, ...children);
+            }
+        }, mount);
+        // private compositionRef = ref<HTMLElement>()
         this.componentRefs = new WeakMap();
+        this.components = {};
+        // watchEffect(() => {
+        //   this.compositionNode = this.compositionRef.value || null
+        // })
         Object.keys(components).forEach(key => {
             const vueComponent = components[key];
             const setup = vueComponent.setup;
             const self = this;
-            vueComponent.setup = function (props) {
+            vueComponent.setup = function (props, context, ...args) {
                 const component = props.component;
                 const vueInstance = vue.getCurrentInstance();
                 const sub = component.changeMarker.onChange.subscribe(() => {
@@ -36,91 +107,46 @@ class Adapter extends platformBrowser.DomAdapter {
                     }
                 });
                 vue.onUpdated(() => {
+                    var _a;
+                    const context = self.componentRendingStack[self.componentRendingStack.length - 1];
+                    if (context === component) {
+                        self.componentRendingStack.pop();
+                    }
+                    component.changeMarker.rendered();
                     self.onViewUpdated.next();
+                    if (!(((_a = self.componentRefs.get(component)) === null || _a === void 0 ? void 0 : _a.value) instanceof HTMLElement)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
                 });
                 vue.onUnmounted(() => {
                     sub.unsubscribe();
                 });
-                return setup(props);
+                const result = setup(props, context, ...args);
+                if (typeof result === 'function') {
+                    return function (...args) {
+                        component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
+                        component.__slots__.length = 0;
+                        self.componentRendingStack.push(component);
+                        return result.apply(this, args);
+                    };
+                }
+                return result;
             };
+            if (vueComponent.render) {
+                const oldRender = vueComponent.render;
+                vueComponent.render = function (context, ...args) {
+                    context.component.__slots__.length = 0;
+                    self.componentRendingStack.push(context.component);
+                    return oldRender.apply(this, [context, ...args]);
+                };
+            }
             this.components[key] = vueComponent;
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            let rootRef = this.componentRefs.get(component);
-            if (!rootRef) {
-                rootRef = vue.ref();
-                this.componentRefs.set(component, rootRef);
-            }
-            return vue.h(comp, {
-                component,
-                rootRef,
-                key: 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));
-                }
-                else {
-                    children.push(this.componentRender(child));
-                }
-            }
-            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;
-                }, {});
-            }
-            return vue.h(vNode.tagName, props, ...children);
-        };
-        const refFn = (nativeNode) => {
-            if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(nativeNode);
-            }
-            else {
-                this.slotRootNativeElementCaches.set(slot, nativeNode);
-            }
-        };
-        const currentRef = vElement.attrs.get('ref');
-        if (currentRef) {
-            vElement.attrs.set('ref', (v) => {
-                refFn(v);
-                if (typeof currentRef === 'function') {
-                    currentRef(v);
-                }
-                else if (!currentRef.value) {
-                    currentRef.value = v;
-                }
-            });
-        }
-        else {
-            vElement.attrs.set('ref', refFn);
-        }
-        slot.changeMarker.rendered();
-        return vNodeToJSX(vElement);
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-exports.Adapter = Adapter;
+exports.VueAdapter = VueAdapter;

package/bundles/public-api.d.ts

@@ -1 +1 @@
-export * from './adapter';
+export * from './vue-adapter';

package/bundles/vue-adapter.d.ts

@@ -0,0 +1,16 @@
+import { Component, ViewMount } from '@textbus/core';
+import { DefineComponent, Ref, VNode } from 'vue';
+import { DomAdapter } from '@textbus/platform-browser';
+export interface ViewComponentProps<T extends Component> {
+    component: T;
+    rootRef: Ref<HTMLElement | undefined>;
+}
+export interface VueAdapterComponents {
+    [key: string]: DefineComponent<ViewComponentProps<any>>;
+}
+export declare class VueAdapter extends DomAdapter<VNode, VNode> {
+    private componentRefs;
+    private components;
+    constructor(components: VueAdapterComponents, mount: ViewMount<VNode, HTMLElement>);
+    copy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/adapter-vue",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.61",
   "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,10 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/stream": "^1.2.0",
-    "@textbus/core": "^4.0.0-alpha.6",
-    "@textbus/platform-browser": "^4.0.0-alpha.6",
-    "vue": "^3.3.4"
+    "@tanbo/stream": "^1.2.5",
+    "@textbus/core": "^4.0.0-alpha.61",
+    "@textbus/platform-browser": "^4.0.0-alpha.61",
+    "vue": "^3.4.28"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "47394e77de252fdfd9193e1620177f944976c1a9"
+  "gitHead": "892e0bc033aaf52f89be3476c9536c445e316200"
 }

package/bundles/adapter.d.ts

@@ -1,22 +0,0 @@
-import { DefineComponent, Ref, VNode } from 'vue';
-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 | undefined>;
-}
-export interface ReactAdapterComponents {
-    [key: string]: DefineComponent<ViewComponentProps>;
-}
-/**
- * Textbus 桥接 Vue 渲染能力适配器，用于在 Vue 项目中渲染 Textbus 数据
- */
-export declare class Adapter extends DomAdapter<VNode, VNode> {
-    onViewUpdated: Subject<void>;
-    private components;
-    private componentRefs;
-    constructor(components: ReactAdapterComponents, mount: (host: HTMLElement, root: VNode) => (void | (() => void)));
-    componentRender(component: ComponentInstance): VNode;
-    slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | ComponentInstance>) => VElement, renderEnv?: any): VNode;
-}