Laelith Wiki

As demonstrated in the laelith-adventure project, for the Editor, the goal is to enable a (Svelte) component sitting in a page to be detached into a popup window, that can be moved around independently, and notably make better use of multi-screen setups.
However, communicating with a local Svelte component and communicating with a component in a popup window do not involve the same techniques.
We introduce here the intercoms utility, that helps managing the communication with detachable components. The main design goal here is to have the same way to communicate with the component, be it local or in a detached window.

A detachable Svelte component must have a detached svelte property, to become aware of its attached/detached status. It may have callbacks such as the onClose and onDetach shown below if the container in which it is embedded (in non-detached mode) needs to be made aware of its status change to adapt the layout.

  export let detached:boolean;
  
  // onClose and onDetach only active for the non-detached "anchor" instance.
  export let onClose: () => void = () => {};
  export let onDetach: (detached: boolean) => void = (_detached) => {};

A container page for the detached version will pass detached=true, the embedded version will receive detached=false.