@lvce-editor/main-area-worker 1.11.0 → 1.12.0

package/dist/mainAreaWorkerMain.js

@@ -1038,6 +1038,7 @@ const Button$1 = 1;
 const Div = 4;
 const Span = 8;
 const Text = 12;
+const Img = 17;
 const Pre = 51;
 
 const Button = 'event.button';
@@ -1210,6 +1211,17 @@ const terminate = () => {
   globalThis.close();
 };
 
+const closeAll$1 = state => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      activeGroupId: undefined,
+      groups: []
+    }
+  };
+};
+
 const {
   get,
   getCommandIds,
@@ -1356,13 +1368,144 @@ const handleClickCloseTab = (state, rawGroupIndex, rawIndex) => {
   return closeTab(state, groupId, tabId);
 };
 
-const selectTab = async (state, groupIndex, index) => {
+const FileSystemReadFile = 'ExtensionHostFileSystem.readFile';
+
+// Counter for request IDs to handle race conditions
+let requestIdCounter = 0;
+const getNextRequestId = () => {
+  return ++requestIdCounter;
+};
+const updateTab = (state, tabId, updates) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const updatedGroups = groups.map(group => {
+    const tabIndex = group.tabs.findIndex(t => t.id === tabId);
+    if (tabIndex === -1) {
+      return group;
+    }
+    const updatedTabs = group.tabs.map((tab, index) => {
+      if (index === tabIndex) {
+        return {
+          ...tab,
+          ...updates
+        };
+      }
+      return tab;
+    });
+    return {
+      ...group,
+      tabs: updatedTabs
+    };
+  });
+  return {
+    ...state,
+    layout: {
+      ...layout,
+      groups: updatedGroups
+    }
+  };
+};
+const findTab = (state, tabId) => {
   const {
     layout
   } = state;
   const {
     groups
   } = layout;
+  for (const group of groups) {
+    const tab = group.tabs.find(t => t.id === tabId);
+    if (tab) {
+      return tab;
+    }
+  }
+  return undefined;
+};
+const loadFileContent = async path => {
+  // @ts-ignore
+  const content = await invoke(FileSystemReadFile, path);
+  return content;
+};
+const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
+  try {
+    const content = await loadFileContent(path);
+
+    // Check for race condition: get the latest state and verify the request ID
+    const latestState = getLatestState();
+    const latestTab = findTab(latestState, tabId);
+
+    // If the tab no longer exists or a newer request was started, discard this result
+    if (!latestTab || latestTab.loadRequestId !== requestId) {
+      return latestState;
+    }
+    return updateTab(latestState, tabId, {
+      content,
+      errorMessage: undefined,
+      loadingState: 'loaded'
+    });
+  } catch (error) {
+    // Check for race condition before updating with error
+    const latestState = getLatestState();
+    const latestTab = findTab(latestState, tabId);
+    if (!latestTab || latestTab.loadRequestId !== requestId) {
+      return latestState;
+    }
+    const errorMessage = error instanceof Error ? error.message : 'Failed to load file content';
+    return updateTab(latestState, tabId, {
+      content: '',
+      errorMessage,
+      loadingState: 'error'
+    });
+  }
+};
+
+const startContentLoading = (uid, tabId, path, requestId) => {
+  const loadContent = async () => {
+    try {
+      const currentState = get(uid);
+      if (!currentState) {
+        return;
+      }
+      const getLatestState = () => get(uid) ?? currentState;
+      const newState = await loadTabContentAsync(tabId, path, requestId, getLatestState);
+      const oldState = get(uid);
+      if (oldState) {
+        set(uid, oldState, newState);
+      }
+      await invoke('Main.refresh');
+    } catch {
+      // Silently ignore errors - the tab may have been closed or the component unmounted
+    }
+  };
+  void loadContent();
+};
+
+const shouldLoadContent = tab => {
+  // Load if:
+  // - Has a path (file-based tab)
+  // - Not already loaded or currently loading
+  if (!tab.path) {
+    return false;
+  }
+  if (tab.loadingState === 'loading') {
+    return false;
+  }
+  if (tab.loadingState === 'loaded' && tab.content) {
+    return false;
+  }
+  return true;
+};
+const selectTab = async (state, groupIndex, index) => {
+  const {
+    layout,
+    uid
+  } = state;
+  const {
+    groups
+  } = layout;
 
   // Validate indexes
   if (groupIndex < 0 || groupIndex >= groups.length) {
@@ -1381,13 +1524,40 @@ const selectTab = async (state, groupIndex, index) => {
     return state;
   }
 
+  // Check if we need to load content for the newly selected tab
+  const needsLoading = shouldLoadContent(tab);
+  const requestId = needsLoading ? getNextRequestId() : 0;
+
   // Update the groups array with the new active tab and active group
-  const updatedGroups = groups.map((g, i) => ({
-    ...g,
-    activeTabId: i === groupIndex ? tabId : g.activeTabId,
-    focused: i === groupIndex
-  }));
-  return {
+  // Also set loading state if needed
+  const updatedGroups = groups.map((g, i) => {
+    if (i !== groupIndex) {
+      return {
+        ...g,
+        focused: false
+      };
+    }
+
+    // This is the group being selected
+    const updatedTabs = needsLoading ? g.tabs.map(t => {
+      if (t.id === tabId) {
+        return {
+          ...t,
+          errorMessage: undefined,
+          loadingState: 'loading',
+          loadRequestId: requestId
+        };
+      }
+      return t;
+    }) : g.tabs;
+    return {
+      ...g,
+      activeTabId: tabId,
+      focused: true,
+      tabs: updatedTabs
+    };
+  });
+  const newState = {
     ...state,
     layout: {
       ...layout,
@@ -1395,6 +1565,12 @@ const selectTab = async (state, groupIndex, index) => {
       groups: updatedGroups
     }
   };
+
+  // Start loading content in the background if needed
+  if (needsLoading && tab.path) {
+    startContentLoading(uid, tabId, tab.path, requestId);
+  }
+  return newState;
 };
 
 const handleClickTab = async (state, groupIndexRaw, indexRaw) => {
@@ -1444,41 +1620,47 @@ const initialize = async () => {
   set$2(rpc);
 };
 
+let idCounter = 0;
+const create = () => {
+  idCounter++;
+  return idCounter;
+};
+
 const getTabs = async () => {
   const tabs = [{
     content: '',
     editorType: 'text',
-    id: 1,
+    id: create(),
     isDirty: false,
     title: 'tab 1'
   }, {
     content: '',
     editorType: 'text',
-    id: 2,
+    id: create(),
     isDirty: false,
     title: 'tab 2'
   }, {
     content: '',
     editorType: 'text',
-    id: 3,
+    id: create(),
     isDirty: false,
     title: 'tab 3'
   }, {
     content: '',
     editorType: 'text',
-    id: 4,
+    id: create(),
     isDirty: false,
     title: 'tab 4'
   }, {
     content: '',
     editorType: 'text',
-    id: 5,
+    id: create(),
     isDirty: false,
     title: 'tab 5'
   }, {
     content: '',
     editorType: 'text',
-    id: 6,
+    id: create(),
     isDirty: false,
     title: 'tab 6'
   }];
@@ -1655,14 +1837,8 @@ const focusEditorGroup = (state, groupId) => {
   };
 };
 
-let idCounter = 0;
-const create = () => {
-  idCounter++;
-  return idCounter;
-};
-
 const openTab = (state, groupId, tab) => {
-  const newTab = {
+  const newTab = 'id' in tab && tab.id !== undefined ? tab : {
     ...tab,
     id: create()
   };
@@ -1757,7 +1933,8 @@ const openUri = async (state, options) => {
 
   // Find the active group (by activeGroupId or focused flag)
   const {
-    layout
+    layout,
+    uid
   } = state;
   const {
     activeGroupId,
@@ -1765,15 +1942,21 @@ const openUri = async (state, options) => {
   } = layout;
   const activeGroup = activeGroupId === undefined ? groups.find(group => group.focused) : groups.find(group => group.id === activeGroupId);
 
+  // Generate a request ID for content loading
+  const requestId = getNextRequestId();
+
   // If no active group exists, create one
   if (!activeGroup) {
     const groupId = create();
     const title = getLabel(uri);
+    const tabId = create();
     const newTab = {
       content: '',
       editorType: 'text',
-      id: create(),
+      id: tabId,
       isDirty: false,
+      loadingState: 'loading',
+      loadRequestId: requestId,
       path: uri,
       title
     };
@@ -1784,7 +1967,7 @@ const openUri = async (state, options) => {
       size: 100,
       tabs: [newTab]
     };
-    return {
+    const newState = {
       ...state,
       layout: {
         ...layout,
@@ -1792,18 +1975,36 @@ const openUri = async (state, options) => {
         groups: [...groups, newGroup]
       }
     };
+
+    // Start loading content
+    startContentLoading(uid, tabId, uri, requestId);
+    return newState;
   }
 
   // Create a new tab with the URI in the active group
   const title = getLabel(uri);
+  const tabId = create();
   const newTab = {
     content: '',
     editorType: 'text',
+    id: tabId,
     isDirty: false,
+    loadingState: 'loading',
+    loadRequestId: requestId,
     path: uri,
     title
   };
-  return openTab(state, activeGroup.id, newTab);
+  const newState = openTab(state, activeGroup.id, newTab);
+
+  // Start loading content
+  startContentLoading(uid, tabId, uri, requestId);
+  return newState;
+};
+
+const refresh = state => {
+  return {
+    ...state
+  };
 };
 
 const text = data => {
@@ -1817,17 +2018,42 @@ const text = data => {
 const CSS_CLASSES = {
   EDITOR_GROUPS_CONTAINER: 'editor-groups-container'};
 
+const renderLoading = () => {
+  return [{
+    childCount: 1,
+    className: 'TextEditor TextEditor--loading',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorContent EditorContent--loading',
+    type: Div
+  }, text('Loading...')];
+};
+const renderError = errorMessage => {
+  return [{
+    childCount: 1,
+    className: 'TextEditor TextEditor--error',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorContent EditorContent--error',
+    type: Div
+  }, text(`Error: ${errorMessage}`)];
+};
+const renderContent = content => {
+  return [{
+    childCount: 1,
+    className: 'TextEditor',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorContent',
+    type: Pre
+  }, text(content)];
+};
 const renderEditor = tab => {
   if (!tab) {
-    return [{
-      childCount: 1,
-      className: 'TextEditor',
-      type: Div
-    }, {
-      childCount: 1,
-      className: 'EditorContent',
-      type: Pre
-    }, text('')];
+    return renderContent('');
   }
   if (tab.editorType === 'custom') {
     return [{
@@ -1836,15 +2062,19 @@ const renderEditor = tab => {
       type: Div
     }, text(`Custom Editor: ${tab.customEditorId}`)];
   }
-  return [{
-    childCount: 1,
-    className: 'TextEditor',
-    type: Div
-  }, {
-    childCount: 1,
-    className: 'EditorContent',
-    type: Pre
-  }, text(tab.content || '')];
+
+  // Handle loading state
+  if (tab.loadingState === 'loading') {
+    return renderLoading();
+  }
+
+  // Handle error state
+  if (tab.loadingState === 'error' && tab.errorMessage) {
+    return renderError(tab.errorMessage);
+  }
+
+  // Default: render content
+  return renderContent(tab.content || '');
 };
 
 const HandleClick = 11;
@@ -1854,7 +2084,7 @@ const HandleTabContextMenu = 14;
 
 const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   return [{
-    childCount: 2,
+    childCount: 3,
     className: isActive ? 'MainTab MainTabSelected' : 'MainTab',
     'data-groupIndex': groupIndex,
     'data-index': tabIndex,
@@ -1863,6 +2093,11 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     role: 'tab',
     title: tab.path || tab.title,
     type: Div
+  }, {
+    childCount: 0,
+    className: 'TabIcon',
+    src: 'icons/refresh.svg',
+    type: Img
   }, {
     childCount: 1,
     className: 'TabTitle',
@@ -1984,6 +2219,7 @@ const saveState = state => {
 };
 
 const commandMap = {
+  'MainArea.closeAll': wrapCommand(closeAll$1),
   'MainArea.create': create$1,
   'MainArea.diff2': diff2,
   'MainArea.getCommandIds': getCommandIds,
@@ -1996,6 +2232,7 @@ const commandMap = {
   'MainArea.initialize': initialize,
   'MainArea.loadContent': wrapCommand(loadContent),
   'MainArea.openUri': wrapCommand(openUri),
+  'MainArea.refresh': wrapCommand(refresh),
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,
   'MainArea.resize': wrapCommand(resize),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/main-area-worker",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",