npm - vzcode - Versions diffs - 0.49.0 → 0.51.0 - Mend

vzcode 0.49.0 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/assets/index-jYtAJn79.css +1 -0
package/dist/assets/{index-dQA3GbFA.js → index-yk4vJ5U-.js} +72 -45
package/dist/index.html +2 -2
package/package.json +9 -8
package/src/client/TabList/index.tsx +15 -13
package/src/client/VZCodeContext.tsx +19 -1
package/src/client/VZMiddle.tsx +16 -6
package/src/client/VZResizer/index.tsx +10 -2
package/src/client/main.jsx +4 -1
package/src/client/tabsSearchParameters.test.ts +102 -0
package/src/client/tabsSearchParameters.ts +76 -0
package/src/client/vzReducer/createInitialState.ts +11 -4
package/dist/assets/index-jLkbG0kp.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -24,8 +24,8 @@
       href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-dQA3GbFA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-jLkbG0kp.css">
+    <script type="module" crossorigin src="/assets/index-yk4vJ5U-.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-jYtAJn79.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -98,24 +98,25 @@
     "ignore": "^5.3.0",
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
-    "open": "^10.0.2",
-    "openai": "^4.24.1",
+    "open": "^10.0.3",
+    "openai": "^4.24.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.2",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
     "sharedb": "^4.1.2",
     "sharedb-client-browser": "^4.4.0",
-    "vizhub-ui": "^3.15.0",
+    "vizhub-ui": "^3.17.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "prettier": "^3.1.1",
-    "sass": "^1.69.6",
+    "sass": "^1.69.7",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vite": "^5.0.11",
+    "vitest": "^1.1.3"
   }
 }

package/src/client/TabList/index.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import { useCallback, useEffect } from 'react';
 import type { TabState } from '../vzReducer';
 import type { FileId, Files } from '../../types';
 import { Tab } from './Tab';
@@ -25,18 +24,21 @@ export const TabList = ({
   return (
     <div className="vz-tab-list">
       {files &&
-        tabList.map((tabState: TabState) => (
-          <Tab
-            key={tabState.fileId}
-            fileId={tabState.fileId}
-            isTransient={tabState.isTransient}
-            isActive={tabState.fileId === activeFileId}
-            setActiveFileId={setActiveFileId}
-            openTab={openTab}
-            closeTabs={closeTabs}
-            fileName={files[tabState.fileId].name}
-          />
-        ))}
+        tabList
+          // Handles the case that the tab list references a file that was deleted.
+          .filter((tabState) => tabState.fileId in files)
+          .map((tabState: TabState) => (
+            <Tab
+              key={tabState.fileId}
+              fileId={tabState.fileId}
+              isTransient={tabState.isTransient}
+              isActive={tabState.fileId === activeFileId}
+              setActiveFileId={setActiveFileId}
+              openTab={openTab}
+              closeTabs={closeTabs}
+              fileName={files[tabState.fileId].name}
+            />
+          ))}
     </div>
   );
 };

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -24,6 +24,10 @@ import {
   EditorCache,
   useEditorCache,
 } from './useEditorCache';
+import {
+  useInitialTabs,
+  usePersistTabs,
+} from './tabsSearchParameters';
 // This context centralizes all the "smart" logic
 // to do with the application state. This includes
@@ -142,11 +146,22 @@ export const VZCodeProvider = ({
     typeScriptWorker,
   });
+  // Get the initial open tabs from the URL
+  const {
+    tabList: initialTabList,
+    activeFileId: initialActiveFileId,
+  } = useInitialTabs();
   // Set up the reducer that manages much of the application state.
   // See https://react.dev/reference/react/useReducer
   const [state, dispatch] = useReducer(
     vzReducer,
-    { defaultTheme, initialUsername },
+    {
+      defaultTheme,
+      initialUsername,
+      initialTabList,
+      initialActiveFileId,
+    },
     createInitialState,
   );
@@ -160,6 +175,9 @@ export const VZCodeProvider = ({
     username,
   } = state;
+  // Sync tab state to the URL
+  usePersistTabs({ activeFileId, tabList });
   // Functions for dispatching actions to the reducer.
   const {
     setActiveFileId,

package/src/client/VZMiddle.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { SplitPaneResizeContext } from './SplitPaneResizeContext';
 import { TabList } from './TabList';
 import { CodeEditor } from './CodeEditor';
@@ -21,8 +21,8 @@ export const VZMiddle = ({
   aiAssistClickOverride,
 }: {
   enableAIAssist?: boolean;
-  aiAssistEndpoint: string;
-  aiAssistOptions: { [key: string]: string };
+  aiAssistEndpoint?: string;
+  aiAssistOptions?: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
 }) => {
@@ -53,6 +53,13 @@ export const VZMiddle = ({
     typeScriptWorker,
   } = useContext(VZCodeContext);
+  // This prevents the CodeEditor from rendering
+  // during SSR.
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
   return activeFileId !== null ? (
     <div
       className="middle"
@@ -67,7 +74,7 @@ export const VZMiddle = ({
         closeTabs={closeTabs}
         createFile={createFile}
       />
-      {content && activeFileId ? (
+      {isClient && content && activeFileId && (
         <CodeEditor
           shareDBDoc={shareDBDoc}
           submitOperation={submitOperation}
@@ -83,8 +90,11 @@ export const VZMiddle = ({
           username={username}
           typeScriptWorker={typeScriptWorker}
         />
-      ) : null}
-      {enableAIAssist && content && activeFileId ? (
+      )}
+      {isClient &&
+      enableAIAssist &&
+      content &&
+      activeFileId ? (
         <AIAssistWidget
           activeFileId={activeFileId}
           shareDBDoc={shareDBDoc}

package/src/client/VZResizer/index.tsx CHANGED Viewed

@@ -26,7 +26,13 @@ const resizerInteractionSurfaceWidthWhileDragging = 200;
 // This is the part of the resizer that is visible to the user.
 const resizerThumbWidth = 4;
-export const VZResizer = ({ side }: { side: Side }) => {
+export const VZResizer = ({
+  side,
+  isSidebarVisible = true,
+}: {
+  side: Side;
+  isSidebarVisible?: boolean;
+}) => {
   const {
     sidebarWidth,
     codeEditorWidth,
@@ -96,7 +102,9 @@ export const VZResizer = ({ side }: { side: Side }) => {
   const left =
     (side === 'left'
       ? sidebarWidth
-      : sidebarWidth + codeEditorWidth) -
+      : isSidebarVisible
+        ? sidebarWidth + codeEditorWidth
+        : codeEditorWidth) -
     resizerWidth / 2;
   return shouldRenderResizer ? (

package/src/client/main.jsx CHANGED Viewed

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 ReactDOM.createRoot(document.getElementById('root')).render(
   // <React.StrictMode>
-  <App />,
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
   // </React.StrictMode>,
 );

package/src/client/tabsSearchParameters.test.ts ADDED Viewed

@@ -0,0 +1,102 @@
+import { describe, expect, it, test } from 'vitest';
+import {
+  encodeTabs,
+  decodeTabs,
+  type EditorTabsState,
+} from './tabsSearchParameters';
+describe('tabsSearchParameters', () => {
+  test.each([
+    {
+      name: 'empty',
+      search: '',
+      state: { tabList: [], activeFileId: null },
+    },
+    {
+      name: 'persistent tab',
+      search: '123=pa',
+      state: {
+        tabList: [{ fileId: '123', isTransient: false }],
+        activeFileId: '123',
+      },
+    },
+    {
+      name: 'transient tab',
+      search: '456=ta',
+      state: {
+        tabList: [{ fileId: '456', isTransient: true }],
+        activeFileId: '456',
+      },
+    },
+    {
+      name: 'no active file',
+      search: '678=p',
+      state: {
+        tabList: [{ fileId: '678', isTransient: false }],
+        activeFileId: null,
+      },
+    },
+    {
+      name: 'three tabs',
+      search: '111=p&222=ta&333=p',
+      state: {
+        tabList: [
+          { fileId: '111', isTransient: false },
+          { fileId: '222', isTransient: true },
+          { fileId: '333', isTransient: false },
+        ],
+        activeFileId: '222',
+      },
+    },
+  ])('round trip: $name', ({ search, state }) => {
+    const decoded = decodeTabs(new URLSearchParams(search));
+    expect(decoded).toStrictEqual(state);
+    const encoded = encodeTabs(state).toString();
+    expect(encoded).toBe(search);
+  });
+  test.each([
+    {
+      name: 'empty value',
+      search: 'abc',
+      correctedSearch: 'abc=p',
+      state: {
+        tabList: [{ fileId: 'abc', isTransient: false }],
+        activeFileId: null,
+      },
+    },
+    {
+      name: 'unknown characters',
+      search: '890=xytzaw',
+      correctedSearch: '890=ta',
+      state: {
+        tabList: [{ fileId: '890', isTransient: true }],
+        activeFileId: '890',
+      },
+    },
+    {
+      name: 'wrong order',
+      search: '321=ap',
+      correctedSearch: '321=pa',
+      state: {
+        tabList: [{ fileId: '321', isTransient: false }],
+        activeFileId: '321',
+      },
+    },
+  ])(
+    'decode: $name',
+    ({ search, correctedSearch, state }) => {
+      const { tabList, activeFileId } = decodeTabs(
+        new URLSearchParams(),
+      );
+      expect(tabList).toStrictEqual([]);
+      expect(activeFileId).toBe(null);
+      const decoded = decodeTabs(
+        new URLSearchParams(search),
+      );
+      expect(decoded).toStrictEqual(state);
+      const corrected = encodeTabs(decoded).toString();
+      expect(corrected).toBe(correctedSearch);
+    },
+  );
+});

package/src/client/tabsSearchParameters.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import {
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
+import { FileId } from '../types';
+import { TabState } from './vzReducer';
+export interface EditorTabsState {
+  // The ID of the file that is currently active.
+  // Invariant: `activeFileId` is always in `tabList`.
+  activeFileId: FileId | null;
+  // The list of open tabs.
+  tabList: Array<TabState>;
+}
+export const encodeTabs = ({
+  tabList,
+  activeFileId,
+}: EditorTabsState): URLSearchParams => {
+  const searchParams = new URLSearchParams();
+  for (const tab of tabList) {
+    let tabState = tab.isTransient ? 't' : 'p';
+    // mark the active file
+    if (tab.fileId === activeFileId) {
+      tabState += 'a';
+    }
+    searchParams.set(tab.fileId, tabState);
+  }
+  return searchParams;
+};
+export const decodeTabs = (
+  searchParams: URLSearchParams,
+): EditorTabsState => {
+  const tabList: TabState[] = [];
+  let activeFileId = null;
+  for (const [fileId, tabState] of Array.from(
+    searchParams.entries(),
+  )) {
+    const isTransient = tabState.includes('t');
+    const isActive = tabState.includes('a');
+    if (isActive) {
+      activeFileId = fileId;
+    }
+    tabList.push({ fileId, isTransient });
+  }
+  return { tabList, activeFileId };
+};
+export const useInitialTabs = (): EditorTabsState => {
+  let [searchParams] = useSearchParams();
+  return decodeTabs(searchParams);
+};
+export const usePersistTabs = ({
+  activeFileId,
+  tabList,
+}: EditorTabsState) => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate(
+      {
+        search: encodeTabs({
+          activeFileId,
+          tabList,
+        })
+          .toString()
+          .replace(/^\?$/, ''),
+      },
+      { replace: true },
+    );
+  }, [activeFileId, tabList]);
+};

package/src/client/vzReducer/createInitialState.ts CHANGED Viewed

@@ -1,16 +1,23 @@
-import { VZState } from '.';
-import { Username } from '../../types';
+import { TabState, VZState } from '.';
+import { FileId, Username } from '../../types';
 import { ThemeLabel } from '../themes';
 export const createInitialState = ({
   defaultTheme,
   initialUsername = 'Anonymous',
+  initialTabList = [],
+  initialActiveFileId = null,
 }: {
   defaultTheme: ThemeLabel;
   initialUsername?: Username;
+  initialTabList?: TabState[];
+  initialActiveFileId?: FileId;
 }): VZState => ({
-  tabList: [],
-  activeFileId: null,
+  tabList: initialTabList,
+  activeFileId:
+    initialActiveFileId ??
+    initialTabList[0]?.fileId ??
+    null,
   theme: defaultTheme,
   isSettingsOpen: false,
   editorWantsFocus: false,