[Dependencies] Frontend update 01/09/2025

frontend-dev.Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_TAG="18.20-alpine@sha256:b33d7471a6a5106cceb3b6e4368841e06338ff6e5e8b2ff345e2e17f15902d7d"
+ARG NODE_TAG="18.20.8-alpine@sha256:929b04d7c782f04f615cf785488fed452b6569f87c73ff666ad553a7554f0006"
 
 FROM node:${NODE_TAG}
 

frontend-prod.Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_TAG="18.20-alpine@sha256:b33d7471a6a5106cceb3b6e4368841e06338ff6e5e8b2ff345e2e17f15902d7d"
+ARG NODE_TAG="18.20.8-alpine@sha256:929b04d7c782f04f615cf785488fed452b6569f87c73ff666ad553a7554f0006"
 ARG NGINX_TAG="1.23-alpine@sha256:b5fe08305969d68f9d44309ea30f02a7dfbefe6e429f8c3f3f348fa45600f8b2"
 
 ###########################################

frontend/eslint.config.js

@@ -1,5 +1,4 @@
 import eslintCore from "@eslint/js";
-
 import configPrettier from "eslint-config-prettier";
 import * as importPlugin from "eslint-plugin-import";
 import reactPlugin from "eslint-plugin-react";
@@ -43,7 +42,7 @@ export default eslintTypescript.config(
     // ! Make sure prettier is *after* other plugins, so it can override
     configPrettier,
 
-    { ignores: ["scripts/", "playwright/", "coverage/", "dist/"] },
+    { ignores: ["scripts/", "playwright/", "coverage/", "dist/", "src/api/autogen"] },
 
     // Other configs  -------------------------------------------------------------------
     {
@@ -66,29 +65,29 @@ export default eslintTypescript.config(
             "no-console": ["error", { allow: ["debug", "info", "warn", "error"] }],
             "import/no-named-as-default-member": "off", // Conflicts with us requiring always using the react default
             "import/order": [
-            "warn",
-            {
-                groups: [
-                    "builtin",       // Node.js builtins: fs, path, etc.
-                    "external",      // Packages from node_modules
-                    "internal",      // Aliased paths (e.g. @, @core)
-                    "parent",        // ../
-                    "sibling",       // ./file
-                    "index",         // ./index
-                ],
-                pathGroups: [
-                    { pattern: "react", group: "external", position: "before" },
-                    { pattern: "@core/**", group: "internal", position: "before" },
-                    { pattern: "@components/**", group: "internal", position: "before" },
-                    { pattern: "@shared-types/**", group: "internal", position: "before" },
-                    { pattern: "@assets/**", group: "internal", position: "before" },
-                    { pattern: "@/**", group: "internal" }, // fallback for anything else under @
-                ],
-                pathGroupsExcludedImportTypes: ["react"],
-                alphabetize: { order: "asc", caseInsensitive: true },
-                "newlines-between": "always",
-            },
-        ],
+                "warn",
+                {
+                    groups: [
+                        "builtin", // Node.js builtins: fs, path, etc.
+                        "external", // Packages from node_modules
+                        "internal", // Aliased paths (e.g. @, @core)
+                        "parent", // ../
+                        "sibling", // ./file
+                        "index", // ./index
+                    ],
+                    pathGroups: [
+                        { pattern: "react", group: "external", position: "before" },
+                        { pattern: "@core/**", group: "internal", position: "before" },
+                        { pattern: "@components/**", group: "internal", position: "before" },
+                        { pattern: "@shared-types/**", group: "internal", position: "before" },
+                        { pattern: "@assets/**", group: "internal", position: "before" },
+                        { pattern: "@/**", group: "internal" }, // fallback for anything else under @
+                    ],
+                    pathGroupsExcludedImportTypes: ["react"],
+                    alphabetize: { order: "asc", caseInsensitive: true },
+                    "newlines-between": "always",
+                },
+            ],
         },
     },
 );

frontend/open-api/cachebusting-plugin/config.ts

@@ -1,18 +1,15 @@
-import type { Plugin } from "@hey-api/openapi-ts";
+import { definePluginConfig } from "@hey-api/openapi-ts";
 
 import { handler } from "./plugin";
-import type { Config } from "./types";
+import type { CacheBustingPlugin } from "./types";
 
-export const defaultConfig: Plugin.Config<Config> = {
+export const defaultConfig: CacheBustingPlugin["Config"] = {
     name: "cache-busting",
-    output: "types",
-    cacheKey: "t",
-    // No need to define this
-    _handlerLegacy: () => {},
-    _handler: handler,
+    handler: handler,
+    output: {},
+    config: {
+        cacheKey: "t",
+    },
 };
 
-export const makePlugin: Plugin.DefineConfig<Config> = (config) => ({
-    ...defaultConfig,
-    ...config,
-});
+export const makePlugin = definePluginConfig(defaultConfig);

frontend/open-api/cachebusting-plugin/index.ts

@@ -1,2 +1,2 @@
 export { defaultConfig, makePlugin } from "./config";
-export type { Config } from "./types";
+export type { CacheBustingPlugin } from "./types";

frontend/open-api/cachebusting-plugin/plugin.ts

@@ -1,9 +1,10 @@
-import type { IR, Plugin } from "@hey-api/openapi-ts";
+import type { IR } from "@hey-api/openapi-ts";
+import { set } from "lodash";
 
-import type { Config } from "./types";
+import type { CacheBustingPlugin } from "./types";
 
-export const handler: Plugin.Handler<Config> = ({ context, plugin }) => {
-    const cacheKeyCfg = plugin.cacheKey;
+export const handler: CacheBustingPlugin["Handler"] = ({ plugin }) => {
+    const cacheKeyCfg = plugin.config.cacheKey;
 
     let cacheKey: string;
     let cacheParmObj: IR.ParameterObject;
@@ -22,15 +23,13 @@ export const handler: Plugin.Handler<Config> = ({ context, plugin }) => {
         };
     }
 
-    context.subscribe("operation", (ctx) => {
-        const existingParams = ctx.operation.parameters;
+    plugin.forEach("operation", (event) => {
+        if (event.operation.parameters?.query?.[cacheKey]) {
+            throw Error(
+                `Cannot add cache busting parameter. Operation ${event.operation.id} already has already defined ${cacheKey} as a query field!`,
+            );
+        }
 
-        ctx.operation.parameters = {
-            ...existingParams,
-            query: {
-                ...existingParams?.query,
-                [cacheKey]: cacheParmObj,
-            },
-        };
+        set(event, `operation.parameters.query.${cacheKey}`, cacheParmObj);
     });
 };

frontend/open-api/cachebusting-plugin/types.d.ts

@@ -1,18 +1,20 @@
-import type { IR } from "@hey-api/openapi-ts";
+import type { DefinePlugin, IR } from "@hey-api/openapi-ts";
 
 export interface Config {
     /**
      * The name of the plugin.
      */
     name: "cache-busting";
-    /**
-     * Name of the generated file.
-     */
-    output: "types";
+    // /**
+    //  * Name of the generated file.
+    //  */
+    // output: "";
 
     /**
      * The query parameter to use for caching
      * @default "t"
      */
     cacheKey?: string | IR.ParameterObject;
 }
+
+export type CacheBustingPlugin = DefinePlugin<Config>;

frontend/openapi-ts.config.ts

@@ -1,23 +1,64 @@
-import { defaultPlugins, defineConfig } from "@hey-api/openapi-ts";
+import { defineConfig } from "@hey-api/openapi-ts";
+import { startCase } from "lodash";
 
 import { makePlugin as cacheBustingPlugin } from "./open-api/cachebusting-plugin";
 
+function addSuffix(name: string, categoricalSuffix = "", coreSuffix = "_api"): string {
+    const pascalCasedName = startCase(name).replaceAll(" ", "");
+    const suffixedName = pascalCasedName + categoricalSuffix + coreSuffix;
+
+    return suffixedName;
+}
+
 export default defineConfig({
-    client: "@hey-api/client-axios",
     input: "http://localhost:5000/openapi.json",
     output: {
         format: "prettier",
         lint: "eslint",
         path: "./src/api/autogen/",
+        // (Revert v0.67) Don't append js to relative paths
+        tsConfigPath: "off",
+    },
+    parser: {
+        hooks: {
+            operations: {
+                // (Revert v0.82) Generate tanstack query for post methods
+                isQuery: (op) => (op.method === "post" ? true : undefined),
+            },
+        },
+        transforms: {
+            // (Revert v0.66) Only generate a single payload type
+            readWrite: false,
+            enums: { mode: "root" },
+        },
     },
-    experimentalParser: true,
     plugins: [
         cacheBustingPlugin(),
-        ...defaultPlugins,
-        "@tanstack/react-query",
+        "@hey-api/sdk",
+        { name: "@hey-api/client-axios", exportFromIndex: true },
+        {
+            name: "@tanstack/react-query",
+            exportFromIndex: true,
+            "~hooks": {
+                operations: {
+                    // (Revert v0.82) Generate tanstack query for post methods
+                    isQuery: (op) => (op.method === "post" ? true : undefined),
+                },
+            },
+        },
         {
-            enums: "typescript+namespace",
             name: "@hey-api/typescript",
+            enums: "typescript",
+
+            // Add `_api` suffix to generated types
+            // Because our suffix doesn't follow PascalCasing, we need to manually handle the generated names.
+            case: "preserve",
+            // ? It might be possible to handle this via a plugin, but I could not figure out how. This works for now...
+            definitions: { name: (name) => addSuffix(name) },
+            responses: { name: (name) => addSuffix(name, "Response") },
+            requests: { name: (name) => addSuffix(name, "Data") },
+            errors: { name: (name) => addSuffix(name, "Error") },
+            webhooks: { name: (name) => addSuffix(name, "Hook") },
         },
     ],
 });