@textbus/adapter-vue 4.0.0-alpha.3 → 4.0.0-alpha.30

package/bundles/adapter.d.ts

@@ -1,13 +1,13 @@
 import { DefineComponent, Ref, VNode } from 'vue';
 import { Subject } from '@tanbo/stream';
-import { Component, ComponentInstance, ExtractComponentInstanceType, Slot, VElement, VTextNode } from '@textbus/core';
+import { Component, Slot, VElement, VTextNode } from '@textbus/core';
 import { DomAdapter } from '@textbus/platform-browser';
-export interface ViewComponentProps<T extends Component = Component> {
-    component: ExtractComponentInstanceType<T>;
+export interface ViewComponentProps<T extends Component> {
+    component: T;
     rootRef: Ref<HTMLElement | undefined>;
 }
-export interface ReactAdapterComponents {
-    [key: string]: DefineComponent<ViewComponentProps>;
+export interface VueAdapterComponents {
+    [key: string]: DefineComponent<ViewComponentProps<any>>;
 }
 /**
  * Textbus 桥接 Vue 渲染能力适配器，用于在 Vue 项目中渲染 Textbus 数据
@@ -16,7 +16,8 @@ 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): VNode;
+    private componentRendingStack;
+    constructor(components: VueAdapterComponents, mount: (host: HTMLElement, root: VNode) => (void | (() => void)));
+    componentRender(component: Component): VNode;
+    slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | Component>) => VElement, renderEnv?: any): VNode;
 }

package/bundles/index.esm.js

@@ -13,6 +13,7 @@ class Adapter extends DomAdapter {
         this.onViewUpdated = new Subject();
         this.components = {};
         this.componentRefs = new WeakMap();
+        this.componentRendingStack = [];
         Object.keys(components).forEach(key => {
             const vueComponent = components[key];
             const setup = vueComponent.setup;
@@ -34,6 +35,7 @@ class Adapter extends DomAdapter {
                     }
                 });
                 onUpdated(() => {
+                    component.changeMarker.rendered();
                     self.onViewUpdated.next();
                 });
                 onUnmounted(() => {
@@ -47,22 +49,27 @@ class Adapter extends DomAdapter {
     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.__slots__.length = 0;
+            this.componentRendingStack.push(component);
+            const vNode = h(comp, {
                 component,
                 rootRef,
                 key: component.id
             });
+            this.componentRendingStack.pop();
+            return vNode;
         }
         throw adapterError(`cannot found view component \`${component.name}\`!`);
     }
-    slotRender(slot, slotHostRender) {
-        const vElement = slot.toTree(slotHostRender);
+    slotRender(slot, slotHostRender, renderEnv) {
+        const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+        context.__slots__.push(slot);
+        const vElement = slot.toTree(slotHostRender, renderEnv);
         this.slotRootVElementCaches.set(slot, vElement);
         const vNodeToJSX = (vNode) => {
             const children = [];
@@ -95,7 +102,7 @@ class Adapter extends DomAdapter {
         };
         const refFn = (nativeNode) => {
             if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(nativeNode);
+                this.slotRootNativeElementCaches.remove(slot);
             }
             else {
                 this.slotRootNativeElementCaches.set(slot, nativeNode);

package/bundles/index.js

@@ -15,6 +15,7 @@ class Adapter extends platformBrowser.DomAdapter {
         this.onViewUpdated = new stream.Subject();
         this.components = {};
         this.componentRefs = new WeakMap();
+        this.componentRendingStack = [];
         Object.keys(components).forEach(key => {
             const vueComponent = components[key];
             const setup = vueComponent.setup;
@@ -36,6 +37,7 @@ class Adapter extends platformBrowser.DomAdapter {
                     }
                 });
                 vue.onUpdated(() => {
+                    component.changeMarker.rendered();
                     self.onViewUpdated.next();
                 });
                 vue.onUnmounted(() => {
@@ -49,22 +51,27 @@ class Adapter extends platformBrowser.DomAdapter {
     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.__slots__.length = 0;
+            this.componentRendingStack.push(component);
+            const vNode = vue.h(comp, {
                 component,
                 rootRef,
                 key: component.id
             });
+            this.componentRendingStack.pop();
+            return vNode;
         }
         throw adapterError(`cannot found view component \`${component.name}\`!`);
     }
-    slotRender(slot, slotHostRender) {
-        const vElement = slot.toTree(slotHostRender);
+    slotRender(slot, slotHostRender, renderEnv) {
+        const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+        context.__slots__.push(slot);
+        const vElement = slot.toTree(slotHostRender, renderEnv);
         this.slotRootVElementCaches.set(slot, vElement);
         const vNodeToJSX = (vNode) => {
             const children = [];
@@ -97,7 +104,7 @@ class Adapter extends platformBrowser.DomAdapter {
         };
         const refFn = (nativeNode) => {
             if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(nativeNode);
+                this.slotRootNativeElementCaches.remove(slot);
             }
             else {
                 this.slotRootNativeElementCaches.set(slot, nativeNode);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/adapter-vue",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.30",
   "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,9 +25,9 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/stream": "^1.2.0",
-    "@textbus/core": "^4.0.0-alpha.1",
-    "@textbus/platform-browser": "^4.0.0-alpha.1",
+    "@tanbo/stream": "^1.2.3",
+    "@textbus/core": "^4.0.0-alpha.30",
+    "@textbus/platform-browser": "^4.0.0-alpha.30",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "cf4fd289b73bc777124a32fe42bb58eba05a34f1"
+  "gitHead": "9b14d8cf2a2473f31a36b51ee3d988ddecf776fb"
 }