@lvce-editor/problems-view 1.25.3 → 1.26.0

package/dist/problemsViewWorkerMain.js

@@ -3,29 +3,87 @@ const toCommandId = key => {
   return key.slice(dotIndex + 1);
 };
 const create$a = () => {
+  const commandQueues = new Map();
+  const generations = Object.create(null);
   const states = Object.create(null);
   const commandMapRef = {};
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
+  const createAsyncCommandContext = (uid, generation) => {
+    let latestState = states[uid].newState;
+    return {
+      getState: () => {
+        if (isCurrentGeneration(uid, generation)) {
+          latestState = states[uid].newState;
+        }
+        return latestState;
+      },
+      updateState: async updater => {
+        latestState = await updateState(uid, generation, latestState, updater);
+        return latestState;
+      }
+    };
+  };
+  const enqueueCommand = async (uid, command) => {
+    const previous = commandQueues.get(uid) || Promise.resolve();
+    const run = async () => {
+      try {
+        await previous;
+      } catch {
+        // The previous caller receives its error; later commands must still run.
+      }
+      await command();
+    };
+    const current = run();
+    commandQueues.set(uid, current);
+    try {
+      await current;
+    } finally {
+      if (commandQueues.get(uid) === current) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
   return {
     clear() {
+      commandQueues.clear();
       for (const key of Object.keys(states)) {
         delete states[key];
       }
     },
     diff(uid, modules, numbers) {
       const {
-        newState,
-        oldState
+        oldState,
+        scheduledState
       } = states[uid];
       const diffResult = [];
       for (let i = 0; i < modules.length; i++) {
         const fn = modules[i];
-        if (!fn(oldState, newState)) {
+        if (!fn(oldState, scheduledState)) {
           diffResult.push(numbers[i]);
         }
       }
       return diffResult;
     },
     dispose(uid) {
+      commandQueues.delete(uid);
       delete states[uid];
     },
     get(uid) {
@@ -37,21 +95,33 @@ const create$a = () => {
       return ids;
     },
     getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseFloat(key);
-      });
+      return Object.keys(states).map(Number);
     },
     registerCommands(commandMap) {
       Object.assign(commandMapRef, commandMap);
     },
-    set(uid, oldState, newState) {
+    set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
+      }
       states[uid] = {
         newState,
-        oldState
+        oldState,
+        scheduledState: scheduledState ?? newState
       };
     },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const context = createAsyncCommandContext(uid, generation);
+        await fn(context, ...args);
+      };
+      return wrapped;
+    },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -60,6 +130,9 @@ const create$a = () => {
         if (oldState === newerState || newState === newerState) {
           return;
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -67,7 +140,8 @@ const create$a = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
       };
       return wrapped;
@@ -83,6 +157,7 @@ const create$a = () => {
     },
     wrapLoadContent(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -97,6 +172,11 @@ const create$a = () => {
             error
           };
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -104,13 +184,59 @@ const create$a = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
         return {
           error
         };
       };
       return wrapped;
+    },
+    wrapSerialAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const context = createAsyncCommandContext(uid, generation);
+          await fn(context, ...args);
+        });
+      };
+      return wrapped;
+    },
+    wrapSerialCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const {
+            newState,
+            oldState
+          } = states[uid];
+          const newerState = await fn(newState, ...args);
+          if (oldState === newerState || newState === newerState) {
+            return;
+          }
+          if (!isCurrentGeneration(uid, generation)) {
+            return;
+          }
+          const latestOld = states[uid];
+          const latestNew = {
+            ...latestOld.newState,
+            ...newerState
+          };
+          states[uid] = {
+            newState: latestNew,
+            oldState: latestOld.oldState,
+            scheduledState: latestNew
+          };
+        });
+      };
+      return wrapped;
     }
   };
 };
@@ -183,7 +309,7 @@ class AssertionError extends Error {
 const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
-const String = 4;
+const String$1 = 4;
 const Boolean$1 = 5;
 const Function = 6;
 const Null = 7;
@@ -195,7 +321,7 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String;
+      return String$1;
     case 'object':
       if (value === null) {
         return Null;
@@ -224,7 +350,7 @@ const array = value => {
 };
 const string = value => {
   const type = getType(value);
-  if (type !== String) {
+  if (type !== String$1) {
     throw new AssertionError('expected value to be of type string');
   }
 };
@@ -271,7 +397,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -425,7 +550,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -712,7 +844,10 @@ const constructError = (message, type, name) => {
   if (ErrorConstructor === Error) {
     const error = new Error(message);
     if (name && name !== 'VError') {
-      error.name = name;
+      Object.defineProperty(error, 'name', {
+        configurable: true,
+        value: name
+      });
     }
     return error;
   }
@@ -729,8 +864,10 @@ const getCurrentStack = () => {
   const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+const getNewLineIndex = (string, startIndex) => {
+  {
+    return string.indexOf(NewLine);
+  }
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
@@ -741,55 +878,91 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const setStack = (error, stack) => {
+  const descriptor = Object.getOwnPropertyDescriptor(error, 'stack');
+  if (descriptor) {
+    if (!descriptor.configurable && !descriptor.writable) {
+      return;
+    }
+    if (!descriptor.configurable && descriptor.writable) {
+      error.stack = stack;
+      return;
+    }
+  }
+  Object.defineProperty(error, 'stack', {
+    configurable: true,
+    value: stack,
+    writable: true
+  });
+};
+const restoreExistingError = (error, currentStack) => {
+  if (typeof error.stack === 'string') {
+    setStack(error, `${error.stack}${NewLine}${currentStack}`);
+  }
+  return error;
+};
+const restoreMethodNotFoundError = (error, currentStack) => {
+  const restoredError = new JsonRpcError(error.message);
+  const parentStack = getParentStack(error);
+  setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
+  return restoredError;
+};
+const restoreStackFromData = (restoredError, error, currentStack) => {
+  if (error.data.stack && error.data.type && error.message) {
+    setStack(restoredError, `${error.data.type}: ${error.message}${NewLine}${error.data.stack}${NewLine}${currentStack}`);
+    return;
+  }
+  if (error.data.stack) {
+    setStack(restoredError, error.data.stack);
+  }
+};
+const applyDataProperties = (restoredError, error) => {
+  restoreStackFromData(restoredError, error, getCurrentStack());
+  if (error.data.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.data.codeFrame;
+  }
+  if (error.data.code) {
+    // @ts-ignore
+    restoredError.code = error.data.code;
+  }
+  if (error.data.type) {
+    // @ts-ignore
+    restoredError.name = error.data.type;
+  }
+};
+const applyDirectProperties = (restoredError, error) => {
+  if (error.stack) {
+    const lowerStack = restoredError.stack || '';
+    const indexNewLine = getNewLineIndex(lowerStack);
+    const parentStack = getParentStack(error);
+    // @ts-ignore
+    setStack(restoredError, `${parentStack}${lowerStack.slice(indexNewLine)}`);
+  }
+  if (error.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.codeFrame;
+  }
+};
+const restoreMessageError = (error, _currentStack) => {
+  const restoredError = constructError(error.message, error.type, error.name);
+  if (error.data) {
+    applyDataProperties(restoredError, error);
+  } else {
+    applyDirectProperties(restoredError, error);
+  }
+  return restoredError;
+};
 const restoreJsonRpcError = error => {
   const currentStack = getCurrentStack();
   if (error && error instanceof Error) {
-    if (typeof error.stack === 'string') {
-      error.stack = error.stack + NewLine + currentStack;
-    }
-    return error;
+    return restoreExistingError(error, currentStack);
   }
   if (error && error.code && error.code === MethodNotFound) {
-    const restoredError = new JsonRpcError(error.message);
-    const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine + currentStack;
-    return restoredError;
+    return restoreMethodNotFoundError(error, currentStack);
   }
   if (error && error.message) {
-    const restoredError = constructError(error.message, error.type, error.name);
-    if (error.data) {
-      if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
-      } else if (error.data.stack) {
-        restoredError.stack = error.data.stack;
-      }
-      if (error.data.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.data.codeFrame;
-      }
-      if (error.data.code) {
-        // @ts-ignore
-        restoredError.code = error.data.code;
-      }
-      if (error.data.type) {
-        // @ts-ignore
-        restoredError.name = error.data.type;
-      }
-    } else {
-      if (error.stack) {
-        const lowerStack = restoredError.stack || '';
-        // @ts-ignore
-        const indexNewLine = getNewLineIndex(lowerStack);
-        const parentStack = getParentStack(error);
-        // @ts-ignore
-        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
-      }
-      if (error.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.codeFrame;
-      }
-    }
-    return restoredError;
+    return restoreMessageError(error);
   }
   if (typeof error === 'string') {
     return new Error(`JsonRpc Error: ${error}`);
@@ -1254,13 +1427,178 @@ const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem = 'treeitem';
 
+const Audio = 0;
 const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
+const H1 = 5;
 const Input = 6;
+const Kbd = 7;
 const Span = 8;
+const Table$1 = 9;
+const TBody = 10;
+const Td = 11;
 const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
 const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
 const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
+const Code$1 = 65;
+const Label$1 = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
+const Reference = 100;
+
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button: Button$1,
+  Canvas,
+  Circle,
+  Cite,
+  Code: Code$1,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label: Label$1,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table: Table$1,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
+const ClientY = 'event.clientY';
+const DeltaMode = 'event.deltaMode';
+const DeltaY = 'event.deltaY';
 
 const Space = 9;
 const PageUp = 10;
@@ -1378,17 +1716,23 @@ const create = (id, uri, x, y, width, height, workspaceUri) => {
   const state = {
     activeUri: '',
     collapsedUris: [],
+    deltaY: 0,
     filteredProblems: [],
     filterValue: '',
+    finalDeltaY: 0,
     focusedIndex: -2,
+    handleOffset: 0,
     height,
     inputSource: User,
     itemHeight: 22,
     listItems: [],
     maxLineY: 0,
     message: '',
+    minimumSliderSize: 20,
     minLineY: 0,
     problems: [],
+    scrollBarActive: false,
+    scrollBarHeight: 0,
     showErrors: true,
     showInfos: true,
     showWarnings: true,
@@ -1404,15 +1748,26 @@ const create = (id, uri, x, y, width, height, workspaceUri) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.collapsedUris === newState.collapsedUris && oldState.filterValue === newState.filterValue && oldState.problems === newState.problems;
+  return oldState.collapsedUris === newState.collapsedUris && oldState.deltaY === newState.deltaY && oldState.filterValue === newState.filterValue && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.problems === newState.problems && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.viewMode === newState.viewMode && oldState.width === newState.width;
 };
 
 const isEqual$1 = (oldState, newState) => {
   return newState.inputSource === User || oldState.filterValue === newState.filterValue;
 };
 
+const haveSameCollapsedUris = (oldState, newState) => {
+  const oldCollapsedUris = oldState.collapsedUris;
+  const newCollapsedUris = newState.collapsedUris;
+  if (oldCollapsedUris === newCollapsedUris) {
+    return true;
+  }
+  if (!oldCollapsedUris || !newCollapsedUris) {
+    return false;
+  }
+  return oldCollapsedUris.length === newCollapsedUris.length && oldCollapsedUris.every((uri, index) => uri === newCollapsedUris[index]);
+};
 const isEqual = (oldState, newState) => {
-  return oldState.activeUri === newState.activeUri && oldState.problems === newState.problems && oldState.filterValue === newState.filterValue && oldState.message === newState.message && oldState.viewMode === newState.viewMode;
+  return oldState.activeUri === newState.activeUri && haveSameCollapsedUris(oldState, newState) && oldState.focusedIndex === newState.focusedIndex && oldState.height === newState.height && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.problems === newState.problems && oldState.filterValue === newState.filterValue && oldState.message === newState.message && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.width === newState.width && oldState.viewMode === newState.viewMode;
 };
 
 const RenderItems = 1;
@@ -1433,12 +1788,132 @@ const diff = (oldState, newState) => {
   return diffResult;
 };
 
+const FilterHeight = 24;
+const TableHeaderHeight = 22;
+const getListTopOffset = (width, smallWidthBreakPoint, viewMode) => {
+  const filterHeight = viewMode !== None && width <= smallWidthBreakPoint ? FilterHeight : 0;
+  const tableHeaderHeight = viewMode === Table ? TableHeaderHeight : 0;
+  return filterHeight + tableHeaderHeight;
+};
+const getListHeight = (height, width, smallWidthBreakPoint, viewMode) => {
+  return Math.max(height - getListTopOffset(width, smallWidthBreakPoint, viewMode), 0);
+};
+
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  if (listHeight <= 0 || itemHeight <= 0) {
+    return 0;
+  }
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size <= 0 || size >= contentSize) {
+    return 0;
+  }
+  return Math.min(Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize), size);
+};
+
+const matchesFilterValue = (string, filterValueLower) => {
+  if (filterValueLower) {
+    return string.toLowerCase().indexOf(filterValueLower);
+  }
+  return 0;
+};
+
+const Item = 0;
+const Expanded = 1;
+const Collapsed = 2;
+
+const getListItemType = (listItemType, isCollapsed) => {
+  if (listItemType === Item) {
+    return Item;
+  }
+  if (isCollapsed) {
+    return Collapsed;
+  }
+  return Expanded;
+};
+const filterProblems = (problems, collapsedUris, filterValue) => {
+  const filterValueLower = filterValue.toLowerCase();
+  const filtered = [];
+  for (const problem of problems) {
+    const uriMatchIndex = matchesFilterValue(problem.uri, filterValueLower);
+    const sourceMatchIndex = matchesFilterValue(problem.source, filterValueLower);
+    const messageMatchIndex = matchesFilterValue(problem.message, filterValueLower);
+    if (uriMatchIndex === -1 && sourceMatchIndex === -1 && messageMatchIndex === -1) {
+      continue;
+    }
+    const isCollapsed = collapsedUris.includes(problem.uri);
+    if (isCollapsed && problem.listItemType === Item) {
+      continue;
+    }
+    filtered.push({
+      ...problem,
+      isCollapsed,
+      listItemType: getListItemType(problem.listItemType, isCollapsed),
+      messageMatchIndex,
+      sourceMatchIndex,
+      uriMatchIndex
+    });
+  }
+  return filtered;
+};
+
+const getVisibleProblemCount = (problems, collapsedUris, filterValue, viewMode) => {
+  const filtered = filterProblems(problems, collapsedUris, filterValue);
+  if (viewMode !== Table) {
+    return filtered.length;
+  }
+  let count = 0;
+  for (const problem of filtered) {
+    if (problem.message) {
+      count++;
+    }
+  }
+  return count;
+};
+
+const updateVirtualList = (state, newDeltaY) => {
+  const {
+    collapsedUris,
+    deltaY: currentDeltaY,
+    filterValue,
+    height,
+    itemHeight,
+    minimumSliderSize,
+    problems,
+    smallWidthBreakPoint,
+    viewMode,
+    width
+  } = state;
+  const itemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const contentHeight = itemCount * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - listHeight, 0);
+  const requestedDeltaY = newDeltaY ?? currentDeltaY;
+  const deltaY = Math.min(Math.max(Number.isFinite(requestedDeltaY) ? requestedDeltaY : 0, 0), finalDeltaY);
+  const minLineY = itemHeight > 0 ? Math.floor(deltaY / itemHeight) : 0;
+  const visibleCount = getNumberOfVisibleItems(listHeight, itemHeight);
+  const maxLineY = Math.min(minLineY + visibleCount, itemCount);
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
+  return {
+    ...state,
+    deltaY,
+    finalDeltaY,
+    maxLineY,
+    minLineY,
+    scrollBarHeight
+  };
+};
+
 const diff2 = uid => {
   const {
     newState,
     oldState
   } = get(uid);
-  const diffResult = diff(oldState, newState);
+  const updatedState = updateVirtualList(newState);
+  set(uid, oldState, updatedState);
+  const diffResult = diff(oldState, updatedState);
   return diffResult;
 };
 
@@ -1461,6 +1936,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const FocusProblems = 19;
 
 const getKeyBindings = () => {
@@ -1512,15 +1989,15 @@ const getKeyBindings = () => {
 };
 
 const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
     return key;
   }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
 };
 
 const ClearFilters = 'Clear Filters';
@@ -1646,10 +2123,6 @@ const {
   getProblems: getProblems$1,
   getUri} = EditorWorker;
 
-const Item = 0;
-const Expanded = 1;
-const Collapsed = 2;
-
 const toProblem = (diagnostic, index) => {
   const {
     code,
@@ -1881,19 +2354,27 @@ const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
 
 const handleClickAt = (state, eventX, eventY) => {
   const {
+    collapsedUris,
+    deltaY,
+    filterValue,
     itemHeight,
     problems,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
     x,
     y
   } = state;
 
   // TODO use functional focus rendering
   // Focus.setFocus(FocusKey.Problems)
-  if (problems.length === 0) {
+  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode);
+  if (problemCount === 0) {
     return focusIndex(state, -1);
   }
-  const index = getListIndex(eventX, eventY, x, y, 0, itemHeight);
-  if (index > problems.length) {
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const index = getListIndex(eventX, eventY, x, y + listTopOffset, deltaY, itemHeight);
+  if (index < 0 || index >= problemCount) {
     return focusIndex(state, -1);
   }
   return {
@@ -1948,6 +2429,109 @@ const handleIconThemeChange = state => {
   };
 };
 
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
+};
+
+const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: Math.max(relativeY, 0),
+      percent: 0
+    };
+  }
+  if (relativeY <= height - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
+  }
+  return {
+    handleOffset: Math.min(scrollBarHeight - height + relativeY, scrollBarHeight),
+    percent: 1
+  };
+};
+
+const getScrollBarTop = (height, finalDeltaY, deltaY, scrollBarHeight) => {
+  if (finalDeltaY <= 0 || !Number.isFinite(finalDeltaY)) {
+    return 0;
+  }
+  const scrollBarTop = Math.round(deltaY / finalDeltaY * (height - scrollBarHeight));
+  return Number.isFinite(scrollBarTop) ? scrollBarTop : 0;
+};
+
+const setDeltaY = (state, deltaY) => {
+  return updateVirtualList(state, deltaY);
+};
+
+const handleScrollBarClick = (state, eventY) => {
+  const {
+    deltaY,
+    finalDeltaY,
+    height,
+    scrollBarHeight,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
+    y
+  } = state;
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const relativeY = eventY - y - listTopOffset;
+  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
+  const offsetInThumb = relativeY - scrollBarTop;
+  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: offsetInThumb,
+      scrollBarActive: true
+    };
+  }
+  const {
+    handleOffset,
+    percent
+  } = getNewDeltaYPercent(listHeight, scrollBarHeight, relativeY);
+  return {
+    ...setDeltaY(state, percent * finalDeltaY),
+    handleOffset,
+    scrollBarActive: true
+  };
+};
+
+const handleScrollBarMove = (state, eventY) => {
+  const {
+    finalDeltaY,
+    handleOffset,
+    height,
+    scrollBarActive,
+    scrollBarHeight,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
+  }
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const availableTrackHeight = listHeight - scrollBarHeight;
+  const relativeY = eventY - y - listTopOffset - handleOffset;
+  const percent = availableTrackHeight <= 0 ? 0 : relativeY / availableTrackHeight;
+  return setDeltaY(state, percent * finalDeltaY);
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  const {
+    deltaY: currentDeltaY
+  } = state;
+  return setDeltaY(state, currentDeltaY + deltaY);
+};
+
 const initialize = async () => {
   // function is not needed anymore
 };
@@ -2045,48 +2629,6 @@ const getUniqueIndents = problems => {
   return uniqueIndents;
 };
 
-const matchesFilterValue = (string, filterValueLower) => {
-  if (filterValueLower) {
-    return string.toLowerCase().indexOf(filterValueLower);
-  }
-  return 0;
-};
-
-const getListItemType = (listItemType, isCollapsed) => {
-  if (listItemType === Item) {
-    return Item;
-  }
-  if (isCollapsed) {
-    return Collapsed;
-  }
-  return Expanded;
-};
-const filterProblems = (problems, collapsedUris, filterValue) => {
-  const filterValueLower = filterValue.toLowerCase();
-  const filtered = [];
-  for (const problem of problems) {
-    const uriMatchIndex = matchesFilterValue(problem.uri, filterValueLower);
-    const sourceMatchIndex = matchesFilterValue(problem.source, filterValueLower);
-    const messageMatchIndex = matchesFilterValue(problem.message, filterValueLower);
-    if (uriMatchIndex === -1 && sourceMatchIndex === -1 && messageMatchIndex === -1) {
-      continue;
-    }
-    const isCollapsed = collapsedUris.includes(problem.uri);
-    if (isCollapsed && problem.listItemType === Item) {
-      continue;
-    }
-    filtered.push({
-      ...problem,
-      isCollapsed,
-      listItemType: getListItemType(problem.listItemType, isCollapsed),
-      messageMatchIndex,
-      sourceMatchIndex,
-      uriMatchIndex
-    });
-  }
-  return filtered;
-};
-
 const getFileNameIcon = file => {
   return '';
 };
@@ -2098,7 +2640,7 @@ const getIcon = uri => {
   return getFileNameIcon();
 };
 
-const getVisibleProblems = (problems, collapsedUris, focusedIndex, filterValue) => {
+const getVisibleProblems = (problems, collapsedUris, focusedIndex, filterValue, minLineY = 0, maxLineY = Infinity, viewMode = List) => {
   array(problems);
   array(collapsedUris);
   number(focusedIndex);
@@ -2106,8 +2648,10 @@ const getVisibleProblems = (problems, collapsedUris, focusedIndex, filterValue)
   const visibleItems = [];
   const filterValueLength = filterValue.length;
   const filtered = filterProblems(problems, collapsedUris, filterValue);
-  for (let i = 0; i < filtered.length; i++) {
-    const problem = filtered[i];
+  const displayProblems = viewMode === Table ? filtered.filter(problem => problem.message) : filtered;
+  const finalLineY = Math.min(maxLineY, displayProblems.length);
+  for (let i = minLineY; i < finalLineY; i++) {
+    const problem = displayProblems[i];
     visibleItems.push({
       ...problem,
       filterValueLength,
@@ -2122,14 +2666,62 @@ const getVisibleProblems = (problems, collapsedUris, focusedIndex, filterValue)
 const renderCss = (oldState, newState) => {
   const {
     collapsedUris,
+    deltaY,
     filterValue,
+    finalDeltaY,
     focusedIndex,
+    height,
+    itemHeight,
+    maxLineY,
+    minLineY,
     problems,
-    uid
+    scrollBarHeight,
+    smallWidthBreakPoint,
+    uid,
+    viewMode,
+    width
   } = newState;
-  const visibleProblems = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue);
+  const visibleProblems = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode);
   const uniqueIndents = getUniqueIndents(visibleProblems);
-  const css = uniqueIndents.map(getIndentRule).join('\n');
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
+  const itemOffset = itemHeight > 0 ? -(deltaY % itemHeight) : 0;
+  const rules = [`.Problems {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.ProblemsContent {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.ProblemsList {
+  contain: strict;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+.ProblemsTableBody {
+  overflow: hidden;
+}
+.ProblemsTableRow {
+  height: ${itemHeight}px;
+}
+.ProblemsContentTable > .ScrollBar {
+  top: 22px;
+}
+.Problems .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  translate: 0 ${scrollBarTop}px;
+}
+.ProblemsList > .Problem:first-child,
+.ProblemsTableBody > .ProblemsTableRow:first-child {
+  margin-top: ${itemOffset}px;
+}`, ...uniqueIndents.map(getIndentRule)];
+  const css = rules.join('\n');
   return [SetCss, uid, css];
 };
 
@@ -2157,7 +2749,10 @@ const MessageAction = 'MessageAction';
 const Problem = 'Problem';
 const ProblemAt = 'ProblemAt';
 const ProblemBadge = 'ProblemBadge';
+const ProblemLabel = 'ProblemLabel';
 const Problems = 'Problems';
+const ProblemsContent = 'ProblemsContent';
+const ProblemsContentTable = 'ProblemsContentTable';
 const ProblemSelected = 'ProblemSelected';
 const ProblemsErrorIcon = 'ProblemsErrorIcon';
 const ProblemsIcon = 'ProblemsIcon';
@@ -2169,6 +2764,10 @@ const ProblemsTableRow = 'ProblemsTableRow';
 const ProblemsTableRowItem = 'ProblemsTableRowItem';
 const ProblemsTableRowOdd = 'ProblemsTableRowOdd';
 const ProblemsWarningIcon = 'ProblemsWarningIcon';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarThumbActive = 'ScrollBarThumbActive';
 const Viewlet = 'Viewlet';
 
 const HandleBlur = 1;
@@ -2177,6 +2776,10 @@ const HandleContextMenu = 3;
 const HandleFilterInput = 4;
 const HandlePointerDown = 5;
 const HandleClickMoreFilters = 6;
+const HandleWheel = 7;
+const HandleScrollBarMove = 8;
+const HandleScrollBarPointerCaptureLost = 9;
+const HandleScrollBarPointerDown = 10;
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
@@ -2306,19 +2909,21 @@ const getFileIconVirtualDom = icon => {
 
 const Warning = 'warning';
 
+const warningIconNode = {
+  childCount: 0,
+  className: mergeClassNames(ProblemsIcon, ProblemsWarningIcon),
+  type: Div
+};
+const errorIconNode = {
+  childCount: 0,
+  className: mergeClassNames(ProblemsIcon, ProblemsErrorIcon),
+  type: Div
+};
 const getProblemsIconVirtualDom = type => {
   if (type === Warning) {
-    return {
-      childCount: 0,
-      className: mergeClassNames(ProblemsIcon, ProblemsWarningIcon),
-      type: Div
-    };
+    return warningIconNode;
   }
-  return {
-    childCount: 0,
-    className: mergeClassNames(ProblemsIcon, ProblemsErrorIcon),
-    type: Div
-  };
+  return errorIconNode;
 };
 
 // TODO compute detail message in getVisibleProblems
@@ -2396,7 +3001,7 @@ const getProblemVirtualDom = problem => {
   const lineColumn = atLineColumn(rowIndex, columnIndex);
   const label = {
     childCount: 1,
-    className: Label,
+    className: ProblemLabel,
     type: Div
   };
   /**
@@ -2532,14 +3137,14 @@ const messageNode = {
   className: Message,
   type: Div
 };
-const getProblemsVirtualDom$1 = (viewMode, problems, filterValue, message) => {
-  if (problems.length === 0 && message) {
+const getProblemsVirtualDom$1 = (viewMode, problems, filterValue, message, problemCount = problems.length) => {
+  if (problemCount === 0 && message) {
     return [messageNode, text(message)];
   }
-  if (problems.length === 0 && filterValue) {
+  if (problemCount === 0 && filterValue) {
     return getNoResultsWithFilterVirtualDom();
   }
-  if (problems.length === 0) {
+  if (problemCount === 0) {
     return getProblemsNoProblemsFoundVirtualDom();
   }
   if (viewMode === Table) {
@@ -2548,9 +3153,26 @@ const getProblemsVirtualDom$1 = (viewMode, problems, filterValue, message) => {
   return getProblemsListVirtualDom(problems);
 };
 
+const scrollBarNode = {
+  childCount: 1,
+  className: mergeClassNames(ScrollBar, ScrollBarSmall),
+  onPointerDown: HandleScrollBarPointerDown,
+  type: Div
+};
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarActive) => {
+  if (scrollBarHeight <= 0) {
+    return [];
+  }
+  return [scrollBarNode, {
+    childCount: 0,
+    className: mergeClassNames(ScrollBarThumb, scrollBarActive ? ScrollBarThumbActive : ''),
+    type: Div
+  }];
+};
+
 const Focusable = 0;
 
-const getProblemsVirtualDom = (activeUri, viewMode, problems, filterValue, isSmall, message) => {
+const getProblemsVirtualDom = (activeUri, viewMode, problems, filterValue, isSmall, message, scrollBarHeight = 0, scrollBarActive = false, problemCount = problems.length) => {
   const baseDom = {
     childCount: isSmall ? 2 : 1,
     className: mergeClassNames(Viewlet, Problems),
@@ -2558,6 +3180,7 @@ const getProblemsVirtualDom = (activeUri, viewMode, problems, filterValue, isSma
     onBlur: HandleBlur,
     onContextMenu: HandleContextMenu,
     onPointerDown: HandlePointerDown,
+    onWheel: HandleWheel,
     tabIndex: Focusable,
     type: Div
   };
@@ -2565,8 +3188,15 @@ const getProblemsVirtualDom = (activeUri, viewMode, problems, filterValue, isSma
     badgeText: '',
     command: HandleFilterInput,
     placeholder: filter()}) : [];
-  const itemsDom = getProblemsVirtualDom$1(viewMode, problems, filterValue, message);
-  return [baseDom, ...filterDom, ...itemsDom];
+  const itemsDom = getProblemsVirtualDom$1(viewMode, problems, filterValue, message, problemCount);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarActive);
+  const contentClassName = viewMode === Table ? mergeClassNames(ProblemsContent, ProblemsContentTable) : ProblemsContent;
+  const contentDom = {
+    childCount: scrollBarDom.length > 0 ? 2 : 1,
+    className: contentClassName,
+    type: Div
+  };
+  return [baseDom, ...filterDom, contentDom, ...itemsDom, ...scrollBarDom];
 };
 
 const renderItems = (oldState, newState) => {
@@ -2575,15 +3205,20 @@ const renderItems = (oldState, newState) => {
     collapsedUris,
     filterValue,
     focusedIndex,
+    maxLineY,
     message,
+    minLineY,
     problems,
+    scrollBarActive,
+    scrollBarHeight,
     smallWidthBreakPoint,
     viewMode,
     width
   } = newState;
-  const visible = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue);
+  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode);
+  const visible = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode);
   const isSmall = width <= smallWidthBreakPoint;
-  const dom = getProblemsVirtualDom(activeUri, viewMode, visible, filterValue, isSmall, message);
+  const dom = getProblemsVirtualDom(activeUri, viewMode, visible, filterValue, isSmall, message, scrollBarHeight, scrollBarActive, problemCount);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -2650,7 +3285,7 @@ const getActions = state => {
     viewMode,
     width
   } = state;
-  const visibleCount = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue).length;
+  const visibleCount = getVisibleProblems(problems, collapsedUris, focusedIndex, filterValue, 0, Infinity, viewMode).length;
   const problemsCount = problems.length;
   const isSmall = width <= smallWidthBreakPoint;
   const actions = [];
@@ -2717,6 +3352,21 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickMoreFilters,
     params: ['handleClickMoreFilters']
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', DeltaMode, DeltaY],
+    passive: true
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarClick', ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleScrollBarMove, HandleScrollBarPointerCaptureLost]
+  }, {
+    name: HandleScrollBarMove,
+    params: ['handleScrollBarMove', ClientY]
+  }, {
+    name: HandleScrollBarPointerCaptureLost,
+    params: ['handleScrollBarCaptureLost']
   }];
 };
 
@@ -2773,6 +3423,10 @@ const commandMap = {
   'Problems.handleContextMenu': wrapCommand(handleContextMenu),
   'Problems.handleFilterInput': wrapCommand(handleFilterInput),
   'Problems.handleIconThemeChange': wrapCommand(handleIconThemeChange),
+  'Problems.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
+  'Problems.handleScrollBarClick': wrapCommand(handleScrollBarClick),
+  'Problems.handleScrollBarMove': wrapCommand(handleScrollBarMove),
+  'Problems.handleWheel': wrapCommand(handleWheel),
   'Problems.initialize': initialize,
   'Problems.loadContent': wrapCommand(loadContent),
   'Problems.render2': render2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/problems-view",
-  "version": "1.25.3",
+  "version": "1.26.0",
   "description": "Problems View Worker",
   "repository": {
     "type": "git",