@flexiformal/ftml-react 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexiformal/ftml-react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "",
   "homepage": "https://github.com/FlexiFormal/ftml-ts#readme",
   "bugs": {
@@ -15,8 +15,8 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -50,7 +50,7 @@
     "vitest": "^3.0.7"
   },
   "dependencies": {
-    "@flexiformal/ftml": "0.0.3",
+    "@flexiformal/ftml": "0.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/dist/index.d.ts

@@ -1,55 +0,0 @@
-import * as Base from '@flexiformal/ftml';
-export { Base as FTML };
-import { ReactNode } from 'react';
-
-declare const initialize: typeof Base.initialize;
-declare function getCurrentUri(): Base.FTML.NarrativeUri | undefined;
-interface FtmlConfig {
-    allowHovers?: boolean;
-    allowFullscreen?: boolean;
-    allowFormalInfo?: boolean;
-    allowNotationChanges?: boolean;
-    chooseHighlightStyle?: boolean;
-    showContent?: boolean;
-    pdfLink?: boolean;
-    highlightStyle?: Base.FTML.HighlightStyle;
-    toc?: Base.FTML.TocSource;
-    autoexpandLimit?: Base.FTML.LogicalLevel;
-    tocProgress?: Base.FTML.TocProgress[];
-    sectionWrap?: (uri: Base.FTML.DocumentElementUri, lvl: Base.FTML.SectionLevel) => ((ch: ReactNode) => ReactNode) | undefined;
-    paragraphWrap?: (uri: Base.FTML.DocumentElementUri, kind: Base.FTML.ParagraphKind) => ((ch: ReactNode) => ReactNode) | undefined;
-    slideWrap?: (uri: Base.FTML.DocumentElementUri) => ((ch: ReactNode) => ReactNode) | undefined;
-    problemWrap?: (uri: Base.FTML.DocumentElementUri, subProblem: boolean) => ((ch: ReactNode) => ReactNode) | undefined;
-    onSectionTitle?: (uri: Base.FTML.DocumentElementUri, lvl: Base.FTML.SectionLevel) => ReactNode | undefined;
-    problemStates?: Base.FTML.ProblemStates;
-    onProblemResponse?: (r: Base.FTML.ProblemResponse) => void;
-}
-interface FTMLSetupArgs extends FtmlConfig {
-    children: ReactNode;
-}
-/**
- * Sets up Leptos' reactive system
- */
-declare const FTMLSetup: React.FC<FTMLSetupArgs>;
-/**
- * See {@link FTMLConfig} and {@link FTML.DocumentOptions}
- */
-interface FTMLDocumentArgs extends FtmlConfig {
-    document: Base.FTML.DocumentOptions;
-}
-/**
- * render an FTML document
- */
-declare const FTMLDocument: React.FC<FTMLDocumentArgs>;
-/**
- * See {@link FTMLConfig} and {@link Base.FTML.FragmentOptions}
- */
-interface FTMLFragmentArgs extends FtmlConfig {
-    fragment: Base.FTML.FragmentOptions;
-}
-/**
- * render an FTML fragment
- */
-declare const FTMLFragment: React.FC<FTMLFragmentArgs>;
-
-export { FTMLDocument, type FTMLDocumentArgs, FTMLFragment, type FTMLFragmentArgs, FTMLSetup, type FTMLSetupArgs, type FtmlConfig, getCurrentUri, initialize };

package/dist/index.js

@@ -1,301 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  FTML: () => FTML2,
-  FTMLDocument: () => FTMLDocument,
-  FTMLFragment: () => FTMLFragment,
-  FTMLSetup: () => FTMLSetup,
-  getCurrentUri: () => getCurrentUri,
-  initialize: () => initialize2
-});
-module.exports = __toCommonJS(index_exports);
-var Base = __toESM(require("@flexiformal/ftml"));
-var FTML2 = __toESM(require("@flexiformal/ftml"));
-var import_react2 = require("react");
-
-// src/leptos.tsx
-var import_react = require("react");
-var import_react_dom = require("react-dom");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ReactLeptosContext = (0, import_react.createContext)(
-  void 0
-);
-function toConfig(config, addTunnel) {
-  let cfg = {
-    allowHovers: config.allowHovers,
-    allowFullscreen: config.allowFullscreen,
-    allowFormalInfo: config.allowFormalInfo,
-    allowNotationChanges: config.allowNotationChanges,
-    chooseHighlightStyle: config.chooseHighlightStyle,
-    showContent: config.showContent,
-    pdfLink: config.pdfLink,
-    toc: config.toc,
-    tocProgress: config.tocProgress,
-    autoexpandLimit: config.autoexpandLimit,
-    onProblemResponse: config.onProblemResponse,
-    problemStates: config.problemStates
-  };
-  const ost = config.onSectionTitle;
-  if (ost) {
-    cfg.onSectionTitle = (u, lvl) => {
-      return (e, ctx) => {
-        addTunnel(e, ost(u, lvl), ctx);
-      };
-    };
-  }
-  const sect = config.sectionWrap;
-  if (sect) {
-    cfg.sectionWrap = (u, lvl) => {
-      return (e, ctx) => {
-        const r = sect(u, lvl);
-        if (r) {
-          addTunnel(e, r(elemToReact(e, ctx)), ctx);
-        }
-      };
-    };
-  }
-  const para = config.paragraphWrap;
-  if (para) {
-    cfg.paragraphWrap = (u, knd) => {
-      return (e, ctx) => {
-        const r = para(u, knd);
-        if (r) {
-          addTunnel(e, r(elemToReact(e, ctx)), ctx);
-        }
-      };
-    };
-  }
-  const slide = config.slideWrap;
-  if (slide) {
-    cfg.slideWrap = (u) => {
-      return (e, ctx) => {
-        const r = slide(u);
-        if (r) {
-          addTunnel(e, r(elemToReact(e, ctx)), ctx);
-        }
-      };
-    };
-  }
-  const problem = config.problemWrap;
-  if (problem) {
-    cfg.problemWrap = (u, sub) => {
-      return (e, ctx) => {
-        const r = problem(u, sub);
-        if (r) {
-          addTunnel(e, r(elemToReact(e, ctx)), ctx);
-        }
-      };
-    };
-  }
-  return cfg;
-}
-function elemToReact(elem, ctx) {
-  const chs = Array.from(elem.childNodes);
-  chs.forEach((c) => elem.removeChild(c));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ElemToReact, { elems: chs, ctx });
-}
-var ElemToReact = ({ elems, ctx }) => {
-  const ref = (0, import_react.useRef)(null);
-  const done = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
-    if (ref.current && !done.current) {
-      done.current = true;
-      ref.current.replaceChildren(...elems);
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactLeptosContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: { display: "contents" } }) });
-};
-function useLeptosTunnel() {
-  const [tunnel, setTunnel] = (0, import_react.useState)(void 0);
-  const addTunnel = (element, node, context) => {
-    const id = Math.random().toString(36).slice(2);
-    setTunnel({ element, node, id, context });
-    return id;
-  };
-  const removeTunnel = () => {
-    setTunnel(void 0);
-  };
-  const TunnelRenderer = () => tunnel ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactLeptosContext.Provider, { value: tunnel.context, children: tunnel.node }),
-    tunnel.element,
-    tunnel.id
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-  (0, import_react.useEffect)(() => {
-    return () => {
-      if (tunnel) {
-      }
-    };
-  });
-  return {
-    addTunnel,
-    removeTunnel,
-    TunnelRenderer
-  };
-}
-function useLeptosTunnels() {
-  const [tunnels, setTunnels] = (0, import_react.useState)([]);
-  const addTunnel = (element, node, context) => {
-    const id = Math.random().toString(36).slice(2);
-    setTunnels((prev) => [...prev, { element, node, id, context }]);
-    return id;
-  };
-  const removeTunnel = (id) => {
-    setTunnels(
-      (prev) => prev.filter((tunnel) => {
-        if (tunnel.id === id) {
-        }
-        return tunnel.id !== id;
-      })
-    );
-  };
-  const TunnelRenderer = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tunnels.map(
-    (tunnel) => (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactLeptosContext.Provider, { value: tunnel.context, children: tunnel.node }),
-      tunnel.element,
-      tunnel.id
-    )
-  ) });
-  (0, import_react.useEffect)(() => {
-    return () => {
-      tunnels.forEach((tunnel) => {
-      });
-    };
-  });
-  return {
-    addTunnel,
-    removeTunnel,
-    TunnelRenderer
-  };
-}
-
-// src/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var initialize2 = Base.initialize;
-function getCurrentUri() {
-  const context = (0, import_react2.useContext)(ReactLeptosContext);
-  if (context) {
-    return Base.FTML.get_current_uri(context);
-  }
-}
-var FTMLSetup = (args) => {
-  const mountRef = (0, import_react2.useRef)(null);
-  const main = useLeptosTunnel();
-  const { addTunnel, TunnelRenderer } = useLeptosTunnels();
-  const context = (0, import_react2.useContext)(ReactLeptosContext);
-  (0, import_react2.useEffect)(() => {
-    if (!mountRef.current) return;
-    if (context) {
-      const handle = Base.FTML.apply_config(
-        toConfig(args, addTunnel),
-        mountRef.current,
-        context
-      );
-      return () => {
-        handle.unmount();
-      };
-    } else {
-      const handle = Base.ftmlSetup(
-        mountRef.current,
-        (e, o) => {
-          main.addTunnel(
-            e,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-              args.children,
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TunnelRenderer, {})
-            ] }),
-            o
-          );
-        },
-        toConfig(args, addTunnel)
-      );
-      return () => {
-        handle.unmount();
-      };
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: mountRef, style: { display: "contents" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(main.TunnelRenderer, {})
-  ] });
-};
-var FTMLDocument = (args) => {
-  const mountRef = (0, import_react2.useRef)(null);
-  const { addTunnel, TunnelRenderer } = useLeptosTunnels();
-  const context = (0, import_react2.useContext)(ReactLeptosContext);
-  (0, import_react2.useEffect)(() => {
-    if (mountRef.current === null) return;
-    const handle = Base.ftmlDocument(
-      mountRef.current,
-      args.document,
-      context,
-      toConfig(args, addTunnel)
-    );
-    return () => {
-      handle.unmount();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: mountRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TunnelRenderer, {})
-  ] });
-};
-var FTMLFragment = (args) => {
-  const mountRef = (0, import_react2.useRef)(null);
-  const { addTunnel, TunnelRenderer } = useLeptosTunnels();
-  const context = (0, import_react2.useContext)(ReactLeptosContext);
-  (0, import_react2.useEffect)(() => {
-    if (!mountRef.current) return;
-    const handle = Base.ftmlFragment(
-      mountRef.current,
-      args.fragment,
-      context,
-      toConfig(args, addTunnel)
-    );
-    return () => {
-      handle.unmount();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: mountRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TunnelRenderer, {})
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FTML,
-  FTMLDocument,
-  FTMLFragment,
-  FTMLSetup,
-  getCurrentUri,
-  initialize
-});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx","../src/leptos.tsx"],"sourcesContent":["import * as Base from \"@flexiformal/ftml\";\nexport * as FTML from \"@flexiformal/ftml\";\nimport { ReactNode, useContext, useEffect, useRef } from \"react\";\nimport {\n    useLeptosTunnel,\n    useLeptosTunnels,\n    ReactLeptosContext,\n    toConfig,\n} from \"./leptos\";\n\nexport const initialize = Base.initialize;\n\nexport function getCurrentUri(): Base.FTML.NarrativeUri | undefined {\n    const context = useContext(ReactLeptosContext);\n    if (context) {\n        return Base.FTML.get_current_uri(context);\n    }\n}\n\nexport interface FtmlConfig {\n    allowHovers?: boolean;\n    allowFullscreen?: boolean;\n    allowFormalInfo?: boolean;\n    allowNotationChanges?: boolean;\n    chooseHighlightStyle?: boolean;\n    showContent?: boolean;\n    pdfLink?: boolean;\n    highlightStyle?: Base.FTML.HighlightStyle;\n    toc?: Base.FTML.TocSource;\n    autoexpandLimit?: Base.FTML.LogicalLevel;\n    tocProgress?: Base.FTML.TocProgress[];\n    sectionWrap?: (\n        uri: Base.FTML.DocumentElementUri,\n        lvl: Base.FTML.SectionLevel,\n    ) => ((ch: ReactNode) => ReactNode) | undefined;\n    paragraphWrap?: (\n        uri: Base.FTML.DocumentElementUri,\n        kind: Base.FTML.ParagraphKind,\n    ) => ((ch: ReactNode) => ReactNode) | undefined;\n    slideWrap?: (\n        uri: Base.FTML.DocumentElementUri,\n    ) => ((ch: ReactNode) => ReactNode) | undefined;\n    problemWrap?: (\n        uri: Base.FTML.DocumentElementUri,\n        subProblem: boolean,\n    ) => ((ch: ReactNode) => ReactNode) | undefined;\n    onSectionTitle?: (\n        uri: Base.FTML.DocumentElementUri,\n        lvl: Base.FTML.SectionLevel,\n    ) => ReactNode | undefined;\n    problemStates?: Base.FTML.ProblemStates;\n    onProblemResponse?: (r: Base.FTML.ProblemResponse) => void;\n}\n\nexport interface FTMLSetupArgs extends FtmlConfig {\n    children: ReactNode;\n}\n\n/**\n * Sets up Leptos' reactive system\n */\nexport const FTMLSetup: React.FC<FTMLSetupArgs> = (args) => {\n    const mountRef = useRef<HTMLDivElement>(null);\n    const main = useLeptosTunnel();\n    const { addTunnel, TunnelRenderer } = useLeptosTunnels();\n    const context = useContext(ReactLeptosContext);\n\n    useEffect(() => {\n        if (!mountRef.current) return;\n        if (context) {\n            const handle = Base.FTML.apply_config(\n                toConfig(args, addTunnel),\n                mountRef.current,\n                context,\n            );\n            return () => {\n                handle.unmount();\n            };\n        } else {\n            const handle = Base.ftmlSetup(\n                mountRef.current,\n                (e, o) => {\n                    main.addTunnel(\n                        e,\n                        <>\n                            {args.children}\n                            <TunnelRenderer />\n                        </>,\n                        o,\n                    );\n                },\n                toConfig(args, addTunnel),\n            );\n            return () => {\n                handle.unmount();\n            };\n        }\n    }, []);\n\n    return (\n        <>\n            <div ref={mountRef} style={{ display: \"contents\" }} />\n            <main.TunnelRenderer />\n        </>\n    );\n};\n\n/**\n * See {@link FTMLConfig} and {@link FTML.DocumentOptions}\n */\nexport interface FTMLDocumentArgs extends FtmlConfig {\n    document: Base.FTML.DocumentOptions;\n}\n\n/**\n * render an FTML document\n */\nexport const FTMLDocument: React.FC<FTMLDocumentArgs> = (args) => {\n    const mountRef = useRef<HTMLDivElement>(null);\n    const { addTunnel, TunnelRenderer } = useLeptosTunnels();\n    const context = useContext(ReactLeptosContext);\n\n    useEffect(() => {\n        if (mountRef.current === null) return;\n        const handle = Base.ftmlDocument(\n            mountRef.current,\n            args.document,\n            context,\n            toConfig(args, addTunnel),\n        );\n        return () => {\n            handle.unmount();\n        };\n    }, []);\n    return (\n        <div style={{ textAlign: \"start\" }}>\n            <div ref={mountRef} />\n            <TunnelRenderer />\n        </div>\n    );\n};\n\n/**\n * See {@link FTMLConfig} and {@link Base.FTML.FragmentOptions}\n */\nexport interface FTMLFragmentArgs extends FtmlConfig {\n    fragment: Base.FTML.FragmentOptions;\n}\n\n/**\n * render an FTML fragment\n */\nexport const FTMLFragment: React.FC<FTMLFragmentArgs> = (args) => {\n    const mountRef = useRef<HTMLDivElement>(null);\n    const { addTunnel, TunnelRenderer } = useLeptosTunnels();\n    const context = useContext(ReactLeptosContext);\n\n    useEffect(() => {\n        if (!mountRef.current) return;\n        const handle = Base.ftmlFragment(\n            mountRef.current,\n            args.fragment,\n            context,\n            toConfig(args, addTunnel),\n        );\n        return () => {\n            handle.unmount();\n        };\n    }, []);\n    return (\n        <div style={{ textAlign: \"start\" }}>\n            <div ref={mountRef} />\n            <TunnelRenderer />\n        </div>\n    );\n};\n","import { createContext, ReactNode, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FTML } from \"@flexiformal/ftml\";\nimport { FtmlConfig } from \".\";\n\ntype LeptosContext = FTML.LeptosContext;\n\nexport const ReactLeptosContext = createContext<LeptosContext | undefined>(\n    undefined,\n);\ninterface Tunnel {\n    element: Element;\n    node: ReactNode;\n    context: LeptosContext;\n    id: string; // for React keys\n}\n\nexport function toConfig(\n    config: FtmlConfig,\n    addTunnel: (\n        element: Element,\n        node: ReactNode,\n        context: FTML.LeptosContext,\n    ) => string,\n): FTML.FtmlConfig {\n    let cfg: FTML.FtmlConfig = {\n        allowHovers: config.allowHovers,\n        allowFullscreen: config.allowFullscreen,\n        allowFormalInfo: config.allowFormalInfo,\n        allowNotationChanges: config.allowNotationChanges,\n        chooseHighlightStyle: config.chooseHighlightStyle,\n        showContent: config.showContent,\n        pdfLink: config.pdfLink,\n        toc: config.toc,\n        tocProgress: config.tocProgress,\n        autoexpandLimit: config.autoexpandLimit,\n        onProblemResponse: config.onProblemResponse,\n        problemStates: config.problemStates,\n    };\n    const ost = config.onSectionTitle;\n    if (ost) {\n        cfg.onSectionTitle = (u, lvl) => {\n            return (e, ctx) => {\n                addTunnel(e, ost(u, lvl), ctx);\n            };\n        };\n    }\n    const sect = config.sectionWrap;\n    if (sect) {\n        cfg.sectionWrap = (u, lvl) => {\n            return (e, ctx) => {\n                const r = sect(u, lvl);\n                if (r) {\n                    addTunnel(e, r(elemToReact(e, ctx)), ctx);\n                }\n            };\n        };\n    }\n    const para = config.paragraphWrap;\n    if (para) {\n        cfg.paragraphWrap = (u, knd) => {\n            return (e, ctx) => {\n                const r = para(u, knd);\n                if (r) {\n                    addTunnel(e, r(elemToReact(e, ctx)), ctx);\n                }\n            };\n        };\n    }\n    const slide = config.slideWrap;\n    if (slide) {\n        cfg.slideWrap = (u) => {\n            return (e, ctx) => {\n                const r = slide(u);\n                if (r) {\n                    addTunnel(e, r(elemToReact(e, ctx)), ctx);\n                }\n            };\n        };\n    }\n    const problem = config.problemWrap;\n    if (problem) {\n        cfg.problemWrap = (u, sub) => {\n            return (e, ctx) => {\n                const r = problem(u, sub);\n                if (r) {\n                    addTunnel(e, r(elemToReact(e, ctx)), ctx);\n                }\n            };\n        };\n    }\n    return cfg;\n}\n\nexport function elemToReact(\n    elem: HTMLDivElement,\n    ctx: FTML.LeptosContext,\n): ReactNode {\n    const chs = Array.from(elem.childNodes);\n    chs.forEach((c) => elem.removeChild(c));\n    return <ElemToReact elems={chs} ctx={ctx} />;\n}\n\nconst ElemToReact: React.FC<{\n    elems: ChildNode[];\n    ctx: FTML.LeptosContext;\n}> = ({ elems, ctx }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const done = useRef<boolean>(false);\n    useEffect(() => {\n        if (ref.current && !done.current) {\n            done.current = true;\n            ref.current.replaceChildren(...elems);\n        }\n    }, []);\n    return (\n        <ReactLeptosContext.Provider value={ctx}>\n            <div ref={ref} style={{ display: \"contents\" }} />\n        </ReactLeptosContext.Provider>\n    );\n};\n\nexport function useLeptosTunnel() {\n    const [tunnel, setTunnel] = useState<Tunnel | undefined>(undefined);\n\n    const addTunnel = (\n        element: Element,\n        node: ReactNode,\n        context: LeptosContext,\n    ) => {\n        const id = Math.random().toString(36).slice(2);\n        setTunnel({ element, node, id, context });\n        return id; // Return id for later removal\n    };\n\n    const removeTunnel = () => {\n        setTunnel(undefined);\n    };\n\n    const TunnelRenderer = () =>\n        tunnel ? (\n            createPortal(\n                <ReactLeptosContext.Provider value={tunnel.context}>\n                    {tunnel.node}\n                </ReactLeptosContext.Provider>,\n                tunnel.element,\n                tunnel.id,\n            )\n        ) : (\n            <></>\n        );\n\n    useEffect(() => {\n        return () => {\n            if (tunnel) {\n                //try{tunnel.context.cleanup();} catch (e){console.log(\"Error cleaning up leptos context:\",e)}\n            }\n        };\n    });\n\n    return {\n        addTunnel,\n        removeTunnel,\n        TunnelRenderer,\n    };\n}\n\nexport function useLeptosTunnels() {\n    const [tunnels, setTunnels] = useState<Tunnel[]>([]);\n\n    const addTunnel = (\n        element: Element,\n        node: ReactNode,\n        context: LeptosContext,\n    ) => {\n        const id = Math.random().toString(36).slice(2);\n        setTunnels((prev) => [...prev, { element, node, id, context }]);\n        return id; // Return id for later removal\n    };\n\n    const removeTunnel = (id: string) => {\n        setTunnels((prev) =>\n            prev.filter((tunnel) => {\n                if (tunnel.id === id) {\n                    //try{tunnel.context.cleanup();} catch (e){console.log(\"Error cleaning up leptos context:\",e)}\n                }\n                return tunnel.id !== id;\n            }),\n        );\n    };\n\n    const TunnelRenderer = () => (\n        <>\n            {tunnels.map((tunnel) =>\n                createPortal(\n                    <ReactLeptosContext.Provider value={tunnel.context}>\n                        {tunnel.node}\n                    </ReactLeptosContext.Provider>,\n                    tunnel.element,\n                    tunnel.id,\n                ),\n            )}\n        </>\n    );\n\n    useEffect(() => {\n        return () => {\n            tunnels.forEach((tunnel) => {\n                //try{tunnel.context.cleanup();} catch (e){console.log(\"Error cleaning up leptos context:\",e)}\n            });\n        };\n    });\n\n    return {\n        addTunnel,\n        removeTunnel,\n        TunnelRenderer,\n    };\n}\n"],"mappings":"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","names":["FTML","initialize","import_react","import_jsx_runtime","initialize"]}