How to make a popup without using "hacks"

[AFatNiBBa]

I have made a function to open a solid component into a popup window

import { render, delegateEvents } from "solid-js/web";
import type { JSX } from "solid-js";

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  render(code, win.document.body);
  return win;
}

export default function Index() {
  return <>
    <button
      innerText={"Open"}
      onClick={() => popup(() => <>
        <input
          type="text"
          onInput={console.log}
        />
      </>)}
    />
  </>
}

render(Index, document.getElementById("app")!);

The problem is that when I open the new window the <input /> field does not print anything to the console.
By exploring the solid source code I've come across several ways to fix this, but every solution I found so far does not seem ottimal.
The first is using the "on:" prefix on the event

<input
  type="text"
  // ↓
  on:input={console.log}
/>

But it gives a compile-time error because "on:input" seems to not be recognized.
The second is to change popup() like so

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  delegateEvents([ "input" ], win.document); // ← Delegate the "input" event as it as been done on the main document
  render(code, win.document.body);
  return win;
}

But I would like to not have to manually put all my used events in the array passed to delegateEvents() AND basically to be able to pass anything to the function without having to worry.
I then tried using the list of all the delegable events

import { DelegatedEvents } from "solid-js/web";

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  delegateEvents([ ...DelegatedEvents ], win.document); // ← "beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"
  render(code, win.document.body);
  return win;
}

But that would have added quite a lot of unneeded events.
So I tried to use the internal set containing the list of the currently delegated events on the main document

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  delegateEvents([ ...document._$DX_DELEGATE ], win.document); // ← Global delegated events' store for the main document ("input", "click")
  render(code, win.document.body);
  return win;
}

But it gives a compile-time error on "_$DX_DELEGATE" since it is internal.
I then tried using a <Portal />

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  <Portal mount={win.document.body} children={code()} />
  return win;
}

It does not work and gives warning ("computations created outside a createRoot or render will never be disposed").
I then tried returning the <Portal /> and include it to the normal tree

export function popup(code: () => JSX.Element, width = 800, height = 600) {
  const win = window.open("", undefined, `width=${width},height=${height}`)!;
  return <Portal mount={win.document.body} children={code()} />
}

export default function Index() {
  const [ a, b ] = createSignal();
  return <>
    <button
      innerText={"Open"}
      onClick={() => b(() => popup(() => <>
        <input
          type="text"
          onInput={console.log}
        />
      </>))}
    />
    {a()}
  </>
}

Nothing changes...
What I ended up doing is simply to disable delegated events on the vite.config.ts

import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [ solidPlugin({ solid: { delegateEvents: false } }) ],
  // ...
});

But it disable them globally, not only in the child window.
So I have a few questions:

1. Is there a specific good way to do this?
2. Why are delegated events being added only to the main document in the first place?
3. (Do I need to pass the component for the popup function in a lambda?)

[deluksic]

I created a library that does this, maybe it will be useful to someone. It uses delegateEvents([...DelegatedEvents], document) method. It also renders inline using a Portal (not inside an event handler), so the content has access to Context mechanism.

https://github.com/deluksic/solid-new-window

[oddcelot]

It's been a while, but I managed to make the Document PiP API work, in a similar fashion.
If you'd like to extend your "types of windows", it might be worthwhile checking it out (though browser support is currently limited to Chrome 😄)

[deluksic]

oh cool, I was not aware. Will take a look.