@verdaccio/web 6.0.0-6-next.27 → 6.0.0-6-next.30

package/src/api/readme.ts

@@ -6,13 +6,14 @@ import { HEADERS, HEADER_TYPE } from '@verdaccio/core';
 import { $NextFunctionVer, $RequestExtend, $ResponseExtend, allow } from '@verdaccio/middleware';
 import sanitizyReadme from '@verdaccio/readme';
 import { Storage } from '@verdaccio/store';
-import { Package } from '@verdaccio/types';
+import { Manifest } from '@verdaccio/types';
 
 import { AuthorAvatar, addScope, parseReadme } from '../utils/web-utils';
 
 export { $RequestExtend, $ResponseExtend, $NextFunctionVer }; // Was required by other packages
 
-export type PackageExt = Package & { author: AuthorAvatar; dist?: { tarball: string } };
+// TODO: review this type, should be on @verdacid/types
+export type PackageExt = Manifest & { author: AuthorAvatar; dist?: { tarball: string } };
 
 const debug = buildDebug('verdaccio:web:api:readme');
 
@@ -26,31 +27,39 @@ function addReadmeWebApi(storage: Storage, auth: IAuth): Router {
   pkgRouter.get(
     '/package/readme/(@:scope/)?:package/:version?',
     can('access'),
-    function (req: $RequestExtend, res: $ResponseExtend, next: $NextFunctionVer): void {
+    async function (
+      req: $RequestExtend,
+      res: $ResponseExtend,
+      next: $NextFunctionVer
+    ): Promise<void> {
       debug('readme hit');
-      const packageName = req.params.scope
+      const name = req.params.scope
         ? addScope(req.params.scope, req.params.package)
         : req.params.package;
-      debug('readme name %o', packageName);
-
-      // @ts-ignore
-      storage.getPackage({
-        name: packageName,
-        uplinksLook: true,
-        req,
-        callback: function (err, info): void {
-          debug('readme pkg %o', info?.name);
-          res.set(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_PLAIN_UTF8);
-          if (err) {
-            return next(err);
-          }
-          try {
-            next(parseReadme(info.name, info.readme));
-          } catch {
-            next(sanitizyReadme(NOT_README_FOUND));
-          }
-        },
-      });
+      debug('readme name %o', name);
+      const requestOptions = {
+        protocol: req.protocol,
+        headers: req.headers as any,
+        // FIXME: if we migrate to req.hostname, the port is not longer included.
+        host: req.host,
+        remoteAddress: req.socket.remoteAddress,
+      };
+      try {
+        const manifest = await storage.getPackageByOptions({
+          name,
+          uplinksLook: true,
+          requestOptions,
+        });
+        debug('readme pkg %o', manifest?.name);
+        res.set(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_PLAIN_UTF8);
+        try {
+          next(parseReadme(manifest.name, manifest.readme as string));
+        } catch {
+          next(sanitizyReadme(NOT_README_FOUND));
+        }
+      } catch (err) {
+        next(err);
+      }
     }
   );
   return pkgRouter;

package/src/api/search.ts

@@ -64,7 +64,7 @@ function addSearchWebApi(storage: Storage, auth: IAuth): Router {
         // @ts-ignore
         const urlParams = new URLSearchParams(query);
         debug('search web init');
-        data = await storage.searchManager?.search({
+        data = await storage?.search({
           query,
           url: `/-/v1/search?${urlParams.toString()}`,
           abort,

package/src/api/sidebar.ts

@@ -1,22 +1,21 @@
 import buildDebug from 'debug';
 import { Router } from 'express';
-import _ from 'lodash';
 
 import { IAuth } from '@verdaccio/auth';
 import { DIST_TAGS, HTTP_STATUS } from '@verdaccio/core';
 import { $NextFunctionVer, $RequestExtend, $ResponseExtend, allow } from '@verdaccio/middleware';
 import { Storage } from '@verdaccio/store';
 import { convertDistRemoteToLocalTarballUrls } from '@verdaccio/tarball';
-import { Config, Package, Version } from '@verdaccio/types';
+import { Config, Manifest, Version } from '@verdaccio/types';
 import { addGravatarSupport, formatAuthor, isVersionValid } from '@verdaccio/utils';
 
 import { AuthorAvatar, addScope, deleteProperties } from '../utils/web-utils';
 
 export { $RequestExtend, $ResponseExtend, $NextFunctionVer }; // Was required by other packages
 
-export type PackageExt = Package & { author: AuthorAvatar; dist?: { tarball: string } };
+export type PackageExt = Manifest & { author: AuthorAvatar; dist?: { tarball: string } };
 
-export type $SidebarPackage = Package & { latest: Version };
+export type $SidebarPackage = Manifest & { latest: Version };
 const debug = buildDebug('verdaccio:web:api:sidebar');
 
 function addSidebarWebApi(config: Config, storage: Storage, auth: IAuth): Router {
@@ -27,43 +26,56 @@ function addSidebarWebApi(config: Config, storage: Storage, auth: IAuth): Router
   router.get(
     '/sidebar/(@:scope/)?:package',
     can('access'),
-    function (req: $RequestExtend, res: $ResponseExtend, next: $NextFunctionVer): void {
-      const packageName: string = req.params.scope
+    async function (
+      req: $RequestExtend,
+      res: $ResponseExtend,
+      next: $NextFunctionVer
+    ): Promise<void> {
+      const name: string = req.params.scope
         ? addScope(req.params.scope, req.params.package)
         : req.params.package;
-
-      storage.getPackage({
-        name: packageName,
-        uplinksLook: true,
-        keepUpLinkData: true,
-        req,
-        callback: function (err: Error, info: $SidebarPackage): void {
-          if (_.isNil(err)) {
-            const { v } = req.query;
-            let sideBarInfo = _.clone(info);
-            sideBarInfo.versions = convertDistRemoteToLocalTarballUrls(
-              info,
-              { protocol: req.protocol, headers: req.headers as any, host: req.hostname },
-              config.url_prefix
-            ).versions;
-            if (typeof v === 'string' && isVersionValid(info, v)) {
-              sideBarInfo.latest = sideBarInfo.versions[v];
-              sideBarInfo.latest.author = formatAuthor(sideBarInfo.latest.author);
-            } else {
-              sideBarInfo.latest = sideBarInfo.versions[info[DIST_TAGS].latest];
-              sideBarInfo.latest.author = formatAuthor(sideBarInfo.latest.author);
-            }
-            sideBarInfo = deleteProperties(['readme', '_attachments', '_rev', 'name'], sideBarInfo);
-            const authorAvatar = config.web
-              ? addGravatarSupport(sideBarInfo, config.web.gravatar)
-              : addGravatarSupport(sideBarInfo);
-            next(authorAvatar);
-          } else {
-            res.status(HTTP_STATUS.NOT_FOUND);
-            res.end();
-          }
-        },
-      });
+      const requestOptions = {
+        protocol: req.protocol,
+        headers: req.headers as any,
+        // FIXME: if we migrate to req.hostname, the port is not longer included.
+        host: req.host,
+        remoteAddress: req.socket.remoteAddress,
+      };
+      try {
+        const info = (await storage.getPackageByOptions({
+          name,
+          uplinksLook: true,
+          keepUpLinkData: true,
+          requestOptions,
+        })) as Manifest;
+        const { v } = req.query;
+        let sideBarInfo = { ...info };
+        sideBarInfo.versions = convertDistRemoteToLocalTarballUrls(
+          info,
+          { protocol: req.protocol, headers: req.headers as any, host: req.hostname },
+          config.url_prefix
+        ).versions;
+        // TODO: review this implementation
+        if (typeof v === 'string' && isVersionValid(info, v)) {
+          // @ts-ignore
+          sideBarInfo.latest = sideBarInfo.versions[v];
+          // @ts-ignore
+          sideBarInfo.latest.author = formatAuthor(sideBarInfo.latest.author);
+        } else {
+          // @ts-ignore
+          sideBarInfo.latest = sideBarInfo.versions[info[DIST_TAGS].latest];
+          // @ts-ignore
+          sideBarInfo.latest.author = formatAuthor(sideBarInfo.latest.author);
+        }
+        sideBarInfo = deleteProperties(['readme', '_attachments', '_rev', 'name'], sideBarInfo);
+        const authorAvatar = config.web
+          ? addGravatarSupport(sideBarInfo, config.web.gravatar)
+          : addGravatarSupport(sideBarInfo);
+        next(authorAvatar);
+      } catch (err) {
+        res.status(HTTP_STATUS.NOT_FOUND);
+        res.end();
+      }
     }
   );
 

package/src/renderHTML.ts

@@ -26,6 +26,9 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
   const base = getPublicUrl(config?.url_prefix, req);
   const basename = new URL(base).pathname;
   const language = config?.i18n?.web ?? DEFAULT_LANGUAGE;
+  const needHtmlCache = [undefined, null].includes(config?.web?.html_cache)
+    ? true
+    : config.web.html_cache;
   const darkMode = config?.web?.darkMode ?? false;
   const title = config?.web?.title ?? WEB_TITLE;
   const login = hasLogin(config);
@@ -37,7 +40,17 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
     ...config.flags,
   };
   const primaryColor = validatePrimaryColor(config?.web?.primary_color) ?? '#4b5e40';
-  const { scriptsBodyAfter, metaScripts, scriptsbodyBefore } = Object.assign(
+  const {
+    scriptsBodyAfter,
+    metaScripts,
+    scriptsbodyBefore,
+    showInfo,
+    showSettings,
+    showThemeSwitch,
+    showFooter,
+    showSearch,
+    showDownloadTarball,
+  } = Object.assign(
     {},
     {
       scriptsBodyAfter: [],
@@ -47,6 +60,12 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
     config?.web
   );
   const options: TemplateUIOptions = {
+    showInfo,
+    showSettings,
+    showThemeSwitch,
+    showFooter,
+    showSearch,
+    showDownloadTarball,
     darkMode,
     url_prefix,
     basename,
@@ -66,10 +85,7 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
 
   try {
     webPage = cache.get('template');
-
     if (!webPage) {
-      debug('web options %o', options);
-      debug('web manifestFiles %o', manifestFiles);
       webPage = renderTemplate(
         {
           manifest: manifestFiles ?? defaultManifestFiles,
@@ -80,9 +96,10 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
         },
         manifest
       );
-      debug('template :: %o', webPage);
-      cache.set('template', webPage);
-      debug('set template cache');
+      if (needHtmlCache) {
+        cache.set('template', webPage);
+        debug('set template cache');
+      }
     } else {
       debug('reuse template cache');
     }
@@ -91,5 +108,5 @@ export default function renderHTML(config, manifest, manifestFiles, req, res) {
   }
   res.setHeader('Content-Type', HEADERS.TEXT_HTML);
   res.send(webPage);
-  debug('render web');
+  debug('web rendered');
 }

package/src/utils/web-utils.ts

@@ -10,7 +10,7 @@ export type AuthorAvatar = Author & { avatar?: string };
 const debug = buildDebug('verdaccio:web:utils');
 
 export function validatePrimaryColor(primaryColor) {
-  const isHex = /^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i.test(primaryColor);
+  const isHex = /^#([0-9A-F]{3}){1,2}$/i.test(primaryColor);
   if (!isHex) {
     debug('invalid primary color %o', primaryColor);
     return;

package/test/api.readme.test.ts

@@ -38,7 +38,7 @@ describe('readme api', () => {
       .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_PLAIN_UTF8)
       .expect(HTTP_STATUS.OK);
     expect(response.text).toMatch('my readme scoped');
-  });
+  }, 70000);
 
   test('should fetch readme scoped package with not found message', async () => {
     const app = await initializeServer('default-test.yaml');

package/test/config/web.yaml

@@ -0,0 +1,46 @@
+auth:
+  auth-memory:
+    users:
+      test:
+        name: test
+        password: test
+
+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'
+  logoURI: 'http://logo.org/logo.png'
+  flags:
+    - something: false
+
+url_prefix: /prefix
+
+publish:
+  allow_offline: false
+
+uplinks:
+
+log: { type: stdout, format: pretty, level: trace }
+
+packages:
+  '@*/*':
+    access: $anonymous
+    publish: $anonymous
+  '**':
+    access: $anonymous
+    publish: $anonymous
+_debug: true
+
+flags:
+  changePassword: true

package/test/render.test.ts

@@ -1,3 +1,4 @@
+import { JSDOM } from 'jsdom';
 import path from 'path';
 import supertest from 'supertest';
 
@@ -28,34 +29,80 @@ describe('test web server', () => {
   });
 
   describe('render', () => {
-    test('should return the root', async () => {
-      return supertest(await initializeServer('default-test.yaml'))
-        .get('/')
-        .set('Accept', HEADERS.TEXT_HTML)
-        .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
-        .expect(HTTP_STATUS.OK);
-    });
+    describe('output', () => {
+      const render = async (config = 'default-test.yaml') => {
+        const response = await supertest(await initializeServer(config))
+          .get('/')
+          .set('Accept', HEADERS.TEXT_HTML)
+          .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
+          .expect(HTTP_STATUS.OK);
+        return new JSDOM(response.text, { runScripts: 'dangerously' });
+      };
 
-    test('should return the body for a package detail page', async () => {
-      return supertest(await initializeServer('default-test.yaml'))
-        .get('/-/web/section/some-package')
-        .set('Accept', HEADERS.TEXT_HTML)
-        .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
-        .expect(HTTP_STATUS.OK);
-    });
+      test('should match render set ui properties', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('web.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS).toEqual(
+          expect.objectContaining({
+            showInfo: true,
+            showSettings: true,
+            showThemeSwitch: true,
+            showFooter: true,
+            showSearch: true,
+            showDownloadTarball: true,
+            darkMode: false,
+            url_prefix: '/prefix',
+            basename: '/prefix/',
+            primaryColor: '#ffffff',
+            // FIXME: mock these values, avoid random
+            // base: 'http://127.0.0.1:60864/prefix/',
+            // version: '6.0.0-6-next.28',
+            logoURI: '',
+            flags: { searchRemote: true },
+            login: true,
+            pkgManagers: ['pnpm', 'yarn'],
+            title: 'verdaccio web',
+            scope: '@scope',
+            language: 'es-US',
+          })
+        );
+      });
 
-    test.skip('should static file not found', async () => {
-      return supertest(await initializeServer('default-test.yaml'))
-        .get('/-/static/not-found.js')
-        .set('Accept', HEADERS.TEXT_HTML)
-        .expect(HTTP_STATUS.NOT_FOUND);
+      test.todo('should default title');
+      test.todo('should need html cache');
     });
 
-    test('should static file found', async () => {
-      return supertest(await initializeServer('default-test.yaml'))
-        .get('/-/static/main.js')
-        .set('Accept', HEADERS.TEXT_HTML)
-        .expect(HTTP_STATUS.OK);
+    describe('status', () => {
+      test('should return the http status 200 for root', async () => {
+        return supertest(await initializeServer('default-test.yaml'))
+          .get('/')
+          .set('Accept', HEADERS.TEXT_HTML)
+          .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
+          .expect(HTTP_STATUS.OK);
+      });
+
+      test('should return the body for a package detail page', async () => {
+        return supertest(await initializeServer('default-test.yaml'))
+          .get('/-/web/section/some-package')
+          .set('Accept', HEADERS.TEXT_HTML)
+          .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
+          .expect(HTTP_STATUS.OK);
+      });
+
+      test('should static file not found', async () => {
+        return supertest(await initializeServer('default-test.yaml'))
+          .get('/-/static/not-found.js')
+          .set('Accept', HEADERS.TEXT_HTML)
+          .expect(HTTP_STATUS.NOT_FOUND);
+      });
+
+      test('should static file found', async () => {
+        return supertest(await initializeServer('default-test.yaml'))
+          .get('/-/static/main.js')
+          .set('Accept', HEADERS.TEXT_HTML)
+          .expect(HTTP_STATUS.OK);
+      });
     });
   });
 });

package/test/utils.spec.ts

@@ -1,13 +1,22 @@
 import fs from 'fs';
 import path from 'path';
 
-import { parseReadme } from '../src/utils/web-utils';
+import { parseReadme, validatePrimaryColor } from '../src/utils/web-utils';
 
 const readmeFile = (fileName = 'markdown.md') => {
   return fs.readFileSync(path.join(__dirname, `./partials/readme/${fileName}`));
 };
 
 describe('Utilities', () => {
+  describe('validatePrimaryColor', () => {
+    test('is valid', () => {
+      expect(validatePrimaryColor('#222222')).toEqual('#222222');
+      expect(validatePrimaryColor('#222fff')).toEqual('#222fff');
+    });
+    test('is invalid', () => {
+      expect(validatePrimaryColor('fff')).toBeUndefined();
+    });
+  });
   describe('parseReadme', () => {
     test('should parse makrdown text to html template', () => {
       const markdown = '# markdown';

package/tsconfig.json

@@ -13,9 +13,6 @@
     {
       "path": "../config"
     },
-    {
-      "path": "../core/commons-api"
-    },
     {
       "path": "../core/readme"
     },