async/ non-blocking tween calculation

[HannesH]

since the tween calculation is very slow, it would be nice if it was async, ran in another web-worker

[thednp]

This feature is real cool indeed, just I don't have the time to develop.

[HannesH]

understandable :)

i dont have time to dig through this package, but i managed to tuck together an fromToAsync without touching your code ;)

interface.ts

export interface TweenResultMessage {
	error?: String;
	data?: KUTE.Tween;
}

export interface TweenInputMessage {
	elem: Element;
	from: KUTE.tweenProps;
	to: KUTE.tweenProps;
	opts?: KUTE.tweenOptions;
}

morphWorker.ts

import KUTE from 'kute.js';
import type {TweenInputMessage, TweenResultMessage} from './interface';

onmessage = (e:MessageEvent<TweenInputMessage>):void => {
  const {elem, from, to, opts} = e.data;
  try {
    const tween = KUTE.fromTo(elem, from, to, opts)
    postMessage({data: tween} as TweenResultMessage);
  } catch (error) {
    postMessage({error} as TweenResultMessage);
  }
};

export {};

KUTEAsync.ts

import TweenCalculationWorker from "./morphWorker?worker";
import type {TweenInputMessage, TweenResultMessage} from './interface';
import type KUTE from "kute.js";


const fromToAsync = (elem:Element, from:KUTE.tweenProps, to:KUTE.tweenProps, opts:KUTE.tweenOptions):Promise<KUTE.Tween> => {
    const worker = new TweenCalculationWorker();
    worker.postMessage({elem, from, to, opts} as TweenInputMessage);
    return new Promise((resolve, reject) => {
        worker.onmessage = (e:MessageEvent<TweenResultMessage>) => {
            const m = e.data;
            if (m.error) reject(m.error);
            else resolve(m.data);
        }
    });
}

export default {fromToAsync};

Usage

import KUTEA from 'KUTEAsync'
const tween = await KUTEA.fromToAsync(...args);

maybe someone in this future can use this as a basis to actually implement this in KUTE

[thednp]

Wow you are awesome! Thanks for that!