WIP: chore: migrate to ts

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+docs

.eslintrc.json

@@ -1,12 +1,13 @@
 {
-    "plugins": ["cypress"],
+    "plugins": ["cypress", "@typescript-eslint"],
     "env": {
         "browser": true,
         "es6": true,
         "jest": true,
         "cypress/globals": true
     },
     "extends": "eslint:recommended",
+    "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "sourceType": "module",
         "ecmaVersion": 2017
@@ -31,6 +32,8 @@
             "error",
             "always"
         ],
-        "no-console": 0
+        "no-console": 0,
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "error"
     }
 }

.prettierrc

@@ -5,6 +5,6 @@
     "singleQuote": false,
     "trailingComma": "none",
     "bracketSpacing": true,
-    "parser": "babylon",
+    "parser": "babel-ts",
     "semi": true
 }

.babelrc → babel.config.json

@@ -1,6 +1,7 @@
 {
     "presets": [
-        "env"
+        "@babel/preset-env",
+        "@babel/preset-typescript"
     ],
     "plugins": [
         "add-module-exports"

package.json

@@ -8,6 +8,7 @@
   },
   "license": "Apache-2.0",
   "main": "dist/videocontext.js",
+  "types": "dist/videocontext.d.ts",
   "keywords": [
     "video",
     "context",
@@ -42,8 +43,8 @@
     "_server_cy_then": "start-server-and-test _cy-server http://localhost:3001",
     "docs": "bash ./build-docs.sh",
     "docs-commit": "yarn docs && git add docs && git diff-index --quiet HEAD || git commit -m 'update docs in preparation for release'",
-    "format": "prettier --write '{src,test}/**/*.js'",
-    "lint": "eslint '{src,test}/**/*.js'",
+    "format": "prettier --write  'src/**/*.ts' 'test/**/*.js'",
+    "lint": "eslint 'src/**/*.ts' 'test/**/*.js'",
     "precommit": "yarn lint && yarn format && yarn test-unit",
     "release:major": "yarn docs-commit && changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && yarn version --new-version major",
     "release:minor": "yarn docs-commit && changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && yarn version --new-version minor",
@@ -54,29 +55,35 @@
     "regenerator-runtime": "^0.11.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.21.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.2.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-preset-env": "^1.7.0",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
     "concurrently": "^7.0.0",
     "cypress": "^4.4.0",
     "cypress-image-snapshot": "^4.0.1",
-    "eslint": "^4.18.2",
-    "eslint-loader": "^2.0.0",
+    "eslint": "^8.36.0",
     "eslint-plugin-cypress": "^2.2.0",
+    "eslint-webpack-plugin": "^4.0.0",
     "generate-changelog": "^1.7.1",
     "husky": "^0.14.3",
-    "jest": "^29.3.1",
-    "jest-cli": "^23.1.0",
+    "jest": "^29.5.0",
+    "jest-cli": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-image-snapshot": "^6.0.0",
     "jsdoc": "^3.4.3",
     "local-web-server": "^2.6.1",
-    "prettier": "^1.13.2",
+    "prettier": "^2.8.4",
     "raw-loader": "^0.5.1",
     "sinon": "^7.2.7",
     "start-server-and-test": "^1.7.11",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.2",
     "webgl-mock": "^0.1.7",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"
@@ -85,9 +92,14 @@
     "dist"
   ],
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(frag|vert)$": "<rootDir>/test/__mocks__/glsl.js"
     },
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
     "testMatch": [
       "**/test/(integration|unit)/?(*.)+(spec|test).js?(x)"
     ]

src/Definitions/definitions.ts

@@ -0,0 +1,61 @@
+import aaf_video_scale from "./aaf_video_scale/aaf_video_scale";
+import crossfade from "./crossfade/crossfade";
+import horizontalWipe from "./horizontalWipe/horizontalWipe";
+import verticalWipe from "./verticalWipe/verticalWipe";
+import randomDissolve from "./randomDissolve/randomDissolve";
+import toColorAndBackFade from "./toColorAndBackFade/toColorAndBackFade";
+import starWipe from "./starWipe/starWipe";
+import combine from "./combine/combine";
+import colorThreshold from "./colorThreshold/colorThreshold";
+import monochrome from "./monochrome/monochrome";
+import horizontalBlur from "./horizontalBlur/horizontalBlur";
+import verticalBlur from "./verticalBlur/verticalBlur";
+import aaf_video_flop from "./aaf_video_flop/aaf_video_flop";
+import aaf_video_flip from "./aaf_video_flip/aaf_video_flip";
+import aaf_video_position from "./aaf_video_position/aaf_video_position";
+import aaf_video_crop from "./aaf_video_crop/aaf_video_crop";
+import staticDissolve from "./staticDissolve/staticDissolve";
+import staticEffect from "./staticEffect/staticEffect";
+import dreamfade from "./dreamfade/dreamfade";
+import opacity from "./opacity/opacity";
+import crop from "./crop/crop";
+
+export interface IDefinition {
+    title?: string;
+    description?: string;
+    vertexShader: string;
+    fragmentShader: string;
+    properties: {
+        [key: string]: {
+            type: string;
+            value: any;
+        };
+    };
+    inputs: string[];
+}
+
+let DEFINITIONS = {
+    AAF_VIDEO_SCALE: aaf_video_scale,
+    CROSSFADE: crossfade,
+    DREAMFADE: dreamfade,
+    HORIZONTAL_WIPE: horizontalWipe,
+    VERTICAL_WIPE: verticalWipe,
+    RANDOM_DISSOLVE: randomDissolve,
+    STATIC_DISSOLVE: staticDissolve,
+    STATIC_EFFECT: staticEffect,
+    TO_COLOR_AND_BACK: toColorAndBackFade,
+    STAR_WIPE: starWipe,
+    COMBINE: combine,
+    COLORTHRESHOLD: colorThreshold,
+    MONOCHROME: monochrome,
+    HORIZONTAL_BLUR: horizontalBlur,
+    VERTICAL_BLUR: verticalBlur,
+    AAF_VIDEO_CROP: aaf_video_crop,
+    AAF_VIDEO_POSITION: aaf_video_position,
+    AAF_VIDEO_FLIP: aaf_video_flip,
+    AAF_VIDEO_FLOP: aaf_video_flop,
+    OPACITY: opacity,
+    CROP: crop
+};
+
+export default DEFINITIONS;

src/DestinationNode/destinationnode.js → src/DestinationNode/destinationnode.ts

@@ -1,5 +1,7 @@
 //Matthew Shotton, R&D User Experience,© BBC 2015
 import ProcessingNode from "../ProcessingNodes/processingnode";
+import RenderGraph from "../rendergraph";
+import SourceNode from "../SourceNodes/sourcenode";
 import fragmentShader from "./destinationnode.frag";
 import vertexShader from "./destinationnode.vert";
 
@@ -13,7 +15,7 @@ class DestinationNode extends ProcessingNode {
      *
      * You should not instantiate this directly.
      */
-    constructor(gl, renderGraph) {
+    constructor(gl: WebGLRenderingContext, renderGraph: RenderGraph) {
         let definition = {
             fragmentShader,
             vertexShader,
@@ -34,10 +36,10 @@ class DestinationNode extends ProcessingNode {
         gl.clearColor(0, 0, 0, 0.0); // green;
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.inputs.forEach(node => {
+        this.inputs.forEach((node) => {
             super._render();
             //map the input textures input the node
-            var texture = node._texture;
+            var texture = (node as SourceNode | ProcessingNode)._texture;
 
             for (let mapping of this._shaderInputsTextureUnitMapping) {
                 gl.activeTexture(mapping.textureUnit);

src/ProcessingNodes/compositingnode.js → src/ProcessingNodes/compositingnode.ts

@@ -1,14 +1,18 @@
 //Matthew Shotton, R&D User Experience,© BBC 2015
 import ProcessingNode from "./processingnode";
-import { createElementTexture } from "../utils.js";
+import { createElementTexture } from "../utils";
+import RenderGraph from "../rendergraph";
+import { IDefinition } from "../Definitions/definitions";
+import SourceNode from "../SourceNodes/sourcenode";
 
 const TYPE = "CompositingNode";
 
 class CompositingNode extends ProcessingNode {
+    _placeholderTexture: WebGLTexture | null;
     /**
      * Initialise an instance of a Compositing Node. You should not instantiate this directly, but use VideoContest.createCompositingNode().
      */
-    constructor(gl, renderGraph, definition) {
+    constructor(gl: WebGLRenderingContext, renderGraph: RenderGraph, definition: IDefinition) {
         let placeholderTexture = createElementTexture(gl);
         gl.texImage2D(
             gl.TEXTURE_2D,
@@ -40,12 +44,12 @@ class CompositingNode extends ProcessingNode {
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-        this.inputs.forEach(node => {
+        this.inputs.forEach((node) => {
             if (node === undefined) return;
             super._render();
 
             //map the input textures input the node
-            var texture = node._texture;
+            var texture = (node as SourceNode | ProcessingNode)._texture;
 
             for (let mapping of this._shaderInputsTextureUnitMapping) {
                 gl.activeTexture(mapping.textureUnit);

src/ProcessingNodes/effectnode.js → src/ProcessingNodes/effectnode.ts

@@ -1,14 +1,18 @@
 //Matthew Shotton, R&D User Experience,© BBC 2015
 import ProcessingNode from "./processingnode";
-import { createElementTexture } from "../utils.js";
+import { createElementTexture } from "../utils";
+import RenderGraph from "../rendergraph";
+import { IDefinition } from "../Definitions/definitions";
+import SourceNode from "../SourceNodes/sourcenode";
 
 const TYPE = "EffectNode";
 
 class EffectNode extends ProcessingNode {
+    _placeholderTexture: WebGLTexture | null;
     /**
      * Initialise an instance of an EffectNode. You should not instantiate this directly, but use VideoContest.createEffectNode().
      */
-    constructor(gl, renderGraph, definition) {
+    constructor(gl: WebGLRenderingContext, renderGraph: RenderGraph, definition: IDefinition) {
         let placeholderTexture = createElementTexture(gl);
         gl.texImage2D(
             gl.TEXTURE_2D,
@@ -50,7 +54,7 @@ class EffectNode extends ProcessingNode {
             let inputTexture = this._placeholderTexture;
             let textureUnit = this._shaderInputsTextureUnitMapping[i].textureUnit;
             if (i < inputs.length && inputs[i] !== undefined) {
-                inputTexture = inputs[i]._texture;
+                inputTexture = (inputs[i] as SourceNode | ProcessingNode)._texture;
             }
 
             gl.activeTexture(textureUnit);