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

vzcode 0.51.0 → 0.52.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 (14) hide show

package/dist/assets/{index-jYtAJn79.css → index-7PozlhVS.css} +1 -1
package/dist/assets/index-zjaIucrc.js +147 -0
package/dist/assets/worker-y75r0vyN.js +232 -0
package/dist/index.html +2 -2
package/package.json +10 -10
package/src/client/TabList/Tab.tsx +2 -2
package/src/client/VZCodeContext.tsx +11 -19
package/src/client/tabsSearchParameters.test.ts +54 -78
package/src/client/tabsSearchParameters.ts +121 -60
package/src/client/useURLSync.ts +134 -0
package/src/client/vzReducer/createInitialState.ts +4 -11
package/src/client/vzReducer/index.ts +3 -3
package/dist/assets/index-yk4vJ5U-.js +0 -147
package/dist/assets/worker-fboacSft.js +0 -234

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-yk4vJ5U-.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-jYtAJn79.css">
+    <script type="module" crossorigin src="/assets/index-zjaIucrc.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-7PozlhVS.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -63,12 +63,12 @@
   },
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.7",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.23.0",
@@ -99,24 +99,24 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.0.3",
-    "openai": "^4.24.3",
+    "openai": "^4.24.7",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.2",
+    "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.2",
     "sharedb": "^4.1.2",
     "sharedb-client-browser": "^4.4.0",
-    "vizhub-ui": "^3.17.0",
+    "vizhub-ui": "^3.18.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.47",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
-    "prettier": "^3.1.1",
-    "sass": "^1.69.7",
+    "prettier": "^3.2.4",
+    "sass": "^1.70.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
-    "vitest": "^1.1.3"
+    "vitest": "^1.2.1"
   }
 }

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

@@ -21,7 +21,7 @@ export const Tab = ({
   fileName,
 }: {
   fileId: FileId;
-  isTransient: boolean;
+  isTransient?: boolean;
   isActive: boolean;
   setActiveFileId: (fileId: FileId) => void;
   openTab: (tabState: TabState) => void;
@@ -49,7 +49,7 @@ export const Tab = ({
   // Double-clicking a transient tab makes it a persistent tab.
   const handleDoubleClick = useCallback(() => {
-    openTab({ fileId, isTransient: false });
+    openTab({ fileId });
   }, [fileId, openTab]);
   return (

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -24,10 +24,7 @@ import {
   EditorCache,
   useEditorCache,
 } from './useEditorCache';
-import {
-  useInitialTabs,
-  usePersistTabs,
-} from './tabsSearchParameters';
+import { useURLSync } from './useURLSync';
 // This context centralizes all the "smart" logic
 // to do with the application state. This includes
@@ -146,22 +143,11 @@ 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,
-      initialTabList,
-      initialActiveFileId,
-    },
+    { defaultTheme, initialUsername },
     createInitialState,
   );
@@ -175,9 +161,6 @@ export const VZCodeProvider = ({
     username,
   } = state;
-  // Sync tab state to the URL
-  usePersistTabs({ activeFileId, tabList });
   // Functions for dispatching actions to the reducer.
   const {
     setActiveFileId,
@@ -190,6 +173,15 @@ export const VZCodeProvider = ({
     setUsername,
   } = useActions(dispatch);
+  // Sync tab state to the URL.
+  useURLSync({
+    content,
+    openTab,
+    setActiveFileId,
+    tabList,
+    activeFileId,
+  });
   // The set of open directories.
   // TODO move this into reducer/useActions
   const { isDirectoryOpen, toggleDirectory } =

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

@@ -1,102 +1,78 @@
-import { describe, expect, it, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import {
   encodeTabs,
   decodeTabs,
-  type EditorTabsState,
+  delimiter,
 } from './tabsSearchParameters';
+import { VZCodeContent } from '../types';
 describe('tabsSearchParameters', () => {
   test.each([
     {
       name: 'empty',
-      search: '',
-      state: { tabList: [], activeFileId: null },
+      tabStateParams: {},
+      tabList: [],
+      activeFileId: null,
     },
     {
-      name: 'persistent tab',
-      search: '123=pa',
-      state: {
-        tabList: [{ fileId: '123', isTransient: false }],
-        activeFileId: '123',
+      name: 'single active tab',
+      tabStateParams: {
+        file: 'index.html',
       },
-    },
-    {
-      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,
-      },
+      tabList: [{ fileId: '789' }],
+      activeFileId: '789',
     },
     {
-      name: 'unknown characters',
-      search: '890=xytzaw',
-      correctedSearch: '890=ta',
-      state: {
-        tabList: [{ fileId: '890', isTransient: true }],
-        activeFileId: '890',
+      name: 'multiple tabs, active tab first',
+      tabStateParams: {
+        file: 'index.html',
+        tabs: `index.html${delimiter}README.md${delimiter}index.js`,
       },
+      tabList: [
+        { fileId: '789' },
+        { fileId: '456' },
+        { fileId: '123' },
+      ],
+      activeFileId: '789',
     },
     {
-      name: 'wrong order',
-      search: '321=ap',
-      correctedSearch: '321=pa',
-      state: {
-        tabList: [{ fileId: '321', isTransient: false }],
-        activeFileId: '321',
+      name: 'multiple tabs, active tab in middle',
+      tabStateParams: {
+        file: 'README.md',
+        tabs: `index.html${delimiter}README.md${delimiter}index.js`,
       },
+      tabList: [
+        { fileId: '789' },
+        { fileId: '456' },
+        { fileId: '123' },
+      ],
+      activeFileId: '456',
     },
   ])(
-    '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);
+    'round trip: $name',
+    ({ tabStateParams, tabList, activeFileId }) => {
+      // Fake Content object
+      const content: VZCodeContent = {
+        files: {
+          '123': { name: 'index.js', text: 'abc' },
+          '456': { name: 'README.md', text: 'def' },
+          '789': { name: 'index.html', text: 'ghi' },
+        },
+      };
+      const decoded = decodeTabs({
+        tabStateParams,
+        content,
+      });
+      const expected = { tabList, activeFileId };
+      expect(decoded).toStrictEqual(expected);
+      const encoded = encodeTabs({
+        tabList,
+        activeFileId,
+        content,
+      });
+      expect(encoded).toEqual(tabStateParams);
     },
   );
 });

package/src/client/tabsSearchParameters.ts CHANGED Viewed

@@ -1,76 +1,137 @@
-import { useEffect } from 'react';
-import {
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
-import { FileId } from '../types';
+import { FileId, VZCodeContent } 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>;
-}
+// The delimiter used to separate file names in the `tabs` parameter.
+// We need a character that is both URL-safe (does not get escaped in URLs)
+// and is not typically found in file names, especially for JavaScript and CSS files.
+//
+// The following characters are not URL-safe as they get converted to escaped sequences in URLs,
+// leading to less readable URLs:
+// - `+` becomes `%2B`
+// - `|` becomes `%7C`
+// - `;` becomes `%3B`
+// - `:` becomes `%3A`
+// - `,` becomes `%2C`
+// - `!` becomes `%21`
+// - `/` becomes `%2F`
+//
+// The following characters, while URL-safe, are commonly used in file names,
+// hence using them could lead to conflicts or misinterpretation:
+// - `.` commonly used as a dot separator in file names and extensions
+// - ` ` (space) often found in file names but can lead to issues in URLs
+// - `-` (hyphen) frequently used in file and folder names for readability
+// - `_` (underscore) also commonly used in file and folder names
+//
+// Considering the above constraints, we need a character that is both URL-safe
+// and not typically used in file names. The following character meets these criteria:
+// - `~` is URL-safe (remains unescaped in URLs) and is not a standard character
+//   in file names for JavaScript and CSS files, making it a suitable choice for a delimiter.
+export const delimiter = '~';
-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';
+// Gets the file id of a file with the given name.
+// Returns null if not found.
+const getFileId = (
+  content: VZCodeContent,
+  fileName: string,
+): string | null => {
+  if (content && content.files) {
+    for (const fileId of Object.keys(content.files)) {
+      const file = content.files[fileId];
+      if (file.name === fileName) {
+        return fileId;
+      }
     }
-    searchParams.set(tab.fileId, tabState);
   }
-  return searchParams;
+  return null;
 };
-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;
+// Gets the file name of a file with the given id,
+// guard against failure cases.
+// Returns null if not found.
+const getFileName = (
+  content: VZCodeContent,
+  fileId: string,
+): string | null => {
+  if (content && content.files) {
+    const file = content.files[fileId];
+    if (file) {
+      return file.name;
     }
-    tabList.push({ fileId, isTransient });
   }
-  return { tabList, activeFileId };
+  return null;
 };
-export const useInitialTabs = (): EditorTabsState => {
-  let [searchParams] = useSearchParams();
+// An object representing the search parameters.
+export type TabStateParams = {
+  file?: string;
+  tabs?: string;
+};
-  return decodeTabs(searchParams);
+// Decodes the tab list and active file from the search parameters.
+export const decodeTabs = ({
+  tabStateParams,
+  content,
+}: {
+  tabStateParams: TabStateParams;
+  content: VZCodeContent;
+}): {
+  tabList: Array<TabState>;
+  activeFileId: FileId;
+} => {
+  const { file, tabs } = tabStateParams;
+  const tabList: TabState[] = [];
+  // Decode active file
+  const activeFileId = getFileId(content, file);
+  // Decode tab list
+  if (tabs) {
+    tabs.split(delimiter).forEach((fileName) => {
+      const fileId = getFileId(content, fileName);
+      if (fileId) {
+        tabList.push({ fileId });
+      }
+    });
+  } else if (activeFileId) {
+    // If there's only an active file without a tab list
+    tabList.push({ fileId: activeFileId });
+  }
+  return { tabList, activeFileId };
 };
-export const usePersistTabs = ({
-  activeFileId,
+// Encodes the tab list and active file into the search parameters.
+export const encodeTabs = ({
   tabList,
-}: EditorTabsState) => {
-  const navigate = useNavigate();
-  useEffect(() => {
-    navigate(
-      {
-        search: encodeTabs({
-          activeFileId,
-          tabList,
-        })
-          .toString()
-          .replace(/^\?$/, ''),
-      },
-      { replace: true },
-    );
-  }, [activeFileId, tabList]);
+  activeFileId,
+  content,
+}: {
+  tabList: Array<TabState>;
+  activeFileId: FileId | null;
+  content: VZCodeContent;
+}): TabStateParams => {
+  // Get the file name of the active file
+  const activeFileName = getFileName(content, activeFileId);
+  const params: TabStateParams = {};
+  // If that's missing, no need to proceed (should never happen).
+  if (activeFileName) {
+    // In any case we set the `file` parameter.
+    params.file = activeFileName;
+    // We only need to encode the `tabs` parameter
+    // if there's more than one tab.
+    if (tabList.length > 1) {
+      // Set tab list
+      const tabs = tabList
+        .map((tabstate: TabState) =>
+          getFileName(content, tabstate.fileId),
+        )
+        .join(delimiter);
+      params.tabs = tabs;
+    }
+  }
+  return params;
 };

package/src/client/useURLSync.ts ADDED Viewed

@@ -0,0 +1,134 @@
+import { useSearchParams } from 'react-router-dom';
+import { FileId, VZCodeContent } from '../types';
+import { TabState } from './vzReducer';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  TabStateParams,
+  decodeTabs,
+  encodeTabs,
+} from './tabsSearchParameters';
+// Synchronizes the tab state with the URL parameters.
+export const useURLSync = ({
+  content,
+  openTab,
+  setActiveFileId,
+  tabList,
+  activeFileId,
+}: {
+  content: VZCodeContent | null;
+  openTab: (tabState: TabState) => void;
+  setActiveFileId: (activeFileId: FileId) => void;
+  tabList: Array<TabState>;
+  activeFileId: FileId | null;
+}) => {
+  // Use React router to get and set the  search parameters.
+  const [searchParams, setSearchParams] = useSearchParams();
+  // Extract the tab state parameters from the search parameters.
+  const tabStateParams: TabStateParams = useMemo(
+    () => ({
+      file: searchParams.get('file'),
+      tabs: searchParams.get('tabs'),
+    }),
+    [searchParams],
+  );
+  // `true` after the state is updated based on the
+  // initial search parameters from the URL.
+  const isInitialized = useRef(false);
+  // Initialize the state based on the search parameters.
+  useEffect(() => {
+    // Do nothing if the state has already been initialized.
+    if (isInitialized.current) {
+      return;
+    }
+    // Wait for the content to be loaded.
+    if (!content) {
+      return;
+    }
+    // Decode the search parameters.
+    const { tabList, activeFileId } = decodeTabs({
+      tabStateParams,
+      content,
+    });
+    // Mark the state as initialized.
+    isInitialized.current = true;
+    // Update the state.
+    setActiveFileId(activeFileId);
+    tabList.forEach(openTab);
+  }, [
+    content,
+    searchParams,
+    setActiveFileId,
+    openTab,
+    isInitialized,
+  ]);
+  // Track content in a ref so that we can use it in the
+  // effect below without triggering the effect when
+  // the content changes.
+  const contentRef = useRef(content);
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
+  // Update the URL to match the current state whenever
+  // the active file or tab list changes.
+  useEffect(() => {
+    // Safety check to make sure the content is loaded.
+    // Should never happen.
+    if (!contentRef.current) {
+      return;
+    }
+    const newTabStateParams: TabStateParams = encodeTabs({
+      tabList,
+      activeFileId,
+      content: contentRef.current,
+    });
+    if (
+      tabStateParams.file !== newTabStateParams.file ||
+      tabStateParams.tabs !== newTabStateParams.tabs
+    ) {
+      // Update the URL if the search parameters have changed.
+      setSearchParams(
+        (oldSearchParams: URLSearchParams) => {
+          // Create a copy of the old search params
+          const updatedSearchParams = new URLSearchParams(
+            oldSearchParams,
+          );
+          // Set the 'file' parameter
+          if (newTabStateParams.file) {
+            updatedSearchParams.set(
+              'file',
+              newTabStateParams.file,
+            );
+          } else {
+            updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
+          }
+          // Set the 'tabs' parameter
+          if (newTabStateParams.tabs) {
+            updatedSearchParams.set(
+              'tabs',
+              newTabStateParams.tabs,
+            );
+          } else {
+            updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
+          }
+          // Return the updated search params
+          return updatedSearchParams;
+        },
+      );
+    }
+  }, [searchParams, tabList, activeFileId]);
+};

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

@@ -1,23 +1,16 @@
-import { TabState, VZState } from '.';
-import { FileId, Username } from '../../types';
+import { VZState } from '.';
+import { 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: initialTabList,
-  activeFileId:
-    initialActiveFileId ??
-    initialTabList[0]?.fileId ??
-    null,
+  tabList: [],
+  activeFileId: null,
   theme: defaultTheme,
   isSettingsOpen: false,
   editorWantsFocus: false,