Recipe

Svelte integration

Mount capsules in onMount, update options reactively, and destroy them when components unmount.

Host component

DropdownHost.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { UI } from "tiny-engine-core";

  let host: HTMLElement;
  let instance: any;
  let open = false;

  onMount(() => {
    instance = UI.getOrCreate(host, "dropdown", { open });
    return () => instance?.destroy();
  });

  $: instance?.syncOptions({ open });
</script>

<div bind:this={host}>
  <button ref="trigger" on:click={() => (open = !open)}>
    Toggle
  </button>
  <div ref="menu" hidden>Svelte + tiny-engine capsule</div>
</div>

Bootstrap

main.ts

import App from "./App.svelte";
import { UI } from "tiny-engine-core";
import Dropdown from "./dropdown";

UI.register("dropdown", Dropdown);

const app = new App({
  target: document.getElementById("app")!,
});

export default app;