feat: add eslint

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "require-yield": "off",
+    "@typescript-eslint/explicit-member-accessibility": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}

package.json

@@ -8,6 +8,8 @@
   "scripts": {
     "build": "tsc",
     "watch": "tsc -w",
+    "lint": "eslint \"src/**/*.ts?(x)\"",
+    "lint:fix": "eslint --fix \"src/**/*.ts?(x)\"",
     "release": "semantic-release"
   },
   "publishConfig": {
@@ -53,6 +55,9 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/dom-webcodecs": "^0.1.4",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "eslint": "^8.17.0",
     "prettier": "^2.6.2",
     "semantic-release": "^19.0.2"
   }

src/Project.ts

@@ -31,7 +31,7 @@ export class Project extends Stage {
   public readonly master: Layer;
   public readonly center: Vector2d;
   public threadsCallback: ThreadsCallback;
-  public frame: number = 0;
+  public frame = 0;
 
   public get time(): number {
     return this.framesToSeconds(this.frame);
@@ -136,7 +136,7 @@ export class Project extends Stage {
     }
   }
 
-  public async next(speed: number = 1): Promise<boolean> {
+  public async next(speed = 1): Promise<boolean> {
     if (this.previousScene) {
       await this.previousScene.next();
       if (!this.currentScene || this.currentScene.isAfterTransitionIn()) {
@@ -198,7 +198,7 @@ export class Project extends Stage {
     this.scenesChanged.dispatch(this.scenes);
   }
 
-  public async seek(frame: number, speed: number = 1): Promise<boolean> {
+  public async seek(frame: number, speed = 1): Promise<boolean> {
     if (
       frame <= this.frame ||
       !this.currentScene ||

src/Scene.ts

@@ -34,9 +34,9 @@ export interface TimeEvent {
 @KonvaNode()
 export class Scene extends Group {
   public threadsCallback: ThreadsCallback = null;
-  public firstFrame: number = 0;
-  public transitionDuration: number = 0;
-  public duration: number = 0;
+  public firstFrame = 0;
+  public transitionDuration = 0;
+  public duration = 0;
 
   public get lastFrame() {
     return this.firstFrame + this.duration;

src/animations/motion.ts

@@ -38,7 +38,7 @@ export function move(
   }
 
   const positionFrom = node.position();
-  let positionTo = config.absolute
+  const positionTo = config.absolute
     ? delta
     : {x: delta.x + positionFrom.x, y: delta.y + positionFrom.y};
 

src/animations/scheduling.ts

@@ -1,5 +1,3 @@
-import type {Project} from '../Project';
-import type {Scene} from '../Scene';
 import {decorate, threadable} from '../decorators';
 import {ThreadGenerator} from '../threading';
 import {useProject, useScene} from '../utils';

src/animations/show.ts

@@ -70,7 +70,7 @@ export function showSurface(surface: Surface): ThreadGenerator {
 decorate(showCircle, threadable());
 export function showCircle(
   surface: Surface,
-  duration: number = 0.6,
+  duration = 0.6,
   origin?: Origin | Vector2d,
 ): ThreadGenerator {
   const position =

src/animations/surfaceFrom.ts

@@ -36,7 +36,7 @@ export function surfaceFrom(fromSurface: Surface) {
     const fromDelta = fromSurface.getOriginDelta(target.getOrigin());
     target.show();
 
-    let ratio =
+    const ratio =
       (calculateRatio(fromSurface.getPosition(), toPos) +
         calculateRatio(from, to)) /
       2;

src/audio/AudioManager.ts

@@ -37,7 +37,7 @@ export class AudioManager {
     this.offsetChanged.dispatch(value);
   }
 
-  public async setMuted(isMuted: boolean) {
+  public setMuted(isMuted: boolean) {
     this.audioElement.muted = isMuted;
   }
 
@@ -83,8 +83,8 @@ export class AudioManager {
       } else {
         try {
           await this.audioElement.play();
-          return true;
           this.error = false;
+          return true;
         } catch (e) {
           if (!this.error) {
             console.error(e);

src/bootstrap.ts

@@ -30,9 +30,8 @@ export function bootstrap(config: BootstrapConfig) {
     audio.setOffset(config.audioOffset);
   }
   const player = new Player(project, audio);
-  (<any>window).player = player;
+  window.player = player;
 
-  //@ts-ignore
   const parent = __webpack_require__.c[module.parents[0]];
   hot(player, parent);
 }

src/components/Arrow.ts

@@ -1,13 +1,7 @@
 import {Node} from 'konva/lib/Node';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
-import {_registerNode} from 'konva/lib/Global';
 import {Context} from 'konva/lib/Context';
 import {GetSet, Vector2d} from 'konva/lib/types';
-import {Factory} from 'konva/lib/Factory';
-import {
-  getNumberArrayValidator,
-  getNumberValidator,
-} from 'konva/lib/Validators';
 import {clamp} from 'three/src/math/MathUtils';
 import {getset, KonvaNode} from '../decorators';
 
@@ -30,10 +24,6 @@ abstract class Segment {
   ): [Vector2d, Vector2d, Vector2d, Vector2d];
 
   public abstract get arcLength(): number;
-
-  public getOffset(from: number): number {
-    return 0;
-  }
 }
 
 class LineSegment extends Segment {
@@ -56,15 +46,15 @@ class LineSegment extends Segment {
     };
   }
 
-  get arcLength(): number {
+  public get arcLength(): number {
     return this.length;
   }
 
   public draw(
     context: Context,
-    start: number = 0,
-    end: number = 1,
-    move: boolean = false,
+    start = 0,
+    end = 1,
+    move = false,
   ): [Vector2d, Vector2d, Vector2d, Vector2d] {
     const from = {
       x: this.from.x + this.vector.x * start,
@@ -105,15 +95,14 @@ class CircleSegment extends Segment {
     this.length = Math.abs(this.delta * radius);
   }
 
-  get arcLength(): number {
+  public get arcLength(): number {
     return this.length;
   }
 
-  draw(
+  public draw(
     context: Context,
     from: number,
     to: number,
-    move: boolean,
   ): [Vector2d, Vector2d, Vector2d, Vector2d] {
     const startAngle = this.startAngle + this.delta * from;
     const endAngle = this.startAngle + this.delta * to;
@@ -159,11 +148,6 @@ class CircleSegment extends Segment {
           },
     ];
   }
-
-  public getOffset(from: number): number {
-    // May wanna go back to (-from * 1.045 * this.delta * this.radius) / 2
-    return 0;
-  }
 }
 
 @KonvaNode()
@@ -180,16 +164,15 @@ export class Arrow extends Shape<ArrowConfig> {
   public arrowSize: GetSet<number, this>;
 
   private segments: Segment[] = [];
-  private arcLength: number = 0;
+  private arcLength = 0;
 
-  _sceneFunc(context: Context) {
+  public _sceneFunc(context: Context) {
     let start = this.start() * this.arcLength;
     let end = this.end() * this.arcLength;
     if (start > end) {
       [start, end] = [end, start];
     }
-    let offset = start;
-
+    const offset = start;
     const distance = end - start;
     const arrowSize = this.arrowSize();
     const arrowScale =
@@ -215,7 +198,6 @@ export class Arrow extends Shape<ArrowConfig> {
         relativeEnd > 1 ? 1 : relativeEnd < 0 ? 0 : relativeEnd;
 
       if (length < start) {
-        offset -= segment.getOffset(clampedStart);
         continue;
       }
 
@@ -225,7 +207,6 @@ export class Arrow extends Shape<ArrowConfig> {
         clampedEnd,
         firstPoint === null,
       );
-      offset -= segment.getOffset(clampedStart);
 
       if (firstPoint === null) {
         firstPoint = first;

src/components/Connection.ts

@@ -38,7 +38,7 @@ export class Connection extends Group {
   public readonly crossing: Node = null;
   public readonly arrow: Arrow;
 
-  constructor(config?: ConnectionConfig) {
+  public constructor(config?: ConnectionConfig) {
     super(config);
 
     this.start = config?.start ?? new Pin();

src/components/Icon.ts

@@ -41,7 +41,7 @@ interface IconConfig extends ShapeConfig {
 export class Icon extends Shape {
   private readonly paths: Path2D[];
 
-  constructor(config?: IconConfig) {
+  public constructor(config?: IconConfig) {
     super(config);
 
     switch (config?.type ?? IconType.Fill) {
@@ -66,7 +66,7 @@ export class Icon extends Shape {
     };
   }
 
-  _sceneFunc(context: Context) {
+  public _sceneFunc(context: Context) {
     context.fillShape(this);
   }
 }

src/components/LayeredLayout.ts

@@ -1,11 +1,8 @@
 import {Size} from '../types';
-import {IRect, Vector2d} from 'konva/lib/types';
 import {Group} from 'konva/lib/Group';
-import {Shape} from 'konva/lib/Shape';
-import {Container, ContainerConfig} from 'konva/lib/Container';
 
 export class LayeredLayout extends Group {
-  public getLayoutSize(custom?: ContainerConfig): Size {
+  public getLayoutSize(): Size {
     return this.getChildrenRect({skipTransform: true});
   }
 }

src/components/LayoutText.ts

@@ -1,7 +1,7 @@
 import {Text, TextConfig} from 'konva/lib/shapes/Text';
 import {GetSet, IRect, Vector2d} from 'konva/lib/types';
 import {ShapeGetClientRectConfig} from 'konva/lib/Shape';
-import {Origin, Size, PossibleSpacing, Spacing, getOriginOffset} from '../types';
+import {Origin, Size, Spacing, getOriginOffset} from '../types';
 import {Animator, tween, textTween, InterpolationFunction} from '../tweening';
 import {getset, threadable} from '../decorators';
 
@@ -92,7 +92,7 @@ export class LayoutText extends Text {
     text: string,
     time: number,
     interpolation: InterpolationFunction,
-    onEnd: Function,
+    onEnd: Callback,
   ) {
     const fromWidth = this.getLayoutSize({text: fromText, minWidth: 0}).width;
     const toWidth = this.getLayoutSize({text, minWidth: 0}).width;

src/components/LinearLayout.ts

@@ -1,11 +1,10 @@
 import {Group} from 'konva/lib/Group';
-import {GetSet, IRect} from 'konva/lib/types';
+import {GetSet} from 'konva/lib/types';
 import {Shape} from 'konva/lib/Shape';
-import {Center, getOriginOffset, Origin, Size, Spacing} from '../types';
-import {Container, ContainerConfig} from 'konva/lib/Container';
+import {Center, getOriginOffset, Origin, Size} from '../types';
+import {ContainerConfig} from 'konva/lib/Container';
 import {getset, KonvaNode} from '../decorators';
 import {Node} from 'konva/lib/Node';
-import {Rect} from 'konva/lib/shapes/Rect';
 
 export interface LinearLayoutConfig extends ContainerConfig {
   direction?: Center;
@@ -18,11 +17,11 @@ export class LinearLayout extends Group {
 
   private contentSize: Size;
 
-  constructor(config?: LinearLayoutConfig) {
+  public constructor(config?: LinearLayoutConfig) {
     super(config);
   }
 
-  getLayoutSize(): Size {
+  public getLayoutSize(): Size {
     return this.getPadd().expand({
       width: this.contentSize?.width ?? 0,
       height: this.contentSize?.height ?? 0,
@@ -30,7 +29,7 @@ export class LinearLayout extends Group {
   }
 
   //TODO Recalculate upon removing children as well.
-  add(...children: (Group | Shape)[]): this {
+  public add(...children: (Group | Shape)[]): this {
     super.add(...children);
     this.recalculateLayout();
     return this;

src/components/Sprite.ts

@@ -63,7 +63,7 @@ export class Sprite extends Shape {
   private readonly computeCanvas: HTMLCanvasElement;
   private readonly context: CanvasRenderingContext2D;
 
-  constructor(config?: SpriteConfig) {
+  public constructor(config?: SpriteConfig) {
     super(config);
     this.computeCanvas = Util.createCanvasElement();
     this.computeCanvas.width = COMPUTE_CANVAS_SIZE;
@@ -73,7 +73,7 @@ export class Sprite extends Shape {
     this.recalculate();
   }
 
-  _sceneFunc(context: Context) {
+  public _sceneFunc(context: Context) {
     const size = this.getSize();
     context.save();
     context._context.imageSmoothingEnabled = false;

src/components/Surface.ts

@@ -49,7 +49,7 @@ export class Surface extends Group {
   private surfaceMask: SurfaceMask | null = null;
   private circleMask: CircleMask | null = null;
   private layoutData: Size;
-  private rippleTween: number = 0;
+  private rippleTween = 0;
 
   public constructor(config?: SurfaceConfig) {
     super(config);
@@ -80,7 +80,7 @@ export class Surface extends Group {
     return this.circleMask ?? null;
   }
 
-  public clone(obj?: any): this {
+  public clone(obj?: unknown): this {
     const child = this.child();
     this.child(null);
     const clone: this = Node.prototype.clone.call(this, obj);
@@ -97,7 +97,7 @@ export class Surface extends Group {
     return clone;
   }
 
-  getLayoutSize(custom?: SurfaceConfig): Size {
+  public getLayoutSize(): Size {
     return {
       width: this.surfaceMask?.width ?? this.layoutData?.width ?? 0,
       height: this.surfaceMask?.height ?? this.layoutData?.height ?? 0,
@@ -268,7 +268,7 @@ export class Surface extends Group {
   public getAbsoluteCircleMask(custom?: SurfaceConfig): CircleMask {
     const mask = custom?.circleMask ?? this.circleMask ?? null;
     if (mask === null) return null;
-    const size = this.getLayoutSize(custom);
+    const size = this.getLayoutSize();
     const position = {
       x: (size.width * mask.x) / 2,
       y: (size.height * mask.y) / 2,

src/components/ThreeView.ts

@@ -64,7 +64,7 @@ export class ThreeView extends Shape {
   private readonly renderer: THREE.WebGLRenderer;
   private readonly context: WebGLRenderingContext;
 
-  private renderedFrames: number = 0;
+  private renderedFrames = 0;
 
   public constructor(config?: ThreeViewConfig) {
     super(config);
@@ -74,7 +74,7 @@ export class ThreeView extends Shape {
     this.handleCanvasSizeChange();
   }
 
-  setBackground(value: string): this {
+  public setBackground(value: string): this {
     const scene = this.scene();
     if (scene) {
       scene.background = new THREE.Color(value);
@@ -83,14 +83,14 @@ export class ThreeView extends Shape {
     return this;
   }
 
-  getBackground(): string {
+  public getBackground(): string {
     const background = this.scene()?.background;
     return background instanceof THREE.Color
       ? background.getHexString()
       : '#000000';
   }
 
-  destroy(): this {
+  public destroy(): this {
     rendererPool.dispose(this.renderer);
 
     return super.destroy();
@@ -121,11 +121,11 @@ export class ThreeView extends Shape {
     this.markDirty();
   }
 
-  getLayoutSize(): Size {
+  public getLayoutSize(): Size {
     return this.canvasSize();
   }
 
-  _sceneFunc(context: Context) {
+  public _sceneFunc(context: Context) {
     const scale = this.quality();
     const size = {...this.canvasSize()};
 

src/components/Video.tsx

@@ -32,7 +32,7 @@ export class Video extends Shape {
     super(config);
   }
 
-  _sceneFunc(context: Context) {
+  public _sceneFunc(context: Context) {
     const frames = this.frames();
     context._context.clip(
       CanvasHelper.roundRectPath(

src/components/code/Code.tsx

@@ -8,8 +8,6 @@ import {easeInExpo, easeOutExpo, tween} from '../../tweening';
 import {CodeTheme, CodeTokens} from './CodeTheme';
 import {JS_CODE_THEME} from '../../themes';
 import {ThreadGenerator} from '../../threading';
-import {useScene} from '../../utils';
-import {Node} from 'konva/lib/Node';
 
 type CodePoint = [number, number];
 type CodeRange = [CodePoint, CodePoint];
@@ -39,7 +37,7 @@ export class Code extends Text {
   private readonly selectionCanvas: HTMLCanvasElement;
   private readonly selectionCtx: CanvasRenderingContext2D;
 
-  private outline: number = 0;
+  private outline = 0;
   private unselectedOpacity = 1;
 
   public constructor(config?: CodeConfig) {
@@ -66,7 +64,7 @@ export class Code extends Text {
     }
   }
 
-  public setText(text: any): this {
+  public setText(text: string): this {
     super.setText(text);
     this.markDirty();
 
@@ -76,8 +74,8 @@ export class Code extends Text {
     return this;
   }
 
-  public setLanguage(langauge: string): this {
-    this.attrs.language = langauge;
+  public setLanguage(language: string): this {
+    this.attrs.language = language;
     this._clearCache(this.getTokens);
     return this;
   }
@@ -165,7 +163,7 @@ export class Code extends Text {
 
     context.beginPath();
     for (const range of selection) {
-      let [[startLine, startColumn], [endLine, endColumn]] = range;
+      const [[startLine, startColumn], [endLine, endColumn]] = range;
       let offset =
         startLine === endLine
           ? endColumn * letterWidth

src/decorators/decorate.ts

@@ -1,7 +1,10 @@
-export function decorate(fn: Function, ...decorators: MethodDecorator[]) {
+export function decorate(
+  fn: Callback,
+  ...decorators: MethodDecorator[]
+) {
   const target = {[fn.name]: fn};
   const descriptor = Object.getOwnPropertyDescriptor(target, fn.name);
   for (let i = decorators.length - 1; i >= 0; i--) {
     decorators[i](target, fn.name, descriptor);
   }
-}
+}

src/decorators/getset.ts

@@ -1,10 +1,10 @@
 import {Factory} from 'konva/lib/Factory';
 import {TweenProvider} from '../tweening';
 
-export function getset(
-  defaultValue?: any,
-  after?: () => void,
-  tween?: TweenProvider<any>,
+export function getset<T = unknown>(
+  defaultValue?: T,
+  after?: Callback,
+  tween?: TweenProvider<T>,
 ): PropertyDecorator {
   return function (target, propertyKey) {
     Factory.addGetter(target.constructor, propertyKey, defaultValue);

src/decorators/threadable.ts

@@ -1,6 +1,6 @@
 export function threadable(customName?: string): MethodDecorator {
   return function (
-    target: any,
+    target: unknown,
     propertyKey: string,
     descriptor: PropertyDescriptor,
   ) {

src/flow/chain.ts

@@ -2,7 +2,7 @@ import {decorate, threadable} from '../decorators';
 import {isThreadGenerator, ThreadGenerator} from '../threading';
 
 decorate(chain, threadable());
-export function* chain(...args: (ThreadGenerator | Function)[]) {
+export function* chain(...args: (ThreadGenerator | Callback)[]) {
   for (const generator of args) {
     if (isThreadGenerator(generator)) {
       yield* generator;

src/flow/delay.ts

@@ -5,7 +5,7 @@ import {isThreadGenerator, ThreadGenerator} from '../threading';
 decorate(delay, threadable());
 export function* delay(
   time: number,
-  task: ThreadGenerator | Function,
+  task: ThreadGenerator | Callback,
 ): ThreadGenerator {
   yield* waitFor(time);
   if (isThreadGenerator(task)) {

src/flow/every.ts

@@ -2,7 +2,7 @@ import {ThreadGenerator} from '../threading';
 import {decorate, threadable} from '../decorators';
 import { useProject } from "../utils";
 
-export function every(seconds: number, callback: (frame: number) => any) {
+export function every(seconds: number, callback: (frame: number) => void) {
   let changed = false;
   decorate(everyRunner, threadable('every'));
   function* everyRunner(): ThreadGenerator {
@@ -32,7 +32,7 @@ export function every(seconds: number, callback: (frame: number) => any) {
       seconds = value;
       changed = false;
     },
-    setCallback(value: (frame: number) => any) {
+    setCallback(value: (frame: number) => void) {
       callback = value;
       changed = false;
     },

src/globals.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
+
 declare module '*.png' {
   const value: import('./components/Sprite').SpriteData;
   export = value;
@@ -24,7 +26,7 @@ declare module '*.wav' {
 }
 
 declare module '*.csv' {
-  const value: any;
+  const value: unknown;
   export = value;
 }
 
@@ -33,9 +35,21 @@ declare module '*.mp4' {
   export = value;
 }
 
+declare interface Window {
+  player: import('./player/Player').Player;
+}
+
+declare namespace NodeJS {
+  interface Module {
+    parents: Record<string, string>;
+  }
+}
+
 declare namespace JSX {
   type ElementClass = import('konva/lib/Node').Node;
   interface ElementChildrenAttribute {
-    children: {};
+    children: unknown;
   }
-}
+}
+
+declare type Callback = (...args: unknown[]) => void;

src/helpers/CanvasHelper.ts

@@ -1,8 +1,8 @@
 import {Context} from 'konva/lib/Context';
-import {PossibleSpacing, Spacing} from "../types";
+import {PossibleSpacing, Spacing} from '../types';
 
-export namespace CanvasHelper {
-  export function roundRect<T extends CanvasRenderingContext2D | Context>(
+export const CanvasHelper = {
+  roundRect<T extends CanvasRenderingContext2D | Context>(
     ctx: T,
     x: number,
     y: number,
@@ -11,15 +11,13 @@ export namespace CanvasHelper {
     radius: PossibleSpacing,
   ): T {
     ctx.beginPath();
-    roundRectPath(ctx, x, y, width, height, radius);
+    this.roundRectPath(ctx, x, y, width, height, radius);
     ctx.closePath();
 
     return ctx;
-  }
+  },
 
-  export function roundRectPath<
-    T extends CanvasRenderingContext2D | Context | Path2D,
-  >(
+  roundRectPath<T extends CanvasRenderingContext2D | Context | Path2D>(
     ctx: T,
     x: number,
     y: number,
@@ -36,5 +34,5 @@ export namespace CanvasHelper {
     ctx.arcTo(x, y, x + width, y, spacing.left);
 
     return ctx;
-  }
-}
+  },
+};

src/helpers/GeneratorHelper.ts

@@ -1,8 +1,5 @@
-export namespace GeneratorHelper {
-  export function makeThreadable(
-    task: Generator,
-    source: Generator | string,
-  ): void {
+export const GeneratorHelper = {
+  makeThreadable(task: Generator, source: Generator | string): void {
     const prototype = Object.getPrototypeOf(task);
     if (!prototype.threadable) {
       prototype.threadable = true;
@@ -11,13 +8,13 @@ export namespace GeneratorHelper {
           ? source
           : Object.getPrototypeOf(source).name;
     }
-  }
+  },
 
-  export function isThreadable(value: any): boolean {
+  isThreadable(value: unknown): boolean {
     return typeof value === 'function' && value.prototype.threadable === true;
-  }
+  },
 
-  export function getName(task: Generator): string {
+  getName(task: Generator): string {
     return Object.getPrototypeOf(task).name ?? null;
-  }
-}
+  },
+};

src/jsx-runtime.ts

@@ -4,7 +4,8 @@ import type {Reference} from './utils';
 import {Container} from 'konva/lib/Container';
 import {Surface} from './components';
 
-function isConstructor(fn: Function): fn is new (...args: any[]) => any {
+// eslint-disable-next-line @typescript-eslint/ban-types
+function isConstructor(fn: Function): fn is new (...args: unknown[]) => unknown {
   return !!fn.prototype?.name;
 }
 

src/patches/Factory.ts

@@ -10,12 +10,22 @@ import {
 import {ThreadGenerator} from '../threading';
 import {Vector2d} from 'konva/lib/types';
 
+declare module 'konva/lib/Factory' {
+  export interface Factory {
+    addOverloadedGetterSetter(
+      constructor: new (...args: unknown[]) => unknown,
+      attr: string,
+      tween?: TweenProvider<unknown>,
+    ): void;
+  }
+}
+
 declare module 'konva/lib/types' {
   export interface GetSet<Type, This extends Node> {
     (): Type;
     (value: Type): This;
     (value: typeof ANIMATE): Animator<Type, This>;
-    <Rest extends any[]>(
+    <Rest extends unknown[]>(
       value: Type,
       time: number,
       interpolation?: InterpolationFunction,
@@ -26,26 +36,26 @@ declare module 'konva/lib/types' {
 }
 
 Factory.addOverloadedGetterSetter = function addOverloadedGetterSetter(
-  constructor: Function,
+  constructor: new (...args: unknown[]) => unknown,
   attr: string,
-  tween?: TweenProvider<any>,
+  tween?: TweenProvider<unknown>,
 ) {
   const capitalizedAttr = attr.charAt(0).toUpperCase() + attr.slice(1);
   const setter = 'set' + capitalizedAttr;
   const getter = 'get' + capitalizedAttr;
 
-  constructor.prototype[attr] = function <Rest extends any[]>(
+  constructor.prototype[attr] = function <Rest extends unknown[]>(
     value?: Vector2d | typeof ANIMATE,
     time?: number,
     interpolation?: InterpolationFunction,
-    mapper?: TweenFunction<any, Rest>,
+    mapper?: TweenFunction<unknown, Rest>,
     ...rest: Rest
   ) {
     if (value === ANIMATE) {
-      return new Animator<any, Node>(this, attr, tween);
+      return new Animator<unknown, Node>(this, attr, tween);
     }
     if (time !== undefined) {
-      return new Animator<any, Node>(this, attr, tween)
+      return new Animator<unknown, Node>(this, attr, tween)
         .key(value, time, interpolation, mapper, ...rest)
         .run();
     }

src/patches/Node.ts

@@ -1,32 +1,24 @@
+import type {Style} from '../styles';
 import {Node, NodeConfig} from 'konva/lib/Node';
-import {
-  Origin,
-  PossibleSpacing,
-  Size,
-  Spacing,
-  getOriginDelta,
-  getOriginOffset,
-} from '../types';
+import {Origin, PossibleSpacing, Size, Spacing, getOriginDelta} from '../types';
 import {GetSet, IRect, Vector2d} from 'konva/lib/types';
 import {Factory} from 'konva/lib/Factory';
-import {Rect} from 'konva/lib/shapes/Rect';
 import {Container} from 'konva/lib/Container';
-import {Transform} from 'konva/lib/Util';
-import {Konva} from 'konva/lib/Global';
 import {NODE_ID} from '../symbols';
 import {useScene} from '../utils';
 
 declare module 'konva/lib/Node' {
   export interface Node {
     _centroid: boolean;
+    style?: GetSet<Partial<Style>, this>;
     padd: GetSet<PossibleSpacing, this>;
     margin: GetSet<PossibleSpacing, this>;
     origin: GetSet<Origin, this>;
     drawOrigin: GetSet<Origin, this>;
     setX(value: number): this;
     setY(value: number): this;
-    setWidth(width: any): void;
-    setHeight(height: any): void;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
     setPadd(value: PossibleSpacing): this;
     setMargin(value: PossibleSpacing): this;
     setOrigin(value: Origin): this;
@@ -70,7 +62,7 @@ declare module 'konva/lib/Node' {
 
     subscribe(event: string, handler: () => void): () => void;
 
-    _clearCache(attr?: string | Function): void;
+    _clearCache(attr?: string | Callback): void;
   }
 
   export interface NodeConfig {
@@ -142,9 +134,11 @@ Node.prototype.updateLayout = function (this: Node): void {
   }
 };
 
-Node.prototype.recalculateLayout = function (this: Node): void {};
+Node.prototype.recalculateLayout = function (this: Node): void {
+  // do nothing
+};
 
-Node.prototype.markDirty = function (this: Node, force: boolean = false): void {
+Node.prototype.markDirty = function (this: Node, force = false): void {
   this.attrs.dirty = true;
   if (
     force ||
@@ -240,7 +234,7 @@ Node.prototype._getTransform = function (this: Node) {
 };
 
 const super_setAttrs = Node.prototype.setAttrs;
-Node.prototype.setAttrs = function (this: Node, config: any) {
+Node.prototype.setAttrs = function (this: Node, config: unknown) {
   if (!(NODE_ID in this.attrs)) {
     const scene = useScene();
     if (scene) {
@@ -252,7 +246,7 @@ Node.prototype.setAttrs = function (this: Node, config: any) {
 };
 
 const super__clearCache = Node.prototype._clearCache;
-Node.prototype._clearCache = function (this: Node, attr?: string | Function) {
+Node.prototype._clearCache = function (this: Node, attr?: string | Callback) {
   if (typeof attr === 'function') {
     if (attr.prototype?.cachedKey) {
       this._cache.delete(attr.prototype.cachedKey);

src/patches/Shape.ts

@@ -1,6 +1,5 @@
 import {Node} from 'konva/lib/Node';
 import {Shape, ShapeGetClientRectConfig} from 'konva/lib/Shape';
-import {IRect} from 'konva/lib/types';
 
 declare module 'konva/lib/Shape' {
   export interface Shape {

src/player/Player.ts

@@ -1,5 +1,5 @@
 import type {Project} from '../Project';
-import {AudioManager} from '../audio/AudioManager';
+import {AudioManager} from '../audio';
 import {
   PromiseSimpleEventDispatcher,
   SimpleEventDispatcher,
@@ -7,7 +7,7 @@ import {
 
 const MAX_AUDIO_DESYNC = 1 / 50;
 
-export interface PlayerState {
+export interface PlayerState extends Record<string, unknown> {
   duration: number;
   startFrame: number;
   endFrame: number;
@@ -65,9 +65,9 @@ export class Player {
   private readonly reloaded = new SimpleEventDispatcher<number>();
 
   private startTime: number;
-  private renderTime: number = 0;
+  private renderTime = 0;
   private requestId: number = null;
-  private frame: number = 0;
+  private frame = 0;
 
   private commands: PlayerCommands = {
     reset: true,
@@ -123,7 +123,6 @@ export class Player {
   private updateState(newState: Partial<PlayerState>) {
     let changed = false;
     for (const prop in newState) {
-      // @ts-ignore
       if (newState[prop] !== this.state[prop]) {
         changed = true;
         break;
@@ -222,7 +221,7 @@ export class Player {
     this.commands.seek = this.clampRange(value, this.state);
   }
 
-  public toggleLoop(value: boolean = !this.state.loop) {
+  public toggleLoop(value = !this.state.loop) {
     this.updateState({loop: value});
   }
 
@@ -230,7 +229,7 @@ export class Player {
     this.updateState({paused: !value});
   }
 
-  public toggleRendering(value: boolean = !this.state.render): void {
+  public toggleRendering(value = !this.state.render): void {
     this.updateState({render: value});
   }
 
@@ -239,8 +238,8 @@ export class Player {
   }
 
   private async run() {
-    let commands = this.consumeCommands();
-    let state = {...this.state};
+    const commands = this.consumeCommands();
+    const state = {...this.state};
     if (state.finished && state.loop && commands.seek < 0) {
       commands.seek = state.startFrame;
     }
@@ -370,7 +369,7 @@ export class Player {
     return frame >= state.startFrame && frame <= state.endFrame;
   }
 
-  private syncAudio(frameOffset: number = 0) {
+  private syncAudio(frameOffset = 0) {
     this.audio.setTime(
       this.project.framesToSeconds(this.project.frame + frameOffset),
     );

src/styles/Style.ts

@@ -1,4 +1,4 @@
-import {Node} from 'konva/lib/Node';
+import type {Node} from 'konva/lib/Node';
 import {parseColor} from 'mix-color';
 
 export interface Style {
@@ -23,7 +23,6 @@ export function getStyle(node: Node): Style {
   let mergedStyle = {};
 
   do {
-    //@ts-ignore
     const style = node.style?.() ?? null;
     if (style) {
       mergedStyle = {

src/threading/Thread.ts

@@ -3,14 +3,14 @@ import {ThreadGenerator} from './ThreadGenerator';
 
 export class Thread {
   public children: Thread[] = [];
-  public value: any;
+  public value: unknown;
   private parent: Thread = null;
 
   public get canceled(): boolean {
     return this._canceled || (this.parent?.canceled ?? false);
   }
 
-  private _canceled: boolean = false;
+  private _canceled = false;
 
   public constructor(public readonly runner: ThreadGenerator) {}
 

src/threading/ThreadGenerator.ts

@@ -8,6 +8,6 @@ export type ThreadGenerator = Generator<
   ThreadGenerator | Project | any
 >;
 
-export function isThreadGenerator(value: any): value is ThreadGenerator {
+export function isThreadGenerator(value: unknown): value is ThreadGenerator {
   return typeof value === 'object' && Symbol.iterator in value;
 }

src/threading/cancel.ts

@@ -7,7 +7,7 @@ export interface CancelYieldResult {
   [THREAD_CANCEL]: ThreadGenerator[];
 }
 
-export function isCancelYieldResult(value: any): value is CancelYieldResult {
+export function isCancelYieldResult(value: unknown): value is CancelYieldResult {
   return typeof value === 'object' && THREAD_CANCEL in value;
 }
 

src/threading/join.ts

@@ -8,7 +8,7 @@ export interface JoinYieldResult {
   all: boolean;
 }
 
-export function isJoinYieldResult(value: any): value is JoinYieldResult {
+export function isJoinYieldResult(value: unknown): value is JoinYieldResult {
   return typeof value === 'object' && THREAD_JOIN in value;
 }
 

src/tweening/Animator.ts

@@ -21,7 +21,7 @@ export interface TweenProvider<T> {
     to: T,
     time: number,
     interpolation: InterpolationFunction,
-    onEnd: Function,
+    onEnd: Callback,
   ): ThreadGenerator;
 }
 
@@ -30,7 +30,7 @@ export class Animator<Type, This> {
   private lastValue: Type;
   private keys: (() => ThreadGenerator)[] = [];
   private tweenFunction: TweenFunction<any> = map;
-  private loops: number = 1;
+  private loops = 1;
   private readonly setter: string;
   private readonly getter: string;
 
@@ -49,7 +49,7 @@ export class Animator<Type, This> {
     return this;
   }
 
-  public key<Rest extends any[]>(
+  public key<Rest extends unknown[]>(
     value: Type,
     time: number,
     interpolation: InterpolationFunction = easeInOutCubic,
@@ -86,7 +86,7 @@ export class Animator<Type, This> {
     return this;
   }
 
-  public do(callback: Function): this {
+  public do(callback: Callback): this {
     this.keys.push(function* (): ThreadGenerator {
       callback();
     });
@@ -94,7 +94,7 @@ export class Animator<Type, This> {
     return this;
   }
 
-  public diff<Rest extends any[]>(
+  public diff<Rest extends unknown[]>(
     value: Type,
     time: number,
     interpolation: InterpolationFunction = easeInOutCubic,
@@ -117,7 +117,7 @@ export class Animator<Type, This> {
     return this.key(next, time, interpolation, mapper, ...args);
   }
 
-  public back<Rest extends any[]>(
+  public back<Rest extends unknown[]>(
     time: number,
     interpolation: InterpolationFunction = easeInOutCubic,
     mapper?: TweenFunction<Type, Rest>,
@@ -177,7 +177,7 @@ export class Animator<Type, This> {
   }
 
   public static inferTweenFunction<T>(value: T): TweenFunction<T> {
-    let tween: TweenFunction<any> = map;
+    let tween: TweenFunction<unknown> = map;
 
     if (typeof value === 'string') {
       if (value.startsWith('#') || value.startsWith('rgb')) {

src/tweening/tween.ts

@@ -1,5 +1,4 @@
 import {decorate, threadable} from '../decorators';
-import type {Project} from '../Project';
 import {ThreadGenerator} from '../threading';
 import { useProject } from "../utils";
 
@@ -11,7 +10,7 @@ export function* tween(
 ): ThreadGenerator {
   const project = useProject();
   const frames = project.secondsToFrames(duration);
-  let startFrame = project.frame;
+  const startFrame = project.frame;
   let value = 0;
   while (project.frame - startFrame < frames) {
     const time = project.framesToSeconds(project.frame - startFrame);

src/tweening/tweenFunctions.ts

@@ -2,7 +2,7 @@ import mixColor from 'mix-color';
 import {IRect, Vector2d} from 'konva/lib/types';
 import {PossibleSpacing, Spacing} from '../types';
 
-export interface TweenFunction<T, Rest extends any[] = any[]> {
+export interface TweenFunction<T, Rest extends unknown[] = unknown[]> {
   (from: T, to: T, value: number, ...args: Rest): T;
 }
 
@@ -26,7 +26,7 @@ export function textTween(from: string, to: string, value: number) {
   else {
     const current = Math.round(from.length * (1 - value));
     const currentLength = Math.floor(map(from.length + 1, to.length, value));
-    let text = [];
+    const text = [];
     for (let i = from.length - 1; i >= 0; i--) {
       if (i < current) {
         text.unshift(from[i]);

src/utils/slide.ts

@@ -6,7 +6,7 @@ export function slide(container: Container, x: number, y?: number): void;
 export function slide(
   container: Container,
   offset: number | Vector2d,
-  y: number = 0,
+  y = 0,
 ): void {
   if (typeof offset === 'number') {
     offset = {x: offset, y};

src/utils/useRef.ts

@@ -1,8 +1,6 @@
-import type {Node} from 'konva/lib/Node';
-
 export type Reference<TValue> = TValue extends (config: {
   ref: infer TReference;
-}) => any
+}) => void
   ? TReference
   : {value: TValue};