import { Engine } from "@snap-engine/core";

const host = document.querySelector<HTMLElement>("#demo");
const engine = new Engine();

if (host) engine.element = host;

<script lang="ts">
  import { Engine } from "@snap-engine/core";

  const engine = new Engine();
</script>

<div bind:this={engine.element}></div>

import { useEffect, useRef } from "react";
import { Engine } from "@snap-engine/core";

export function EngineSurface() {
  const host = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const engine = new Engine();
    if (host.current) engine.element = host.current;
    return () => engine.destroy();
  }, []);

  return <div ref={host} />;
}