@verdaccio/middleware 7.0.0-next.6 → 8.0.0-next-8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/middleware",
-  "version": "7.0.0-next.6",
+  "version": "8.0.0-next-8.1",
   "description": "express middleware utils",
   "main": "./build/index.js",
   "types": "build/index.d.ts",
@@ -29,25 +29,25 @@
     "node": ">=12"
   },
   "dependencies": {
-    "@verdaccio/core": "7.0.0-next.6",
-    "@verdaccio/utils": "7.0.0-next.6",
-    "@verdaccio/config": "7.0.0-next.6",
-    "@verdaccio/url": "12.0.0-next.6",
-    "debug": "4.3.4",
-    "lru-cache": "7.18.3",
-    "express": "4.18.2",
+    "@verdaccio/config": "8.0.0-next-8.1",
+    "@verdaccio/core": "8.0.0-next-8.1",
+    "@verdaccio/url": "13.0.0-next-8.1",
+    "@verdaccio/utils": "7.0.1-next-8.1",
+    "debug": "4.3.7",
+    "express": "4.21.0",
+    "express-rate-limit": "5.5.1",
     "lodash": "4.17.21",
-    "mime": "2.6.0",
-    "express-rate-limit": "5.5.1"
+    "lru-cache": "7.18.3",
+    "mime": "2.6.0"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/verdaccio"
   },
   "devDependencies": {
-    "@verdaccio/logger": "7.0.0-next.6",
-    "body-parser": "1.20.2",
-    "supertest": "6.3.3"
+    "@verdaccio/logger": "8.0.0-next-8.1",
+    "body-parser": "1.20.3",
+    "supertest": "7.0.0"
   },
   "scripts": {
     "clean": "rimraf ./build",
@@ -56,6 +56,7 @@
     "build:js": "babel src/ --out-dir build/ --copy-files --extensions \".ts,.tsx\" --source-maps",
     "watch": "pnpm build:js -- --watch",
     "test": "jest",
+    "test:snap": "jest --updateSnapshot",
     "build": "pnpm run build:js && pnpm run build:types"
   }
 }

package/src/middlewares/web/render-web.ts

@@ -37,39 +37,59 @@ export function renderWebMiddleware(config, tokenMiddleware, pluginOptions) {
   // any match within the static is routed to the file system
   router.get('/-/static/*', function (req, res, next) {
     const filename = req.params[0];
-    const file = `${staticPath}/${filename}`;
+    let file = `${staticPath}/${filename}`;
+    if (filename === 'favicon.ico' && config?.web?.favicon) {
+      file = config?.web?.favicon;
+      if (isURLhasValidProtocol(file)) {
+        debug('redirect to favicon %s', file);
+        req.url = file;
+        return next();
+      }
+    }
     debug('render static file %o', file);
     res.sendFile(file, sendFileCallback(next));
   });
 
-  // check the origin of the logo
-  if (config?.web?.logo && !isURLhasValidProtocol(config?.web?.logo)) {
-    // URI related to a local file
-    const absoluteLocalFile = path.posix.resolve(config.web.logo);
-    debug('serve local logo %s', absoluteLocalFile);
-    try {
-      // TODO: replace existsSync by async alternative
-      if (
-        fs.existsSync(absoluteLocalFile) &&
-        typeof fs.accessSync(absoluteLocalFile, fs.constants.R_OK) === 'undefined'
-      ) {
-        // Note: `path.join` will break on Windows, because it transforms `/` to `\`
-        // Use POSIX version `path.posix.join` instead.
-        config.web.logo = path.posix.join('/-/static/', path.basename(config.web.logo));
-        router.get(config.web.logo, function (_req, res, next) {
-          // @ts-ignore
-          debug('serve custom logo  web:%s - local:%s', config.web.logo, absoluteLocalFile);
-          res.sendFile(absoluteLocalFile, sendFileCallback(next));
-        });
-        debug('enabled custom logo %s', config.web.logo);
-      } else {
-        config.web.logo = undefined;
+  function renderLogo(logo: string | undefined): string | undefined {
+    // check the origin of the logo
+    if (logo && !isURLhasValidProtocol(logo)) {
+      // URI related to a local file
+      const absoluteLocalFile = path.posix.resolve(logo);
+      debug('serve local logo %s', absoluteLocalFile);
+      try {
+        // TODO: replace existsSync by async alternative
+        if (
+          fs.existsSync(absoluteLocalFile) &&
+          typeof fs.accessSync(absoluteLocalFile, fs.constants.R_OK) === 'undefined'
+        ) {
+          // Note: `path.join` will break on Windows, because it transforms `/` to `\`
+          // Use POSIX version `path.posix.join` instead.
+          logo = path.posix.join('/-/static/', path.basename(logo));
+          router.get(logo, function (_req, res, next) {
+            // @ts-ignore
+            debug('serve custom logo  web:%s - local:%s', logo, absoluteLocalFile);
+            res.sendFile(absoluteLocalFile, sendFileCallback(next));
+          });
+          debug('enabled custom logo %s', logo);
+        } else {
+          logo = undefined;
+          debug(`web logo is wrong, path ${absoluteLocalFile} does not exist or is not readable`);
+        }
+      } catch {
+        logo = undefined;
         debug(`web logo is wrong, path ${absoluteLocalFile} does not exist or is not readable`);
       }
-    } catch {
-      config.web.logo = undefined;
-      debug(`web logo is wrong, path ${absoluteLocalFile} does not exist or is not readable`);
     }
+    return logo;
+  }
+
+  const logo = renderLogo(config?.web?.logo);
+  if (config?.web?.logo) {
+    config.web.logo = logo;
+  }
+  const logoDark = renderLogo(config?.web?.logoDark);
+  if (config?.web?.logoDark) {
+    config.web.logoDark = logoDark;
   }
 
   router.get('/-/web/:section/*', function (req, res) {

package/src/middlewares/web/utils/manifest.ts

@@ -16,8 +16,16 @@ export function getManifestValue(
 ): string[] {
   return manifestItems?.map((item) => {
     debug('resolve item %o', item);
-    const resolvedItem = `${basePath}${manifest[item]}`;
+    const resolvedItem = `${stripTrailingSlash(basePath)}/${stripLeadingSlash(manifest[item])}`;
     debug('resolved item %o', resolvedItem);
     return resolvedItem;
   });
 }
+
+function stripTrailingSlash(path: string): string {
+  return path.replace(/\/$/, '');
+}
+
+function stripLeadingSlash(path: string): string {
+  return path.replace(/^\//, '');
+}

package/src/middlewares/web/utils/renderHTML.ts

@@ -1,4 +1,5 @@
 import buildDebug from 'debug';
+import type { Response } from 'express';
 import LRU from 'lru-cache';
 import path from 'path';
 import { URL } from 'url';
@@ -6,10 +7,12 @@ import { URL } from 'url';
 import { WEB_TITLE } from '@verdaccio/config';
 import { HEADERS } from '@verdaccio/core';
 import { ConfigYaml, TemplateUIOptions } from '@verdaccio/types';
-import { isURLhasValidProtocol } from '@verdaccio/url';
-import { getPublicUrl } from '@verdaccio/url';
+import type { RequestOptions } from '@verdaccio/url';
+import { getPublicUrl, isURLhasValidProtocol } from '@verdaccio/url';
 
+import type { Manifest } from './manifest';
 import renderTemplate from './template';
+import type { WebpackManifest } from './template';
 import { hasLogin, validatePrimaryColor } from './web-utils';
 
 const DEFAULT_LANGUAGE = 'es-US';
@@ -17,29 +20,40 @@ const cache = new LRU({ max: 500, ttl: 1000 * 60 * 60 });
 
 const debug = buildDebug('verdaccio:web:render');
 
-const defaultManifestFiles = {
+const defaultManifestFiles: Manifest = {
   js: ['runtime.js', 'vendors.js', 'main.js'],
   ico: 'favicon.ico',
+  css: [],
 };
 
-export function resolveLogo(config: ConfigYaml, req) {
-  if (typeof config?.web?.logo !== 'string') {
+export function resolveLogo(
+  logo: string | undefined,
+  url_prefix: string | undefined,
+  requestOptions: RequestOptions
+) {
+  if (typeof logo !== 'string') {
     return '';
   }
-  const isLocalFile = config?.web?.logo && !isURLhasValidProtocol(config?.web?.logo);
+  const isLocalFile = logo && !isURLhasValidProtocol(logo);
 
   if (isLocalFile) {
-    return `${getPublicUrl(config?.url_prefix, req)}-/static/${path.basename(config?.web?.logo)}`;
-  } else if (isURLhasValidProtocol(config?.web?.logo)) {
-    return config?.web?.logo;
+    return `${getPublicUrl(url_prefix, requestOptions)}-/static/${path.basename(logo)}`;
+  } else if (isURLhasValidProtocol(logo)) {
+    return logo;
   } else {
     return '';
   }
 }
 
-export default function renderHTML(config: ConfigYaml, manifest, manifestFiles, req, res) {
+export default function renderHTML(
+  config: ConfigYaml,
+  manifest: WebpackManifest,
+  manifestFiles: Manifest | null | undefined,
+  requestOptions: RequestOptions,
+  res: Response
+) {
   const { url_prefix } = config;
-  const base = getPublicUrl(config?.url_prefix, req);
+  const base = getPublicUrl(config?.url_prefix, requestOptions);
   const basename = new URL(base).pathname;
   const language = config?.i18n?.web ?? DEFAULT_LANGUAGE;
   const hideDeprecatedVersions = config?.web?.hideDeprecatedVersions ?? false;
@@ -51,7 +65,9 @@ export default function renderHTML(config: ConfigYaml, manifest, manifestFiles,
   const title = config?.web?.title ?? WEB_TITLE;
   const login = hasLogin(config);
   const scope = config?.web?.scope ?? '';
-  const logo = resolveLogo(config, req);
+  const favicon = resolveLogo(config?.web?.favicon, config?.url_prefix, requestOptions);
+  const logo = resolveLogo(config?.web?.logo, config?.url_prefix, requestOptions);
+  const logoDark = resolveLogo(config?.web?.logoDark, config?.url_prefix, requestOptions);
   const pkgManagers = config?.web?.pkgManagers ?? ['yarn', 'pnpm', 'npm'];
   const version = res.locals.app_version ?? '';
   const flags = {
@@ -71,6 +87,8 @@ export default function renderHTML(config: ConfigYaml, manifest, manifestFiles,
     showFooter,
     showSearch,
     showDownloadTarball,
+    showRaw,
+    showUplinks,
   } = Object.assign(
     {},
     {
@@ -87,6 +105,8 @@ export default function renderHTML(config: ConfigYaml, manifest, manifestFiles,
     showFooter,
     showSearch,
     showDownloadTarball,
+    showRaw,
+    showUplinks,
     darkMode,
     url_prefix,
     basename,
@@ -94,6 +114,8 @@ export default function renderHTML(config: ConfigYaml, manifest, manifestFiles,
     primaryColor,
     version,
     logo,
+    logoDark,
+    favicon,
     flags,
     login,
     pkgManagers,

package/src/middlewares/web/utils/template.ts

@@ -25,24 +25,24 @@ export default function renderTemplate(template: Template, manifest: WebpackMani
 
   return `
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
         <base href="${template?.options.base}">
-        <title>${template?.options?.title ?? ''}</title>        
+        <title>${template?.options?.title ?? ''}</title>
         <link rel="icon" href="${template?.options.base}-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
             window.__VERDACCIO_BASENAME_UI_OPTIONS=${JSON.stringify(template.options)}
         </script>
         ${template?.metaScripts ? template.metaScripts.join('') : ''}
-      </head>    
+      </head>
       <body class="body">
-      ${template?.scriptsbodyBefore ? template.scriptsbodyBefore.join('') : ''}
+        ${template?.scriptsbodyBefore ? template.scriptsbodyBefore.join('') : ''}
         <div id="root"></div>
         ${getManifestValue(template.manifest.js, manifest, template?.options.base)
           .map((item) => `<script defer="defer" src="${item}"></script>`)
-          .join('')}
+          .join(`\n        `)}
         ${template?.scriptsBodyAfter ? template.scriptsBodyAfter.join('') : ''}
       </body>
     </html>

package/test/__snapshots__/template.test.ts.snap

@@ -3,22 +3,23 @@
 exports[`template custom body after 1`] = `
 "
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title></title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <base href="http://domain.com/">
+        <title></title>
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
+            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
         </script>
         
-      </head>    
+      </head>
       <body class="body">
-      
+        
         <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         <script src="foo"/>
       </body>
     </html>
@@ -28,22 +29,23 @@ exports[`template custom body after 1`] = `
 exports[`template custom body before 1`] = `
 "
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title></title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <base href="http://domain.com/">
+        <title></title>
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
+            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
         </script>
         
-      </head>    
+      </head>
       <body class="body">
-      <script src="fooBefore"/><script src="barBefore"/>
+        <script src="fooBefore"/><script src="barBefore"/>
         <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         
       </body>
     </html>
@@ -53,22 +55,23 @@ exports[`template custom body before 1`] = `
 exports[`template custom render 1`] = `
 "
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title></title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <base href="http://domain.com/">
+        <title></title>
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
+            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
         </script>
         
-      </head>    
+      </head>
       <body class="body">
-      
+        
         <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         
       </body>
     </html>
@@ -78,47 +81,23 @@ exports[`template custom render 1`] = `
 exports[`template custom title 1`] = `
 "
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title>foo title</title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <base href="http://domain.com/">
+        <title>foo title</title>
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com","title":"foo title"}
+            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/","title":"foo title"}
         </script>
         
-      </head>    
+      </head>
       <body class="body">
-      
-        <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         
-      </body>
-    </html>
-  "
-`;
-
-exports[`template custom title 2`] = `
-"
-    <!DOCTYPE html>
-      <html lang="en-us"> 
-      <head>
-        <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title>foo title</title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
-        <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com","title":"foo title"}
-        </script>
-        
-      </head>    
-      <body class="body">
-      
         <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         
       </body>
     </html>
@@ -128,22 +107,23 @@ exports[`template custom title 2`] = `
 exports[`template meta scripts 1`] = `
 "
     <!DOCTYPE html>
-      <html lang="en-us"> 
+      <html lang="en-us">
       <head>
         <meta charset="utf-8">
-        <base href="http://domain.com">
-        <title></title>        
-        <link rel="icon" href="http://domain.com-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+        <base href="http://domain.com/">
+        <title></title>
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script>
-            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
+            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
         </script>
         <style>.someclass{font-size:10px;}</style>
-      </head>    
+      </head>
       <body class="body">
-      
+        
         <div id="root"></div>
-        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
+        <script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
         
       </body>
     </html>

package/test/config/file-logo.yaml

@@ -14,6 +14,8 @@ web:
   showRaw: true
   primary_color: '#ffffff'
   logo: './test/config/dark-logo.png'
+  logoDark: './test/config/dark-logo.png'
+  favicon: './test/config/favicon.ico'
   html_cache: false
 
 url_prefix: /prefix

package/test/config/http-logo.yaml

@@ -0,0 +1,26 @@
+web:
+  title: verdaccio web
+  login: true
+  scope: '@scope'
+  pkgManagers:
+    - pnpm
+    - yarn
+  showInfo: true
+  showSettings: true
+  showSearch: true
+  showFooter: true
+  showThemeSwitch: true
+  showDownloadTarball: true
+  showRaw: true
+  primary_color: '#ffffff'
+  logo: https://raw.githubusercontent.com/verdaccio/verdaccio/master/assets/svg/logo-small.svg
+  logoDark: https://raw.githubusercontent.com/verdaccio/verdaccio/master/assets/svg/logo-blackwhite.svg
+  favicon: https://raw.githubusercontent.com/verdaccio/verdaccio/master/website/static/img/favicon/favicon.ico
+  html_cache: false
+
+url_prefix: /prefix
+
+log: { type: stdout, format: pretty, level: trace }
+
+flags:
+  changePassword: true

package/test/config/no-logo.yaml

@@ -14,6 +14,7 @@ web:
   showRaw: true
   primary_color: '#ffffff'
   logo:
+  favicon:
   html_cache: false
 
 url_prefix: /prefix

package/test/manifest.test.ts

@@ -8,4 +8,16 @@ describe('manifest', () => {
       '/-/static/main.6126058572f989c948b1.js',
     ]);
   });
+
+  test('getManifestValue with base', () => {
+    expect(getManifestValue(['favicon.ico'], manifest, 'http://domain.com')).toEqual([
+      'http://domain.com/-/static/favicon.ico',
+    ]);
+  });
+
+  test('getManifestValue with base with trailing slash', () => {
+    expect(getManifestValue(['favicon.ico'], manifest, 'http://domain.com/')).toEqual([
+      'http://domain.com/-/static/favicon.ico',
+    ]);
+  });
 });

package/test/render.spec.ts

@@ -79,6 +79,28 @@ describe('test web server', () => {
         return loadLogo('file-logo.yaml', '/-/static/dark-logo.png');
       });
 
+      test('should render dark logo as file', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('file-logo.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.logoDark).toMatch('/prefix/-/static/dark-logo.png');
+      });
+
+      test('should render favicon as file', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('file-logo.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toMatch('/prefix/-/static/favicon.ico');
+      });
+
+      test('should render logo and favicon as URL', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('http-logo.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.logo).toMatch(/https:.*logo-small.svg/i);
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toMatch(/https:.*favicon.ico/i);
+      });
+
       test('should not render logo as absolute file is wrong', async () => {
         const {
           window: { __VERDACCIO_BASENAME_UI_OPTIONS },
@@ -91,6 +113,7 @@ describe('test web server', () => {
           window: { __VERDACCIO_BASENAME_UI_OPTIONS },
         } = await render('no-logo.yaml');
         expect(__VERDACCIO_BASENAME_UI_OPTIONS.logo).toEqual('');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toEqual('');
       });
 
       test.todo('should default title');