@psytask/core 1.1.0 → 1.1.2

package/dist/index.d.ts

@@ -1,28 +1,5 @@
 type LooseObject = Record<string, unknown>;
 type Merge<T, U> = T extends unknown ? Omit<T, keyof U> & U : never;
-type Split<T extends string, S extends string> = T extends unknown
-  ? T extends `${infer L}${S}${infer R}`
-    ? [L, ...Split<R, S>]
-    : [T]
-  : never;
-
-declare global {
-  interface ObjectConstructor {
-    keys<T>(o: T): (keyof T & string)[];
-  }
-  interface String {
-    split<T extends string, S extends string>(
-      this: T,
-      separator: S,
-    ): Split<T, S>;
-  }
-  interface Array<T> {
-    map<R>(fn: <E extends T>(e: E, i: number, arr: this) => R): R[];
-  }
-  interface Performance {
-    getEntriesByType(type: 'resource'): PerformanceResourceTiming[];
-  }
-}
 
 declare const symbol: typeof Symbol.dispose;
 type EventMap<T extends LooseObject> = T & {
@@ -46,44 +23,65 @@ declare class EventEmitter<T extends LooseObject & {
     emit<K extends keyof EventMap<T>>(type: K, ...[evt]: EventMap<T>[K] extends undefined ? [evt?: EventMap<T>[K]] : [evt: EventMap<T>[K]]): this;
 }
 
+/** Timestamps of elapsed frames */
 type TimerRecords = number[];
 type Timer = {
-    start(onFrame?: (records: TimerRecords) => void): Promise<TimerRecords>;
+    /**
+     * If called in {@link window.requestAnimationFrame rAF} callback or microtasks
+     * generated by rAF callback, the start time (the first element of
+     * {@link TimerRecords timer records}) will be the current frame time,
+     * otherwise the next frame time.
+     *
+     * @example
+     *
+     * Do not repeat
+     *
+     * ```ts
+     * timer.start();
+     * timer.start(); // error
+     *
+     * await timer.start();
+     * timer.start(); // right
+     *
+     * timer.start();
+     * timer.stop();
+     * timer.start(); // right
+     * ```
+     */
+    start(onFrame?: (time: number) => void): Promise<TimerRecords>;
     stop(): void;
 };
 /**
- * ## Render logic
- *
- * ```text
- * rAF(scene_1.show) -> render -> vsync -> rAF[scene_1.start_time] -> ... ->
- * rAF(scene_2.show) -> ...
- * ```
- *
- * ## Closing condition
+ * Create {@link requestAnimationFrame rAF} timer
  *
- * |    symbol/expression    | description         |
- * | :---------------------: | ------------------- |
- * |            t            | current frame time  |
- * |           t_0           | start frame time    |
- * |            D            | duration            |
- * |         \delta          | next frame duration |
- * |     e = t - t_0 - D     | duration error      |
- * | \|e\| <= \|e + \delta\| | closing condition   |
+ * @example Basic usage
  *
- * Inference:
- *
- * ```text
- * For |e| <= |e + \delta|, given that \delta > 0
- * if e >= 0 then e <= e + \delta -> true
- * if e < 0 then -e <= |e + \delta|
- *     if e + \delta >= 0 then -e <= e + \delta -> e >= -\delta / 2
- *     if e + \delta < 0 then -e <= -e - \delta -> false
+ * ```ts
+ * const frame_ms = 16.67;
+ * const duration = 100;
+ * const timer = createTimer(
+ *   (time, records) => time - records[0] >= duration - frame_ms / 2,
+ * );
  * ```
  */
-declare const createTimer: (shouldStop: (records: TimerRecords) => boolean) => Timer;
+declare const createTimer: (
+/**
+ * Return true to stop timer
+ *
+ * @param time Current frame time
+ * @param records History frame times, whose elements represent the start time
+ *   of each frame that triggers VSync
+ */
+shouldStop: (time: number, records: TimerRecords) => boolean) => Timer;
 type NodeLike = string | Node;
 type BuiltinData = {
+    /**
+     * History frame times, whose elements represent the start time of each frame
+     * that triggers VSync
+     */
     frame_times: TimerRecords;
+    /** Real show duration */
+    duration: number;
 };
 type ForbiddenData = {
     [K in keyof BuiltinData]?: never;
@@ -205,33 +203,12 @@ declare class Scene<T extends MaybeGenericComponent> extends EventEmitter<SceneE
      *
      * @example
      *
-     * Integrate with `@vue/reactivity`
+     * Basic usage
      *
      * ```ts
-     * import { reactive, effect } from '@vue/reactivity';
-     *
-     * using scene = new Scene(
-     *   (props: { text: string }) => {
-     *     const node = document.createElement('div');
-     *     effect(() => {
-     *       node.textContent = props.text; // auto update when props.text changes
-     *     });
-     *     return node;
-     *   },
-     *   {
-     *     root: document.createElement('div'),
-     *     defaultProps: { text: 'default' },
-     *     adapter: createComponentAdapter(reactive),
-     *     timer: () => createTimer((records) => records.length > 100), // show 100 frames
-     *   },
-     * );
-     * document.body.appendChild(scene.root);
-     *
-     * await scene.show({ text: 'new' }); // show `new`
-     * await scene.show(); // show `default`
+     * await scene.show({ text: 'new' }); // show with new props
+     * await scene.show(); // show with default props
      * ```
-     *
-     * @function
      */
     show: T extends Component<infer P, infer D> ? SceneShow<P, D> : T;
     /**

package/dist/index.js

@@ -1,4 +1,4 @@
-/** @psytask/core v1.1.0 cubxx MIT */
+/** @psytask/core v1.1.2 cubxx MIT */
 const symbol = Symbol.dispose ?? /* @__PURE__ */ Symbol.for("Symbol.dispose");
 class EventEmitter {
   listeners = {};
@@ -54,17 +54,21 @@ new Proxy(
 );
 const array_normalize = (e) => Array.isArray(e) ? e : [e];
 
+let currentFrameTime;
+const setCurrentFrameTime = (time) => (currentFrameTime = time, setTimeout(() => currentFrameTime = 0), // reset after render pipeline
+rAF(setCurrentFrameTime));
 const createTimer = (shouldStop) => {
+  currentFrameTime ?? setCurrentFrameTime(0);
   const timer = {
     start: (cb) => new Promise((resolve) => {
-      timer.stop = () => (cancelAnimationFrame(handle), resolve(records));
       const records = [];
+      const record = (time) => (records.push(time), cb?.(time));
+      currentFrameTime && record(currentFrameTime);
       const frame = (time) => {
-        records.push(time);
-        cb?.(records);
-        shouldStop(records) ? timer.stop() : handle = rAF(frame);
+        shouldStop(time, records) ? timer.stop() : (handle = rAF(frame), record(time));
       };
       let handle = rAF(frame);
+      timer.stop = () => (cancelAnimationFrame(handle), resolve(records));
     }),
     stop() {
     }
@@ -120,33 +124,12 @@ class Scene extends EventEmitter {
    *
    * @example
    *
-   * Integrate with `@vue/reactivity`
+   * Basic usage
    *
    * ```ts
-   * import { reactive, effect } from '@vue/reactivity';
-   *
-   * using scene = new Scene(
-   *   (props: { text: string }) => {
-   *     const node = document.createElement('div');
-   *     effect(() => {
-   *       node.textContent = props.text; // auto update when props.text changes
-   *     });
-   *     return node;
-   *   },
-   *   {
-   *     root: document.createElement('div'),
-   *     defaultProps: { text: 'default' },
-   *     adapter: createComponentAdapter(reactive),
-   *     timer: () => createTimer((records) => records.length > 100), // show 100 frames
-   *   },
-   * );
-   * document.body.appendChild(scene.root);
-   *
-   * await scene.show({ text: 'new' }); // show `new`
-   * await scene.show(); // show `default`
+   * await scene.show({ text: 'new' }); // show with new props
+   * await scene.show(); // show with default props
    * ```
-   *
-   * @function
    */
   //@ts-expect-error impl generic component
   show = this.#show;
@@ -163,13 +146,12 @@ class Scene extends EventEmitter {
     this.emit("show");
     root.style.scale = "1";
     root.focus();
-    const records = await this.#timer.start(
-      (records2) => this.emit("frame", records2[records2.length - 1])
-    );
+    const records = await this.#timer.start((time) => this.emit("frame", time));
     root.style.scale = "0";
     return {
       ...this.emit("close").data?.(),
-      frame_times: records
+      frame_times: records,
+      duration: currentFrameTime - records[0]
     };
   }
 }

package/dist/index.min.js

@@ -1 +1 @@
-const m=Symbol.dispose??Symbol.for("Symbol.dispose");class l{listeners={};[m](){this.emit("dispose")}on(t,s){return(this.listeners[t]??=new Set).add(s),this}off(t,s){const e=this.listeners[t];return e&&(e.delete(s),e.size===0&&delete this.listeners[t]),this}once(t,s){const e=n=>{try{s(n)}finally{this.off(t,e)}};return this.on(t,e),this}emit(t,...[s]){const e=this.listeners[t];if(e)for(const n of[...e])n(s);return this}}const f=o=>{throw Error(o)},h=requestAnimationFrame,u=Object,y=(o,t)=>u.assign(o,t),w=document;new Proxy({},{get:(o,t)=>s=>y(w.createElement(t),s)});const b=o=>Array.isArray(o)?o:[o],g=o=>{const t={start:s=>new Promise(e=>{t.stop=()=>(cancelAnimationFrame(r),e(n));const n=[],i=c=>{n.push(c),s?.(n),o(n)?t.stop():r=h(i)};let r=h(i)}),stop(){}};return t},S=o=>o,A=o=>({wrap:t=>(s=>t(o(s))),render:(t,s,e)=>{const n=o(s);e&&a.push(e);const i=t(n);e&&a.pop();let r;const c=b(typeof i!="string"&&"node"in i?(r=i.data,i.node):i);return{props:n,nodes:c,data:r}}}),a=[],E=()=>a[a.length-1]??f("Not found current scene");class P extends l{constructor(t,s){super(),this.options=s;const{root:e,adapter:n,defaultProps:i,timer:r}=s;(this.root=e).tabIndex=-1,e.style.scale="0";const{props:c,nodes:d,data:p}=n.render(t,{...i},this.on("dispose",()=>e.remove()));this.#t=r(),this.#s=c,this.data=p,e.append(...d)}root;#t;#s;data;show=this.#e;async close(){await 0,this.#t.stop()}async#e(t){const{root:s,defaultProps:e}=this.options,n={...e,...t};for(const r of Object.keys({...this.#s,...n}))this.#s[r]=n[r];this.emit("show"),s.style.scale="1",s.focus();const i=await this.#t.start(r=>this.emit("frame",r[r.length-1]));return s.style.scale="0",{...this.emit("close").data?.(),frame_times:i}}}export{l as EventEmitter,P as Scene,A as createComponentAdapter,g as createTimer,S as generic,E as getCurrentScene};
+const f=Symbol.dispose??Symbol.for("Symbol.dispose");class m{listeners={};[f](){this.emit("dispose")}on(t,s){return(this.listeners[t]??=new Set).add(s),this}off(t,s){const e=this.listeners[t];return e&&(e.delete(s),e.size===0&&delete this.listeners[t]),this}once(t,s){const e=r=>{try{s(r)}finally{this.off(t,e)}};return this.on(t,e),this}emit(t,...[s]){const e=this.listeners[t];if(e)for(const r of[...e])r(s);return this}}const y=o=>{throw Error(o)},h=requestAnimationFrame,w=Object,b=(o,t)=>w.assign(o,t),S=document;new Proxy({},{get:(o,t)=>s=>b(S.createElement(t),s)});const g=o=>Array.isArray(o)?o:[o];let d;const p=o=>(d=o,setTimeout(()=>d=0),h(p)),A=o=>{d??p(0);const t={start:s=>new Promise(e=>{const r=[],n=c=>(r.push(c),s?.(c));d&&n(d);const i=c=>{o(c,r)?t.stop():(a=h(i),n(c))};let a=h(i);t.stop=()=>(cancelAnimationFrame(a),e(r))}),stop(){}};return t},E=o=>o,F=o=>({wrap:t=>(s=>t(o(s))),render:(t,s,e)=>{const r=o(s);e&&l.push(e);const n=t(r);e&&l.pop();let i;const a=g(typeof n!="string"&&"node"in n?(i=n.data,n.node):n);return{props:r,nodes:a,data:i}}}),l=[],P=()=>l[l.length-1]??y("Not found current scene");class O extends m{constructor(t,s){super(),this.options=s;const{root:e,adapter:r,defaultProps:n,timer:i}=s;(this.root=e).tabIndex=-1,e.style.scale="0";const{props:a,nodes:c,data:u}=r.render(t,{...n},this.on("dispose",()=>e.remove()));this.#t=i(),this.#s=a,this.data=u,e.append(...c)}root;#t;#s;data;show=this.#e;async close(){await 0,this.#t.stop()}async#e(t){const{root:s,defaultProps:e}=this.options,r={...e,...t};for(const i of Object.keys({...this.#s,...r}))this.#s[i]=r[i];this.emit("show"),s.style.scale="1",s.focus();const n=await this.#t.start(i=>this.emit("frame",i));return s.style.scale="0",{...this.emit("close").data?.(),frame_times:n,duration:d-n[0]}}}export{m as EventEmitter,O as Scene,F as createComponentAdapter,A as createTimer,E as generic,P as getCurrentScene};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psytask/core",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "author": "cubxx",
   "license": "MIT",