Add FPS to utils?

[NullVoxPopuli]

demo

export default class FrameIncrementer extends Component {
  @use fps = FPS.of(() => /* something that changes quickly */);

  <template>
    Frames: {{this.frameCount}}<br>
    FPS: {{this.fps}}
  </template>
}

const FPS = {
  of: resourceFactory((ofWhat) => {
    let updateInterval = 500; // ms
    let multiplier = 1000 / updateInterval;
    let framesSinceUpdate = 0;

    return resource(({ on }) => {
      let value = cell(0);
      let interval = setInterval(() => {
        value.current = framesSinceUpdate * multiplier;
        framesSinceUpdate = 0;
      }, updateInterval);

      on.cleanup(() => clearInterval(interval));

      return () => {
        ofWhat();
        framesSinceUpdate++;

        return value.current;
      }
    });
  })
}

demo of page FPS

const FPS = {
  ofPage: resource(({ on }) => {
    let updateInterval = 500; // ms
    let multiplier = 1000 / updateInterval;
    let framesSinceUpdate = 0;
    let frame;

    return resource(({ on }) => {
      let value = cell(0);
      let interval = setInterval(() => {
        cancelAnimationFrame(frame);
        value.current = framesSinceUpdate * multiplier;
        framesSinceUpdate = 0;
      }, updateInterval);

      on.cleanup(() => clearInterval(interval));
      on.cleanup(() => cancelAnimationFrame(frame))

      return () => {
        frame = requestAnimationFrame(() => {
          framesSinceUpdate++;
          value.current = value.current;
        });

        return value.current;
      }
    });
  }),
}

Why not "just do it"?

Unanswered questions:

• can this type of resource be used in a template-only component?
• is it worth disambiguating property update frequency from actual FPS?