Upgrade deps, add vite/vitest/pnpm, use esm (#15)

Author: aeharding

.eslintrc

@@ -18,33 +18,34 @@ jobs:
   test-and-build:
     runs-on: ubuntu-latest
     container:
-      image: node:18
+      image: node:22
     steps:
       - uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - run: corepack enable
+      - name: Get pnpm cache directory path
+        id: pnpm-cache-dir-path
+        run: echo "::set-output name=dir::$(pnpm store path)"
       - uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        id: pnpm-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.pnpm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-pnpm-
       - name: Install packages
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
       - name: Test
-        run: yarn test
+        run: pnpm test
       - name: Check formatting
-        run: yarn lint
+        run: pnpm lint
       - name: Build dist
-        run: yarn run build
+        run: pnpm build
       - uses: actions/upload-artifact@v3
         with:
           name: dist
           path: dist/
       - name: Build docs
-        run: yarn run docs
+        run: pnpm run docs
       - uses: actions/upload-artifact@v3
         with:
           name: docs

.github/workflows/build.yml

@@ -1,29 +1,26 @@
 {
-    "tags": {
-        "allowUnknownTags": true,
-        "dictionaries": ["jsdoc"]
-    },
-    "source": {
-        "include": ["src", "package.json", "README.md"],
-        // "includePattern": ".js$",
-        "excludePattern": ".spec.js$"
-    },
-    "plugins": [
-        "plugins/markdown"
-    ],
-    "templates": {
-        "cleverLinks": false,
-        "monospaceLinks": true
-    },
-    "opts": {
-        "destination": "./docs/",
-        "encoding": "utf8",
-        "private": true,
-        "recurse": true,
-        "template": "./node_modules/financier-docdash"
-    },
-    "docdash": {
-        "static": true,
-        "sort": false
-    }
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc"]
+  },
+  "source": {
+    "include": ["src", "package.json", "README.md"],
+    "excludePattern": ".spec.js$"
+  },
+  "plugins": ["plugins/markdown"],
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": true
+  },
+  "opts": {
+    "destination": "./docs/",
+    "encoding": "utf8",
+    "private": true,
+    "recurse": true,
+    "template": "./node_modules/financier-docdash"
+  },
+  "docdash": {
+    "static": true,
+    "sort": false
+  }
 }

.jsdoc.json

@@ -1,7 +1,8 @@
-FROM node:18
+FROM node:22
 
 WORKDIR /financier
-RUN yarn add express@^4.17.3 nocache@^3.0.3 uuid@^8.3.2 helmet-csp@^3.4.0 cheerio@^0.22.0
+RUN corepack enable
+RUN pnpm install express@^4.17.3 nocache@^4.0.0 uuid@^11.0.0 helmet@^8.0.0 cheerio@^1.0.0
 
 ADD ./dist /financier/dist
 ADD ./docs /financier/docs

Dockerfile

@@ -15,33 +15,33 @@
 ### Develop
 
 ```sh
-yarn
-yarn start
+pnpm
+pnpm start
 ```
 
 ### Test
 
 ```sh
-yarn test
-# or continuous: `yarn test-watch`
+pnpm test
+# or continuous: `pnpm test-watch`
 ```
 
 ### Build (for production)
 
 ```sh
-yarn build
+pnpm build
 ```
 
 ### Run locally
 
 ```sh
-yarn build
-yarn docs # generate jsdoc documentation
+pnpm build
+pnpm run docs # generate jsdoc documentation
 node ./api
 ```
 
 ### Docs
 
 Local docs would be `http://localhost:8080/docs`.
 
-Generate with `yarn docs`.
+Generate with `pnpm run docs`.

README.md

@@ -1,17 +1,18 @@
-const path = require("path");
-const fs = require("fs");
+import path from "path";
+import fs from "fs";
+import { Buffer } from "buffer";
 
-const noCache = require("nocache");
-const express = require("express");
-const uuid = require("uuid");
-const csp = require("helmet-csp");
-const cheerio = require("cheerio");
+import noCache from "nocache";
+import express from "express";
+import { v4 } from "uuid";
+import { contentSecurityPolicy } from "helmet";
+import * as cheerio from "cheerio";
 
 const app = express();
 
-app.use("/docs", express.static(path.join(__dirname, "../docs")));
+app.use("/docs", express.static(path.join(import.meta.dirname, "../docs")));
 
-var statics = express.static(path.join(__dirname, "../dist"));
+var statics = express.static(path.join(import.meta.dirname, "../dist"));
 
 // Don't serve index.html
 function staticDir() {
@@ -32,12 +33,12 @@ app.use(staticDir());
 app.use(noCache());
 
 app.use(function (req, res, next) {
-  res.locals.nonce = new Buffer(uuid.v4(), "binary").toString("base64");
+  res.locals.nonce = Buffer.from(v4(), "binary").toString("base64");
   next();
 });
 
 app.use(
-  csp({
+  contentSecurityPolicy({
     // Specify directives as normal.
     directives: {
       defaultSrc: ["'self'"],
@@ -67,12 +68,12 @@ app.use(
     // You may also set this to a function(req, res) in order to decide dynamically
     // whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
     reportOnly: false,
-  })
+  }),
 );
 
 const html = fs.readFileSync(
-  path.join(__dirname, "../dist/index.html"),
-  "utf-8"
+  path.join(import.meta.dirname, "../dist/index.html"),
+  "utf-8",
 );
 const $ = cheerio.load(html);
 

api/index.js

@@ -1,4 +1,3 @@
 module.exports = {
-  presets: ["@babel/preset-env"],
   plugins: ["angularjs-annotate"],
 };

babel.config.js babel.config.cjs

@@ -0,0 +1,38 @@
+import globals from "globals";
+import vitest from "eslint-plugin-vitest";
+import js from "@eslint/js";
+
+export default [
+  js.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.amd,
+        angular: true,
+        inject: true,
+        VERSION: true,
+        process: true,
+      },
+    },
+
+    rules: {
+      "no-prototype-builtins": 0,
+    },
+  },
+  {
+    files: ["**/*.spec.js"],
+
+    languageOptions: {
+      globals: vitest.environments.env.globals,
+    },
+
+    plugins: {
+      vitest,
+    },
+
+    rules: {
+      ...vitest.configs.recommended.rules,
+    },
+  },
+];

eslint.config.mjs

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html ng-app="financier" ng-strict-di ng-csp>
   <head>
     <meta charset="UTF-8" />
@@ -10,30 +10,25 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="./public/icons/apple-touch-icon.png"
+      href="/icons/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
-      href="./public/icons/favicon-32x32.png"
+      href="/icons/favicon-32x32.png"
       sizes="32x32"
     />
     <link
       rel="icon"
       type="image/png"
-      href="./public/icons/favicon-16x16.png"
+      href="/icons/favicon-16x16.png"
       sizes="16x16"
     />
-    <link rel="manifest" href="./public/icons/manifest.json" />
-    <link
-      rel="mask-icon"
-      href="./public/icons/safari-pinned-tab.svg"
-      color="#76b852"
-    />
-    <link rel="shortcut icon" href="./public/icons/favicon.ico" />
+    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#76b852" />
+    <link rel="shortcut icon" href="/icons/favicon.ico" />
     <meta name="theme-color" content="#76b852" />
 
-    <link type="text/plain" rel="author" href="humans.txt" />
+    <link type="text/plain" rel="author" href="/humans.txt" />
 
     <base href="/" />
 
@@ -132,6 +127,15 @@
         }
       }
     </style>
+
+    <script type="module" src="./src/scripts/app.js"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900"
+      rel="stylesheet"
+    />
   </head>
 
   <body>

src/index.html index.html

@@ -1,28 +1,4 @@
-// This file is an entry point for angular tests
-// Avoids some weird issues when using webpack + angular.
-window.jasmine = true;
-window.VERSION = {};
-window.process = {
-  env: {},
-};
+import "angular";
+import "angular-mocks/angular-mocks";
 
-require("regenerator-runtime/runtime");
-require("jest-fetch-mock").enableMocks();
-
-require("angular");
-require("angular-mocks/angular-mocks");
-
-// https://github.com/pouchdb/pouchdb/issues/8383
-window.setImmediate = (fn) => {
-  setTimeout(fn, 0);
-};
-window.process.nextTick = (fn) => {
-  setTimeout(fn, 0);
-};
-
-const PouchDB = require("pouchdb-browser");
-const memory = require("pouchdb-adapter-memory");
-
-PouchDB.plugin(memory);
-
-require("./src/scripts/app");
+import "./src/scripts/app.js";