2024 02

README.md

@@ -42,7 +42,7 @@ https://user-images.githubusercontent.com/3150694/232305636-e8b63780-4777-4d27-8
         </tr>
         <tr>
             <td colspan="2">Virtualization</td>
-            <td>❌</td>
+            <td>✅</td>
         </tr>
         <tr>
             <td colspan="2">Sections (with title)</td>

package.json

@@ -40,9 +40,8 @@
   "packageManager": "[email protected]",
   "resolutions": {
     "styled-components": "5.3.5",
+    "typescript": "4.7.4",
     "[email protected]": "patch:cypress-plugin-snapshots@npm:1.4.4#.yarn/patches/cypress-plugin-snapshots-npm-1.4.4-a6166116fb.patch",
-    "@react-aria/[email protected]": "patch:@react-aria/overlays@npm:3.7.5#.yarn/patches/@react-aria-overlays-npm-3.7.5-7d05242971.patch",
-    "@react-stately/[email protected]": "patch:@react-stately/layout@npm:3.4.4#.yarn/patches/@react-stately-layout-npm-3.4.4-75ff8d9e5d.patch",
     "@parcel/[email protected]": "patch:@parcel/transformer-js@npm:2.6.0#.yarn/patches/@parcel-transformer-js-npm-2.6.0-6caf2205a6.patch"
   }
 }

packages/example-app/babel.config.js

@@ -0,0 +1 @@
+module.exports = require("../../babel.config");

packages/example-app/fixture/git/diff-example.git/HEAD

@@ -0,0 +1 @@
+ref: refs/heads/master

packages/example-app/fixture/git/diff-example.git/config

@@ -0,0 +1,7 @@
+[core]
+	repositoryformatversion = 0
+	filemode = true
+	bare = true
+	logallrefupdates = true
+	ignorecase = true
+	precomposeunicode = true

packages/example-app/fixture/git/diff-example.git/logs/HEAD

@@ -0,0 +1,7 @@
+0000000000000000000000000000000000000000 39adfc50dabeea269ae5ac793bdf83317f841e17 Alireza <[email protected]> 1710443455 +0100	commit (initial): initial state
+39adfc50dabeea269ae5ac793bdf83317f841e17 e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 Alireza <[email protected]> 1710443674 +0100	commit (amend): initial state
+e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 4f2658865baff125a1c9fa98efdf12895105ac6e Alireza <[email protected]> 1710443879 +0100	commit: changed
+4f2658865baff125a1c9fa98efdf12895105ac6e 4f2658865baff125a1c9fa98efdf12895105ac6e Alireza <[email protected]> 1710446181 +0100	checkout: moving from master to master
+4f2658865baff125a1c9fa98efdf12895105ac6e e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 Alireza <[email protected]> 1710446337 +0100	reset: moving to e99d0fad1a864fa41d6d89bfabb5e0f1c0361987
+e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 21d19576802af30b349e49ce09ff3201755a2457 Alireza <[email protected]> 1710446428 +0100	commit (amend): initial state
+21d19576802af30b349e49ce09ff3201755a2457 7a4535a30be43ee6a9099ab3f625a3483934de35 Alireza <[email protected]> 1710446846 +0100	commit: changes: 2 new | 2 renamed | 2 deleted

packages/example-app/fixture/git/diff-example.git/logs/refs/heads/master

@@ -0,0 +1,6 @@
+0000000000000000000000000000000000000000 39adfc50dabeea269ae5ac793bdf83317f841e17 Alireza <[email protected]> 1710443455 +0100	commit (initial): initial state
+39adfc50dabeea269ae5ac793bdf83317f841e17 e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 Alireza <[email protected]> 1710443674 +0100	commit (amend): initial state
+e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 4f2658865baff125a1c9fa98efdf12895105ac6e Alireza <[email protected]> 1710443879 +0100	commit: changed
+4f2658865baff125a1c9fa98efdf12895105ac6e e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 Alireza <[email protected]> 1710446337 +0100	reset: moving to e99d0fad1a864fa41d6d89bfabb5e0f1c0361987
+e99d0fad1a864fa41d6d89bfabb5e0f1c0361987 21d19576802af30b349e49ce09ff3201755a2457 Alireza <[email protected]> 1710446428 +0100	commit (amend): initial state
+21d19576802af30b349e49ce09ff3201755a2457 7a4535a30be43ee6a9099ab3f625a3483934de35 Alireza <[email protected]> 1710446846 +0100	commit: changes: 2 new | 2 renamed | 2 deleted

packages/example-app/fixture/git/diff-example.git/objects/info/packs

@@ -0,0 +1,2 @@
+P pack-12a63299528292ad7bedaf4a7127ee5b8a2b6d3f.pack
+

packages/example-app/fixture/git/diff-example.git/refs/heads/master

@@ -0,0 +1 @@
+7a4535a30be43ee6a9099ab3f625a3483934de35

packages/example-app/fixture/git/example-branches.git/HEAD

@@ -0,0 +1 @@
+ref: refs/heads/master

packages/example-app/fixture/git/example-branches.git/packed-refs

@@ -0,0 +1,9 @@
+# pack-refs with: peeled fully-peeled sorted 
+5b1b99986a0096c774f26a4917dbad0ac31d2d26 refs/heads/RC1.0
+8dbd80de7185d12e6b6e58fcab18900a7c88d3af refs/heads/enhancement
+9d037db880dc2e11ac4aa1d80c322aed65269089 refs/heads/featureGreen
+7be5c69bb17c73d37af6f076a9a9442b22c76a13 refs/heads/featureRed
+dd6d5a5085d7bec5850eef36b7e0b7059fc68be1 refs/heads/gh-pages
+14d63f8c757e52f7e60e13765031a7fdf0768195 refs/heads/master
+5086927860395c3a173df36eabe9f2525c357bc2 refs/heads/topic1
+d5ed0e6a098710ad9dfe08bc7039fc6e61d00fa3 refs/heads/topic2

packages/example-app/jest.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  moduleNameMapper: {
+    "@intellij-platform/core(.*)$": "<rootDir>/../jui/src/$1",
+  },
+};

packages/example-app/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "scripts": {
     "serve": "../../node_modules/.bin/parcel serve",
+    "jest:type-check": "tsc --project tsconfig.jest.json",
+    "test": "jest",
+    "type-check": "tsc --project tsconfig.app.json && yarn run jest:type-check",
     "build": "../../node_modules/.bin/parcel build"
   },
   "source": "src/index.html",
@@ -19,6 +22,8 @@
     "@recoiljs/refine": "^0.1.1",
     "browserfs": "^2.0.0",
     "caf": "^15.0.0-preB",
+    "clipboard-copy": "^4.0.1",
+    "diff": "^5.2.0",
     "fast-xml-parser": "^4.2.7",
     "intl-messageformat": "^9.11.2",
     "isomorphic-git": "^1.24.3",
@@ -34,8 +39,10 @@
     "xterm-for-react": "^1.0.4"
   },
   "devDependencies": {
+    "@types/diff": "^5.0.9",
     "@types/jest": "^29.5.2",
     "@types/uuid": "^9.0.7",
-    "jest": "^29.5.0"
+    "jest": "^29.5.0",
+    "typescript": "workspace:*"
   }
 }

packages/example-app/src/App.tsx

@@ -1,3 +1,4 @@
+import * as path from "path";
 import React, { CSSProperties, useRef } from "react";
 import { RecoilRoot } from "recoil";
 import git from "isomorphic-git";
@@ -15,7 +16,7 @@ import { SampleRepoInitializer } from "./SampleRepoInitializer";
 import { fs, WaitForFs } from "./fs/fs";
 import { exampleAppKeymap } from "./exampleAppKeymap";
 import { ToolWindowsRefContext } from "./Project/useToolWindowManager";
-import * as path from "path";
+import "./jetbrains-mono-font.css";
 
 // useful globals for debugging purposes
 (window as any).git = git;

packages/example-app/src/Editor/Editor.tsx

@@ -26,15 +26,18 @@ export const StyledEditor = styled(MonacoEditor)`
  */
 export const Editor = (props: Omit<EditorProps, "theme">) => {
   const editorTheme = useEditorTheme();
+  const fontSize = 13;
   return (
     <StyledEditor
       {...props}
       options={{
         minimap: { enabled: false },
-        lineHeight: 20,
+        lineHeight: 22,
         showFoldingControls: "always",
         renderIndentGuides: true,
         overviewRulerBorder: false,
+        fontFamily: "JetBrains Mono",
+        fontSize,
         scrollbar: {
           verticalScrollbarSize: 14,
           horizontalScrollbarSize: 8,

packages/example-app/src/LoadingGif.tsx

@@ -3,6 +3,6 @@ import React, { ComponentProps } from "react";
 import loadingGif from "./resources/loading.gif";
 import loadingDarkGif from "./resources/loading_dark.gif";
 
-export const LoadingGif: React.FC = (
+export const LoadingGif = (
   props: Omit<ComponentProps<typeof Img>, "src" | "darkSrc" | "srcSet">
 ) => <Img {...props} src={loadingGif} darkSrc={loadingDarkGif} />;

packages/example-app/src/Project/Project.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, RefObject } from "react";
+import React, { CSSProperties, RefObject, useEffect } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import {
   ActionDefinition,
@@ -9,7 +9,10 @@ import {
   useBalloonManager,
 } from "@intellij-platform/core";
 import { FileEditor } from "../Editor/FileEditor";
-import { useInitializeVcs } from "../VersionControl/file-status.state";
+import {
+  useInitializeVcs,
+  useRefreshVcsRoots,
+} from "../VersionControl/file-status.state";
 import { toolWindows } from "./toolWindows";
 import { useInitializeChanges } from "../VersionControl/Changes/change-lists.state";
 import { IdeStatusBar } from "../StatusBar/IdeStatusBar";
@@ -42,7 +45,11 @@ export const Project = ({
   const [state, setState] = useRecoilState(toolWindowsState);
   const isRollbackWindowOpen = useRecoilValue(rollbackViewState.isOpen);
   const isSearchEveryWhereOpen = useRecoilValue(searchEverywhereState.isOpen);
+  const refreshVcsRoots = useRefreshVcsRoots();
 
+  useEffect(() => {
+    refreshVcsRoots();
+  }, []);
   useInitializeVcs();
   useInitializeChanges();
   usePersistenceFsNotification();

packages/example-app/src/SearchEverywhere/SearchEverywherePopup.tsx

@@ -276,7 +276,7 @@ export function SearchEverywherePopup() {
 
   const close = () => setOpen(false);
 
-  const collectionRef = useRef<HTMLUListElement>(null);
+  const collectionRef = useRef<HTMLDivElement>(null);
   const selectionManagerRef = useRef<SelectionManager>(null);
   const { collectionSearchInputProps } = useCollectionSearchInput({
     collectionRef,

packages/example-app/src/StatusBar/BranchPopupTrigger.tsx

@@ -1,44 +1,60 @@
 import {
   ActionTooltip,
   PlatformIcon,
+  PopupTrigger,
   StatusBarWidget,
   TooltipTrigger,
 } from "@intellij-platform/core";
 import React from "react";
 
 import { activeFileRepoHeadState } from "../VersionControl/active-file.state";
 import { useLatestRecoilValue } from "../recoil-utils";
+import { BranchesPopup } from "../VersionControl/Branches/BranchesPopup";
+import { useShowGitTipIfNeeded } from "../VersionControl/useShowGitTipIfNeeded";
 
 export function BranchPopupTrigger() {
-  const gitRepoHead = useLatestRecoilValue(activeFileRepoHeadState);
+  const [gitRepoHead] = useLatestRecoilValue(activeFileRepoHeadState);
+  const maybeShowGitCloneTip = useShowGitTipIfNeeded();
 
   return (
     gitRepoHead && (
-      <TooltipTrigger
-        tooltip={
-          <ActionTooltip
-            actionName={
-              gitRepoHead.detached
-                ? "Git: Detached HEAD doesn't point to any branch"
-                : `Git Branch: ${gitRepoHead.head}`
-            }
-          />
-        }
+      <PopupTrigger
+        placement="top"
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            setTimeout(maybeShowGitCloneTip, 500);
+          }
+        }}
+        popup={({ close }) => <BranchesPopup onClose={close} />}
       >
-        <StatusBarWidget
-          icon={
-            <PlatformIcon
-              icon={
-                gitRepoHead.detached ? "general/warning.svg" : "vcs/branch.svg"
+        <TooltipTrigger
+          tooltip={
+            <ActionTooltip
+              actionName={
+                gitRepoHead.detached
+                  ? "Git: Detached HEAD doesn't point to any branch"
+                  : `Git Branch: ${gitRepoHead.head}`
               }
             />
           }
-          label={gitRepoHead.head.slice(
-            0,
-            gitRepoHead.detached ? 8 : undefined
-          )}
-        />
-      </TooltipTrigger>
+        >
+          <StatusBarWidget
+            icon={
+              <PlatformIcon
+                icon={
+                  gitRepoHead.detached
+                    ? "general/warning.svg"
+                    : "vcs/branch.svg"
+                }
+              />
+            }
+            label={gitRepoHead.head.slice(
+              0,
+              gitRepoHead.detached ? 8 : undefined
+            )}
+          />
+        </TooltipTrigger>
+      </PopupTrigger>
     )
   );
 }

packages/example-app/src/StatusBar/IdeStatusBar.tsx

@@ -8,15 +8,12 @@ import {
   MenuItemLayout,
   MenuTrigger,
   PlatformIcon,
-  PopupTrigger,
   StatusBar,
   StatusBarWidget,
 } from "@intellij-platform/core";
 
 import { editorCursorPositionState } from "../Editor/editor.state";
-import { BranchesPopup } from "../VersionControl/Branches/BranchesPopup";
 import { notImplemented } from "../Project/notImplemented";
-import { useShowGitTipIfNeeded } from "../VersionControl/useShowGitTipIfNeeded";
 import { StatusBarTaskProgressBar } from "./StatusBarTaskProgressBar";
 import { BranchPopupTrigger } from "./BranchPopupTrigger";
 
@@ -26,7 +23,6 @@ const StyledLastMessage = styled.div`
 `;
 export const IdeStatusBar = () => {
   const cursorPosition = useRecoilValue(editorCursorPositionState);
-  const maybeShowGitCloneTip = useShowGitTipIfNeeded();
 
   return (
     <StatusBar
@@ -93,17 +89,7 @@ export const IdeStatusBar = () => {
               <StatusBarWidget {...props} ref={ref} label="TypeScript 4.4.3" />
             )}
           </MenuTrigger>
-          <PopupTrigger
-            placement="top"
-            onOpenChange={(isOpen) => {
-              if (!isOpen) {
-                setTimeout(maybeShowGitCloneTip, 500);
-              }
-            }}
-            popup={({ close }) => <BranchesPopup onClose={close} />}
-          >
-            <BranchPopupTrigger />
-          </PopupTrigger>
+          <BranchPopupTrigger />
           <StatusBarWidget icon={<PlatformIcon icon="ide/readwrite.svg" />} />
           <StatusBarWidget icon={<PlatformIcon icon="ide/fatalError.svg" />} />
         </>

packages/example-app/src/VersionControl/Branches/BranchesPopup.tsx

@@ -63,7 +63,7 @@ export const branchesPopupSizeState = atom<
 });
 
 export function BranchesPopup({ onClose }: { onClose: () => void }) {
-  const repoBranches = useLatestRecoilValue(allBranchesState);
+  const [repoBranches] = useLatestRecoilValue(allBranchesState);
   const [branchesPopupPersistedSize, setBranchesPopupPersistedSize] =
     useRecoilState(branchesPopupSizeState);
   const [branchesPopupBounds, setBranchesPopupBounds] = useState<

packages/example-app/src/VersionControl/Changes/Change.ts

@@ -0,0 +1,58 @@
+import { FileStatus } from "../file-status";
+
+export type Revision = {
+  path: string;
+  isDir: boolean;
+  content(): Promise<string>;
+};
+
+export interface Change {
+  before?: Revision;
+  after?: Revision;
+}
+export type ModificationChange = Required<Change>;
+export type DeletionChange = {
+  before: Revision;
+  after: undefined;
+};
+export type AdditionChange = {
+  before: undefined;
+  after: Revision;
+};
+
+/**
+ * Experimenting a pattern of exporting both a type and a value under the same name, to collocate behavior and interface
+ * while still using plain objects, to avoid caveats of using class.
+ */
+export class Change {
+  static path(change: Change): string {
+    return (change.after ?? change.before)?.path ?? "";
+  }
+  static type(
+    change: Change
+  ): // Making sure the return value is a subset of FileStatus
+  Extract<FileStatus, "MODIFIED" | "ADDED" | "DELETED"> {
+    if (change.after) {
+      if (change.before) {
+        return "MODIFIED";
+      }
+      return "ADDED";
+    }
+    return "DELETED";
+  }
+  static isAddition(change: Change): change is AdditionChange {
+    return Change.type(change) === "ADDED";
+  }
+  static isModification(change: Change): change is ModificationChange {
+    return Change.type(change) === "MODIFIED";
+  }
+  static isDeletion(change: Change): change is DeletionChange {
+    return Change.type(change) === "DELETED";
+  }
+  static isRename(change: Change): change is ModificationChange {
+    return (
+      Change.isModification(change) &&
+      change.before?.path !== change.after?.path
+    );
+  }
+}