popups - is this way of implementing them ok ?

[xobjects]

I have an app where there will be multiple draggable/resizable popups.

I could have an anchor in the App component and then use < For />

however, I'm curious what you all think of this approach.

solidjs playground

This seems to work fine for me.

However, in preparing this demo for the discussion I had to make a change in the code that is quite puzzling.

in the SolidJS playground you will notice

	createRoot(dispose => {

		let v_element;

		const callback = () => {
			dispose();
			v_element.remove();
		}

		v_element = <Popup callback={callback} /> as Element;
		document.body.appendChild(v_element);
	});

however, in my code, it looks like this

	createRoot(dispose => {

		let v_element;

		const callback = () => {
			dispose();
			v_element.remove();
		}

		let v_jsx = <Popup callback={callback} /> as () => Element;
		v_element = v_jsx();
		document.body.appendChild(v_element);
	});

both are using solidjs 1.3.13

can some explain why, on my end, the jsx returns a function but in the playground it does not.

Other than that, what do you all think of creating popups this way? The cleanup code gets called once dispose is called which is nice. Though I still need to manually remove the element which is fine.

[atk]

You're usually supposed to use to build popups instead of re-implementing it yourself partially. That has some added benefits, i.e. that events will work, you don't need a separate reactive root and a few otther nice features.

[xobjects]

Thank you for replying.
I’m not sure what you mean by build popups. And as for events I can’t think of which events I would not be able to use with this method. Again thanks for replying

[atk]

Have a look at https://github.com/atk/solid-blocks/blob/main/src/blocks/modal.tsx#L131 to see how e.g. a modal is usually implemented in Solid.

[otonashixav]

The difference in what it returns is probably because you have HMR locally, but not in the playground. HMR in solid works by wrapping components in an additional function in order to reload them when the components change. You should use the children helper in this case to resolve the element to a memo that returns the dom element e.g.

const v_jsx = children(() => <Popup callback={callback} />) as () => Element
// ...

[mosheduminer]

I think this is the answer. A component can return an accessor (usually, a memo) of the result, rather than the result itself, and there can theoretically be many accessors inside each other. If you need uniform access to the result of a component, the children helper guarantees it will alway return an accessor of depth zero.

[xobjects]

Thanks for the responses. Time to learn about solids/hmr.

as for my original question, I think I’ll stick with my approach. What I want to do is have the function that calls the createroot return a promise that will be resolved when the pop up is “finished” and returns a value. Like from a form or color picker or whatever. Keeping things simple is important

[Plonq]

I agree with xobjects here. Some dialogs/modals suit this pattern much better, for example a confirmation dialog, where you want to call it at any time inside event handlers and such, and you don't need to inject complex content into it. For this case, it's far easier to be able to do something like this:

function someEventHandler() {
  confirmDialog("Are you sure?", () => {
    // Do something if the user confirmed
  });
}

And that's what the pattern in the OP using createRoot makes possible. Here's a full example for a confirm dialog in case it's useful for anyone else:

import { children, createRoot, onMount } from "solid-js";

export function confirmDialog(message: string, onConfirm: () => void) {
  createRoot((dispose) => {
    let element: Element;
    const callback = (confirmed: boolean) => {
      dispose?.();
      element?.remove();
      if (confirmed) {
        onConfirm();
      }
    };
    element = children(() => (
      <ConfirmDialog message={message} callback={callback} />
    ))() as Element;
    document.body.appendChild(element);
  });
}

function ConfirmDialog(props: {
  message: string;
  callback: (result: boolean) => void;
}) {
  let dialogEl!: HTMLDialogElement;

  onMount(() => {
    dialogEl.showModal();
    dialogEl.addEventListener("close", () => {
      props.callback(dialogEl.returnValue === "confirm");
    });
  });

  return (
    <dialog
      ref={dialogEl}
      // Optional: close the dialog when you click the backdrop
      onClick={(event) => event.target === dialogEl && dialogEl.close()}
    >
      <form method="dialog">
        <div>{props.message}</div>
        <div>
          <button>Cancel</button>
          <button value="confirm" autofocus>
            Confirm
          </button>
        </div>
      </form>
    </dialog>
  );
}