@lvce-editor/problems-view 1.0.0 → 1.1.0

package/dist/problemsViewWorkerMain.js

@@ -54,6 +54,61 @@ class VError extends Error {
   }
 }
 
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const Object$1 = 1;
+const Number$1 = 2;
+const Array$1 = 3;
+const String = 4;
+const Boolean$1 = 5;
+const Function = 6;
+const Null = 7;
+const Unknown = 8;
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return Number$1;
+    case 'function':
+      return Function;
+    case 'string':
+      return String;
+    case 'object':
+      if (value === null) {
+        return Null;
+      }
+      if (Array.isArray(value)) {
+        return Array$1;
+      }
+      return Object$1;
+    case 'boolean':
+      return Boolean$1;
+    default:
+      return Unknown;
+  }
+};
+const number = value => {
+  const type = getType(value);
+  if (type !== Number$1) {
+    throw new AssertionError('expected value to be of type number');
+  }
+};
+const array = value => {
+  const type = getType(value);
+  if (type !== Array$1) {
+    throw new AssertionError('expected value to be of type array');
+  }
+};
+const string = value => {
+  const type = getType(value);
+  if (type !== String) {
+    throw new AssertionError('expected value to be of type string');
+  }
+};
+
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -381,7 +436,7 @@ const callbacks = Object.create(null);
 const set$2 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -561,7 +616,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -892,16 +947,83 @@ const terminate = () => {
   globalThis.close();
 };
 
-const User = 1;
+const rpcs = Object.create(null);
+const set$g = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+
+const create$1 = rpcId => {
+  return {
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    set(rpc) {
+      set$g(rpcId, rpc);
+    },
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
+    }
+  };
+};
+const RendererWorker$1 = 1;
+const {
+  invoke: invoke$3,
+  set: set$3} = create$1(RendererWorker$1);
+const writeClipBoardText$1 = async text => {
+  await invoke$3('ClipBoard.writeText', /* text */text);
+};
+const RendererWorker = {
+  __proto__: null,
+  set: set$3,
+  writeClipBoardText: writeClipBoardText$1
+};
 
 const {
   set: set$1,
+  writeClipBoardText
+} = RendererWorker;
+
+const writeText = async text => {
+  await writeClipBoardText(text);
+};
+
+const copyMessage = async state => {
+  const {
+    problems,
+    focusedIndex
+  } = state;
+  const problem = problems[focusedIndex];
+  await writeText(problem.message);
+  return state;
+};
+
+const User = 1;
+
+const {
+  get,
+  set,
   wrapCommand
 } = create$2();
 
-const None = 0;
+const None$1 = 0;
+const Table = 1;
 
-const create$1 = (id, uri, x, y, width, height, args, parentUid) => {
+const create = (id, uri, x, y, width, height, args, parentUid) => {
   const state = {
     uid: id,
     parentUid,
@@ -914,7 +1036,7 @@ const create$1 = (id, uri, x, y, width, height, args, parentUid) => {
     width,
     height,
     filterValue: '',
-    viewMode: None,
+    viewMode: None$1,
     inputSource: User,
     minLineY: 0,
     maxLineY: 0,
@@ -923,9 +1045,47 @@ const create$1 = (id, uri, x, y, width, height, args, parentUid) => {
     smallWidthBreakPoint: 650,
     filteredProblems: []
   };
-  set$1(id, state, state);
+  set(id, state, state);
+};
+
+const isEqual = (oldState, newState) => {
+  return oldState.problems === newState.problems;
+};
+
+const RenderItems = 1;
+
+const modules = [isEqual];
+const numbers = [RenderItems];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const diff2 = uid => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  const diffResult = diff(oldState, newState);
+  return diffResult;
 };
 
+const None = 'none';
+const Tree$1 = 'tree';
+const TreeItem$1 = 'treeitem';
+const AriaRoles = {
+  __proto__: null,
+  None,
+  Tree: Tree$1,
+  TreeItem: TreeItem$1
+};
 const Space = 9;
 const PageUp = 10;
 const PageDown = 11;
@@ -947,6 +1107,31 @@ const KeyCode = {
   Space,
   UpArrow
 };
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Button = 1;
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Text = 12;
+const Img = 17;
+const A = 53;
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Button,
+  Div,
+  Img,
+  Input,
+  Span};
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
 
 const FocusProblems = 19;
 
@@ -999,6 +1184,8 @@ const getKeyBindings = () => {
 };
 
 const Item = 0;
+const Expanded = 1;
+const Collapsed = 2;
 
 const getArrowLeftNewFocusedIndex = (problems, collapsedUris, focusedIndex) => {
   for (let i = focusedIndex; i >= 0; i--) {
@@ -1069,63 +1256,612 @@ const initialize = async () => {
   // TODO create connection to editor worker
 };
 
-const commandMap = {
-  'Problems.handleArrowLeft': wrapCommand(handleArrowLeft),
-  'Problems.handleArrowRight': wrapCommand(handleArrowRight),
-  'Problems.create': create$1,
-  'Problems.getKeyBindings': getKeyBindings,
-  'Problems.terminate': terminate,
-  'Problems.initialize': initialize
+const Chevron = 'Chevron';
+const FileIcon = 'FileIcon';
+const Filter$3 = 'Filter';
+const Highlight = 'Highlight';
+const IconButton = 'IconButton';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const LabelDetail = 'LabelDetail';
+const Message$1 = 'Message';
+const MessageAction = 'MessageAction';
+const Problem = 'Problem';
+const ProblemAt = 'ProblemAt';
+const ProblemBadge = 'ProblemBadge';
+const Problems = 'Problems';
+const ProblemSelected = 'ProblemSelected';
+const ProblemsErrorIcon = 'ProblemsErrorIcon';
+const ProblemsIcon = 'ProblemsIcon';
+const ProblemsList = 'ProblemsList';
+const ProblemsTable = 'ProblemsTable';
+const ProblemsTableBody = 'ProblemsTableBody';
+const ProblemsTableHeader = 'ProblemsTableHeader';
+const ProblemsTableRow = 'ProblemsTableRow';
+const ProblemsTableRowItem = 'ProblemsTableRowItem';
+const ProblemsTableRowOdd = 'ProblemsTableRowOdd';
+const ProblemsWarningIcon = 'ProblemsWarningIcon';
+const Viewlet = 'Viewlet';
+
+const HandleBlur = 'handleBlur';
+const HandleClearFilterClick = 'handleClearFilterClick';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFilterInput = 'handleFilterInput';
+const HandlePointerDown = 'handlePointerDown';
+
+const getIconVirtualDom = (icon, type = VirtualDomElements.Div) => {
+  return {
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: AriaRoles.None,
+    childCount: 0
+  };
 };
 
-const rpcs = Object.create(null);
-const set$g = (id, rpc) => {
-  rpcs[id] = rpc;
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: VirtualDomElements.Button,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
 };
-const get = id => {
-  return rpcs[id];
+
+const Filter$2 = 'filter';
+
+const Filter$1 = 'Filter';
+
+const getProblemsFilterVirtualDom = action => {
+  // TODO avoid mutation
+  const dom = [];
+  dom.push({
+    type: VirtualDomElements.Div,
+    className: Filter$3,
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Input,
+    className: InputBox,
+    spellcheck: false,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    placeholder: action.placeholder,
+    onInput: action.command,
+    name: Filter$2,
+    value: action.value
+  });
+  // @ts-ignore
+  dom[0].childCount++;
+  dom.push(...getActionButtonVirtualDom({
+    id: 'more filters',
+    icon: Filter$1,
+    command: 'more filters'
+  }));
+  return dom;
 };
 
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const getBadgeVirtualDom = (className, count) => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: `Badge ${className}`,
+    childCount: 1
+  }, text(`${count}`)];
+};
 
-const create = rpcId => {
+const getChevronDownVirtualDom = (extraClassName = '') => {
   return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$g(rpcId, rpc);
-    },
-    async dispose() {
-      const rpc = get(rpcId);
-      await rpc.dispose();
+    type: VirtualDomElements.Div,
+    className: `${Chevron} MaskIconChevronDown ${extraClassName}`,
+    childCount: 0
+  };
+};
+const getChevronRightVirtualDom = (extraClassName = '') => {
+  return {
+    type: VirtualDomElements.Div,
+    className: `${Chevron} MaskIconChevronRight ${extraClassName}`,
+    childCount: 0
+  };
+};
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: VirtualDomElements.Img,
+    className: FileIcon,
+    src: icon,
+    role: AriaRoles.None,
+    childCount: 0
+  };
+};
+
+const Warning = 'warning';
+
+const getProblemsIconVirtualDom = type => {
+  // TODO use mergeclassnames
+  if (type === Warning) {
+    return {
+      type: VirtualDomElements.Div,
+      className: `${ProblemsIcon} ${ProblemsWarningIcon}`,
+      childCount: 0
+    };
+  }
+  return {
+    type: VirtualDomElements.Div,
+    className: `${ProblemsIcon} ${ProblemsErrorIcon}`,
+    childCount: 0
+  };
+};
+
+// TODO compute detail message in getVisibleProblems
+const getProblemSourceDetail = (source, code) => {
+  let message = '';
+  if (source) {
+    message += `${source}`;
+  }
+  if (code) {
+    message += `(${code})`;
+  }
+  message += ' ';
+  return message;
+};
+
+const defaultIndent = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent}rem`;
+};
+
+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);
+};
+
+const ClearFilters = 'Clear Filters';
+const Code = 'Code';
+const File = 'File';
+const Filter = 'Filter';
+const LineColumn = '[Ln {PH1}, Col {PH2}]';
+const Message = 'Message';
+const NoProblemsDetected = 'No problems have been detected in the workspace.';
+const NoResultsFoundWithProvidedFilterCriteria = 'No results found with provided filter criteria.';
+const Source = 'Source';
+
+const noProblemsDetected = () => {
+  return i18nString(NoProblemsDetected);
+};
+const atLineColumn = (line, column) => {
+  return i18nString(LineColumn, {
+    PH1: line,
+    PH2: column
+  });
+};
+const clearFilter = () => {
+  return i18nString(ClearFilters);
+};
+const code = () => {
+  return i18nString(Code);
+};
+const message = () => {
+  return i18nString(Message);
+};
+const file = () => {
+  return i18nString(File);
+};
+const filter = () => {
+  return i18nString(Filter);
+};
+const source = () => {
+  return i18nString(Source);
+};
+const noResultsFoundWithProvidedFilterCriteria = () => {
+  return i18nString(NoResultsFoundWithProvidedFilterCriteria);
+};
+
+const getProblemVirtualDom = problem => {
+  const {
+    message,
+    rowIndex,
+    columnIndex,
+    isActive,
+    uri,
+    icon,
+    source,
+    relativePath,
+    messageMatchIndex,
+    filterValueLength,
+    code,
+    type,
+    posInSet,
+    setSize,
+    level,
+    listItemType,
+    isCollapsed
+  } = problem;
+  let className = Problem;
+  if (isActive) {
+    className += ' ' + ProblemSelected;
+  }
+  if (listItemType === Expanded || listItemType === Collapsed) {
+    return [{
+      type: VirtualDomElements.Div,
+      className,
+      childCount: 5,
+      paddingLeft: getTreeItemIndent(1),
+      ariaPosInSet: posInSet,
+      ariaSetSize: setSize,
+      ariaLevel: level,
+      ariaExpanded: !isCollapsed,
+      ariaSelected: isActive,
+      role: AriaRoles.TreeItem
+    }, listItemType === Collapsed ? getChevronRightVirtualDom() : getChevronDownVirtualDom(), getFileIconVirtualDom(icon), text(uri), {
+      type: VirtualDomElements.Div,
+      className: LabelDetail,
+      childCount: 1
+    }, text(relativePath), ...getBadgeVirtualDom(ProblemBadge, problem.count)];
+  }
+  const lineColumn = atLineColumn(rowIndex, columnIndex);
+  const label = {
+    type: VirtualDomElements.Div,
+    className: Label,
+    childCount: 1
+  };
+  /**
+   * @type {any}
+   */
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className,
+    childCount: 3,
+    paddingLeft: getTreeItemIndent(2),
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    ariaLevel: level,
+    ariaSelected: isActive,
+    role: AriaRoles.TreeItem
+  }, getProblemsIconVirtualDom(type), label];
+  if (filterValueLength) {
+    const before = message.slice(0, messageMatchIndex);
+    const middle = message.slice(messageMatchIndex, messageMatchIndex + filterValueLength);
+    const after = message.slice(messageMatchIndex + filterValueLength);
+    label.childCount += 2;
+    dom.push(text(before), {
+      type: VirtualDomElements.Div,
+      className: Highlight,
+      childCount: 1
+    }, text(middle), text(after));
+  } else {
+    dom.push(text(message));
+  }
+  dom.push({
+    type: VirtualDomElements.Span,
+    className: ProblemAt,
+    childCount: 2
+  }, text(getProblemSourceDetail(source, code)), text(lineColumn));
+  return dom;
+};
+
+const getProblemsListVirtualDom = problems => {
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className: ProblemsList,
+    childCount: problems.length,
+    role: AriaRoles.Tree,
+    ariaLabel: 'Problems Tree' // TODO use i18n string
+  }, ...problems.flatMap(getProblemVirtualDom)];
+  return dom;
+};
+
+const getProblemsNoProblemsFoundVirtualDom = filterValue => {
+  // TODO avoid mutation
+  const dom = [];
+  dom.push({
+    type: VirtualDomElements.Div,
+    className: Message$1,
+    childCount: 1
+  });
+  if (filterValue) {
+    dom[0].childCount += 2;
+    dom.push({
+      type: VirtualDomElements.Span,
+      childCount: 1
+    }, text(noResultsFoundWithProvidedFilterCriteria()), {
+      type: VirtualDomElements.A,
+      className: MessageAction,
+      childCount: 1,
+      onClick: HandleClearFilterClick
+    }, text(clearFilter()), text('.'));
+  } else {
+    dom.push(text(noProblemsDetected()));
+  }
+  return dom;
+};
+
+const getClassName = isEven => {
+  if (isEven) {
+    return ProblemsTableRow;
+  }
+  return mergeClassNames(ProblemsTableRow, ProblemsTableRowOdd);
+};
+const getProblemsTableRowVirtualDom = problem => {
+  const {
+    code,
+    source,
+    uri,
+    message,
+    isEven,
+    type
+  } = problem;
+  // TODO problems are grouped by uri, depending
+  // on which renderer is used the data needs to look different
+  if (!message) {
+    return [];
+  }
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className: getClassName(isEven),
+    childCount: 5
+  }, {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, getProblemsIconVirtualDom(type), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(getProblemSourceDetail(source, code)), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(message), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(uri), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(source)];
+  return dom;
+};
+
+const getProblemsTableBodyVirtualDom = problems => {
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className: ProblemsTableBody,
+    childCount: problems.length
+  }, ...problems.flatMap(getProblemsTableRowVirtualDom)];
+  return dom;
+};
+
+const getProblemsTableHeaderVirtualDom = () => {
+  const textCode = code();
+  const textSource = source();
+  const textMessage = message();
+  const textFile = file();
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className: ProblemsTableHeader,
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRow,
+    childCount: 5
+  }, {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 0
+  }, {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(textCode), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(textMessage), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(textFile), {
+    type: VirtualDomElements.Div,
+    className: ProblemsTableRowItem,
+    childCount: 1
+  }, text(textSource)];
+  return dom;
+};
+
+const getProblemsTableVirtualDom = problems => {
+  const dom = [{
+    type: VirtualDomElements.Div,
+    className: ProblemsTable,
+    childCount: 2
+  }, ...getProblemsTableHeaderVirtualDom(), ...getProblemsTableBodyVirtualDom(problems)];
+  return dom;
+};
+
+const getProblemsVirtualDom$1 = (viewMode, problems, filterValue) => {
+  if (problems.length === 0) {
+    return getProblemsNoProblemsFoundVirtualDom(filterValue);
+  }
+  if (viewMode === Table) {
+    return getProblemsTableVirtualDom(problems);
+  }
+  const dom = getProblemsListVirtualDom(problems);
+  return dom;
+};
+
+const getProblemsVirtualDom = (viewMode, problems, filterValue, isSmall) => {
+  // TODO avoid mutation
+  const dom = [];
+  dom.push({
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(Viewlet, Problems),
+    tabIndex: 0,
+    onPointerDown: HandlePointerDown,
+    onContextMenu: HandleContextMenu,
+    onBlur: HandleBlur,
+    childCount: 1
+  });
+  if (isSmall) {
+    dom[0].childCount++;
+    dom.push(...getProblemsFilterVirtualDom({
+      command: HandleFilterInput,
+      placeholder: filter(),
+      value: ''
+    }));
+  }
+  dom.push(...getProblemsVirtualDom$1(viewMode, problems, filterValue));
+  return dom;
+};
+
+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,
+      uriMatchIndex,
+      sourceMatchIndex,
+      messageMatchIndex,
+      listItemType: getListItemType(problem.listItemType, isCollapsed),
+      isCollapsed
+    });
+  }
+  return filtered;
+};
+
+const getFileNameIcon = file => {
+  return '';
+};
+
+const getIcon = uri => {
+  if (!uri) {
+    return '';
+  }
+  return getFileNameIcon();
+};
+const getVisibleProblems = (problems, collapsedUris, focusedIndex, filterValue) => {
+  array(problems);
+  array(collapsedUris);
+  number(focusedIndex);
+  string(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];
+    visibleItems.push({
+      ...problem,
+      isEven: i % 2 === 0,
+      isActive: i === focusedIndex,
+      icon: getIcon(problem.uri),
+      filterValueLength
+    });
+  }
+  return visibleItems;
+};
+
+const renderItems = (oldState, newState) => {
+  const visible = getVisibleProblems(newState.problems, newState.collapsedUris, newState.focusedIndex, newState.filterValue);
+  const isSmall = newState.width <= newState.smallWidthBreakPoint;
+  const dom = getProblemsVirtualDom(newState.viewMode, visible, newState.filterValue, isSmall);
+  return ['Viewlet.setDom2', dom];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderItems:
+      return renderItems;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    commands.push(fn(oldState, newState));
+  }
+  return commands;
+};
+
+const render2 = (uid, diffResult) => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  set(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  return commands;
+};
+
+const saveState = state => {
+  const {
+    viewMode,
+    filterValue,
+    collapsedUris
+  } = state;
+  return {
+    viewMode,
+    filterValue,
+    collapsedUris
   };
 };
-const RendererWorker$1 = 1;
-const {
-  set: set$3} = create(RendererWorker$1);
-const RendererWorker = {
-  __proto__: null,
-  set: set$3};
 
-const {
-  set} = RendererWorker;
+const commandMap = {
+  'Problems.create': create,
+  'Problems.diff2': diff2,
+  'Problems.getKeyBindings': getKeyBindings,
+  'Problems.handleArrowLeft': wrapCommand(handleArrowLeft),
+  'Problems.handleArrowRight': wrapCommand(handleArrowRight),
+  'Problems.initialize': initialize,
+  'Problems.render2': render2,
+  'Problems.saveState': saveState,
+  'Problems.terminate': terminate,
+  'Problems.copyMessage': copyMessage
+};
 
 const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(rpc);
+  set$1(rpc);
 };
 
 const main = async () => {

package/package.json

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