feat: use patched @wessberg/connection-observer

Until wessberg/connection-observer#9

package.json

@@ -64,5 +64,10 @@
   },
   "dependencies": {
     "@wessberg/connection-observer": "^1.0.5"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@wessberg/[email protected]": "patches/@[email protected]"
+    }
   }
 }

patches/@wessberg__connection-observer@1.0.5.patch

@@ -0,0 +1,41 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 8caf391e7549ee0e3b34c975ed1f1696c00daf68..0000000000000000000000000000000000000000
+diff --git a/dist/index.js b/dist/index.js
+index d0b60e342f33ff6fc42536e7b29b6d634e5f2894..dfa9948eb5a67950204cd00e002f1f276669e174 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -1,4 +1,4 @@
+-const ORIGINAL_ATTACH_SHADOW = Element.prototype.attachShadow;
++const ORIGINAL_ATTACH_SHADOW = typeof Element !== 'undefined' ? Element.prototype.attachShadow : undefined;
+
+ /**
+  * Returns true if the environment is relying on the ShadyDOM polyfill.
+@@ -18,7 +18,7 @@ function supportsShadowRoots() {
+  */
+ function patchElementPrototypeAttachShadow(callback) {
+     // If Shadow DOM is not available, or if it is based on the ShadyDOM polyfill, there's nothing (or no need) to patch
+-    if (ORIGINAL_ATTACH_SHADOW == null || isShady())
++    if (ORIGINAL_ATTACH_SHADOW == null || isShady() || typeof Element === 'undefined')
+         return;
+     Element.prototype.attachShadow = function (shadowRootInitDict) {
+         const shadowRoot = ORIGINAL_ATTACH_SHADOW.call(this, shadowRootInitDict);
+@@ -329,7 +329,7 @@ const observeRoot = (() => {
+ })();
+
+ // Creates a pausable queue and pass document.documentElement as the initial queue payload
+-const rootObserverQueue = createPausableQueue(observeRoot, document.documentElement);
++const rootObserverQueue = createPausableQueue(observeRoot, typeof document !== 'undefined' ? document.documentElement : undefined);
+
+ /**
+  * An Observer that tracks the DOM-insertion state of observed nodes across Shadow boundaries.
+@@ -347,6 +347,9 @@ class ConnectionObserver {
+         else if (typeof callback !== "function") {
+             throw new TypeError(`Failed to construct '${ConnectionObserver.name}': The callback provided as parameter 1 is not a function.`);
+         }
++        if (typeof document === 'undefined') {
++            return;
++        }
+         // Add this ConnectionObserver to the Set of ConnectionObservers
+         initializeConnectionObserver(this, callback);
+     }

src/widget.ts

@@ -1,10 +1,10 @@
 /* eslint-disable unicorn/no-null */
+import { ConnectionObserver } from '@wessberg/connection-observer';
 import type * as ReactType from 'react';
 import type * as ReactDomType from 'react-dom';
 import type * as ReactDomClientType from 'react-dom/client';
-import type { IChangedTiddlers } from 'tiddlywiki';
+import type { IChangedTiddlers, IParseTreeNode, IWidgetInitialiseOptions } from 'tiddlywiki';
 import type { IReactWidget, ITWReactProps, ITWReactPropsDefault } from './widget-type';
-import { ConnectionObserver } from '@wessberg/connection-observer';
 
 import { widget as Widget } from '$:/core/modules/widgets/widget.js';
 const ReactDom = require('react-dom') as typeof ReactDomType & typeof ReactDomClientType;
@@ -20,15 +20,23 @@ class ReactWidgetImpl<
 > extends Widget implements IReactWidget<IProps> {
   root: ReturnType<typeof ReactDom.createRoot> | undefined;
   containerElement: HTMLDivElement | undefined;
+  connectionObserver: ConnectionObserver | undefined;
 
-  connectionObserver = new ConnectionObserver(entries => {
-    for (const { connected } of entries) {
-      if (!connected) {
-        this.destroy();
-        this.connectionObserver?.disconnect?.();
-      }
+  constructor(parseTreeNode: IParseTreeNode, options?: IWidgetInitialiseOptions | undefined) {
+    super(parseTreeNode, options);
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    if (!$tw.browser) {
+      return;
     }
-  });
+    this.connectionObserver = new ConnectionObserver(entries => {
+      for (const { connected } of entries) {
+        if (!connected) {
+          this.destroy();
+          this.connectionObserver?.disconnect?.();
+        }
+      }
+    });
+  }
 
   refresh(changedTiddlers: IChangedTiddlers) {
     // we don't need to refresh mount point of react-dom
@@ -67,7 +75,7 @@ class ReactWidgetImpl<
       this.connectionObserver.observe(this.parentDomNode);
     }
     this.domNodes.push(this.containerElement);
-    parent.append(this.containerElement);
+    nextSibling === null ? parent.append(this.containerElement) : nextSibling.before(this.containerElement);
     const reactElement = React.createElement(this.reactComponent, currentProps);
     this.root.render(reactElement);
   }