[lockfile-explorer] Move graph generation logic to the server process (#5358)

* Enable packlets mixin

* Move shared code into a packlet

* - Rename `LockfileEntry` -> `LfxGraphEntry`
- Rename `LockfileDependency` -> `LfxGraphDependency`
- Rename `DependencyKind` -> `LfxDependencyKind` and simplify the enum members
- Rename `LockfileEntryFilter` -> `LfxGraphEntryKind`
- Eliminate circular dependency in IJsonLfxGraph.ts

* Move lfxGraphLoader.ts from client to server

* Move "@lifaon/path" dependency from client to server (we'll probably eliminate it entirely soon)

* Integrate IJsonLfxWorkspace as part of the graph

* Copy the "lfx-shared" because lockfile-explorer-web is a devDependency

* Add "tslib" dependency for the server

* Wire up readLockfileAsync() again

* Revert launch.json change

* rush change

* Include new files in published package

* Delete the obsolete /api/lockfile endpoint

* Add unit tests

* Enable Rush Stack lint rules for "lockfile-explorer" project

* Move the convertLockfileV6DepPathToV5DepPath() kludge down into lfxGraphLoader.generateLockfileGraph() so the test now passes

* Sort YAML to make snapshots more stable

* Upgrade "js-yaml" from "~3.13.1" to "~4.1.0"

* Fix up callers to use the new safe-by-default API

* Regenerate snapshot, eliminating `!<tag:yaml.org,2002:js/undefined>` garbage

* rush change

* Regenerate snapshot

* Rebuild all

* PR feedback

* PR feedback: move the copied packlet to build/lfx-shared (instead of temp/lfx-shared)

* Improve test naming convention to better accommodate future test scenarios

Author: octogonz

.gitignore

@@ -107,6 +107,7 @@ common/autoinstallers/*/.npmrc
 *.lock
 
 # Common toolchain intermediate files
+build/
 temp/
 lib/
 lib-amd/

apps/api-documenter/package.json

@@ -25,12 +25,12 @@
     "@rushstack/node-core-library": "workspace:*",
     "@rushstack/terminal": "workspace:*",
     "@rushstack/ts-command-line": "workspace:*",
-    "js-yaml": "~3.13.1",
+    "js-yaml": "~4.1.0",
     "resolve": "~1.22.1"
   },
   "devDependencies": {
     "@rushstack/heft": "workspace:*",
-    "@types/js-yaml": "3.12.1",
+    "@types/js-yaml": "4.0.9",
     "@types/resolve": "1.20.2",
     "eslint": "~9.25.1",
     "local-node-rig": "workspace:*"

apps/api-documenter/src/documenters/OfficeYamlDocumenter.ts

@@ -48,8 +48,8 @@ export class OfficeYamlDocumenter extends YamlDocumenter {
     console.log('Loading snippets from ' + snippetsFilePath);
 
     const snippetsContent: string = FileSystem.readFile(snippetsFilePath);
-    this._snippets = yaml.load(snippetsContent, { filename: snippetsFilePath });
-    this._snippetsAll = yaml.load(snippetsContent, { filename: snippetsFilePath });
+    this._snippets = yaml.load(snippetsContent, { filename: snippetsFilePath }) as ISnippetsFile;
+    this._snippetsAll = yaml.load(snippetsContent, { filename: snippetsFilePath }) as ISnippetsFile;
   }
 
   /** @override */

apps/api-documenter/src/documenters/YamlDocumenter.ts

@@ -756,7 +756,7 @@ export class YamlDocumenter {
   ): void {
     JsonFile.validateNoUndefinedMembers(dataObject);
 
-    let stringified: string = yaml.safeDump(dataObject, {
+    let stringified: string = yaml.dump(dataObject, {
       lineWidth: 120
     });
 

apps/api-documenter/src/utils/ToSdpConvertHelper.ts

@@ -49,10 +49,10 @@ function convert(inputPath: string, outputPath: string): void {
 
       console.log(`convert file ${fpath} from udp to sdp`);
 
-      const file: IYamlApiFile = yaml.safeLoad(yamlContent) as IYamlApiFile;
+      const file: IYamlApiFile = yaml.load(yamlContent) as IYamlApiFile;
       const result: { model: CommonYamlModel; type: string } | undefined = convertToSDP(file);
       if (result && result.model) {
-        const stringified: string = `### YamlMime:TS${result.type}\n${yaml.safeDump(result.model, {
+        const stringified: string = `### YamlMime:TS${result.type}\n${yaml.dump(result.model, {
           lineWidth: 120
         })}`;
         FileSystem.writeFile(`${outputPath}/${name}`, stringified, {

apps/lockfile-explorer-web/eslint.config.js

@@ -3,10 +3,12 @@
 
 const webAppProfile = require('local-web-rig/profiles/app/includes/eslint/flat/profile/web-app');
 const reactMixin = require('local-web-rig/profiles/app/includes/eslint/flat/mixins/react');
+const packletsMixin = require('local-web-rig/profiles/app/includes/eslint/flat/mixins/packlets');
 
 module.exports = [
   ...webAppProfile,
   ...reactMixin,
+  packletsMixin,
   {
     files: ['**/*.ts', '**/*.tsx'],
     languageOptions: {

apps/lockfile-explorer-web/package.json

@@ -12,7 +12,6 @@
     "_phase:test": "heft run --only test -- --clean"
   },
   "dependencies": {
-    "@lifaon/path": "~2.1.0",
     "@reduxjs/toolkit": "~1.8.6",
     "@rushstack/rush-themed-ui": "workspace:*",
     "react-dom": "~17.0.2",

apps/lockfile-explorer-web/src/containers/BookmarksSidebar/index.tsx

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
 import appStyles from '../../App.scss';
 import styles from './styles.scss';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import type { LockfileEntry } from '../../parsing/LfxGraph';
+import type { LfxGraphEntry } from '../../packlets/lfx-shared';
 import { clearStackAndPush, removeBookmark } from '../../store/slices/entrySlice';
 import { Button, ScrollArea, Text } from '@rushstack/rush-themed-ui';
 
@@ -14,13 +14,13 @@ export const BookmarksSidebar = (): JSX.Element => {
   const dispatch = useAppDispatch();
 
   const clear = useCallback(
-    (entry: LockfileEntry) => () => {
+    (entry: LfxGraphEntry) => () => {
       dispatch(clearStackAndPush(entry));
     },
     [dispatch]
   );
   const deleteEntry = useCallback(
-    (entry: LockfileEntry) => () => {
+    (entry: LfxGraphEntry) => () => {
       dispatch(removeBookmark(entry));
     },
     [dispatch]

apps/lockfile-explorer-web/src/containers/LockfileEntryDetailsView/index.tsx

@@ -3,14 +3,15 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollArea, Text } from '@rushstack/rush-themed-ui';
+
 import styles from './styles.scss';
 import appStyles from '../../App.scss';
-import { DependencyKind, type LockfileDependency } from '../../parsing/LfxGraph';
+
+import { LfxDependencyKind, type LfxGraphDependency, type LfxGraphEntry } from '../../packlets/lfx-shared';
 import { readPackageJsonAsync } from '../../helpers/lfxApiClient';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { pushToStack, selectCurrentEntry } from '../../store/slices/entrySlice';
 import { ReactNull } from '../../types/ReactNull';
-import type { LockfileEntry } from '../../parsing/LfxGraph';
 import { logDiagnosticInfo } from '../../helpers/logDiagnosticInfo';
 import { displaySpecChanges } from '../../helpers/displaySpecChanges';
 import type { IPackageJson } from '../../types/IPackageJson';
@@ -27,7 +28,7 @@ enum DependencyKey {
 }
 
 interface IInfluencerType {
-  entry: LockfileEntry;
+  entry: LfxGraphEntry;
   type: DependencyType;
 }
 
@@ -36,14 +37,14 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
   const specChanges = useAppSelector((state) => state.workspace.specChanges);
   const dispatch = useAppDispatch();
 
-  const [inspectDependency, setInspectDependency] = useState<LockfileDependency | null>(null);
+  const [inspectDependency, setInspectDependency] = useState<LfxGraphDependency | null>(null);
   const [influencers, setInfluencers] = useState<IInfluencerType[]>([]);
   const [directRefsPackageJSON, setDirectRefsPackageJSON] = useState<Map<string, IPackageJson | undefined>>(
     new Map()
   );
 
   useEffect(() => {
-    async function loadPackageJson(referrers: LockfileEntry[]): Promise<void> {
+    async function loadPackageJson(referrers: LfxGraphEntry[]): Promise<void> {
       const referrersJsonMap = new Map<string, IPackageJson | undefined>();
       await Promise.all(
         referrers.map(async (ref) => {
@@ -80,15 +81,15 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
 
         // Check if we need to calculate influencers.
         // If the current dependencyToTrace is a peer dependency then we do
-        if (dependencyToTrace.dependencyType !== DependencyKind.PEER_DEPENDENCY) {
+        if (dependencyToTrace.dependencyType !== LfxDependencyKind.Peer) {
           return;
         }
 
         // calculate influencers
         const stack = [selectedEntry];
-        const determinants = new Set<LockfileEntry>();
-        const transitiveReferrers = new Set<LockfileEntry>();
-        const visitedNodes = new Set<LockfileEntry>();
+        const determinants = new Set<LfxGraphEntry>();
+        const transitiveReferrers = new Set<LfxGraphEntry>();
+        const visitedNodes = new Set<LfxGraphEntry>();
         visitedNodes.add(selectedEntry);
         while (stack.length) {
           const currEntry = stack.pop();
@@ -179,7 +180,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
               package.json spec:{' '}
             </Text>
             <Text type="span">
-              {inspectDependency.dependencyType === DependencyKind.PEER_DEPENDENCY
+              {inspectDependency.dependencyType === LfxDependencyKind.Peer
                 ? `"${inspectDependency.peerDependencyMeta.version}" ${
                     inspectDependency.peerDependencyMeta.optional ? 'Optional' : 'Required'
                   } Peer`
@@ -203,17 +204,15 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
 
   const renderPeerDependencies = (): JSX.Element | ReactNull => {
     if (!selectedEntry) return ReactNull;
-    const peerDeps = selectedEntry.dependencies.filter(
-      (d) => d.dependencyType === DependencyKind.PEER_DEPENDENCY
-    );
+    const peerDeps = selectedEntry.dependencies.filter((d) => d.dependencyType === LfxDependencyKind.Peer);
     if (!peerDeps.length) {
       return (
         <div className={`${appStyles.ContainerCard} ${styles.InfluencerList}`}>
           <Text type="h5">No peer dependencies.</Text>
         </div>
       );
     }
-    if (!inspectDependency || inspectDependency.dependencyType !== DependencyKind.PEER_DEPENDENCY) {
+    if (!inspectDependency || inspectDependency.dependencyType !== LfxDependencyKind.Peer) {
       return (
         <div className={`${appStyles.ContainerCard} ${styles.InfluencerList}`}>
           <Text type="h5">Select a peer dependency to view its influencers</Text>
@@ -301,7 +300,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
           </Text>
           <div className={styles.DependencyListWrapper}>
             <ScrollArea>
-              {selectedEntry.referrers?.map((referrer: LockfileEntry) => (
+              {selectedEntry.referrers?.map((referrer: LfxGraphEntry) => (
                 <div
                   className={styles.DependencyItem}
                   key={referrer.rawEntryId}
@@ -328,7 +327,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
           </Text>
           <div className={styles.DependencyListWrapper}>
             <ScrollArea>
-              {selectedEntry.dependencies?.map((dependency: LockfileDependency) => (
+              {selectedEntry.dependencies?.map((dependency: LfxGraphDependency) => (
                 <div
                   className={`${styles.DependencyItem} ${
                     inspectDependency?.entryId === dependency.entryId && styles.SelectedDependencyItem
@@ -338,7 +337,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
                 >
                   <Text type="h5" bold>
                     Name: {dependency.name}{' '}
-                    {dependency.dependencyType === DependencyKind.PEER_DEPENDENCY
+                    {dependency.dependencyType === LfxDependencyKind.Peer
                       ? `${
                           dependency.peerDependencyMeta.optional ? '(Optional)' : '(Non-optional)'
                         } Peer Dependency`