@textbus/adapter-vue 4.0.0-alpha.31 → 4.0.0-alpha.33

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/bundles/adapter.d.ts +1 -0
  2. package/bundles/index.esm.js +41 -7
  3. package/bundles/index.js +40 -6
  4. package/package.json +4 -4
package/bundles/adapter.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare class Adapter extends DomAdapter<VNode, VNode> {
17
17
  private components;
18
18
  private componentRefs;
19
19
  private componentRendingStack;
20
+ private compositionRef;
20
21
  constructor(components: VueAdapterComponents, mount: (host: HTMLElement, root: VNode) => (void | (() => void)));
21
22
  componentRender(component: Component): VNode;
22
23
  slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | Component>) => VElement, renderEnv?: any): VNode;
package/bundles/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getCurrentInstance, onMounted, onUpdated, onUnmounted, ref, h } from 'vue';
1
+ import { ref, watchEffect, getCurrentInstance, onMounted, onUpdated, onUnmounted, h } from 'vue';
2
2
  import { Subject } from '@tanbo/stream';
3
3
  import { makeError, VElement, VTextNode, replaceEmpty, invokeListener } from '@textbus/core';
4
4
  import { DomAdapter } from '@textbus/platform-browser';
@@ -14,6 +14,10 @@ class Adapter extends DomAdapter {
14
14
  this.components = {};
15
15
  this.componentRefs = new WeakMap();
16
16
  this.componentRendingStack = [];
17
+ this.compositionRef = ref();
18
+ watchEffect(() => {
19
+ this.compositionNode = this.compositionRef.value || null;
20
+ });
17
21
  Object.keys(components).forEach(key => {
18
22
  const vueComponent = components[key];
19
23
  const setup = vueComponent.setup;
@@ -35,14 +39,36 @@ class Adapter extends DomAdapter {
35
39
  }
36
40
  });
37
41
  onUpdated(() => {
42
+ var _a;
43
+ self.componentRendingStack.pop();
38
44
  component.changeMarker.rendered();
39
45
  self.onViewUpdated.next();
46
+ if (!(((_a = self.componentRefs.get(component)) === null || _a === void 0 ? void 0 : _a.value) instanceof HTMLElement)) {
47
+ // eslint-disable-next-line max-len
48
+ throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
49
+ }
40
50
  });
41
51
  onUnmounted(() => {
42
52
  sub.unsubscribe();
43
53
  });
44
- return setup(props);
54
+ const result = setup(props);
55
+ if (typeof result === 'function') {
56
+ return function () {
57
+ component.__slots__.length = 0;
58
+ self.componentRendingStack.push(component);
59
+ return result();
60
+ };
61
+ }
62
+ return result;
45
63
  };
64
+ if (vueComponent.render) {
65
+ const oldRender = vueComponent.render;
66
+ vueComponent.render = function (context) {
67
+ context.component.__slots__.length = 0;
68
+ self.componentRendingStack.push(context.component);
69
+ oldRender.apply(this, context);
70
+ };
71
+ }
46
72
  this.components[key] = vueComponent;
47
73
  });
48
74
  }
@@ -54,15 +80,11 @@ class Adapter extends DomAdapter {
54
80
  rootRef = ref();
55
81
  this.componentRefs.set(component, rootRef);
56
82
  }
57
- component.__slots__.length = 0;
58
- this.componentRendingStack.push(component);
59
- const vNode = h(comp, {
83
+ return h(comp, {
60
84
  component,
61
85
  rootRef,
62
86
  key: component.id
63
87
  });
64
- this.componentRendingStack.pop();
65
- return vNode;
66
88
  }
67
89
  throw adapterError(`cannot found view component \`${component.name}\`!`);
68
90
  }
@@ -73,6 +95,18 @@ class Adapter extends DomAdapter {
73
95
  this.slotRootVElementCaches.set(slot, vElement);
74
96
  const vNodeToJSX = (vNode) => {
75
97
  const children = [];
98
+ if (this.composition && this.composition.slot === slot) {
99
+ this.insertCompositionByIndex(slot, vNode, this.composition, () => {
100
+ return new VElement('span', {
101
+ style: {
102
+ textDecoration: 'underline'
103
+ },
104
+ ref: this.compositionRef
105
+ }, [
106
+ new VTextNode(this.composition.text)
107
+ ]);
108
+ });
109
+ }
76
110
  for (let i = 0; i < vNode.children.length; i++) {
77
111
  const child = vNode.children[i];
78
112
  if (child instanceof VElement) {
package/bundles/index.js CHANGED
@@ -16,6 +16,10 @@ class Adapter extends platformBrowser.DomAdapter {
16
16
  this.components = {};
17
17
  this.componentRefs = new WeakMap();
18
18
  this.componentRendingStack = [];
19
+ this.compositionRef = vue.ref();
20
+ vue.watchEffect(() => {
21
+ this.compositionNode = this.compositionRef.value || null;
22
+ });
19
23
  Object.keys(components).forEach(key => {
20
24
  const vueComponent = components[key];
21
25
  const setup = vueComponent.setup;
@@ -37,14 +41,36 @@ class Adapter extends platformBrowser.DomAdapter {
37
41
  }
38
42
  });
39
43
  vue.onUpdated(() => {
44
+ var _a;
45
+ self.componentRendingStack.pop();
40
46
  component.changeMarker.rendered();
41
47
  self.onViewUpdated.next();
48
+ if (!(((_a = self.componentRefs.get(component)) === null || _a === void 0 ? void 0 : _a.value) instanceof HTMLElement)) {
49
+ // eslint-disable-next-line max-len
50
+ throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
51
+ }
42
52
  });
43
53
  vue.onUnmounted(() => {
44
54
  sub.unsubscribe();
45
55
  });
46
- return setup(props);
56
+ const result = setup(props);
57
+ if (typeof result === 'function') {
58
+ return function () {
59
+ component.__slots__.length = 0;
60
+ self.componentRendingStack.push(component);
61
+ return result();
62
+ };
63
+ }
64
+ return result;
47
65
  };
66
+ if (vueComponent.render) {
67
+ const oldRender = vueComponent.render;
68
+ vueComponent.render = function (context) {
69
+ context.component.__slots__.length = 0;
70
+ self.componentRendingStack.push(context.component);
71
+ oldRender.apply(this, context);
72
+ };
73
+ }
48
74
  this.components[key] = vueComponent;
49
75
  });
50
76
  }
@@ -56,15 +82,11 @@ class Adapter extends platformBrowser.DomAdapter {
56
82
  rootRef = vue.ref();
57
83
  this.componentRefs.set(component, rootRef);
58
84
  }
59
- component.__slots__.length = 0;
60
- this.componentRendingStack.push(component);
61
- const vNode = vue.h(comp, {
85
+ return vue.h(comp, {
62
86
  component,
63
87
  rootRef,
64
88
  key: component.id
65
89
  });
66
- this.componentRendingStack.pop();
67
- return vNode;
68
90
  }
69
91
  throw adapterError(`cannot found view component \`${component.name}\`!`);
70
92
  }
@@ -75,6 +97,18 @@ class Adapter extends platformBrowser.DomAdapter {
75
97
  this.slotRootVElementCaches.set(slot, vElement);
76
98
  const vNodeToJSX = (vNode) => {
77
99
  const children = [];
100
+ if (this.composition && this.composition.slot === slot) {
101
+ this.insertCompositionByIndex(slot, vNode, this.composition, () => {
102
+ return new core.VElement('span', {
103
+ style: {
104
+ textDecoration: 'underline'
105
+ },
106
+ ref: this.compositionRef
107
+ }, [
108
+ new core.VTextNode(this.composition.text)
109
+ ]);
110
+ });
111
+ }
78
112
  for (let i = 0; i < vNode.children.length; i++) {
79
113
  const child = vNode.children[i];
80
114
  if (child instanceof core.VElement) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@textbus/adapter-vue",
3
- "version": "4.0.0-alpha.31",
3
+ "version": "4.0.0-alpha.33",
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.31",
30
- "@textbus/platform-browser": "^4.0.0-alpha.31",
29
+ "@textbus/core": "^4.0.0-alpha.33",
30
+ "@textbus/platform-browser": "^4.0.0-alpha.33",
31
31
  "vue": "^3.3.4"
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": "54c13967d549e9c3795eb821d84ce3e811139630"
51
+ "gitHead": "5eb73f9a388d331946a8579aa6eaa23cc44bffe0"
52
52
  }