From 0ddbec99ed26fdd9ec849bf76afbb70e0989cad1 Mon Sep 17 00:00:00 2001 From: Stanislav Fifik Date: Tue, 10 Dec 2019 15:10:55 +0100 Subject: [PATCH] :recycle: switching to typescript --- package-lock.json | 24 +++++++++++++++++++ package.json | 6 ++++- src/canvas/CanvasPool.ts | 2 +- src/helpers/{listener.js => listener.ts} | 21 +++++++++------- src/nodes/Canvas2d/Canvas2d.ts | 15 ++++++++---- src/nodes/Canvas2d/Compose.ts | 7 +++--- src/nodes/Canvas2d/EmptySpace.ts | 2 +- src/nodes/Canvas2d/Flip.ts | 2 +- src/nodes/Canvas2d/ImageIdentity.js | 1 + src/nodes/Canvas2d/Resize.ts | 8 +++---- src/nodes/Canvas2d/Text.ts | 2 +- src/nodes/Disable.ts | 2 +- src/nodes/Font.ts | 2 +- src/nodes/Math/NumberBinaryOperation.ts | 2 +- src/nodes/Math/Numbers.ts | 2 +- src/nodes/Node.ts | 10 ++++---- src/nodes/Synchronize.js | 1 + src/nodes/ToBlob.js | 1 + src/nodes/WebGL/{Tint.js => Tint.ts} | 22 ++++++++--------- src/nodes/WebGL/WebGl.ts | 17 +++++++------ src/nodes/Webcam.js | 1 + src/nodes/io/Input.ts | 4 ++-- .../io/{Inputs.spec.js => Inputs.spec.ts} | 1 + .../io/{Outputs.spec.js => Outputs.spec.ts} | 1 + src/nodes/io/{serializer.js => serializer.ts} | 0 25 files changed, 103 insertions(+), 53 deletions(-) rename src/helpers/{listener.js => listener.ts} (78%) rename src/nodes/WebGL/{Tint.js => Tint.ts} (80%) rename src/nodes/io/{Inputs.spec.js => Inputs.spec.ts} (97%) rename src/nodes/io/{Outputs.spec.js => Outputs.spec.ts} (96%) rename src/nodes/io/{serializer.js => serializer.ts} (100%) diff --git a/package-lock.json b/package-lock.json index 87de03b..018dcea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1243,6 +1243,11 @@ "@babel/types": "^7.3.0" } }, + "@types/css-font-loading-module": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.2.tgz", + "integrity": "sha512-zZTq/B1ZcJMepOfBIMEwOZ/g/jpSPUJoxP8zPtPizOKE/Q89SujK1BLYZBg+4LLW3IzJGOI67dbeePy8uPUs+g==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -1277,12 +1282,25 @@ "jest-diff": "^24.3.0" } }, + "@types/node": { + "version": "12.12.16", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.16.tgz", + "integrity": "sha512-vRuMyoOr5yfNf8QWxXegOjeyjpWJxFePzHzmBOIzDIzo+rSqF94RW0PkS6y4T2+VjAWLXHWrfbIJY3E3aS7lUw==" + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==", "dev": true }, + "@types/uuid": { + "version": "3.4.6", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.6.tgz", + "integrity": "sha512-cCdlC/1kGEZdEglzOieLDYBxHsvEOIg7kp/2FYyVR9Pxakq+Qf/inL3RKQ+PA8gOlI/NnL+fXmQH12nwcGzsHw==", + "requires": { + "@types/node": "*" + } + }, "@types/yargs": { "version": "13.0.3", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.3.tgz", @@ -5553,6 +5571,12 @@ "prelude-ls": "~1.1.2" } }, + "typescript": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.3.tgz", + "integrity": "sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==", + "dev": true + }, "uglify-js": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.1.tgz", diff --git a/package.json b/package.json index 0171a10..0c944bb 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "webpack-dev-server --quiet --progress --watch --mode development", "build": "webpack --mode production --quiet --progress", + "ts-check": "tsc --noEmit --project tsconfig.json", "test": "jest" }, "keywords": [ @@ -22,9 +23,12 @@ "@types/jest": "^24.0.0", "babel-jest": "^24.6.0", "babel-polyfill": "^6.26.0", - "jest": "^24.9.0" + "jest": "^24.9.0", + "typescript": "^3.7.3" }, "dependencies": { + "@types/css-font-loading-module": "0.0.2", + "@types/uuid": "^3.4.6", "uuid": "^3.3.3" }, "jest": { diff --git a/src/canvas/CanvasPool.ts b/src/canvas/CanvasPool.ts index 05f0dad..a408a6c 100644 --- a/src/canvas/CanvasPool.ts +++ b/src/canvas/CanvasPool.ts @@ -1,4 +1,4 @@ -type PoolCanvas = T & { +export type PoolCanvas = T & { acquire(): void release(): void } diff --git a/src/helpers/listener.js b/src/helpers/listener.ts similarity index 78% rename from src/helpers/listener.js rename to src/helpers/listener.ts index 1ed78af..fcad95b 100644 --- a/src/helpers/listener.js +++ b/src/helpers/listener.ts @@ -1,16 +1,20 @@ -export class Subject { +type Listener = ((val: V) => void); + +export class Subject { + + __listeners: Listener[] constructor() { this.__listeners = []; } - next(val) { + next(val:V) { for (let listener of this.__listeners) { listener(val); } } - once() { + once():Promise { return new Promise((resolve) => { const done = (val) => { resolve(val); @@ -20,11 +24,11 @@ export class Subject { }) } - on(fn) { + on(fn:Listener) { this.__listeners.push(fn); } - off(fn) { + off(fn:Listener) { this.__listeners = this.__listeners.filter((listener) => listener !== fn); } @@ -33,11 +37,12 @@ export class Subject { } } - - export class MultiSubject { + __subjects: { + [name: string]: Subject + } - constructor(types) { + constructor(types: string[]) { this.__subjects = {}; for (let type of types) { this.__subjects[type] = new Subject(); diff --git a/src/nodes/Canvas2d/Canvas2d.ts b/src/nodes/Canvas2d/Canvas2d.ts index f03d535..6fc83de 100644 --- a/src/nodes/Canvas2d/Canvas2d.ts +++ b/src/nodes/Canvas2d/Canvas2d.ts @@ -5,13 +5,17 @@ import { Variables, ImageVar, BooleanVar, - NumberVar + NumberVar, + VariableValueType } from '../io/AbstractIOSet'; const inputs = { image: { type: 'Image', } as ImageVar, + width: { + type: 'Number', + } as NumberVar, }; const outputs = { @@ -29,11 +33,10 @@ const outputs = { export default class Canvas2d extends Node { - constructor(name, inputDefinition: I, outputDefiniton: O, options) { + constructor(name, inputDefinition: I, outputDefiniton: O) { super(name, merge(inputs, inputDefinition), merge(outputs, outputDefiniton), - options ); } @@ -42,7 +45,11 @@ export default class Canvas2d extends } async _update() { - const values = {}; + type valuesType = { + [K in keyof I]: VariableValueType; + } + const values:valuesType = {}; + for (let name of Object.keys(this.in.variables)) { values[name] = await waitForMedia(this.in[name].value); } diff --git a/src/nodes/Canvas2d/Compose.ts b/src/nodes/Canvas2d/Compose.ts index 4578d4c..d2cfaa5 100644 --- a/src/nodes/Canvas2d/Compose.ts +++ b/src/nodes/Canvas2d/Compose.ts @@ -1,4 +1,5 @@ import Canvas2d from './Canvas2d'; +import {PoolCanvas} from '../../canvas/CanvasPool'; import {createCanvas, mediaSize, paintToCanvas} from '../canvas'; import { ImageVar, @@ -89,7 +90,7 @@ const outputs = { export default class Compose extends Canvas2d { constructor(options={}) { - super('Compose', inputs, outputs, options); + super('Compose', inputs, outputs); } get width() { @@ -149,13 +150,13 @@ export default class Compose extends Canvas2d { ctx.globalCompositeOperation = 'source-over'; if (this.bg) { - paintToCanvas(canvas, this.bg.image, this.bg); + paintToCanvas(canvas, >this.bg.image, this.bg); } ctx.globalCompositeOperation = mode; if (this.fg) { - paintToCanvas(canvas, this.fg.image, this.fg); + paintToCanvas(canvas, >this.fg.image, this.fg); } return canvas; diff --git a/src/nodes/Canvas2d/EmptySpace.ts b/src/nodes/Canvas2d/EmptySpace.ts index b5a0b70..68bce41 100644 --- a/src/nodes/Canvas2d/EmptySpace.ts +++ b/src/nodes/Canvas2d/EmptySpace.ts @@ -29,7 +29,7 @@ const outputs = { export default class EmptySpace extends Canvas2d { constructor() { - super('EmptySpace', inputs, outputs, {}); + super('EmptySpace', inputs, outputs); this._update(); } diff --git a/src/nodes/Canvas2d/Flip.ts b/src/nodes/Canvas2d/Flip.ts index deedad2..52c3ac2 100644 --- a/src/nodes/Canvas2d/Flip.ts +++ b/src/nodes/Canvas2d/Flip.ts @@ -20,7 +20,7 @@ const outputs = {}; export default class Flip extends Canvas2d { constructor() { - super('Flip', inputs, outputs, {}); + super('Flip', inputs, outputs); this._update(); } diff --git a/src/nodes/Canvas2d/ImageIdentity.js b/src/nodes/Canvas2d/ImageIdentity.js index 9a2817e..27c57f6 100644 --- a/src/nodes/Canvas2d/ImageIdentity.js +++ b/src/nodes/Canvas2d/ImageIdentity.js @@ -1,3 +1,4 @@ +// @ts-nocheck import Node from './Canvas2d'; import {waitForMedia} from '../../utils'; import {createCanvas, mediaSize, paintToCanvas} from '../canvas'; diff --git a/src/nodes/Canvas2d/Resize.ts b/src/nodes/Canvas2d/Resize.ts index 0666bc9..c3c7702 100644 --- a/src/nodes/Canvas2d/Resize.ts +++ b/src/nodes/Canvas2d/Resize.ts @@ -1,6 +1,6 @@ import Canvas2d from './Canvas2d'; import {waitForMedia} from '../../utils'; -import {createCanvas, mediaSize, paintToCanvas} from '../canvas'; +import {createCanvas, mediaSize, paintToCanvas, Bounds} from '../canvas'; import { ImageVar, StringVar, @@ -27,7 +27,7 @@ const outputs = {}; export default class Resize extends Canvas2d { constructor() { - super('Resize', inputs, outputs, {}); + super('Resize', inputs, outputs); } /** @@ -52,7 +52,7 @@ export default class Resize extends Canvas2d { const {width: destWidth, height: destHeight} = mediaSize(canvas); const srcAspectRatio = (srcWidth / srcHeight); const destAspectRatio = (destWidth / destHeight); - const newImage = {}; + const newImage:Partial = {}; if (srcAspectRatio > destAspectRatio) { newImage.width = destHeight * srcAspectRatio; newImage.height = destHeight; @@ -64,7 +64,7 @@ export default class Resize extends Canvas2d { newImage.top = (destHeight - newImage.height) / 2; newImage.left = (destWidth - newImage.width) / 2; - paintToCanvas(canvas, media, newImage); + paintToCanvas(canvas, media, newImage); return canvas; } } \ No newline at end of file diff --git a/src/nodes/Canvas2d/Text.ts b/src/nodes/Canvas2d/Text.ts index 93a3142..d355701 100644 --- a/src/nodes/Canvas2d/Text.ts +++ b/src/nodes/Canvas2d/Text.ts @@ -65,7 +65,7 @@ const outputs = {}; export default class Resize extends Canvas2d { constructor() { - super('Text', inputs, outputs, {}); + super('Text', inputs, outputs); this._update(); } diff --git a/src/nodes/Disable.ts b/src/nodes/Disable.ts index 52c9827..3a89efc 100644 --- a/src/nodes/Disable.ts +++ b/src/nodes/Disable.ts @@ -26,7 +26,7 @@ const outputs = { export default class Disable extends Node { constructor() { - super('Disable', inputs, outputs, {}); + super('Disable', inputs, outputs); } async _update() { diff --git a/src/nodes/Font.ts b/src/nodes/Font.ts index 1e921d0..9c3d372 100644 --- a/src/nodes/Font.ts +++ b/src/nodes/Font.ts @@ -36,7 +36,7 @@ const outputs = { export default class Font extends Node { constructor() { - super('Font', inputs, outputs, {}); + super('Font', inputs, outputs); } async _update() { diff --git a/src/nodes/Math/NumberBinaryOperation.ts b/src/nodes/Math/NumberBinaryOperation.ts index 08e61da..7320c31 100644 --- a/src/nodes/Math/NumberBinaryOperation.ts +++ b/src/nodes/Math/NumberBinaryOperation.ts @@ -36,7 +36,7 @@ const outputs = { export default class NumberBinaryOperation extends Node { constructor() { - super('NumberBinaryOperation', inputs, outputs, {}); + super('NumberBinaryOperation', inputs, outputs); } async _update() { diff --git a/src/nodes/Math/Numbers.ts b/src/nodes/Math/Numbers.ts index 6188d1e..10d4f00 100644 --- a/src/nodes/Math/Numbers.ts +++ b/src/nodes/Math/Numbers.ts @@ -37,7 +37,7 @@ const outputs = { export default class Numbers extends Node { constructor() { - super('Numbers', inputs, outputs, {}); + super('Numbers', inputs, outputs); } async _update() { diff --git a/src/nodes/Node.ts b/src/nodes/Node.ts index 1383f58..4b83575 100644 --- a/src/nodes/Node.ts +++ b/src/nodes/Node.ts @@ -1,5 +1,5 @@ import {Inputs, Outputs} from './io/index'; -import uuidv4 from 'uuid/v4'; +import { v4 as uuid } from 'uuid'; import {Variables, InputProperties, OutputProperties} from './io/AbstractIOSet'; import {MultiSubject} from '../helpers/listener'; @@ -16,10 +16,10 @@ export default class Node { _stopped: boolean subject: MultiSubject - constructor(name: string, inputDefinition: I, outputDefiniton: O, options) { + constructor(name: string, inputDefinition: I, outputDefiniton: O) { this.name = name; - this.uid = uuidv4(); - this.id = uuidv4(); + this.uid = uuid(); + this.id = uuid(); this.__in = new Inputs(inputDefinition, this) as Inputs & InputProperties; this.__out = new Outputs(outputDefiniton, this) as Outputs & OutputProperties; this.__in.update = (name) => this.__update([name]); @@ -95,7 +95,7 @@ export default class Node { } async deserialize({id, options}) { - this.id = id || uuidv4(); + this.id = id || uuid(); } async reconnect({options}, outputs) { diff --git a/src/nodes/Synchronize.js b/src/nodes/Synchronize.js index b49b4a6..8e8180b 100644 --- a/src/nodes/Synchronize.js +++ b/src/nodes/Synchronize.js @@ -1,3 +1,4 @@ +// @ts-nocheck import Node from './Node'; export default class Numbers extends Node { diff --git a/src/nodes/ToBlob.js b/src/nodes/ToBlob.js index 22db00c..a334478 100644 --- a/src/nodes/ToBlob.js +++ b/src/nodes/ToBlob.js @@ -1,3 +1,4 @@ +// @ts-nocheck import Node from './Node'; import {createCanvas} from './canvas'; diff --git a/src/nodes/WebGL/Tint.js b/src/nodes/WebGL/Tint.ts similarity index 80% rename from src/nodes/WebGL/Tint.js rename to src/nodes/WebGL/Tint.ts index aa8ea17..8e35180 100644 --- a/src/nodes/WebGL/Tint.js +++ b/src/nodes/WebGL/Tint.ts @@ -1,19 +1,19 @@ import WebGL from './WebGl'; +import { + NumberVar +} from '../io/AbstractIOSet'; +const inputs = { + amount: { + type: 'Number', + default: 0, + } as NumberVar, +} -export default class Sepia extends WebGL { +export default class Sepia extends WebGL { constructor() { - super('Tint', { - amount: { - type: 'Number', - default: 0, - }, - amount: { - type: 'Color', - default: '', - }, - }) + super('Tint', inputs) } get frag() { diff --git a/src/nodes/WebGL/WebGl.ts b/src/nodes/WebGL/WebGl.ts index 9978f5a..6b5693a 100644 --- a/src/nodes/WebGL/WebGl.ts +++ b/src/nodes/WebGL/WebGl.ts @@ -1,7 +1,7 @@ import Node from '../Node'; import {createCanvas, mediaSize, paintToCanvas} from '../canvas'; import {merge} from '../../utils'; -import {canvasPool2D} from '../../canvas/CanvasPool'; +import {canvasPool2D, PoolCanvas} from '../../canvas/CanvasPool'; import { Variables, ImageVar, @@ -36,7 +36,6 @@ export default class WebGL extends Node extends Node { + ( + gl: WebGLRenderingContext, + program: WebGLProgram, + // image + ) => { this._setParams(gl, program); }, ] @@ -190,7 +193,7 @@ export default class WebGL extends Node>this.in.image.value; if (!image) { return; } @@ -230,7 +233,7 @@ export default class WebGL extends Node>this.image)); } const texcoordBuffer = gl.createBuffer(); @@ -309,8 +312,8 @@ export default class WebGL extends Node>this.out.image.value).release) { + (>this.out.image.value).release(); } this.out.image.value = resultCanvas; if (this.out.width.value !== this.out.image.value.width) { diff --git a/src/nodes/Webcam.js b/src/nodes/Webcam.js index 274724f..5603adc 100644 --- a/src/nodes/Webcam.js +++ b/src/nodes/Webcam.js @@ -32,6 +32,7 @@ export default class Webcam extends Node { /** @type {HTMLVideoElement} */ const video = document.createElement('video'); + // @ts-ignore video.playsinline = true; video.srcObject = stream; video.play(); diff --git a/src/nodes/io/Input.ts b/src/nodes/io/Input.ts index 881643c..5230256 100644 --- a/src/nodes/io/Input.ts +++ b/src/nodes/io/Input.ts @@ -8,7 +8,7 @@ import {serialize, deserialize} from './serializer'; export default class Input extends AbstractIO { - __output: Output + __output: Output __onchangelistener: Function constructor(name, definition, owner) { @@ -35,7 +35,7 @@ export default class Input extends AbstractIO { return this.__output; } - connect(output: Output) { + connect(output: Output) { if (output && output.type === this.type) { this.disconnect(); this.__output = output diff --git a/src/nodes/io/Inputs.spec.js b/src/nodes/io/Inputs.spec.ts similarity index 97% rename from src/nodes/io/Inputs.spec.js rename to src/nodes/io/Inputs.spec.ts index 5b5603c..7f20c1c 100644 --- a/src/nodes/io/Inputs.spec.js +++ b/src/nodes/io/Inputs.spec.ts @@ -24,6 +24,7 @@ describe('Inputs', () => { type: 'String', default: 'foo' }, + // @ts-ignore }, owner) expect(inputs.x.type).toBe('Number'); diff --git a/src/nodes/io/Outputs.spec.js b/src/nodes/io/Outputs.spec.ts similarity index 96% rename from src/nodes/io/Outputs.spec.js rename to src/nodes/io/Outputs.spec.ts index 86040f3..b2831ae 100644 --- a/src/nodes/io/Outputs.spec.js +++ b/src/nodes/io/Outputs.spec.ts @@ -21,6 +21,7 @@ describe('Outputs', () => { type: 'String', default: 'foo' }, + // @ts-ignore }, owner) expect(inputs.x.type).toBe('Number'); diff --git a/src/nodes/io/serializer.js b/src/nodes/io/serializer.ts similarity index 100% rename from src/nodes/io/serializer.js rename to src/nodes/io/serializer.ts