fix: handle async chunks properly

felixmosh · Aug 4, 2022 · 13111d6 · 13111d6
1 parent 7534549
commit 13111d6
Show file tree

Hide file tree

Showing 14 changed files with 500 additions and 484 deletions.
diff --git a/examples/with-fastify-auth/cookieAuth.js b/examples/with-fastify-auth/cookieAuth.js
@@ -37,7 +37,7 @@ module.exports.cookieAuth = function cookieAuth(fastify, { queue }, next) {
     fastify.route({
       method: 'GET',
       url: '/cookie/login',
-      handler: async (req, reply) => {
+      handler: (req, reply) => {
         reply.view('login.ejs');
       },
     });

diff --git a/examples/with-fastify-auth/package.json b/examples/with-fastify-auth/package.json
@@ -10,12 +10,13 @@
   "author": "felixmosh",
   "license": "ISC",
   "dependencies": {
-    "@bull-board/fastify": "^3.10.7",
-    "@fastify/basic-auth": "^3.0.1",
-    "@fastify/cookie": "^6.0.0",
-    "@fastify/jwt": "^5.0.1",
+    "@bull-board/fastify": "^4.2.1",
+    "@fastify/basic-auth": "^4.0.0",
+    "@fastify/cookie": "^7.3.1",
+    "@fastify/jwt": "^6.3.2",
+    "@fastify/view": "^7.0.0",
     "bullmq": "^1.81.1",
-    "fastify": "^3.29.0"
+    "fastify": "^4.3.0"
   },
   "devDependencies": {
     "nodemon": "^2.0.16"

diff --git a/examples/with-fastify-auth/yarn.lock b/examples/with-fastify-auth/yarn.lock
diff --git a/examples/with-fastify/package.json b/examples/with-fastify/package.json
@@ -10,8 +10,8 @@
   "author": "felixmosh",
   "license": "ISC",
   "dependencies": {
-    "@bull-board/fastify": "^3.10.7",
+    "@bull-board/fastify": "^4.2.1",
     "bullmq": "^1.81.1",
-    "fastify": "^3.29.0"
+    "fastify": "^4.3.0"
   }
 }
diff --git a/examples/with-fastify/yarn.lock b/examples/with-fastify/yarn.lock
diff --git a/examples/with-multiple-instances/package.json b/examples/with-multiple-instances/package.json
@@ -10,7 +10,7 @@
   "author": "felixmosh",
   "license": "ISC",
   "dependencies": {
-    "@bull-board/express": "^3.0.0",
+    "@bull-board/express": "^4.2.1",
     "body-parser": "^1.20.0",
     "bullmq": "^1.80.4",
     "express": "^4.17.3"

diff --git a/packages/express/src/ExpressAdapter.ts b/packages/express/src/ExpressAdapter.ts
@@ -1,5 +1,3 @@
-import express, { Express, NextFunction, Request, Response, Router } from 'express';
-import ejs from 'ejs';
 import {
   AppControllerRoute,
   AppViewRoute,
@@ -8,6 +6,8 @@ import {
   HTTPMethod,
   IServerAdapter,
 } from '@bull-board/api/dist/typings/app';
+import ejs from 'ejs';
+import express, { Express, NextFunction, Request, Response, Router } from 'express';
 import { wrapAsync } from './helpers/wrapAsync';
 
 export class ExpressAdapter implements IServerAdapter {
@@ -87,7 +87,9 @@ export class ExpressAdapter implements IServerAdapter {
     const { name } = routeDef.handler();
 
     const viewHandler = (_req: Request, res: Response) => {
-      res.render(name, { basePath: this.basePath });
+      const basePath = this.basePath.endsWith('/') ? this.basePath : `${this.basePath}/`;
+
+      res.render(name, { basePath });
     };
 
     this.app[routeDef.method](routeDef.route, viewHandler);

diff --git a/packages/fastify/src/FastifyAdapter.ts b/packages/fastify/src/FastifyAdapter.ts
@@ -7,9 +7,9 @@ import {
 } from '@bull-board/api/dist/typings/app';
 
 import fastifyStatic from '@fastify/static';
+import pointOfView from '@fastify/view';
 import { FastifyInstance } from 'fastify';
 import { HTTPMethods } from 'fastify/types/utils';
-import pointOfView from '@fastify/view';
 
 type FastifyRouteDef = {
   method: HTTPMethods;
@@ -116,9 +116,9 @@ export class FastifyAdapter implements IServerAdapter {
           method,
           url,
           handler: (_req, reply) => {
-            reply.view(filename, {
-              basePath: this.basePath,
-            });
+            const basePath = this.basePath.endsWith('/') ? this.basePath : `${this.basePath}/`;
+
+            reply.view(filename, { basePath });
           },
         })
       );
@@ -150,4 +150,3 @@ export class FastifyAdapter implements IServerAdapter {
     };
   }
 }
-
diff --git a/packages/hapi/src/HapiAdapter.ts b/packages/hapi/src/HapiAdapter.ts
@@ -126,7 +126,8 @@ export class HapiAdapter implements IServerAdapter {
             options,
             handler: (_request, h) => {
               const { name } = handler();
-              return h.view(name, { basePath: this.basePath });
+              const basePath = this.basePath.endsWith('/') ? this.basePath : `${this.basePath}/`;
+              return h.view(name, { basePath });
             },
           })
         );

diff --git a/packages/koa/src/KoaAdapter.ts b/packages/koa/src/KoaAdapter.ts
@@ -105,7 +105,8 @@ export class KoaAdapter implements IServerAdapter {
     viewRoutes.forEach((path) => {
       router[method](path, async (ctx) => {
         const { name } = handler();
-        await (ctx as any).render(name, { basePath: this.basePath });
+        const basePath = this.basePath.endsWith('/') ? this.basePath : `${this.basePath}/`;
+        await (ctx as any).render(name, { basePath });
       });
     });
 

diff --git a/packages/ui/src/index.ejs b/packages/ui/src/index.ejs
@@ -6,8 +6,8 @@
     <meta name="robots" content="noindex" />
     <base href="<%= basePath %>" />
     <title>Bull Dashboard</title>
-    <link rel="alternate icon" type="image/png" href="<%= basePath %>/static/favicon-32x32.png">
-    <link rel="icon" type="image/svg+xml" id="fav-logo" href="<%= basePath %>/static/images/logo.svg">
+    <link rel="alternate icon" type="image/png" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/svg+xml" id="fav-logo" href="static/images/logo.svg">
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body>

diff --git a/packages/ui/src/services/Api.ts b/packages/ui/src/services/Api.ts
@@ -7,7 +7,7 @@ export class Api {
   private axios: AxiosInstance;
 
   constructor({ basePath }: { basePath: string } = { basePath: '' }) {
-    this.axios = Axios.create({ baseURL: `${basePath}/api` });
+    this.axios = Axios.create({ baseURL: `${basePath}api` });
     this.axios.interceptors.response.use(this.handleResponse, this.handleError);
   }
 

diff --git a/packages/ui/src/utils/getStaticPath.ts b/packages/ui/src/utils/getStaticPath.ts
@@ -1,3 +1,3 @@
 export function getStaticPath(path: string): string {
-  return `${(window as any).__basePath__}/static${path}`;
+  return `static${path}`;
 }
diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js
@@ -21,7 +21,8 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, './dist/static'),
     filename: `[name]${isProd ? '.[contenthash]' : ''}.js`,
-    publicPath: `${isProd ? basePath : `http://localhost:${devServerPort}`}/static/`,
+    publicPath: `${!isProd ? `http://localhost:${devServerPort}/` : 'static/'}`,
+    chunkFilename: '[contenthash].chunk.js',
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
@@ -88,6 +89,7 @@ module.exports = {
     }),
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash].css',
+      chunkFilename: '[contenthash].chunk.css',
     }),
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, './dist/index.ejs'),