Introduce build.js

Author: rexim

README.md

@@ -17,13 +17,13 @@ $ python3 -m http.server 6969
 $ iexplore.exe http://localhost:6969/
 ```
 
-## Development Workflow
+## Building
 
-1. `$ npm install`
-2. `$ ./node_modules/.bin/tsc -w`
-3. `<edit files>`
+TBD
 
-Make sure that you commit the generated `js/*` files along with your changes. This is important for the project to retain that "Just deploy the repo" attitude.
+## Watching
+
+TBD
 
 # Filter Development
 

build.js

@@ -0,0 +1,79 @@
+const child_process = require("child_process");
+const spawn = child_process.spawn;
+
+function cmd(program, args) {
+    console.log('CMD:', program, args);
+    const p = spawn(program, args);
+    p.stdout.on('data', (data) => process.stdout.write(data));
+    p.stderr.on('data', (data) => process.stderr.write(data));
+    p.on('close', (code) => {
+        if (code !== 0) {
+            console.error(program, args, 'exited with', code);
+        }
+    });
+}
+
+const commonTscFlags = [
+    '--strict', 'true',
+    '--removeComments', 'true'
+];
+
+const mainTs = [
+    'ts/eval.ts',
+    'ts/filters.ts',
+    'ts/grecha.ts',
+    'ts/index.ts'
+];
+
+function tscMain(...extraParams) {
+    cmd('tsc', [
+        ...commonTscFlags,
+        '--outDir', 'js',
+        ...extraParams,
+        ...mainTs,
+    ]);
+}
+
+function tscServiceWorker(...extraParams) {
+    cmd('tsc', [
+        ...commonTscFlags,
+        '--lib', 'webworker',
+        '--skipLibCheck', 'true',
+        '--outFile', 'serviceworker.js',
+        ...extraParams,
+        'serviceworker.ts'
+    ]);
+}
+
+function build(target, ...args) {
+    if (target === undefined) {
+        tscServiceWorker();
+        tscMain();
+    } else if (target === 'main') {
+        tscMain();
+    } else if (target === 'serviceworker') {
+        tscServiceWorker();
+    } else {
+        throw new Error(`Unknown build target {target}`);
+    }
+}
+
+function watch(target, ...args) {
+    if (target === undefined || target === 'main') {
+        tscMain('-w');
+    } else if (target === 'serviceworker') {
+        tscServiceWorker('-w');
+    } else {
+        throw new Error(`Unknown watch target {target}`);
+    }
+}
+
+const [nodePath, scriptPath, command, ...args] = process.argv;
+
+if (command === undefined) {
+    build(...args);
+} else if (command === 'watch') {
+    watch(...args);
+} else {
+    throw new Error(`Unknown command {command}`);
+}

js/eval.js

@@ -28,7 +28,7 @@ var BINARY_OPS = {
     }
 };
 var UNARY_OPS = {
-    '-': function (arg) { return -arg; },
+    '-': function (arg) { return -arg; }
 };
 var Lexer = (function () {
     function Lexer(src) {
@@ -73,8 +73,8 @@ function parse_primary(lexer) {
                 "kind": "unary_op",
                 "payload": {
                     "op": token,
-                    "operand": operand,
-                },
+                    "operand": operand
+                }
             };
         }
         else if (token === '(') {
@@ -98,7 +98,7 @@ function parse_primary(lexer) {
                         "kind": "funcall",
                         "payload": {
                             "name": token,
-                            "args": args,
+                            "args": args
                         }
                     };
                 }
@@ -119,7 +119,7 @@ function parse_primary(lexer) {
                     "kind": "funcall",
                     "payload": {
                         "name": token,
-                        "args": args,
+                        "args": args
                     }
                 };
             }
@@ -155,7 +155,7 @@ function parse_expr(lexer, prec) {
                 "payload": {
                     "op": op_token,
                     "lhs": lhs,
-                    "rhs": rhs,
+                    "rhs": rhs
                 }
             };
         }

js/filters.js

@@ -71,7 +71,7 @@ function loadFilterProgram(gl, filter, vertexAttribs) {
     var uniforms = {
         "resolution": gl.getUniformLocation(id, 'resolution'),
         "time": gl.getUniformLocation(id, 'time'),
-        "emoteSize": gl.getUniformLocation(id, 'emoteSize'),
+        "emoteSize": gl.getUniformLocation(id, 'emoteSize')
     };
     var paramsPanel = div().att$("class", "widget-element");
     var paramsInputs = {};
@@ -129,7 +129,7 @@ function loadFilterProgram(gl, filter, vertexAttribs) {
         "uniforms": uniforms,
         "duration": compile_expr(filter.duration),
         "transparent": filter.transparent,
-        "paramsPanel": paramsPanel,
+        "paramsPanel": paramsPanel
     };
 }
 function ImageSelector() {
@@ -286,7 +286,7 @@ function FilterSelector() {
             quality: 10,
             width: CANVAS_WIDTH,
             height: CANVAS_HEIGHT,
-            transparent: program.transparent,
+            transparent: program.transparent
         });
         var context = {
             "vars": {
@@ -346,7 +346,7 @@ function FilterSelector() {
             }
             gif.addFrame(new ImageData(pixels, CANVAS_WIDTH, CANVAS_HEIGHT), {
                 delay: dt * 1000,
-                dispose: 2,
+                dispose: 2
             });
             renderProgress.style.width = (t / duration) * 50 + "%";
             t += dt;
@@ -382,7 +382,9 @@ function FilterSelector() {
     return root;
 }
 window.onload = function () {
-    fetch("gif.worker.js");
+    fetch("gif.worker.js").then(function () {
+        console.log("Prefetched gif.worker.js");
+    });
     if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register('/serviceworker.js').then(function (registration) {
             console.log("Registered a Service Worker ", registration);

js/index.js

@@ -4,6 +4,8 @@
   "description": "Simple website that generates animated BTTV emotes from static images",
   "main": "index.js",
   "scripts": {
+    "build": "node build.js",
+    "watch": "node build.js watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,6 +29,7 @@
   "homepage": "https://github.com/tsoding/emoteJAM#readme",
   "devDependencies": {
     "@types/gif.js": "^0.2.1",
+    "@types/node": "^20.9.3",
     "typescript": "^4.3.2"
   }
 }

package-lock.json

@@ -1,4 +1,3 @@
-
 self.addEventListener("install", (event) => {
     console.log("Pog! Looks like we installed something! I have no idea what that means, but here is an object the browser sent us", event);
 });
@@ -28,4 +27,3 @@ self.addEventListener("fetch", (e) => {
         })());
     }
 });
-