Merge pull request #143 from universal-ember/interval

New utilities: `Interval`, `Seconds`, `Duration`, imprtable from `reactiveweb/interval`

Author: NullVoxPopuli

reactiveweb/src/interval.ts

@@ -0,0 +1,67 @@
+import { cell, resource, resourceFactory } from 'ember-resources';
+
+export interface Options<State, Value> {
+  create: () => State;
+  update: (state: State) => void;
+  read: (state: State) => Value;
+}
+
+/**
+ * Utility for live-updating data based on some interval.
+ * Can be used for keeping track of durations, time-elapsed, etc.
+ *
+ * Defaults to updating every 1 second.
+ * Options requires specifying how to create, update, and read the state.
+ */
+export function Interval<State, Value>(ms = 1000, options: Options<State, Value>) {
+  return resource(({ on }) => {
+    const value = options.create();
+    const interval = setInterval(() => {
+      options.update(value);
+    }, ms);
+
+    on.cleanup(() => {
+      clearInterval(interval);
+    });
+
+    return () => options.read(value);
+  });
+}
+
+const counterOptions: Options<ReturnType<typeof cell<number>>, number> = {
+  create: () => cell(0),
+  update: (x) => void x.current++,
+  read: (x) => x.current,
+};
+
+/**
+ * Returns a live-updating count of seconds passed since initial rendered.
+ * Always returns an integer.
+ * Updates every 1 second.
+ */
+export function Seconds() {
+  return Interval(1000, counterOptions);
+}
+
+const durationOptions: Options<{ start: number; last: ReturnType<typeof cell<number>> }, number> = {
+  create: () => ({ start: Date.now(), last: cell(Date.now()) }),
+  update: (x) => void (x.last.current = Date.now()),
+  read: (x) => x.last.current - x.start,
+};
+
+/**
+ * Returns a live-updating duration since initial render.
+ * Measured in milliseconds.
+ *
+ * By default updates every 1 second.
+ *
+ * Useful combined with
+ * [Temporal.Duration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Duration)
+ */
+export function Duration(ms = 1000) {
+  return Interval(ms, durationOptions);
+}
+
+resourceFactory(Interval);
+resourceFactory(Seconds);
+resourceFactory(Duration);

tests/test-app/tests/utils/interval-test.gts

@@ -0,0 +1,132 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { find, render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+import { cell, use } from 'ember-resources';
+import { Duration, Interval, Seconds } from 'reactiveweb/interval';
+
+function timeout(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+module('Interval | js', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    class Test extends Component {
+      @tracked foo = 1;
+      @use value = Interval(50, {
+        create: () => this.foo,
+        update: (x) => (this.foo = x * 3),
+        read: (x) => x,
+      });
+
+      <template>{{this.value}}</template>
+    }
+
+    await render(Test);
+    assert.dom().hasText('1');
+
+    await timeout(75);
+    assert.dom().hasText('3');
+
+    await timeout(50);
+    assert.dom().hasText('9');
+  });
+});
+
+module('Interval | rendering', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    const config = {
+      create: () => cell('hello'),
+      update: (x: ReturnType<typeof cell<string>>) => (x.current += '!'),
+      read: (x: ReturnType<typeof cell<string>>) => x.current,
+    };
+
+    await render(<template>{{Interval 50 config}}</template>);
+
+    assert.dom().hasText('hello');
+    await timeout(75);
+
+    assert.dom().hasText('hello!');
+
+    await timeout(50);
+    assert.dom().hasText('hello!!');
+  });
+});
+
+module('Seconds | js', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    class Test extends Component {
+      @use value = Seconds();
+
+      <template>{{this.value}}</template>
+    }
+
+    await render(Test);
+    assert.dom().hasText('0');
+
+    await timeout(1050);
+    assert.dom().hasText('1');
+  });
+});
+
+module('Seconds | rendering', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    await render(<template>{{Seconds}}</template>);
+
+    assert.dom().hasText('0');
+
+    await timeout(1050);
+    assert.dom().hasText('1');
+  });
+});
+
+module('Duration | js', function (hooks) {
+  setupRenderingTest(hooks);
+
+  const text = () => find('out')?.textContent;
+
+  test('it works', async function (assert) {
+    class Test extends Component {
+      @use value = Duration(10);
+
+      <template>
+        <out>{{this.value}}</out>
+      </template>
+    }
+
+    await render(Test);
+    assert.strictEqual(text(), '0', `expecting ${text()} to be 0`);
+
+    await timeout(150);
+    assert.notStrictEqual(text(), '0', `expecting ${text()} not to be 0`);
+  });
+});
+
+module('Duration | rendering', function (hooks) {
+  setupRenderingTest(hooks);
+
+  const text = () => find('out')?.textContent;
+
+  test('it works', async function (assert) {
+    await render(
+      <template>
+        <out>{{Duration 10}}</out>
+      </template>
+    );
+
+    assert.strictEqual(text(), '0', `expecting ${text()} to be 0`);
+
+    await timeout(150);
+    assert.notStrictEqual(text(), '0', `expecting ${text()} not to be 0`);
+  });
+});