fix rendering

app/web/src/render/live/elements/l-render.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode, useEffect, useState } from "react";
-import { useGlobal } from "web-utils";
+import { useGlobal, useLocal } from "web-utils";
 import { produceCSS } from "../../../utils/css/gen";
 import { IContent } from "../../../utils/types/general";
 import { FNAdv, FNCompDef, FNLinkTag } from "../../../utils/types/meta-fn";
@@ -27,12 +27,10 @@ export const LRender: FC<{
           mode: p.mode,
         });
 
-        const className = meta.className;
-        return <div id={meta.item.name} className={className} />;
+        return <PrasiPortal name={meta.item.name} />;
       } else {
-        const el = document.getElementById(meta.item.name);
-        if (!el) return null;
-        return createPortal(
+        if (!p.portal[meta.item.name]) return null;
+        p.portal[meta.item.name].el = (
           <LRenderInternal
             p={p}
             id={id}
@@ -40,9 +38,9 @@ export const LRender: FC<{
             fromProp={fromProp}
             meta={meta}
             _scopeIndex={_scopeIndex}
-          />,
-          el
+          />
         );
+        return null;
       }
     }
   }
@@ -234,3 +232,16 @@ export const renderHTML = (className: string, adv: FNAdv) => {
   }
   return null;
 };
+
+const PrasiPortal = ({ name }: { name: string }) => {
+  const p = useGlobal(LiveGlobal, "LIVE");
+  const local = useLocal({});
+
+  if (!p.portal[name]) {
+    p.portal[name] = { render: local.render, el: null };
+  } else {
+    p.portal[name].render = local.render;
+  }
+
+  return p.portal[name].el;
+};

app/web/src/render/live/logic/global.ts

@@ -1,7 +1,7 @@
-import { FC } from "react";
 import { createRouter } from "radix3";
+import { FC, ReactNode } from "react";
 import { CompDoc } from "../../../base/global/content-editor";
-import { IContent, MContent, MPage } from "../../../utils/types/general";
+import { IContent, MPage } from "../../../utils/types/general";
 import { IItem, MItem } from "../../../utils/types/item";
 import { PRASI_COMPONENT } from "../../../utils/types/render";
 import { IRoot } from "../../../utils/types/root";
@@ -106,6 +106,7 @@ export const LiveGlobal = {
   }>(),
   treePending: null as null | Promise<void>,
   treeMeta: {} as Record<string, ItemMeta>,
+  portal: {} as Record<string, { el?: ReactNode; render: () => void }>,
   comps: {
     pending: {} as Record<string, Promise<PRASI_COMPONENT>>,
     resolve: {} as Record<string, (comp: PRASI_COMPONENT) => void>,

app/web/src/render/live/logic/route.ts

@@ -35,6 +35,7 @@ export const routeLive = (p: PG, pathname: string) => {
       if (page_id !== p.page?.id) {
         p.page = p.pages[page_id];
         p.treeMeta = {};
+        p.portal = {};
       }
       if (!p.page || !p.page.content_tree) {
         promises.push(loadNpmPage(p, page_id));