@textbus/adapter-react 5.2.2 → 5.2.3

package/dist/index.esm.js

@@ -1,102 +1,138 @@
-import { makeError as h, VElement as l, VTextNode as y, Adapter as g } from "@textbus/core";
-import { DomAdapter as m } from "@textbus/platform-browser";
-import { createElement as d, useState as E, useEffect as i } from "react";
-import { ReflectiveInjector as R } from "@viewfly/core";
-import { merge as C } from "@tanbo/stream";
-const u = h("ReactAdapter");
-class f extends m {
+import { makeError, VElement, VTextNode, Adapter } from "@textbus/core";
+import { DomAdapter } from "@textbus/platform-browser";
+import { createElement, useState, useEffect } from "react";
+import { ReflectiveInjector } from "@viewfly/core";
+import { merge } from "@tanbo/stream";
+const adapterError = makeError("ReactAdapter");
+class ReactAdapter extends DomAdapter {
   components = {};
-  constructor(a, c) {
+  constructor(components, mount) {
     super({
-      createCompositionNode(e, r) {
-        return new l("span", {
+      createCompositionNode(compositionState, updateNativeCompositionNode) {
+        return new VElement("span", {
           style: {
             textDecoration: "underline"
           },
-          ref: (t) => {
-            r(t);
+          ref: (node) => {
+            updateNativeCompositionNode(node);
           }
         }, [
-          new y(e.text)
+          new VTextNode(compositionState.text)
         ]);
       },
-      getParentNode(e) {
-        return e.parentNode;
+      getParentNode(node) {
+        return node.parentNode;
       },
-      getChildNodes(e) {
-        return Array.from(e.childNodes);
+      getChildNodes(parentElement) {
+        return Array.from(parentElement.childNodes);
       },
-      isNativeElementNode(e) {
-        return e instanceof Element;
+      isNativeElementNode(node) {
+        return node instanceof Element;
       },
-      getChildByIndex(e, r) {
-        return e.childNodes[r];
+      getChildByIndex(parentElement, index) {
+        return parentElement.childNodes[index];
       },
-      getAndUpdateSlotRootNativeElement(e, r) {
-        const t = e.attrs.get("ref");
-        t ? e.attrs.set("ref", (n) => {
-          r(n), typeof t == "function" ? t(n) : t.current || (t.current = n);
-        }) : e.attrs.set("ref", r);
+      getAndUpdateSlotRootNativeElement(vEle, update) {
+        const currentRef = vEle.attrs.get("ref");
+        if (currentRef) {
+          vEle.attrs.set("ref", (v) => {
+            update(v);
+            if (typeof currentRef === "function") {
+              currentRef(v);
+            } else if (!currentRef.current) {
+              currentRef.current = v;
+            }
+          });
+        } else {
+          vEle.attrs.set("ref", update);
+        }
       },
-      componentRender: (e) => {
-        const r = this.components[e.name] || this.components["*"];
-        if (r)
-          return e.changeMarker.rendered(), d(r, {
-            key: e.id,
-            component: e
+      componentRender: (component) => {
+        const comp = this.components[component.name] || this.components["*"];
+        if (comp) {
+          component.changeMarker.rendered();
+          return createElement(comp, {
+            key: component.id,
+            component
           });
-        throw u(`cannot found view component \`${e.name}\`!`);
+        }
+        throw adapterError(`cannot found view component \`${component.name}\`!`);
       },
-      vElementToViewElement(e, r) {
-        const t = {
-          ...Array.from(e.attrs).reduce((n, o) => (n[o[0]] = o[1], n), {})
+      vElementToViewElement(vNode, children) {
+        const props = {
+          ...Array.from(vNode.attrs).reduce((a, b) => {
+            a[b[0]] = b[1];
+            return a;
+          }, {})
         };
-        return e.classes.size && (t.className = Array.from(e.classes).join(" ")), e.styles && (t.style = Array.from(e.styles).reduce((n, o) => (n[o[0]] = o[1], n), {})), d(e.tagName, t, ...r);
+        if (vNode.classes.size) {
+          props.className = 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 createElement(vNode.tagName, props, ...children);
       }
-    }, c), Object.keys(a).forEach((e) => {
-      this.components[e] = (r) => {
-        const t = r.component, [n, o] = E(Math.random());
-        i(() => {
-          const s = C(t.changeMarker.onChange, t.changeMarker.onForceChange).subscribe(() => {
-            t.changeMarker.dirty && o(Math.random());
+    }, mount);
+    Object.keys(components).forEach((key) => {
+      this.components[key] = (props) => {
+        const component = props.component;
+        const [updateKey, refreshUpdateKey] = useState(Math.random());
+        useEffect(() => {
+          const sub = merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {
+            if (component.changeMarker.dirty) {
+              refreshUpdateKey(Math.random());
+            }
           });
           return () => {
-            s.unsubscribe();
+            sub.unsubscribe();
           };
-        }, []), i(() => {
+        }, []);
+        useEffect(() => {
           this.onViewUpdated.next();
-        }, [n]);
-        const p = a[e]({
-          component: t,
-          rootRef: (s) => {
-            s ? this.componentRootElementCaches.set(t, s) : this.componentRootElementCaches.get(t) === s && this.componentRootElementCaches.remove(t);
+        }, [updateKey]);
+        const vNode = components[key]({
+          component,
+          rootRef: (rootNode) => {
+            if (rootNode) {
+              this.componentRootElementCaches.set(component, rootNode);
+            } else {
+              if (this.componentRootElementCaches.get(component) === rootNode) {
+                this.componentRootElementCaches.remove(component);
+              }
+            }
+          }
+        });
+        useEffect(() => {
+          if (!this.componentRootElementCaches.get(component)) {
+            throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
           }
         });
-        return i(() => {
-          if (!this.componentRootElementCaches.get(t))
-            throw u(`Component \`${t.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
-        }), p;
+        return vNode;
       };
     });
   }
-  render(a, c) {
-    const e = new R(c, [{
-      provide: g,
+  render(rootComponent, injector) {
+    const childInjector = new ReflectiveInjector(injector, [{
+      provide: Adapter,
       useValue: this
     }, {
-      provide: m,
+      provide: DomAdapter,
       useValue: this
     }, {
-      provide: f,
+      provide: ReactAdapter,
       useValue: this
     }]);
-    return super.render(a, e);
+    return super.render(rootComponent, childInjector);
   }
   copy() {
     document.execCommand("copy");
   }
 }
 export {
-  f as ReactAdapter
+  ReactAdapter
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/react-adapter.ts"],"sourcesContent":["import { Adapter, Component, CompositionState, makeError, VElement, ViewMount, VTextNode } from '@textbus/core'\nimport { DomAdapter } from '@textbus/platform-browser'\nimport { createElement, JSX, useEffect, useState } from 'react'\nimport { Injector, ReflectiveInjector } from '@viewfly/core'\nimport { merge } from '@tanbo/stream'\n\nconst adapterError = makeError('ReactAdapter')\n\nexport interface ViewComponentProps<T extends Component> {\n  component: T\n  rootRef: ((rootNode: Element) => void)\n}\n\nexport interface ReactAdapterComponents {\n  [key: string]: (props: ViewComponentProps<any>) => JSX.Element\n}\n\nexport class ReactAdapter extends DomAdapter<JSX.Element, JSX.Element> {\n  private components: Record<string, (props: {component: Component}) => JSX.Element> = {}\n\n  constructor(components: ReactAdapterComponents,\n              mount: ViewMount<JSX.Element, Element>) {\n    super({\n      createCompositionNode(compositionState: CompositionState,\n                            updateNativeCompositionNode: (nativeNode: (Element | null)) => void): VElement {\n        return new VElement('span', {\n          style: {\n            textDecoration: 'underline'\n          },\n          ref: (node: Element) => {\n            updateNativeCompositionNode(node)\n          }\n        }, [\n          new VTextNode(compositionState.text)\n        ])\n      },\n      getParentNode(node: Element | Text): Element | null {\n        return (node as Node).parentNode as Element\n      },\n      getChildNodes(parentElement: Element): Array<Element | Text> {\n        return Array.from(parentElement.childNodes) as Element[]\n      },\n      isNativeElementNode(node: Element | Text): node is Element {\n        return node instanceof Element\n      },\n      getChildByIndex(parentElement, index) {\n        return parentElement.childNodes[index] as Element\n      },\n      getAndUpdateSlotRootNativeElement(vEle: VElement, update: (nativeElement: (Element | null)) => void) {\n        const currentRef = vEle.attrs.get('ref')\n        if (currentRef) {\n          vEle.attrs.set('ref', (v: Element) => {\n            update(v)\n            if (typeof currentRef === 'function') {\n              currentRef(v)\n            } else if (!currentRef.current) {\n              currentRef.current = v\n            }\n          })\n        } else {\n          vEle.attrs.set('ref', update)\n        }\n      },\n      componentRender: (component: Component<any>): JSX.Element => {\n        const comp = this.components[component.name] || this.components['*']\n        if (comp) {\n          component.changeMarker.rendered()\n          return createElement(comp, {\n            key: component.id,\n            component\n          })\n        }\n        throw adapterError(`cannot found view component \\`${component.name}\\`!`)\n      },\n      vElementToViewElement(vNode: VElement, children: Array<string | JSX.Element>): JSX.Element {\n        const props: any = {\n          ...(Array.from(vNode.attrs).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>))\n        }\n        if (vNode.classes.size) {\n          props.className = Array.from(vNode.classes).join(' ')\n        }\n        if (vNode.styles) {\n          props.style = Array.from(vNode.styles).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>)\n        }\n        return createElement(vNode.tagName, props, ...children)\n      }\n    }, mount)\n    Object.keys(components).forEach(key => {\n      this.components[key] = (props: {component: Component}) => {\n        const component = props.component\n        const [updateKey, refreshUpdateKey] = useState(Math.random())\n\n        useEffect(() => {\n          const sub = merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {\n            if (component.changeMarker.dirty) {\n              refreshUpdateKey(Math.random())\n            }\n          })\n          return () => {\n            sub.unsubscribe()\n          }\n        }, [])\n        useEffect(() => {\n          this.onViewUpdated.next()\n        }, [updateKey])\n        const vNode = components[key]({\n          component,\n          rootRef: (rootNode: Element) => {\n            if (rootNode) {\n              this.componentRootElementCaches.set(component, rootNode)\n            } else {\n              // 当组件移动层级位置到原位置之前并重新渲染后，由于时序的原因，再删除缓存会导致组件找不到对应视图节点\n              // eslint-disable-next-line no-lonely-if\n              if (this.componentRootElementCaches.get(component) === rootNode) {\n                this.componentRootElementCaches.remove(component)\n              }\n            }\n          }\n        })\n        useEffect(() => {\n          if (!this.componentRootElementCaches.get(component)) {\n            // eslint-disable-next-line max-len\n            throw adapterError(`Component \\`${component.name}\\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`)\n          }\n        })\n        return vNode\n      }\n    })\n  }\n\n  override render(rootComponent: Component, injector: Injector): void | (() => void) {\n    const childInjector = new ReflectiveInjector(injector, [{\n      provide: Adapter,\n      useValue: this\n    }, {\n      provide: DomAdapter,\n      useValue: this\n    }, {\n      provide: ReactAdapter,\n      useValue: this\n    }])\n    return super.render(rootComponent, childInjector)\n  }\n\n  override copy() {\n    document.execCommand('copy')\n  }\n}\n"],"names":["adapterError","makeError","ReactAdapter","DomAdapter","components","mount","compositionState","updateNativeCompositionNode","VElement","node","VTextNode","parentElement","index","vEle","update","currentRef","v","component","comp","createElement","vNode","children","props","a","b","key","updateKey","refreshUpdateKey","useState","useEffect","sub","merge","rootNode","rootComponent","injector","childInjector","ReflectiveInjector","Adapter"],"mappings":";;;;;AAMA,MAAMA,IAAeC,EAAU,cAAc;AAWtC,MAAMC,UAAqBC,EAAqC;AAAA,EAC7D,aAA6E,CAAA;AAAA,EAErF,YAAYC,GACAC,GAAwC;AAClD,UAAM;AAAA,MACJ,sBAAsBC,GACAC,GAA+E;AACnG,eAAO,IAAIC,EAAS,QAAQ;AAAA,UAC1B,OAAO;AAAA,YACL,gBAAgB;AAAA,UAAA;AAAA,UAElB,KAAK,CAACC,MAAkB;AACtB,YAAAF,EAA4BE,CAAI;AAAA,UAClC;AAAA,QAAA,GACC;AAAA,UACD,IAAIC,EAAUJ,EAAiB,IAAI;AAAA,QAAA,CACpC;AAAA,MACH;AAAA,MACA,cAAcG,GAAsC;AAClD,eAAQA,EAAc;AAAA,MACxB;AAAA,MACA,cAAcE,GAA+C;AAC3D,eAAO,MAAM,KAAKA,EAAc,UAAU;AAAA,MAC5C;AAAA,MACA,oBAAoBF,GAAuC;AACzD,eAAOA,aAAgB;AAAA,MACzB;AAAA,MACA,gBAAgBE,GAAeC,GAAO;AACpC,eAAOD,EAAc,WAAWC,CAAK;AAAA,MACvC;AAAA,MACA,kCAAkCC,GAAgBC,GAAmD;AACnG,cAAMC,IAAaF,EAAK,MAAM,IAAI,KAAK;AACvC,QAAIE,IACFF,EAAK,MAAM,IAAI,OAAO,CAACG,MAAe;AACpC,UAAAF,EAAOE,CAAC,GACJ,OAAOD,KAAe,aACxBA,EAAWC,CAAC,IACFD,EAAW,YACrBA,EAAW,UAAUC;AAAA,QAEzB,CAAC,IAEDH,EAAK,MAAM,IAAI,OAAOC,CAAM;AAAA,MAEhC;AAAA,MACA,iBAAiB,CAACG,MAA2C;AAC3D,cAAMC,IAAO,KAAK,WAAWD,EAAU,IAAI,KAAK,KAAK,WAAW,GAAG;AACnE,YAAIC;AACF,iBAAAD,EAAU,aAAa,SAAA,GAChBE,EAAcD,GAAM;AAAA,YACzB,KAAKD,EAAU;AAAA,YACf,WAAAA;AAAA,UAAA,CACD;AAEH,cAAMjB,EAAa,iCAAiCiB,EAAU,IAAI,KAAK;AAAA,MACzE;AAAA,MACA,sBAAsBG,GAAiBC,GAAoD;AACzF,cAAMC,IAAa;AAAA,UACjB,GAAI,MAAM,KAAKF,EAAM,KAAK,EAAE,OAAO,CAACG,GAAGC,OACrCD,EAAEC,EAAE,CAAC,CAAC,IAAIA,EAAE,CAAC,GACND,IACN,CAAA,CAAyB;AAAA,QAAA;AAE9B,eAAIH,EAAM,QAAQ,SAChBE,EAAM,YAAY,MAAM,KAAKF,EAAM,OAAO,EAAE,KAAK,GAAG,IAElDA,EAAM,WACRE,EAAM,QAAQ,MAAM,KAAKF,EAAM,MAAM,EAAE,OAAO,CAACG,GAAGC,OAChDD,EAAEC,EAAE,CAAC,CAAC,IAAIA,EAAE,CAAC,GACND,IACN,CAAA,CAAyB,IAEvBJ,EAAcC,EAAM,SAASE,GAAO,GAAGD,CAAQ;AAAA,MACxD;AAAA,IAAA,GACChB,CAAK,GACR,OAAO,KAAKD,CAAU,EAAE,QAAQ,CAAAqB,MAAO;AACrC,WAAK,WAAWA,CAAG,IAAI,CAACH,MAAkC;AACxD,cAAML,IAAYK,EAAM,WAClB,CAACI,GAAWC,CAAgB,IAAIC,EAAS,KAAK,QAAQ;AAE5D,QAAAC,EAAU,MAAM;AACd,gBAAMC,IAAMC,EAAMd,EAAU,aAAa,UAAUA,EAAU,aAAa,aAAa,EAAE,UAAU,MAAM;AACvG,YAAIA,EAAU,aAAa,SACzBU,EAAiB,KAAK,QAAQ;AAAA,UAElC,CAAC;AACD,iBAAO,MAAM;AACX,YAAAG,EAAI,YAAA;AAAA,UACN;AAAA,QACF,GAAG,CAAA,CAAE,GACLD,EAAU,MAAM;AACd,eAAK,cAAc,KAAA;AAAA,QACrB,GAAG,CAACH,CAAS,CAAC;AACd,cAAMN,IAAQhB,EAAWqB,CAAG,EAAE;AAAA,UAC5B,WAAAR;AAAA,UACA,SAAS,CAACe,MAAsB;AAC9B,YAAIA,IACF,KAAK,2BAA2B,IAAIf,GAAWe,CAAQ,IAInD,KAAK,2BAA2B,IAAIf,CAAS,MAAMe,KACrD,KAAK,2BAA2B,OAAOf,CAAS;AAAA,UAGtD;AAAA,QAAA,CACD;AACD,eAAAY,EAAU,MAAM;AACd,cAAI,CAAC,KAAK,2BAA2B,IAAIZ,CAAS;AAEhD,kBAAMjB,EAAa,eAAeiB,EAAU,IAAI,mGAAmG;AAAA,QAEvJ,CAAC,GACMG;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAES,OAAOa,GAA0BC,GAAyC;AACjF,UAAMC,IAAgB,IAAIC,EAAmBF,GAAU,CAAC;AAAA,MACtD,SAASG;AAAA,MACT,UAAU;AAAA,IAAA,GACT;AAAA,MACD,SAASlC;AAAA,MACT,UAAU;AAAA,IAAA,GACT;AAAA,MACD,SAASD;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AACF,WAAO,MAAM,OAAO+B,GAAeE,CAAa;AAAA,EAClD;AAAA,EAES,OAAO;AACd,aAAS,YAAY,MAAM;AAAA,EAC7B;AACF;"}
+{"version":3,"file":"index.esm.js","sources":["../src/react-adapter.ts"],"sourcesContent":["import { Adapter, Component, CompositionState, makeError, VElement, ViewMount, VTextNode } from '@textbus/core'\nimport { DomAdapter } from '@textbus/platform-browser'\nimport { createElement, JSX, useEffect, useState } from 'react'\nimport { Injector, ReflectiveInjector } from '@viewfly/core'\nimport { merge } from '@tanbo/stream'\n\nconst adapterError = makeError('ReactAdapter')\n\nexport interface ViewComponentProps<T extends Component> {\n  component: T\n  rootRef: ((rootNode: Element) => void)\n}\n\nexport interface ReactAdapterComponents {\n  [key: string]: (props: ViewComponentProps<any>) => JSX.Element\n}\n\nexport class ReactAdapter extends DomAdapter<JSX.Element, JSX.Element> {\n  private components: Record<string, (props: {component: Component}) => JSX.Element> = {}\n\n  constructor(components: ReactAdapterComponents,\n              mount: ViewMount<JSX.Element, Element>) {\n    super({\n      createCompositionNode(compositionState: CompositionState,\n                            updateNativeCompositionNode: (nativeNode: (Element | null)) => void): VElement {\n        return new VElement('span', {\n          style: {\n            textDecoration: 'underline'\n          },\n          ref: (node: Element) => {\n            updateNativeCompositionNode(node)\n          }\n        }, [\n          new VTextNode(compositionState.text)\n        ])\n      },\n      getParentNode(node: Element | Text): Element | null {\n        return (node as Node).parentNode as Element\n      },\n      getChildNodes(parentElement: Element): Array<Element | Text> {\n        return Array.from(parentElement.childNodes) as Element[]\n      },\n      isNativeElementNode(node: Element | Text): node is Element {\n        return node instanceof Element\n      },\n      getChildByIndex(parentElement, index) {\n        return parentElement.childNodes[index] as Element\n      },\n      getAndUpdateSlotRootNativeElement(vEle: VElement, update: (nativeElement: (Element | null)) => void) {\n        const currentRef = vEle.attrs.get('ref')\n        if (currentRef) {\n          vEle.attrs.set('ref', (v: Element) => {\n            update(v)\n            if (typeof currentRef === 'function') {\n              currentRef(v)\n            } else if (!currentRef.current) {\n              currentRef.current = v\n            }\n          })\n        } else {\n          vEle.attrs.set('ref', update)\n        }\n      },\n      componentRender: (component: Component<any>): JSX.Element => {\n        const comp = this.components[component.name] || this.components['*']\n        if (comp) {\n          component.changeMarker.rendered()\n          return createElement(comp, {\n            key: component.id,\n            component\n          })\n        }\n        throw adapterError(`cannot found view component \\`${component.name}\\`!`)\n      },\n      vElementToViewElement(vNode: VElement, children: Array<string | JSX.Element>): JSX.Element {\n        const props: any = {\n          ...(Array.from(vNode.attrs).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>))\n        }\n        if (vNode.classes.size) {\n          props.className = Array.from(vNode.classes).join(' ')\n        }\n        if (vNode.styles) {\n          props.style = Array.from(vNode.styles).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>)\n        }\n        return createElement(vNode.tagName, props, ...children)\n      }\n    }, mount)\n    Object.keys(components).forEach(key => {\n      this.components[key] = (props: {component: Component}) => {\n        const component = props.component\n        const [updateKey, refreshUpdateKey] = useState(Math.random())\n\n        useEffect(() => {\n          const sub = merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {\n            if (component.changeMarker.dirty) {\n              refreshUpdateKey(Math.random())\n            }\n          })\n          return () => {\n            sub.unsubscribe()\n          }\n        }, [])\n        useEffect(() => {\n          this.onViewUpdated.next()\n        }, [updateKey])\n        const vNode = components[key]({\n          component,\n          rootRef: (rootNode: Element) => {\n            if (rootNode) {\n              this.componentRootElementCaches.set(component, rootNode)\n            } else {\n              // 当组件移动层级位置到原位置之前并重新渲染后，由于时序的原因，再删除缓存会导致组件找不到对应视图节点\n              // eslint-disable-next-line no-lonely-if\n              if (this.componentRootElementCaches.get(component) === rootNode) {\n                this.componentRootElementCaches.remove(component)\n              }\n            }\n          }\n        })\n        useEffect(() => {\n          if (!this.componentRootElementCaches.get(component)) {\n            // eslint-disable-next-line max-len\n            throw adapterError(`Component \\`${component.name}\\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`)\n          }\n        })\n        return vNode\n      }\n    })\n  }\n\n  override render(rootComponent: Component, injector: Injector): void | (() => void) {\n    const childInjector = new ReflectiveInjector(injector, [{\n      provide: Adapter,\n      useValue: this\n    }, {\n      provide: DomAdapter,\n      useValue: this\n    }, {\n      provide: ReactAdapter,\n      useValue: this\n    }])\n    return super.render(rootComponent, childInjector)\n  }\n\n  override copy() {\n    document.execCommand('copy')\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,138 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@textbus/core"),d=require("@textbus/platform-browser"),s=require("react"),h=require("@viewfly/core"),p=require("@tanbo/stream"),f=i.makeError("ReactAdapter");class m extends d.DomAdapter{components={};constructor(a,u){super({createCompositionNode(e,r){return new i.VElement("span",{style:{textDecoration:"underline"},ref:t=>{r(t)}},[new i.VTextNode(e.text)])},getParentNode(e){return e.parentNode},getChildNodes(e){return Array.from(e.childNodes)},isNativeElementNode(e){return e instanceof Element},getChildByIndex(e,r){return e.childNodes[r]},getAndUpdateSlotRootNativeElement(e,r){const t=e.attrs.get("ref");t?e.attrs.set("ref",n=>{r(n),typeof t=="function"?t(n):t.current||(t.current=n)}):e.attrs.set("ref",r)},componentRender:e=>{const r=this.components[e.name]||this.components["*"];if(r)return e.changeMarker.rendered(),s.createElement(r,{key:e.id,component:e});throw f(`cannot found view component \`${e.name}\`!`)},vElementToViewElement(e,r){const t={...Array.from(e.attrs).reduce((n,o)=>(n[o[0]]=o[1],n),{})};return e.classes.size&&(t.className=Array.from(e.classes).join(" ")),e.styles&&(t.style=Array.from(e.styles).reduce((n,o)=>(n[o[0]]=o[1],n),{})),s.createElement(e.tagName,t,...r)}},u),Object.keys(a).forEach(e=>{this.components[e]=r=>{const t=r.component,[n,o]=s.useState(Math.random());s.useEffect(()=>{const c=p.merge(t.changeMarker.onChange,t.changeMarker.onForceChange).subscribe(()=>{t.changeMarker.dirty&&o(Math.random())});return()=>{c.unsubscribe()}},[]),s.useEffect(()=>{this.onViewUpdated.next()},[n]);const l=a[e]({component:t,rootRef:c=>{c?this.componentRootElementCaches.set(t,c):this.componentRootElementCaches.get(t)===c&&this.componentRootElementCaches.remove(t)}});return s.useEffect(()=>{if(!this.componentRootElementCaches.get(t))throw f(`Component \`${t.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`)}),l}})}render(a,u){const e=new h.ReflectiveInjector(u,[{provide:i.Adapter,useValue:this},{provide:d.DomAdapter,useValue:this},{provide:m,useValue:this}]);return super.render(a,e)}copy(){document.execCommand("copy")}}exports.ReactAdapter=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@textbus/core");
+const platformBrowser = require("@textbus/platform-browser");
+const react = require("react");
+const core$1 = require("@viewfly/core");
+const stream = require("@tanbo/stream");
+const adapterError = core.makeError("ReactAdapter");
+class ReactAdapter extends platformBrowser.DomAdapter {
+  components = {};
+  constructor(components, mount) {
+    super({
+      createCompositionNode(compositionState, updateNativeCompositionNode) {
+        return new core.VElement("span", {
+          style: {
+            textDecoration: "underline"
+          },
+          ref: (node) => {
+            updateNativeCompositionNode(node);
+          }
+        }, [
+          new core.VTextNode(compositionState.text)
+        ]);
+      },
+      getParentNode(node) {
+        return node.parentNode;
+      },
+      getChildNodes(parentElement) {
+        return Array.from(parentElement.childNodes);
+      },
+      isNativeElementNode(node) {
+        return node instanceof Element;
+      },
+      getChildByIndex(parentElement, index) {
+        return parentElement.childNodes[index];
+      },
+      getAndUpdateSlotRootNativeElement(vEle, update) {
+        const currentRef = vEle.attrs.get("ref");
+        if (currentRef) {
+          vEle.attrs.set("ref", (v) => {
+            update(v);
+            if (typeof currentRef === "function") {
+              currentRef(v);
+            } else if (!currentRef.current) {
+              currentRef.current = v;
+            }
+          });
+        } else {
+          vEle.attrs.set("ref", update);
+        }
+      },
+      componentRender: (component) => {
+        const comp = this.components[component.name] || this.components["*"];
+        if (comp) {
+          component.changeMarker.rendered();
+          return react.createElement(comp, {
+            key: component.id,
+            component
+          });
+        }
+        throw adapterError(`cannot found view component \`${component.name}\`!`);
+      },
+      vElementToViewElement(vNode, children) {
+        const props = {
+          ...Array.from(vNode.attrs).reduce((a, b) => {
+            a[b[0]] = b[1];
+            return a;
+          }, {})
+        };
+        if (vNode.classes.size) {
+          props.className = 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 react.createElement(vNode.tagName, props, ...children);
+      }
+    }, mount);
+    Object.keys(components).forEach((key) => {
+      this.components[key] = (props) => {
+        const component = props.component;
+        const [updateKey, refreshUpdateKey] = react.useState(Math.random());
+        react.useEffect(() => {
+          const sub = stream.merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {
+            if (component.changeMarker.dirty) {
+              refreshUpdateKey(Math.random());
+            }
+          });
+          return () => {
+            sub.unsubscribe();
+          };
+        }, []);
+        react.useEffect(() => {
+          this.onViewUpdated.next();
+        }, [updateKey]);
+        const vNode = components[key]({
+          component,
+          rootRef: (rootNode) => {
+            if (rootNode) {
+              this.componentRootElementCaches.set(component, rootNode);
+            } else {
+              if (this.componentRootElementCaches.get(component) === rootNode) {
+                this.componentRootElementCaches.remove(component);
+              }
+            }
+          }
+        });
+        react.useEffect(() => {
+          if (!this.componentRootElementCaches.get(component)) {
+            throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+          }
+        });
+        return vNode;
+      };
+    });
+  }
+  render(rootComponent, injector) {
+    const childInjector = new core$1.ReflectiveInjector(injector, [{
+      provide: core.Adapter,
+      useValue: this
+    }, {
+      provide: platformBrowser.DomAdapter,
+      useValue: this
+    }, {
+      provide: ReactAdapter,
+      useValue: this
+    }]);
+    return super.render(rootComponent, childInjector);
+  }
+  copy() {
+    document.execCommand("copy");
+  }
+}
+exports.ReactAdapter = ReactAdapter;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/react-adapter.ts"],"sourcesContent":["import { Adapter, Component, CompositionState, makeError, VElement, ViewMount, VTextNode } from '@textbus/core'\nimport { DomAdapter } from '@textbus/platform-browser'\nimport { createElement, JSX, useEffect, useState } from 'react'\nimport { Injector, ReflectiveInjector } from '@viewfly/core'\nimport { merge } from '@tanbo/stream'\n\nconst adapterError = makeError('ReactAdapter')\n\nexport interface ViewComponentProps<T extends Component> {\n  component: T\n  rootRef: ((rootNode: Element) => void)\n}\n\nexport interface ReactAdapterComponents {\n  [key: string]: (props: ViewComponentProps<any>) => JSX.Element\n}\n\nexport class ReactAdapter extends DomAdapter<JSX.Element, JSX.Element> {\n  private components: Record<string, (props: {component: Component}) => JSX.Element> = {}\n\n  constructor(components: ReactAdapterComponents,\n              mount: ViewMount<JSX.Element, Element>) {\n    super({\n      createCompositionNode(compositionState: CompositionState,\n                            updateNativeCompositionNode: (nativeNode: (Element | null)) => void): VElement {\n        return new VElement('span', {\n          style: {\n            textDecoration: 'underline'\n          },\n          ref: (node: Element) => {\n            updateNativeCompositionNode(node)\n          }\n        }, [\n          new VTextNode(compositionState.text)\n        ])\n      },\n      getParentNode(node: Element | Text): Element | null {\n        return (node as Node).parentNode as Element\n      },\n      getChildNodes(parentElement: Element): Array<Element | Text> {\n        return Array.from(parentElement.childNodes) as Element[]\n      },\n      isNativeElementNode(node: Element | Text): node is Element {\n        return node instanceof Element\n      },\n      getChildByIndex(parentElement, index) {\n        return parentElement.childNodes[index] as Element\n      },\n      getAndUpdateSlotRootNativeElement(vEle: VElement, update: (nativeElement: (Element | null)) => void) {\n        const currentRef = vEle.attrs.get('ref')\n        if (currentRef) {\n          vEle.attrs.set('ref', (v: Element) => {\n            update(v)\n            if (typeof currentRef === 'function') {\n              currentRef(v)\n            } else if (!currentRef.current) {\n              currentRef.current = v\n            }\n          })\n        } else {\n          vEle.attrs.set('ref', update)\n        }\n      },\n      componentRender: (component: Component<any>): JSX.Element => {\n        const comp = this.components[component.name] || this.components['*']\n        if (comp) {\n          component.changeMarker.rendered()\n          return createElement(comp, {\n            key: component.id,\n            component\n          })\n        }\n        throw adapterError(`cannot found view component \\`${component.name}\\`!`)\n      },\n      vElementToViewElement(vNode: VElement, children: Array<string | JSX.Element>): JSX.Element {\n        const props: any = {\n          ...(Array.from(vNode.attrs).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>))\n        }\n        if (vNode.classes.size) {\n          props.className = Array.from(vNode.classes).join(' ')\n        }\n        if (vNode.styles) {\n          props.style = Array.from(vNode.styles).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>)\n        }\n        return createElement(vNode.tagName, props, ...children)\n      }\n    }, mount)\n    Object.keys(components).forEach(key => {\n      this.components[key] = (props: {component: Component}) => {\n        const component = props.component\n        const [updateKey, refreshUpdateKey] = useState(Math.random())\n\n        useEffect(() => {\n          const sub = merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {\n            if (component.changeMarker.dirty) {\n              refreshUpdateKey(Math.random())\n            }\n          })\n          return () => {\n            sub.unsubscribe()\n          }\n        }, [])\n        useEffect(() => {\n          this.onViewUpdated.next()\n        }, [updateKey])\n        const vNode = components[key]({\n          component,\n          rootRef: (rootNode: Element) => {\n            if (rootNode) {\n              this.componentRootElementCaches.set(component, rootNode)\n            } else {\n              // 当组件移动层级位置到原位置之前并重新渲染后，由于时序的原因，再删除缓存会导致组件找不到对应视图节点\n              // eslint-disable-next-line no-lonely-if\n              if (this.componentRootElementCaches.get(component) === rootNode) {\n                this.componentRootElementCaches.remove(component)\n              }\n            }\n          }\n        })\n        useEffect(() => {\n          if (!this.componentRootElementCaches.get(component)) {\n            // eslint-disable-next-line max-len\n            throw adapterError(`Component \\`${component.name}\\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`)\n          }\n        })\n        return vNode\n      }\n    })\n  }\n\n  override render(rootComponent: Component, injector: Injector): void | (() => void) {\n    const childInjector = new ReflectiveInjector(injector, [{\n      provide: Adapter,\n      useValue: this\n    }, {\n      provide: DomAdapter,\n      useValue: this\n    }, {\n      provide: ReactAdapter,\n      useValue: this\n    }])\n    return super.render(rootComponent, childInjector)\n  }\n\n  override copy() {\n    document.execCommand('copy')\n  }\n}\n"],"names":["adapterError","makeError","ReactAdapter","DomAdapter","components","mount","compositionState","updateNativeCompositionNode","VElement","node","VTextNode","parentElement","index","vEle","update","currentRef","v","component","comp","createElement","vNode","children","props","a","b","key","updateKey","refreshUpdateKey","useState","useEffect","sub","merge","rootNode","rootComponent","injector","childInjector","ReflectiveInjector","Adapter"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/react-adapter.ts"],"sourcesContent":["import { Adapter, Component, CompositionState, makeError, VElement, ViewMount, VTextNode } from '@textbus/core'\nimport { DomAdapter } from '@textbus/platform-browser'\nimport { createElement, JSX, useEffect, useState } from 'react'\nimport { Injector, ReflectiveInjector } from '@viewfly/core'\nimport { merge } from '@tanbo/stream'\n\nconst adapterError = makeError('ReactAdapter')\n\nexport interface ViewComponentProps<T extends Component> {\n  component: T\n  rootRef: ((rootNode: Element) => void)\n}\n\nexport interface ReactAdapterComponents {\n  [key: string]: (props: ViewComponentProps<any>) => JSX.Element\n}\n\nexport class ReactAdapter extends DomAdapter<JSX.Element, JSX.Element> {\n  private components: Record<string, (props: {component: Component}) => JSX.Element> = {}\n\n  constructor(components: ReactAdapterComponents,\n              mount: ViewMount<JSX.Element, Element>) {\n    super({\n      createCompositionNode(compositionState: CompositionState,\n                            updateNativeCompositionNode: (nativeNode: (Element | null)) => void): VElement {\n        return new VElement('span', {\n          style: {\n            textDecoration: 'underline'\n          },\n          ref: (node: Element) => {\n            updateNativeCompositionNode(node)\n          }\n        }, [\n          new VTextNode(compositionState.text)\n        ])\n      },\n      getParentNode(node: Element | Text): Element | null {\n        return (node as Node).parentNode as Element\n      },\n      getChildNodes(parentElement: Element): Array<Element | Text> {\n        return Array.from(parentElement.childNodes) as Element[]\n      },\n      isNativeElementNode(node: Element | Text): node is Element {\n        return node instanceof Element\n      },\n      getChildByIndex(parentElement, index) {\n        return parentElement.childNodes[index] as Element\n      },\n      getAndUpdateSlotRootNativeElement(vEle: VElement, update: (nativeElement: (Element | null)) => void) {\n        const currentRef = vEle.attrs.get('ref')\n        if (currentRef) {\n          vEle.attrs.set('ref', (v: Element) => {\n            update(v)\n            if (typeof currentRef === 'function') {\n              currentRef(v)\n            } else if (!currentRef.current) {\n              currentRef.current = v\n            }\n          })\n        } else {\n          vEle.attrs.set('ref', update)\n        }\n      },\n      componentRender: (component: Component<any>): JSX.Element => {\n        const comp = this.components[component.name] || this.components['*']\n        if (comp) {\n          component.changeMarker.rendered()\n          return createElement(comp, {\n            key: component.id,\n            component\n          })\n        }\n        throw adapterError(`cannot found view component \\`${component.name}\\`!`)\n      },\n      vElementToViewElement(vNode: VElement, children: Array<string | JSX.Element>): JSX.Element {\n        const props: any = {\n          ...(Array.from(vNode.attrs).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>))\n        }\n        if (vNode.classes.size) {\n          props.className = Array.from(vNode.classes).join(' ')\n        }\n        if (vNode.styles) {\n          props.style = Array.from(vNode.styles).reduce((a, b) => {\n            a[b[0]] = b[1]\n            return a\n          }, {} as Record<string, any>)\n        }\n        return createElement(vNode.tagName, props, ...children)\n      }\n    }, mount)\n    Object.keys(components).forEach(key => {\n      this.components[key] = (props: {component: Component}) => {\n        const component = props.component\n        const [updateKey, refreshUpdateKey] = useState(Math.random())\n\n        useEffect(() => {\n          const sub = merge(component.changeMarker.onChange, component.changeMarker.onForceChange).subscribe(() => {\n            if (component.changeMarker.dirty) {\n              refreshUpdateKey(Math.random())\n            }\n          })\n          return () => {\n            sub.unsubscribe()\n          }\n        }, [])\n        useEffect(() => {\n          this.onViewUpdated.next()\n        }, [updateKey])\n        const vNode = components[key]({\n          component,\n          rootRef: (rootNode: Element) => {\n            if (rootNode) {\n              this.componentRootElementCaches.set(component, rootNode)\n            } else {\n              // 当组件移动层级位置到原位置之前并重新渲染后，由于时序的原因，再删除缓存会导致组件找不到对应视图节点\n              // eslint-disable-next-line no-lonely-if\n              if (this.componentRootElementCaches.get(component) === rootNode) {\n                this.componentRootElementCaches.remove(component)\n              }\n            }\n          }\n        })\n        useEffect(() => {\n          if (!this.componentRootElementCaches.get(component)) {\n            // eslint-disable-next-line max-len\n            throw adapterError(`Component \\`${component.name}\\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`)\n          }\n        })\n        return vNode\n      }\n    })\n  }\n\n  override render(rootComponent: Component, injector: Injector): void | (() => void) {\n    const childInjector = new ReflectiveInjector(injector, [{\n      provide: Adapter,\n      useValue: this\n    }, {\n      provide: DomAdapter,\n      useValue: this\n    }, {\n      provide: ReactAdapter,\n      useValue: this\n    }])\n    return super.render(rootComponent, childInjector)\n  }\n\n  override copy() {\n    document.execCommand('copy')\n  }\n}\n"],"names":["makeError","DomAdapter","VElement","VTextNode","createElement","useState","useEffect","merge","ReflectiveInjector","Adapter"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/adapter-react",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,9 +33,9 @@
   ],
   "dependencies": {
     "@tanbo/stream": "^1.2.7",
-    "@viewfly/core": "^2.2.0 || >=3.0.0-alpha.0 <4",
-    "@textbus/core": "^5.2.2",
-    "@textbus/platform-browser": "^5.2.2"
+    "@viewfly/core": "^2.2.0 || >=3.0.0-alpha.3 <4",
+    "@textbus/core": "^5.2.3",
+    "@textbus/platform-browser": "^5.2.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"