TypeScript!

build/build.ts

@@ -1,17 +1,18 @@
-const path = require("path");
-const fs = require("fs");
-const { promisify } = require("util");
-const { rollup } = require("rollup");
-const rollupReplace = require("rollup-plugin-replace");
-const rollupJson = require("rollup-plugin-json");
-const { terser } = require("rollup-plugin-terser");
-const webpack = require("webpack");
-const postcss = require("postcss");
-const postcssImport = require("postcss-import");
-const postcssCssNext = require("postcss-cssnext");
-const cssnano = require("cssnano");
+import * as path from "path";
+import * as fs from "fs";
+import { promisify } from "util";
+import { rollup, WarningHandler } from "rollup";
+import rollupReplace from "rollup-plugin-replace";
+import rollupJson from "rollup-plugin-json";
+import typescript from "rollup-plugin-typescript";
+import { terser } from "rollup-plugin-terser";
+import webpack from "webpack";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssCssNext from "postcss-cssnext";
+import cssnano from "cssnano";
 
-const MODE = "production";
+const MODE = process.env["NODE_ENV"] || "production";
 
 const BUILD_METADATA = new Date()
   .toISOString()
@@ -49,10 +50,12 @@ const externals = [
   "jsonwebtoken",
   "stream",
   "mithril",
-  "parsimmon"
+  "parsimmon",
+  "codemirror",
+  "codemirror/mode/javascript/javascript"
 ];
 
-function rmDirSync(dirPath) {
+function rmDirSync(dirPath): void {
   if (!fs.existsSync(dirPath)) return;
   const files = fs.readdirSync(dirPath);
 
@@ -64,7 +67,7 @@ function rmDirSync(dirPath) {
   fs.rmdirSync(dirPath);
 }
 
-async function init() {
+async function init(): Promise<void> {
   // Delete any old output directory
   rmDirSync(OUTPUT_DIR);
 
@@ -77,7 +80,9 @@ async function init() {
   fs.mkdirSync(OUTPUT_DIR + "/tools");
 
   // Create package.json
-  const packageJson = require("../package.json");
+  const packageJson = JSON.parse(
+    fs.readFileSync(path.resolve(INPUT_DIR, "package.json")).toString()
+  );
   delete packageJson["devDependencies"];
   packageJson["scripts"] = {
     install: packageJson["scripts"].install,
@@ -90,7 +95,7 @@ async function init() {
   );
 }
 
-async function copyStatic() {
+async function copyStatic(): Promise<void> {
   const files = [
     "LICENSE",
     "README.md",
@@ -111,7 +116,7 @@ async function copyStatic() {
   }
 }
 
-async function generateCss() {
+async function generateCss(): Promise<void> {
   const cssInPath = path.resolve(INPUT_DIR, "ui/css/app.css");
   const cssOutPath = path.resolve(OUTPUT_DIR, "public/app.css");
   const cssIn = fs.readFileSync(cssInPath);
@@ -123,7 +128,7 @@ async function generateCss() {
   fs.writeFileSync(cssOutPath, cssOut.css);
 }
 
-async function generateToolsJs() {
+async function generateToolsJs(): Promise<void> {
   for (const bin of ["configure-ui", "dump-data-model"]) {
     const inputFile = path.resolve(INPUT_DIR, `tools/${bin}`);
     const outputFile = path.resolve(OUTPUT_DIR, `tools/${bin}`);
@@ -136,7 +141,11 @@ async function generateToolsJs() {
       plugins: [
         rollupReplace({
           delimiters: ["", ""],
-          "#!/usr/bin/env -S node -r esm": ""
+          "#!/usr/bin/env -S node -r esm -r ts-node/register/transpile-only": ""
+        }),
+        typescript({
+          tsconfig: "./tsconfig.json",
+          include: [`tools/${bin}`, "lib/**/*.ts"]
         }),
         MODE === "production" ? terser() : null
       ]
@@ -155,7 +164,7 @@ async function generateToolsJs() {
   }
 }
 
-async function generateBackendJs() {
+async function generateBackendJs(): Promise<void> {
   for (const bin of [
     "genieacs-cwmp",
     "genieacs-ext",
@@ -178,7 +187,7 @@ async function generateBackendJs() {
       plugins: [
         rollupReplace({
           delimiters: ["", ""],
-          "#!/usr/bin/env -S node -r esm": ""
+          "#!/usr/bin/env -S node -r esm -r ts-node/register/transpile-only": ""
         }),
         rollupJson({ preferConst: true }),
         {
@@ -191,6 +200,10 @@ async function generateBackendJs() {
             return null;
           }
         },
+        typescript({
+          tsconfig: "./tsconfig.json",
+          include: [`bin/${bin}`, "lib/**/*.ts"]
+        }),
         MODE === "production" ? terser() : null
       ]
     });
@@ -208,23 +221,26 @@ async function generateBackendJs() {
   }
 }
 
-async function generateFrontendJs() {
-  const inputFile = path.resolve(INPUT_DIR, "ui/app.js");
+async function generateFrontendJs(): Promise<void> {
+  const inputFile = path.resolve(INPUT_DIR, "ui/app.ts");
   const outputFile = path.resolve(OUTPUT_DIR, "public/app.js");
 
   const bundle = await rollup({
     input: inputFile,
     external: externals,
-    plugins: [rollupJson({ preferConst: true })],
+    plugins: [
+      rollupJson({ preferConst: true }),
+      typescript({ tsconfig: "./tsconfig.json" })
+    ],
     inlineDynamicImports: true,
     treeshake: {
       propertyReadSideEffects: false,
       pureExternalModules: true
     },
-    onwarn: (warning, warn) => {
+    onwarn: ((warning, warn) => {
       // Ignore circular dependency warnings
       if (warning.code !== "CIRCULAR_DEPENDENCY") warn(warning);
-    }
+    }) as WarningHandler
   });
 
   await bundle.write({
@@ -236,6 +252,9 @@ async function generateFrontendJs() {
   const webpackConf = {
     mode: MODE,
     entry: outputFile,
+    resolve: {
+      aliasFields: ["module"]
+    },
     output: {
       path: path.resolve(OUTPUT_DIR, "public"),
       filename: "app.js"