Add links to npm packages in package.json file view

web_src/css/base.css

@@ -1620,6 +1620,12 @@ a.ui.active.label:hover {
   width: 100%;
 }
 
+/* don't change link color in highlighted code */
+.code-view .lines-code a,
+.code-view .lines-code a:hover {
+  color: inherit;
+}
+
 .ui.primary.label,
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label {

web_src/js/features/copycontent.js

@@ -1,6 +1,7 @@
 import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {convertImage} from '../utils.js';
+import {getFileViewContent} from '../utils/misc.js';
 import {GET} from '../modules/fetch.js';
 
 const {i18n} = window.config;
@@ -36,8 +37,7 @@ export function initCopyContent() {
         btn.classList.remove('is-loading', 'small-loading-icon');
       }
     } else { // text, read from DOM
-      const lineEls = document.querySelectorAll('.file-view .lines-code');
-      content = Array.from(lineEls, (el) => el.textContent).join('');
+      content = getFileViewContent();
     }
 
     // try copy original first, if that fails and it's an image, convert it to png

web_src/js/features/repo-code.js

@@ -3,7 +3,8 @@ import {svg} from '../svg.js';
 import {invertFileFolding} from './file-fold.js';
 import {createTippy} from '../modules/tippy.js';
 import {clippie} from 'clippie';
-import {toAbsoluteUrl} from '../utils.js';
+import {toAbsoluteUrl, createExternalLink} from '../utils.js';
+import {getFileViewContent, getFileViewFileName} from '../utils/misc.js';
 
 export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/;
 export const rangeAnchorRegex = /^#(L[1-9][0-9]*)-(L[1-9][0-9]*)$/;
@@ -120,6 +121,47 @@ function showLineButton() {
   });
 }
 
+function postProcessPackageJson() {
+  let data;
+  try {
+    data = JSON.parse(getFileViewContent());
+  } catch {
+    return;
+  }
+
+  const packages = new Set();
+  for (const key of [
+    'dependencies',
+    'devDependencies',
+    'optionalDependencies',
+    'peerDependencies',
+  ]) {
+    for (const packageName of Object.keys(data?.[key] || {})) {
+      packages.add(packageName);
+    }
+  }
+
+  // match chroma NameTag token to detect JSON object keys
+  for (const el of document.querySelectorAll('.code-inner .nt')) {
+    const jsonKey = el.textContent.replace(/^"(.*)"$/, '$1');
+    if (packages.has(jsonKey)) {
+      const link = createExternalLink({
+        textContent: jsonKey,
+        href: `https://www.npmjs.com/package/${jsonKey}`,
+      });
+      el.textContent = '';
+      el.append('"', link, '"');
+    }
+  }
+}
+
+function postProcessFile() {
+  const fileName = getFileViewFileName();
+  if (fileName === 'package.json') {
+    postProcessPackageJson();
+  }
+}
+
 export function initRepoCodeView() {
   if ($('.code-view .lines-num').length > 0) {
     $(document).on('click', '.lines-num span', function (e) {
@@ -197,4 +239,5 @@ export function initRepoCodeView() {
   $(document).on('click', '.copy-line-permalink', async ({currentTarget}) => {
     await clippie(toAbsoluteUrl(currentTarget.getAttribute('data-url')));
   });
+  postProcessFile();
 }

web_src/js/utils.js

@@ -139,3 +139,13 @@ export function parseDom(text, contentType) {
 export function serializeXml(node) {
   return xmlSerializer.serializeToString(node);
 }
+
+export function createExternalLink(props = {}) {
+  const a = document.createElement('a');
+  a.target = '_blank';
+  a.rel = 'noopener noreferrer nofollow';
+  for (const [key, value] of Object.entries(props)) {
+    a[key] = value;
+  }
+  return a;
+}

web_src/js/utils.test.js

@@ -1,7 +1,6 @@
 import {
-  basename, extname, isObject, stripTags, parseIssueHref,
-  parseUrl, translateMonth, translateDay, blobToDataURI,
-  toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64,
+  basename, extname, isObject, stripTags, parseIssueHref, parseUrl, translateMonth, translateDay,
+  blobToDataURI, toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, createExternalLink,
 } from './utils.js';
 
 test('basename', () => {
@@ -112,3 +111,10 @@ test('encodeURLEncodedBase64, decodeURLEncodedBase64', () => {
   expect(Array.from(decodeURLEncodedBase64('YQ'))).toEqual(Array.from(uint8array('a')));
   expect(Array.from(decodeURLEncodedBase64('YQ=='))).toEqual(Array.from(uint8array('a')));
 });
+
+test('createExternalLink', () => {
+  const link = createExternalLink({href: 'https://example.com', textContent: 'example'});
+  expect(link.tagName).toEqual('A');
+  expect(link.href).toEqual('https://example.com/');
+  expect(link.textContent).toEqual('example');
+});

web_src/js/utils/misc.js

@@ -0,0 +1,8 @@
+export function getFileViewFileName() {
+  return document.querySelector('.repo-path .active')?.textContent?.trim();
+}
+
+export function getFileViewContent() {
+  const lineEls = document.querySelectorAll('.file-view .lines-code');
+  return Array.from(lineEls, (el) => el.textContent).join('');
+}