@textbus/adapter-viewfly 4.0.0-alpha.6 → 4.0.0-alpha.60

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.
Files changed (6) hide show
  1. package/bundles/index.esm.js +125 -87
  2. package/bundles/index.js +128 -86
  3. package/bundles/public-api.d.ts +3 -1
  4. package/bundles/viewfly-adapter.d.ts +16 -0
  5. package/package.json +8 -6
  6. package/bundles/adapter.d.ts +0 -22
package/bundles/index.esm.js CHANGED
@@ -1,24 +1,108 @@
1
- import { provide, onUpdated, useRef, jsx, Ref } from '@viewfly/core';
2
- import { Subject } from '@tanbo/stream';
3
- import { makeError, VElement, VTextNode, replaceEmpty } from '@textbus/core';
1
+ export { NodeViewAdapter as ViewflyVDomAdapter } from '@textbus/platform-node';
2
+ import { makeError, VElement, VTextNode, merge } from '@textbus/core';
3
+ import { createDynamicRef, DynamicRef, jsx, withAnnotation, getCurrentInstance, onUpdated } from '@viewfly/core';
4
4
  import { DomAdapter } from '@textbus/platform-browser';
5
5
 
6
- const adapterError = makeError('ViewflyAdapter');
7
- /**
8
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
9
- */
10
- class Adapter extends DomAdapter {
6
+ const adapterError = makeError('ViewflyDOMRenderer');
7
+ class ViewflyAdapter extends DomAdapter {
11
8
  constructor(components, mount) {
12
- super(mount);
13
- this.onViewUpdated = new Subject();
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(`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
100
  let isRoot = true;
17
- Object.keys(components).forEach(key => {
18
- this.components[key] = (props) => {
19
- const comp = provide([]);
101
+ Object.entries(components).forEach(([key, viewFlyComponent]) => {
102
+ this.components[key] = withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
103
+ const comp = getCurrentInstance();
20
104
  const textbusComponent = props.component;
21
- textbusComponent.changeMarker.onChange.subscribe(() => {
105
+ merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
22
106
  if (textbusComponent.changeMarker.dirty) {
23
107
  comp.markAsDirtied();
24
108
  }
@@ -30,85 +114,39 @@ class Adapter extends DomAdapter {
30
114
  isRoot = false;
31
115
  }
32
116
  onUpdated(() => {
117
+ const context = this.componentRendingStack[this.componentRendingStack.length - 1];
118
+ if (context === component) {
119
+ this.componentRendingStack.pop();
120
+ }
33
121
  textbusComponent.changeMarker.rendered();
122
+ if (!this.componentRootElementCaches.get(textbusComponent)) {
123
+ // eslint-disable-next-line max-len
124
+ throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
125
+ }
34
126
  });
35
- return components[key](props);
36
- };
37
- });
38
- }
39
- componentRender(component) {
40
- const comp = this.components[component.name] || this.components['*'];
41
- if (comp) {
42
- component.changeMarker.rendered();
43
- let ref = this.componentRefs.get(component);
44
- if (!ref) {
45
- ref = useRef(rootNode => {
46
- this.componentRootElementCaches.set(component, rootNode);
127
+ const component = props.component;
128
+ const instance = viewFlyComponent(props);
129
+ if (typeof instance === 'function') {
47
130
  return () => {
48
- this.componentRootElementCaches.remove(component);
131
+ component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
132
+ component.__slots__.length = 0;
133
+ this.componentRendingStack.push(component);
134
+ return instance();
49
135
  };
50
- });
51
- this.componentRefs.set(component, ref);
52
- }
53
- return jsx(comp, {
54
- component,
55
- rootRef: ref
56
- }, component.id);
57
- }
58
- throw adapterError(`cannot found view component \`${component.name}\`!`);
59
- }
60
- slotRender(slot, slotHostRender, renderEnv) {
61
- const vElement = slot.toTree(slotHostRender, renderEnv);
62
- this.slotRootVElementCaches.set(slot, vElement);
63
- const vNodeToJSX = (vNode) => {
64
- const children = [];
65
- for (let i = 0; i < vNode.children.length; i++) {
66
- const child = vNode.children[i];
67
- if (child instanceof VElement) {
68
- children.push(vNodeToJSX(child));
69
136
  }
70
- else if (child instanceof VTextNode) {
71
- children.push(replaceEmpty(child.textContent));
72
- }
73
- else {
74
- children.push(this.componentRender(child));
75
- }
76
- }
77
- const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
78
- a[b[0]] = b[1];
79
- return a;
80
- }, {})));
81
- if (vNode.classes.size) {
82
- props.class = Array.from(vNode.classes).join(' ');
83
- }
84
- if (vNode.styles) {
85
- props.style = Array.from(vNode.styles).reduce((a, b) => {
86
- a[b[0]] = b[1];
87
- return a;
88
- }, {});
89
- }
90
- if (children.length) {
91
- props.children = children;
92
- }
93
- return jsx(vNode.tagName, props);
94
- };
95
- const jsxNode = vNodeToJSX(vElement);
96
- const currentRef = jsxNode.props.ref;
97
- const ref = useRef(nativeNode => {
98
- this.slotRootNativeElementCaches.set(slot, nativeNode);
137
+ const self = this;
138
+ return Object.assign(Object.assign({}, instance), { $render() {
139
+ component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
140
+ component.__slots__.length = 0;
141
+ self.componentRendingStack.push(component);
142
+ return instance.$render();
143
+ } });
144
+ });
99
145
  });
100
- if (currentRef instanceof Ref) {
101
- jsxNode.props.ref = [currentRef, ref];
102
- }
103
- else if (Array.isArray(currentRef)) {
104
- currentRef.push(ref);
105
- }
106
- else {
107
- jsxNode.props.ref = ref;
108
- }
109
- slot.changeMarker.rendered();
110
- return jsxNode;
146
+ }
147
+ copy() {
148
+ document.execCommand('copy');
111
149
  }
112
150
  }
113
151
 
114
- export { Adapter };
152
+ export { ViewflyAdapter };
package/bundles/index.js CHANGED
@@ -1,26 +1,110 @@
1
1
  'use strict';
2
2
 
3
- var core$1 = require('@viewfly/core');
4
- var stream = require('@tanbo/stream');
3
+ var platformNode = require('@textbus/platform-node');
5
4
  var core = require('@textbus/core');
5
+ var core$1 = require('@viewfly/core');
6
6
  var platformBrowser = require('@textbus/platform-browser');
7
7
 
8
- const adapterError = core.makeError('ViewflyAdapter');
9
- /**
10
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
11
- */
12
- class Adapter extends platformBrowser.DomAdapter {
8
+ const adapterError = core.makeError('ViewflyDOMRenderer');
9
+ class ViewflyAdapter extends platformBrowser.DomAdapter {
13
10
  constructor(components, mount) {
14
- super(mount);
15
- this.onViewUpdated = new stream.Subject();
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(`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
102
  let isRoot = true;
19
- Object.keys(components).forEach(key => {
20
- this.components[key] = (props) => {
21
- const comp = core$1.provide([]);
103
+ Object.entries(components).forEach(([key, viewFlyComponent]) => {
104
+ this.components[key] = core$1.withAnnotation(Object.assign({}, viewFlyComponent.annotation), (props) => {
105
+ const comp = core$1.getCurrentInstance();
22
106
  const textbusComponent = props.component;
23
- textbusComponent.changeMarker.onChange.subscribe(() => {
107
+ core.merge(textbusComponent.changeMarker.onChange, textbusComponent.changeMarker.onForceChange).subscribe(() => {
24
108
  if (textbusComponent.changeMarker.dirty) {
25
109
  comp.markAsDirtied();
26
110
  }
@@ -32,85 +116,43 @@ class Adapter extends platformBrowser.DomAdapter {
32
116
  isRoot = false;
33
117
  }
34
118
  core$1.onUpdated(() => {
119
+ const context = this.componentRendingStack[this.componentRendingStack.length - 1];
120
+ if (context === component) {
121
+ this.componentRendingStack.pop();
122
+ }
35
123
  textbusComponent.changeMarker.rendered();
124
+ if (!this.componentRootElementCaches.get(textbusComponent)) {
125
+ // eslint-disable-next-line max-len
126
+ throw adapterError(`Component \`${textbusComponent.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
127
+ }
36
128
  });
37
- return components[key](props);
38
- };
39
- });
40
- }
41
- componentRender(component) {
42
- const comp = this.components[component.name] || this.components['*'];
43
- if (comp) {
44
- component.changeMarker.rendered();
45
- let ref = this.componentRefs.get(component);
46
- if (!ref) {
47
- ref = core$1.useRef(rootNode => {
48
- this.componentRootElementCaches.set(component, rootNode);
129
+ const component = props.component;
130
+ const instance = viewFlyComponent(props);
131
+ if (typeof instance === 'function') {
49
132
  return () => {
50
- this.componentRootElementCaches.remove(component);
133
+ component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
134
+ component.__slots__.length = 0;
135
+ this.componentRendingStack.push(component);
136
+ return instance();
51
137
  };
52
- });
53
- this.componentRefs.set(component, ref);
54
- }
55
- return core$1.jsx(comp, {
56
- component,
57
- rootRef: ref
58
- }, component.id);
59
- }
60
- throw adapterError(`cannot found view component \`${component.name}\`!`);
61
- }
62
- slotRender(slot, slotHostRender, renderEnv) {
63
- const vElement = slot.toTree(slotHostRender, renderEnv);
64
- this.slotRootVElementCaches.set(slot, vElement);
65
- const vNodeToJSX = (vNode) => {
66
- const children = [];
67
- for (let i = 0; i < vNode.children.length; i++) {
68
- const child = vNode.children[i];
69
- if (child instanceof core.VElement) {
70
- children.push(vNodeToJSX(child));
71
- }
72
- else if (child instanceof core.VTextNode) {
73
- children.push(core.replaceEmpty(child.textContent));
74
138
  }
75
- else {
76
- children.push(this.componentRender(child));
77
- }
78
- }
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 core$1.jsx(vNode.tagName, props);
96
- };
97
- const jsxNode = vNodeToJSX(vElement);
98
- const currentRef = jsxNode.props.ref;
99
- const ref = core$1.useRef(nativeNode => {
100
- this.slotRootNativeElementCaches.set(slot, nativeNode);
139
+ const self = this;
140
+ return Object.assign(Object.assign({}, instance), { $render() {
141
+ component.__slots__.forEach(i => self.renderedSlotCache.delete(i));
142
+ component.__slots__.length = 0;
143
+ self.componentRendingStack.push(component);
144
+ return instance.$render();
145
+ } });
146
+ });
101
147
  });
102
- if (currentRef instanceof core$1.Ref) {
103
- jsxNode.props.ref = [currentRef, ref];
104
- }
105
- else if (Array.isArray(currentRef)) {
106
- currentRef.push(ref);
107
- }
108
- else {
109
- jsxNode.props.ref = ref;
110
- }
111
- slot.changeMarker.rendered();
112
- return jsxNode;
148
+ }
149
+ copy() {
150
+ document.execCommand('copy');
113
151
  }
114
152
  }
115
153
 
116
- exports.Adapter = Adapter;
154
+ Object.defineProperty(exports, 'ViewflyVDomAdapter', {
155
+ enumerable: true,
156
+ get: function () { return platformNode.NodeViewAdapter; }
157
+ });
158
+ exports.ViewflyAdapter = ViewflyAdapter;
package/bundles/public-api.d.ts CHANGED
@@ -1 +1,3 @@
1
- export * from './adapter';
1
+ import { NodeViewAdapter as ViewflyVDomAdapter } from '@textbus/platform-node';
2
+ export * from './viewfly-adapter';
3
+ export { ViewflyVDomAdapter };
package/bundles/viewfly-adapter.d.ts ADDED
@@ -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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@textbus/adapter-viewfly",
3
- "version": "4.0.0-alpha.6",
3
+ "version": "4.0.0-alpha.60",
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",
@@ -25,10 +25,12 @@
25
25
  "typescript editor"
26
26
  ],
27
27
  "dependencies": {
28
- "@tanbo/stream": "^1.2.0",
29
- "@textbus/core": "^4.0.0-alpha.6",
30
- "@textbus/platform-browser": "^4.0.0-alpha.6",
31
- "@viewfly/core": "^0.2.4"
28
+ "@tanbo/stream": "^1.2.4",
29
+ "@textbus/core": "^4.0.0-alpha.60",
30
+ "@textbus/platform-browser": "^4.0.0-alpha.60",
31
+ "@textbus/platform-node": "^4.0.0-alpha.60",
32
+ "@viewfly/core": "^1.0.0-alpha.10",
33
+ "@viewfly/platform-browser": "^1.0.0-alpha.10"
32
34
  },
33
35
  "devDependencies": {
34
36
  "@rollup/plugin-commonjs": "^23.0.2",
@@ -48,5 +50,5 @@
48
50
  "bugs": {
49
51
  "url": "https://github.com/textbus/textbus.git/issues"
50
52
  },
51
- "gitHead": "47394e77de252fdfd9193e1620177f944976c1a9"
53
+ "gitHead": "bae80846bc8c26754af661e35dea236db237aeeb"
52
54
  }
package/bundles/adapter.d.ts DELETED
@@ -1,22 +0,0 @@
1
- import { JSXComponent, JSXInternal, Ref } from '@viewfly/core';
2
- import { Subject } from '@tanbo/stream';
3
- import { Component, ComponentInstance, ExtractComponentInstanceType, Slot, VElement, VTextNode } from '@textbus/core';
4
- import { DomAdapter } from '@textbus/platform-browser';
5
- export interface ViewComponentProps<T extends Component = Component> {
6
- component: ExtractComponentInstanceType<T>;
7
- rootRef: Ref<HTMLElement>;
8
- }
9
- export interface ViewflyAdapterComponents {
10
- [key: string]: JSXInternal.ComponentSetup<ViewComponentProps>;
11
- }
12
- /**
13
- * Textbus 桥接 [Viewfly](https://viewfly.org) 渲染能力适配器，用于在 Viewfly 项目中渲染 Textbus 数据
14
- */
15
- export declare class Adapter extends DomAdapter<JSXComponent, JSXInternal.Element> {
16
- onViewUpdated: Subject<void>;
17
- private components;
18
- private componentRefs;
19
- constructor(components: ViewflyAdapterComponents, mount: (host: HTMLElement, root: JSXComponent) => (void | (() => void)));
20
- componentRender(component: ComponentInstance): JSXInternal.JSXNode;
21
- slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | ComponentInstance>) => VElement, renderEnv?: any): JSXInternal.Element;
22
- }