solidjs p5 example

import { Component, createSignal, onCleanup, onMount } from 'solid-js';
import p5 from 'p5';

export interface Sketch {
  (instance: p5): void;
}

const createCanvas = (sketch: Sketch, container: HTMLDivElement): p5 => {
  return new p5(sketch, container);
};

const SolidP5Wrapper: Component<{
  sketch: Sketch;
}> = (props) => {
  let refelement: HTMLDivElement | undefined;
  let canvas: p5 | undefined;

  const [p5instance, setp5Instance] = createSignal < p5 > ();

  onMount(() => {
    console.log('onmount');
    if (!refelement) return;
    p5instance()?.remove();
    canvas = createCanvas(props.sketch, refelement);
    setp5Instance(canvas);
  });

  onCleanup(() => {
    p5instance()?.remove();
  });

  return <div ref={refelement}> Inner Element </div>;
};

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(400, 400);
    p.frameRate(1);
  };

  p.draw = () => {
    console.log('draw');
    p.background(220);
    p.circle(200, 200, 100);
  };
};

const Network = () => {
  return (
    <>
      <SolidP5Wrapper sketch={sketch} />
      <h1>Hello </h1>
    </>
  );
};

export default Network;