Upgrade Compiling/Packaging to Typescript/Webpack

1. Slowly begin migrating code to Typescript from raw Javascript
2. Instead of relying on built-in node module bundling, use webpack
3. Add a `yarn watch` command that will rebuild mw2pdf when any TS
   file is edited.

These are prerequisites (in a very yak-shaving way) for adding unit
testing to the code via Jest. See
OpenTechStrategies#20.

services/api/mw2pdf/INSTALL.md

@@ -1,8 +1,12 @@
 # Installing
 
 This script requires node.js to be installed.
-In order to run the script, you will first need to build the dependencies using `npm install`
+In order to run the script, you will first need to build the dependencies using `yarn install`
 
-## Running the script
+# Building
 
-You can run the script using `node index.js`
+`yarn build`
+
+# Running
+
+You can run the script using `node built/main.js`

services/api/mw2pdf/package.json

@@ -2,22 +2,38 @@
   "name": "mw2pdf",
   "version": "0.0.1",
   "description": "Given mediawiki URL, output PDF",
-  "main": "index.js",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js",
+    "main": "node built/main.js",
+    "watch": "npm-watch"
   },
-  "type": "module",
   "author": "Open Tech Strategies",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "commander": "^6.2.0",
     "cookiefile": "^1.0.10",
     "node-fetch": "^2.6.1",
+    "npm-watch": "^0.9.0",
     "pdf-lib": "^1.16.0",
     "pdf-merger-js": "^3.0.5",
     "pdfjs-dist": "^2.5.207",
     "pdfmake": "^0.1.68",
     "puppeteer": "^5.5.0",
     "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "ts-loader": "^9.1.1",
+    "typescript": "^4.2.4",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "watch": {
+    "build": {
+      "patterns": [ "src" ],
+      "extensions": "ts"
+    }
   }
 }

services/api/mw2pdf/classes/MediaWikiSession.js → services/api/mw2pdf/src/classes/MediaWikiSession.ts

@@ -1,22 +1,25 @@
 import puppeteer from 'puppeteer'
 import {
   PdfGenerator
-} from './PdfGenerator.js'
+} from './PdfGenerator'
 import {
   makeLoginRequest,
   makeLoginTokenRequest,
   extractLoginToken,
-} from '../utils/mediaWiki.js'
+} from '../utils/mediaWiki'
 import {
   parseCookies,
   toCookieString,
-} from '../utils/cookies.js'
+} from '../utils/cookies'
 import {
   deletePdfs,
-} from '../utils/files.js'
+} from '../utils/files'
 
 export class MediaWikiSession {
-  constructor(settings) {
+
+  cookies: any;
+
+  constructor(settings?: any) {
     this.cookies = {}
   }
 

services/api/mw2pdf/classes/Pdf.js → services/api/mw2pdf/src/classes/Pdf.ts

@@ -1,7 +1,10 @@
 import fs from 'fs'
-import pdfjsLib from 'pdfjs-dist/es5/build/pdf.js'
+import { getDocument } from 'pdfjs-dist/es5/build/pdf'
 
 export class Pdf {
+
+  path: any;
+
   constructor(path, {
     title = '',
   } = {}) {
@@ -16,7 +19,7 @@ export class Pdf {
 
   async getInfo() {
     const data = fs.readFileSync(this.path)
-    const pdf = await (pdfjsLib.getDocument(data).promise)
+    const pdf = await (getDocument(data).promise)
     const page = await pdf.getPage(1)
     return {
       numPages: pdf.numPages,

services/api/mw2pdf/classes/PdfGenerator.js → services/api/mw2pdf/src/classes/PdfGenerator.ts

@@ -9,14 +9,17 @@ import {
   rgb,
   StandardFonts,
 } from 'pdf-lib'
-import { Pdf } from './Pdf.js'
+import { Pdf } from './Pdf'
 
 // The below two lines are from
 // https://stackoverflow.com/questions/32705219/nodejs-accessing-file-with-relative-path/32707530#32707530
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export class PdfGenerator {
+
+  directory: any;
+
   constructor(directory = '') {
     Object.assign(
       this,
@@ -122,13 +125,13 @@ export class PdfGenerator {
   async generatePdfFromScaffold(scaffold, outPdf = this.generatePdfObject()) {
     const printer = new PdfPrinter({
       Roboto: {
-        normal: path.join(__dirname, '../fonts/Roboto-Regular.ttf'),
-        bold: path.join(__dirname, '../fonts/Roboto-Medium.ttf'),
-        italics: path.join(__dirname, '../fonts/Roboto-Italic.ttf'),
-        bolditalics: path.join(__dirname, '../fonts/Roboto-MediumItalic.ttf'),
+        normal: path.join(__dirname, '../../fonts/Roboto-Regular.ttf'),
+        bold: path.join(__dirname, '../../fonts/Roboto-Medium.ttf'),
+        italics: path.join(__dirname, '../../fonts/Roboto-Italic.ttf'),
+        bolditalics: path.join(__dirname, '../../fonts/Roboto-MediumItalic.ttf'),
       },
       SourceCodePro: {
-        normal: path.join(__dirname, '../fonts/SourceCodePro-Regular.ttf'),
+        normal: path.join(__dirname, '../../fonts/SourceCodePro-Regular.ttf'),
       }
     })
     // TODO: what is .end doing in this block -- is it sync? does it have to be called?

services/api/mw2pdf/index.js → services/api/mw2pdf/src/index.ts

@@ -1,7 +1,6 @@
-import fs from 'fs'
 import program from 'commander'
-import { getApiUrlFromMediaWikiUrl } from './utils/mediaWiki.js'
-import { MediaWikiSession } from './classes/MediaWikiSession.js'
+import { getApiUrlFromMediaWikiUrl } from './utils/mediaWiki'
+import { MediaWikiSession } from './classes/MediaWikiSession'
 
 program.version('0.0.1')
 program

services/api/mw2pdf/utils/mediaWiki.js → services/api/mw2pdf/src/utils/mediaWiki.ts

@@ -1,5 +1,5 @@
 import fetch from 'node-fetch'
-import { toCookieString } from './cookies.js'
+import { toCookieString } from './cookies'
 
 export async function makeLoginTokenRequest(apiUrl) {
   const loginTokenRequestParams = new URLSearchParams({
@@ -27,11 +27,11 @@ export async function extractLoginToken(loginTokenRequestResult) {
 }
 
 export async function makeLoginRequest({
-  apiUrl,
-  username,
-  password,
-  loginToken,
-  cookies,
+  apiUrl = "",
+  username = "",
+  password = "",
+  loginToken = "",
+  cookies = "",
 } = {}) {
   const loginActionRequestBody = new URLSearchParams({
     format: 'json',

services/api/mw2pdf/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "outDir": "compiled/",
+    "strict": false,
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "lib": ["dom", "es2016"],
+    "sourceMap": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src",
+    "src/classes",
+    "src/utils"
+  ],
+  "exclude": [
+    "node_modules",
+    "built",
+    ".git"
+  ]
+}

services/api/mw2pdf/webpack.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = [{
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'built'),
+  },
+  resolve: {
+    extensions: ['.js', '.ts'],
+  },
+  target: 'node',
+  entry: { main: path.resolve(__dirname, 'src/index.ts') },
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      loader: 'ts-loader',
+      options: {
+        configFile: 'tsconfig.json',
+      },
+      exclude: [/node_modules/],
+    }] 
+  },
+  externals: [nodeExternals()],
+  mode: 'none',
+}];