@lvce-editor/output-view 2.10.0 → 2.11.0

package/README.md

@@ -10,7 +10,3 @@ cd output-view &&
 npm ci &&
 npm test
 ```
-
-## Gitpod
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/lvce-editor/output-view)

package/dist/outputViewWorkerMain.js

@@ -991,6 +991,7 @@ const ToolBar = 'toolbar';
 const Button = 1;
 const Div = 4;
 const Input = 6;
+const Span = 8;
 const Text$1 = 12;
 const A = 53;
 const Select$1 = 63;
@@ -1241,10 +1242,18 @@ const terminate = () => {
   globalThis.close();
 };
 
+const Text = 1;
+const Link = 2;
+const LogLevel = 3;
+const RepeatCount = 4;
+
 const getTextFromParts = parts => {
   let result = '';
   for (const part of parts) {
-    result += part.value;
+    if (part.type === RepeatCount) {
+      continue;
+    }
+    result += part.type === Link ? part.label || part.value : part.value;
   }
   return result;
 };
@@ -1252,7 +1261,37 @@ const filterItems = (items, filterValue) => {
   if (!filterValue) {
     return items;
   }
-  return items.filter(parts => getTextFromParts(parts).includes(filterValue));
+  const normalizedFilterValue = filterValue.toLowerCase();
+  return items.filter(parts => getTextFromParts(parts).toLowerCase().includes(normalizedFilterValue));
+};
+
+const getAggregationKey = line => {
+  return JSON.stringify(line.filter(part => part.type !== RepeatCount));
+};
+const withRepeatCount = (line, count) => {
+  const parts = line.filter(part => part.type !== RepeatCount);
+  return [{
+    type: RepeatCount,
+    value: String(count)
+  }, ...parts];
+};
+const aggregateLines = lines => {
+  const result = [];
+  let previousKey = '';
+  let repeatCount = 0;
+  for (const line of lines) {
+    const key = getAggregationKey(line);
+    if (result.length > 0 && key === previousKey) {
+      repeatCount++;
+      const previousIndex = result.length - 1;
+      result[previousIndex] = withRepeatCount(result.at(-1), repeatCount);
+      continue;
+    }
+    result.push(line);
+    previousKey = key;
+    repeatCount = 1;
+  }
+  return result;
 };
 
 const isFileNotFoundError = error => {
@@ -1265,10 +1304,75 @@ const getLinkMatch = text => {
   return match ? match[0] : null;
 };
 
-const Text = 1;
-const Link = 2;
+const Filter$2 = 'Filter';
+const IconButton = 'IconButton';
+const InputBox = 'InputBox';
+const MaskIcon = 'MaskIcon';
+const FilterInput = 'FilterInput';
+const OutputContent = 'OutputContent';
+const Actions = 'Actions';
+const Message = 'Message';
+const Viewlet = 'Viewlet';
+const Output$1 = 'Output';
+const Option = 'Option';
+const Select = 'Select';
+const Error$1 = 'Error';
+const Line = 'Line';
+const OutputRepeatCount = 'OutputRepeatCount';
+const OutputSourceLink = 'OutputSourceLink';
+
+const isStructuredLogEntry = value => {
+  return value?.category === 'Window' && typeof value.level === 'string' && typeof value.line === 'number' && typeof value.message === 'string' && typeof value.source === 'string' && typeof value.timestamp === 'string';
+};
+const getSourceLabel = (source, line) => {
+  const withoutQueryOrFragment = source.split(/[?#]/, 1)[0];
+  const slashIndex = withoutQueryOrFragment.lastIndexOf('/');
+  const name = slashIndex === -1 ? withoutQueryOrFragment : withoutQueryOrFragment.slice(slashIndex + 1);
+  return line > 0 ? `${name}:${line}` : name;
+};
+const normalizeLevel = level => {
+  return level === 'warn' ? 'warning' : level;
+};
+const parseStructuredLogLine = line => {
+  if (!line.startsWith('{')) {
+    return undefined;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(line);
+  } catch {
+    return undefined;
+  }
+  if (!isStructuredLogEntry(parsed)) {
+    return undefined;
+  }
+  const parts = [{
+    type: LogLevel,
+    value: normalizeLevel(parsed.level)
+  }, {
+    type: Text,
+    value: parsed.message
+  }];
+  if (!parsed.source) {
+    return parts;
+  }
+  const href = parsed.line > 0 ? `${parsed.source}:${parsed.line}` : parsed.source;
+  return [...parts, {
+    type: Text,
+    value: ' '
+  }, {
+    className: OutputSourceLink,
+    label: getSourceLabel(parsed.source, parsed.line),
+    type: Link,
+    value: href
+  }];
+};
 
 const parseLine = line => {
+  const structuredLine = parseStructuredLogLine(line);
+  if (structuredLine) {
+    return structuredLine;
+  }
   const parts = [];
   let rest = line;
   while (rest.length > 0) {
@@ -1308,7 +1412,7 @@ const loadLines = async uri => {
   try {
     // TODO use log stream, updating the output when the file is changed
     const content = await readFile(uri);
-    const lines = content.split('\n').map(parseLine);
+    const lines = aggregateLines(content.split('\n').map(parseLine));
     return {
       code: 0,
       error: '',
@@ -1549,8 +1653,8 @@ const getKeyBindings = () => {
   }];
 };
 
-const Filter$2 = 'filter';
-const Output$1 = 'output';
+const Filter$1 = 'filter';
+const Output = 'output';
 const MainProcess = 'MainProcess';
 const SharedProcess = 'SharedProcess';
 const Window = 'Window';
@@ -1761,7 +1865,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const ClearOutput = 'clear output';
-const Filter$1 = 'Filter';
+const Filter = 'Filter';
 const LogFileNotFound$1 = 'The log file was not found.';
 const Settings = 'Settings';
 const TurnOffAutoScroll = 'Turn auto scrolling off';
@@ -1779,7 +1883,7 @@ const logFileNotFound = () => {
   return i18nString(LogFileNotFound$1);
 };
 const filter = () => {
-  return i18nString(Filter$1);
+  return i18nString(Filter);
 };
 
 const loadButtons = () => {
@@ -1971,47 +2075,69 @@ const refresh = async state => {
 };
 
 const renderFilterValue = (oldState, newState) => {
-  return ['Viewlet.setValueByName', Filter$2, newState.filterValue];
+  return ['Viewlet.setValueByName', Filter$1, newState.filterValue];
 };
 
-const Filter = 'Filter';
-const IconButton = 'IconButton';
-const InputBox = 'InputBox';
-const MaskIcon = 'MaskIcon';
-const FilterInput = 'FilterInput';
-const OutputContent = 'OutputContent';
-const Actions = 'Actions';
-const Message = 'Message';
-const Viewlet = 'Viewlet';
-const Output = 'Output';
-const Option = 'Option';
-const Select = 'Select';
-const Error$1 = 'Error';
-const Line = 'Line';
-
-const parentNode = {
+const noNodes = [];
+const repeatCountNode = {
   childCount: 1,
-  className: Line,
-  type: Div
+  className: OutputRepeatCount,
+  type: Span
+};
+const spaceNode = text(' ');
+const getLevel = parts => {
+  return parts.find(part => part.type === LogLevel)?.value || '';
+};
+const getLinePartDom = part => {
+  switch (part.type) {
+    case Link:
+      {
+        const linkNode = {
+          childCount: 1,
+          href: part.value,
+          rel: 'noopener noreferrer',
+          target: '_blank',
+          type: A,
+          ...(part.className && {
+            className: part.className
+          })
+        };
+        return {
+          childCount: 1,
+          nodes: [linkNode, text(part.label || part.value)]
+        };
+      }
+    case RepeatCount:
+      return {
+        childCount: 2,
+        nodes: [repeatCountNode, text(part.value), spaceNode]
+      };
+    case Text:
+      return {
+        childCount: 1,
+        nodes: [text(part.value)]
+      };
+    default:
+      return {
+        childCount: 0,
+        nodes: noNodes
+      };
+  }
 };
 const getLineDom = parts => {
   const children = [];
+  let childCount = 0;
   for (const part of parts) {
-    if (part.type === Text) {
-      children.push(text(part.value));
-    } else {
-      children.push({
-        childCount: 1,
-        href: part.value,
-        rel: 'noopener noreferrer',
-        target: '_blank',
-        type: A
-      }, text(part.value));
-    }
+    const partDom = getLinePartDom(part);
+    children.push(...partDom.nodes);
+    childCount += partDom.childCount;
   }
+  const level = getLevel(parts);
+  const className = level ? mergeClassNames(Line, level) : Line;
   const lineNode = {
-    ...parentNode,
-    childCount: children.length
+    childCount,
+    className,
+    type: Div
   };
   return [lineNode, ...children];
 };
@@ -2062,7 +2188,7 @@ const getErrorDom = (errorCode, error) => {
 const getOutputVirtualDom = (lines, errorCode, error) => {
   return [{
     childCount: 1,
-    className: mergeClassNames(Viewlet, Output),
+    className: mergeClassNames(Viewlet, Output$1),
     type: Div
   }, ...getContentDom(lines, error), ...getErrorDom(errorCode, error)];
 };
@@ -2074,7 +2200,7 @@ const renderItems = (oldState, newState) => {
 
 const renderSelectedItem = (oldState, newState) => {
   const value = newState.selectedOption;
-  const name = Output$1;
+  const name = Output;
   return ['Viewlet.setValueByName', name, value];
 };
 
@@ -2143,7 +2269,7 @@ const getActionButtonsVirtualDom = buttons => {
 
 const filterNode = {
   childCount: 1,
-  className: Filter,
+  className: Filter$2,
   type: Div
 };
 const getFilterVirtualDom = () => {
@@ -2151,7 +2277,7 @@ const getFilterVirtualDom = () => {
   return [filterNode, {
     childCount: 0,
     className: mergeClassNames(InputBox, FilterInput),
-    name: Filter$2,
+    name: Filter$1,
     onInput: HandleFilterInput,
     placeholder,
     type: Input
@@ -2175,7 +2301,7 @@ const getSelectVirtualDom = options => {
   return [{
     childCount: options.length,
     className: Select,
-    name: Output$1,
+    name: Output,
     onChange: HandleSelect,
     type: Select$1
   }, ...options.flatMap(getOptionVirtualDom)];
@@ -2240,7 +2366,10 @@ const resize = (state, dimensions) => {
 };
 
 const serializeLinePart = part => {
-  return part.value;
+  if (part.type === LogLevel || part.type === RepeatCount) {
+    return '';
+  }
+  return part.type === Link ? part.label || part.value : part.value;
 };
 const serializeLineParts = parts => {
   return parts.map(serializeLinePart).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/output-view",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Output View Worker",
   "repository": {
     "type": "git",