sichqon/dist/index.mjs

Create tunnel with your react application

import React, { useSyncExternalStore, useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
function createTunnel() {
  let localState = [];
  let listeners = [];
  function subscribe(listener) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }
  function notifyListeners() {
    for (const listener of listeners) {
      listener();
    }
  }
  return {
    In({ children }) {
      useIsomorphicLayoutEffect(() => {
        localState = [...localState, children];
        notifyListeners();
        return () => {
          localState = localState.filter((c) => c !== children);
        };
      }, [children]);
      return null;
    },
    Out() {
      const currentState = useSyncExternalStore(subscribe, () => localState);
      return /* @__PURE__ */ React.createElement(React.Fragment, null, currentState);
    }
  };
}

export { createTunnel };