@lvce-editor/output-view 1.6.0 → 1.8.0

package/dist/outputViewWorkerMain.js

@@ -368,9 +368,103 @@ const IpcChildWithModuleWorkerAndMessagePort$1 = {
   listen: listen$6,
   wrap: wrap$e
 };
+const addListener = (emitter, type, callback) => {
+  if ('addEventListener' in emitter) {
+    emitter.addEventListener(type, callback);
+  } else {
+    emitter.on(type, callback);
+  }
+};
+const removeListener = (emitter, type, callback) => {
+  if ('removeEventListener' in emitter) {
+    emitter.removeEventListener(type, callback);
+  } else {
+    emitter.off(type, callback);
+  }
+};
+const getFirstEvent = (eventEmitter, eventMap) => {
+  const {
+    resolve,
+    promise
+  } = Promise.withResolvers();
+  const listenerMap = Object.create(null);
+  const cleanup = value => {
+    for (const event of Object.keys(eventMap)) {
+      removeListener(eventEmitter, event, listenerMap[event]);
+    }
+    resolve(value);
+  };
+  for (const [event, type] of Object.entries(eventMap)) {
+    const listener = event => {
+      cleanup({
+        type,
+        event
+      });
+    };
+    addListener(eventEmitter, event, listener);
+    listenerMap[event] = listener;
+  }
+  return promise;
+};
+const Message$1 = 3;
+const create$5$1 = async ({
+  messagePort,
+  isMessagePortOpen
+}) => {
+  if (!isMessagePort(messagePort)) {
+    throw new IpcError('port must be of type MessagePort');
+  }
+  if (isMessagePortOpen) {
+    return messagePort;
+  }
+  const eventPromise = getFirstEvent(messagePort, {
+    message: Message$1
+  });
+  messagePort.start();
+  const {
+    type,
+    event
+  } = await eventPromise;
+  if (type !== Message$1) {
+    throw new IpcError('Failed to wait for ipc message');
+  }
+  if (event.data !== readyMessage) {
+    throw new IpcError('unexpected first message');
+  }
+  return messagePort;
+};
+const signal$1 = messagePort => {
+  messagePort.start();
+};
+class IpcParentWithMessagePort extends Ipc {
+  getData = getData$2;
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    this._rawIpc.close();
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+  onClose(callback) {}
+}
+const wrap$5 = messagePort => {
+  return new IpcParentWithMessagePort(messagePort);
+};
+const IpcParentWithMessagePort$1 = {
+  __proto__: null,
+  create: create$5$1,
+  signal: signal$1,
+  wrap: wrap$5
+};
 
 const Two = '2.0';
-const create$4 = (method, params) => {
+const create$4$1 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -378,7 +472,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$2 = (id, fn) => {
+const set$4 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -397,7 +491,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$2(id, resolve);
+  set$4(id, resolve);
   return {
     id,
     promise
@@ -625,7 +719,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$5 = (message, result) => {
+const create$6 = (message, result) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -634,7 +728,7 @@ const create$5 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$5(message, resultProperty);
+  return create$6(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -739,7 +833,7 @@ const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
   return unwrapJsonRpcResult(responseMessage);
 };
 const send = (transport, method, ...params) => {
-  const message = create$4(method, params);
+  const message = create$4$1(method, params);
   transport.send(message);
 };
 const invoke = (ipc, method, ...params) => {
@@ -822,7 +916,41 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
+const create$5 = async ({
+  commandMap,
+  messagePort
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const rawIpc = await IpcParentWithMessagePort$1.create({
+    messagePort,
+    isMessagePortOpen: true
+  });
+  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  messagePort.start();
+  return rpc;
+};
 const create$3 = async ({
+  commandMap,
+  send
+}) => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  await send(port1);
+  return create$5({
+    commandMap,
+    messagePort: port2
+  });
+};
+const TransferMessagePortRpcParent = {
+  __proto__: null,
+  create: create$3
+};
+const create$4 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -834,7 +962,7 @@ const create$3 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$3
+  create: create$4
 };
 
 const toCommandId$1 = key => {
@@ -933,7 +1061,7 @@ const Script = 2;
 
 const {
   get: get$1,
-  set: set$1,
+  set: set$2,
   wrapCommand,
   wrapGetter
 } = create$2();
@@ -960,9 +1088,11 @@ const create$1 = (id, uri, x, y, width, height, workspaceUri) => {
     workspaceUri,
     options: [],
     error: '',
-    errorCode: 0
+    errorCode: 0,
+    buttons: [],
+    filteredItems: []
   };
-  set$1(id, state, state);
+  set$2(id, state, state);
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1048,6 +1178,7 @@ const mergeClassNames = (...classNames) => {
 };
 const Button$1 = 1;
 const Div = 4;
+const Input = 6;
 const Text = 12;
 const Select$2 = 63;
 const Option$1 = 64;
@@ -1055,6 +1186,7 @@ const VirtualDomElements = {
   __proto__: null,
   Button: Button$1,
   Div,
+  Input,
   Option: Option$1,
   Select: Select$2};
 const text = data => {
@@ -1067,7 +1199,7 @@ const text = data => {
 
 const FocusProblems = 19;
 
-const getKeyBindings$1 = () => {
+const getKeyBindings = () => {
   return [{
     key: KeyCode.DownArrow,
     command: 'Problems.focusNext',
@@ -1115,20 +1247,6 @@ const getKeyBindings$1 = () => {
   }];
 };
 
-const handleData = async state => {
-  // TODO
-  return {
-    ...state
-  };
-};
-
-const handleError = async state => {
-  // TODO
-  return {
-    ...state
-  };
-};
-
 const rpcs = Object.create(null);
 const set$g = (id, rpc) => {
   rpcs[id] = rpc;
@@ -1162,336 +1280,41 @@ const create = rpcId => {
     }
   };
 };
-const DebugWorker$1 = 55;
 const RendererWorker$1 = 1;
+const FileSystemWorker$1 = 209;
 const {
-  invoke: invoke$3,
-  invokeAndTransfer: invokeAndTransfer$3,
-  set: set$3,
-  dispose: dispose$3
-} = create(RendererWorker$1);
-const searchFileHtml = async uri => {
-  return invoke$3('ExtensionHost.searchFileWithHtml', uri);
+  invoke: invoke$7,
+  set: set$7} = create(FileSystemWorker$1);
+const readFile$1 = async uri => {
+  return invoke$7('FileSystem.readFile', uri);
 };
-const getFilePathElectron = async file => {
-  return invoke$3('FileSystemHandle.getFilePathElectron', file);
+const writeFile$1 = async (uri, content) => {
+  return invoke$7('FileSystem.writeFile', uri, content);
 };
-const showContextMenu = async (x, y, id, ...args) => {
-  return invoke$3('ContextMenu.show', x, y, id, ...args);
-};
-const getElectronVersion = async () => {
-  return invoke$3('Process.getElectronVersion');
-};
-const applyBulkReplacement = async bulkEdits => {
-  await invoke$3('BulkReplacement.applyBulkReplacement', bulkEdits);
-};
-const setColorTheme = async id => {
-  // @ts-ignore
-  return invoke$3(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
-};
-const getNodeVersion = async () => {
-  return invoke$3('Process.getNodeVersion');
-};
-const getChromeVersion = async () => {
-  return invoke$3('Process.getChromeVersion');
-};
-const getV8Version = async () => {
-  return invoke$3('Process.getV8Version');
-};
-const getFileHandles = async fileIds => {
-  const files = await invoke$3('FileSystemHandle.getFileHandles', fileIds);
-  return files;
-};
-const setWorkspacePath = async path => {
-  await invoke$3('Workspace.setPath', path);
-};
-const registerWebViewInterceptor = async (id, port) => {
-  await invokeAndTransfer$3('WebView.registerInterceptor', id, port);
-};
-const unregisterWebViewInterceptor = async id => {
-  await invoke$3('WebView.unregisterInterceptor', id);
-};
-const sendMessagePortToEditorWorker = async (port, rpcId) => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
-};
-const sendMessagePortToErrorWorker = async (port, rpcId) => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
-};
-const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
-  const command = 'Markdown.handleMessagePort';
-  // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
+const FileSystemWorker = {
+  __proto__: null,
+  readFile: readFile$1,
+  set: set$7,
+  writeFile: writeFile$1
 };
-const sendMessagePortToFileSystemWorker = async (port, rpcId) => {
+const {
+  invokeAndTransfer: invokeAndTransfer$3,
+  set: set$3} = create(RendererWorker$1);
+const sendMessagePortToFileSystemWorker$2 = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
 };
-const readFile = async uri => {
-  return invoke$3('FileSystem.readFile', uri);
-};
-const getWebViewSecret = async key => {
-  // @ts-ignore
-  return invoke$3('WebView.getSecret', key);
-};
-const setWebViewPort = async (uid, port, origin, portType) => {
-  return invokeAndTransfer$3('WebView.setPort', uid, port, origin, portType);
-};
-const setFocus = key => {
-  return invoke$3('Focus.setFocus', key);
-};
-const getFileIcon = async options => {
-  return invoke$3('IconTheme.getFileIcon', options);
-};
-const getColorThemeNames = async () => {
-  return invoke$3('ColorTheme.getColorThemeNames');
-};
-const disableExtension = async id => {
-  return invoke$3('ExtensionManagement.disable', id);
-};
-const enableExtension = async id => {
-  // @ts-ignore
-  return invoke$3('ExtensionManagement.enable', id);
-};
-const handleDebugChange = async params => {
-  // @ts-ignore
-  return invoke$3('Run And Debug.handleChange', params);
-};
-const getFolderIcon = async options => {
-  return invoke$3('IconTheme.getFolderIcon', options);
-};
-const closeWidget = async widgetId => {
-  return invoke$3('Viewlet.closeWidget', widgetId);
-};
-const sendMessagePortToExtensionHostWorker = async (port, rpcId = 0) => {
-  const command = 'HandleMessagePort.handleMessagePort2';
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
-};
-const sendMessagePortToSearchProcess = async port => {
-  await invokeAndTransfer$3('SendMessagePortToElectron.sendMessagePortToElectron', port, 'HandleMessagePortForSearchProcess.handleMessagePortForSearchProcess');
-};
-const confirm = async (message, options) => {
-  // @ts-ignore
-  const result = await invoke$3('Confirmprompt.prompt', message, options);
-  return result;
-};
-const getRecentlyOpened = async () => {
-  return invoke$3(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
-};
-const getKeyBindings = async () => {
-  return invoke$3('KeyBindingsInitial.getKeyBindings');
-};
-const writeClipBoardText = async text => {
-  await invoke$3('ClipBoard.writeText', /* text */text);
-};
-const writeClipBoardImage = async blob => {
-  // @ts-ignore
-  await invoke$3('ClipBoard.writeImage', /* text */blob);
-};
-const searchFileMemory = async uri => {
-  // @ts-ignore
-  return invoke$3('ExtensionHost.searchFileWithMemory', uri);
-};
-const searchFileFetch = async uri => {
-  return invoke$3('ExtensionHost.searchFileWithFetch', uri);
-};
-const showMessageBox = async options => {
-  return invoke$3('ElectronDialog.showMessageBox', options);
-};
-const handleDebugResumed = async params => {
-  await invoke$3('Run And Debug.handleResumed', params);
-};
-const openWidget = async name => {
-  await invoke$3('Viewlet.openWidget', name);
-};
-const getIcons = async requests => {
-  const icons = await invoke$3('IconTheme.getIcons', requests);
-  return icons;
-};
-const activateByEvent = event => {
-  return invoke$3('ExtensionHostManagement.activateByEvent', event);
-};
-const setAdditionalFocus = focusKey => {
-  // @ts-ignore
-  return invoke$3('Focus.setAdditionalFocus', focusKey);
-};
-const getActiveEditorId = () => {
-  // @ts-ignore
-  return invoke$3('GetActiveEditor.getActiveEditorId');
-};
-const getWorkspacePath = () => {
-  return invoke$3('Workspace.getPath');
-};
-const sendMessagePortToRendererProcess = async port => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToRendererProcess', port, command, DebugWorker$1);
-};
-const getPreference = async key => {
-  return await invoke$3('Preferences.get', key);
-};
-const getAllExtensions = async () => {
-  return invoke$3('ExtensionManagement.getAllExtensions');
-};
-const rerenderEditor = async key => {
-  // @ts-ignore
-  return invoke$3('Editor.rerender', key);
-};
-const handleDebugPaused = async params => {
-  await invoke$3('Run And Debug.handlePaused', params);
-};
-const openUri = async (uri, focus, options) => {
-  await invoke$3('Main.openUri', uri, focus, options);
-};
-const sendMessagePortToSyntaxHighlightingWorker = async port => {
-  await invokeAndTransfer$3(
-  // @ts-ignore
-  'SendMessagePortToSyntaxHighlightingWorker.sendMessagePortToSyntaxHighlightingWorker', port, 'HandleMessagePort.handleMessagePort2');
-};
-const handleDebugScriptParsed = async script => {
-  await invoke$3('Run And Debug.handleScriptParsed', script);
-};
-const getWindowId = async () => {
-  return invoke$3('GetWindowId.getWindowId');
-};
-const getBlob = async uri => {
-  // @ts-ignore
-  return invoke$3('FileSystem.getBlob', uri);
-};
-const getExtensionCommands = async () => {
-  return invoke$3('ExtensionHost.getCommands');
-};
-const showErrorDialog = async errorInfo => {
-  // @ts-ignore
-  await invoke$3('ErrorHandling.showErrorDialog', errorInfo);
-};
-const getFolderSize = async uri => {
-  // @ts-ignore
-  return await invoke$3('FileSystem.getFolderSize', uri);
-};
-const getExtension = async id => {
-  // @ts-ignore
-  return invoke$3('ExtensionManagement.getExtension', id);
-};
-const getMarkdownDom = async html => {
-  // @ts-ignore
-  return invoke$3('Markdown.getVirtualDom', html);
-};
-const renderMarkdown = async (markdown, options) => {
-  // @ts-ignore
-  return invoke$3('Markdown.renderMarkdown', markdown, options);
-};
-const openNativeFolder = async uri => {
-  // @ts-ignore
-  await invoke$3('OpenNativeFolder.openNativeFolder', uri);
-};
-const uninstallExtension = async id => {
-  return invoke$3('ExtensionManagement.uninstall', id);
-};
-const installExtension = async id => {
-  // @ts-ignore
-  return invoke$3('ExtensionManagement.install', id);
-};
-const openExtensionSearch = async () => {
-  // @ts-ignore
-  return invoke$3('SideBar.openViewlet', 'Extensions');
-};
-const setExtensionsSearchValue = async searchValue => {
-  // @ts-ignore
-  return invoke$3('Extensions.handleInput', searchValue);
-};
-const openExternal = async uri => {
-  // @ts-ignore
-  await invoke$3('Open.openExternal', uri);
-};
-const openUrl = async uri => {
-  // @ts-ignore
-  await invoke$3('Open.openUrl', uri);
-};
-const getAllPreferences = async () => {
-  // @ts-ignore
-  return invoke$3('Preferences.getAll');
-};
 const RendererWorker = {
   __proto__: null,
-  activateByEvent,
-  applyBulkReplacement,
-  closeWidget,
-  confirm,
-  disableExtension,
-  dispose: dispose$3,
-  enableExtension,
-  getActiveEditorId,
-  getAllExtensions,
-  getAllPreferences,
-  getBlob,
-  getChromeVersion,
-  getColorThemeNames,
-  getElectronVersion,
-  getExtension,
-  getExtensionCommands,
-  getFileHandles,
-  getFileIcon,
-  getFilePathElectron,
-  getFolderIcon,
-  getFolderSize,
-  getIcons,
-  getKeyBindings,
-  getMarkdownDom,
-  getNodeVersion,
-  getPreference,
-  getRecentlyOpened,
-  getV8Version,
-  getWebViewSecret,
-  getWindowId,
-  getWorkspacePath,
-  handleDebugChange,
-  handleDebugPaused,
-  handleDebugResumed,
-  handleDebugScriptParsed,
-  installExtension,
-  invoke: invoke$3,
-  invokeAndTransfer: invokeAndTransfer$3,
-  openExtensionSearch,
-  openExternal,
-  openNativeFolder,
-  openUri,
-  openUrl,
-  openWidget,
+  sendMessagePortToFileSystemWorker: sendMessagePortToFileSystemWorker$2,
+  set: set$3};
+
+const {
+  set: set$1,
   readFile,
-  registerWebViewInterceptor,
-  renderMarkdown,
-  rerenderEditor,
-  searchFileFetch,
-  searchFileHtml,
-  searchFileMemory,
-  sendMessagePortToEditorWorker,
-  sendMessagePortToErrorWorker,
-  sendMessagePortToExtensionHostWorker,
-  sendMessagePortToFileSystemWorker,
-  sendMessagePortToMarkdownWorker,
-  sendMessagePortToRendererProcess,
-  sendMessagePortToSearchProcess,
-  sendMessagePortToSyntaxHighlightingWorker,
-  set: set$3,
-  setAdditionalFocus,
-  setColorTheme,
-  setExtensionsSearchValue,
-  setFocus,
-  setWebViewPort,
-  setWorkspacePath,
-  showContextMenu,
-  showErrorDialog,
-  showMessageBox,
-  uninstallExtension,
-  unregisterWebViewInterceptor,
-  writeClipBoardImage,
-  writeClipBoardText
-};
+  writeFile
+} = FileSystemWorker;
 
 const isFileNotFoundError = error => {
   return error.message.includes('File not found');
@@ -1500,7 +1323,7 @@ const isFileNotFoundError = error => {
 const loadLines = async uri => {
   try {
     // TODO use log stream, updating the output when the file is changed
-    const content = await RendererWorker.invoke('FileSystem.readFile', uri);
+    const content = await readFile(uri);
     const lines = content.split('\n');
     return {
       error: '',
@@ -1523,6 +1346,90 @@ const loadLines = async uri => {
   }
 };
 
+const clear = async state => {
+  const {
+    selectedOption,
+    options
+  } = state;
+  const option = options.find(option => option.id === selectedOption);
+  if (!option) {
+    return state;
+  }
+  const {
+    uri
+  } = option;
+  await writeFile(uri, '');
+  const {
+    lines,
+    code,
+    error
+  } = await loadLines(uri);
+  return {
+    ...state,
+    listItems: lines,
+    error,
+    errorCode: code
+  };
+};
+
+const Filter = 'filter';
+const Output$2 = 'output';
+const MainProcess = 'MainProcess';
+const SharedProcess = 'SharedProcess';
+const Clear = 'Clear';
+const Settings = 'Settings';
+const ScrollLock = 'ScrollLock';
+
+const noop = async state => {
+  return state;
+};
+const getClickHandler = name => {
+  switch (name) {
+    case Clear:
+      return clear;
+    default:
+      return noop;
+  }
+};
+
+const handleButtonClick = async (state, name) => {
+  const fn = getClickHandler(name);
+  return fn(state);
+};
+
+const handleData = async state => {
+  // TODO
+  return {
+    ...state
+  };
+};
+
+const handleError = async state => {
+  // TODO
+  return {
+    ...state
+  };
+};
+
+const filterItems = (items, filterValue) => {
+  if (!filterValue) {
+    return items;
+  }
+  return items.filter(item => item.includes(filterValue));
+};
+
+const handleFilterInput = async (state, value) => {
+  const {
+    listItems
+  } = state;
+  const filteredItems = filterItems(listItems, value);
+  return {
+    ...state,
+    filterValue: value,
+    filteredItems: filteredItems
+  };
+};
+
 const handleSelect = async (state, id) => {
   const {
     options
@@ -1545,16 +1452,54 @@ const handleSelect = async (state, id) => {
   };
 };
 
-const initialize = async () => {};
+const {
+  sendMessagePortToFileSystemWorker: sendMessagePortToFileSystemWorker$1,
+  set} = RendererWorker;
+
+const sendMessagePortToFileSystemWorker = async port => {
+  await sendMessagePortToFileSystemWorker$1(port, 0);
+};
+
+const createFileSystemWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send: sendMessagePortToFileSystemWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create file system worker rpc`);
+  }
+};
+
+const initializeFileSystemWorker = async () => {
+  const rpc = await createFileSystemWorkerRpc();
+  set$1(rpc);
+};
+
+const initialize = async () => {
+  await initializeFileSystemWorker();
+};
 
 const getSelectedItem = platform => {
-  return 'file:///tmp/log-main-process.txt';
+  return MainProcess;
 };
 
-const Filter = 'filter';
-const Output$2 = 'output';
-const MainProcess = 'MainProcess';
-const SharedProcess = 'SharedProcess';
+const loadButtons = () => {
+  return [{
+    id: Clear,
+    label: 'Clear',
+    icon: 'MaskIconClearAll'
+  }, {
+    id: ScrollLock,
+    label: 'Scroll Lock',
+    icon: 'MaskIconListFlat'
+  }, {
+    id: Settings,
+    label: 'Settings',
+    icon: 'MaskIconListFlat'
+  }];
+};
 
 const loadOptions = async platform => {
   return [{
@@ -1579,13 +1524,18 @@ const getSavedCollapsedUris = savedState => {
 };
 const loadContent = async (state, savedState) => {
   const collapsedUris = getSavedCollapsedUris(savedState);
-  const selectedUri = getSelectedItem();
+  const selectedId = getSelectedItem();
   const options = await loadOptions();
+  const uri = options.find(option => option.id === selectedId)?.uri;
+  if (!uri) {
+    throw new Error('option not found');
+  }
   const {
     lines,
     error,
     code
-  } = await loadLines(selectedUri);
+  } = await loadLines(uri);
+  const buttons = loadButtons();
   return {
     ...state,
     collapsedUris,
@@ -1593,8 +1543,10 @@ const loadContent = async (state, savedState) => {
     errorCode: code,
     inputSource: Script,
     listItems: lines,
+    filteredItems: lines,
     options,
-    selectedOption: selectedUri
+    selectedOption: selectedId,
+    buttons
   };
 };
 
@@ -1743,7 +1695,7 @@ const getOutputVirtualDom = (lines, errorCode, error) => {
 };
 
 const renderItems = (oldState, newState) => {
-  const dom = getOutputVirtualDom(newState.listItems, newState.errorCode, newState.error);
+  const dom = getOutputVirtualDom(newState.filteredItems, newState.errorCode, newState.error);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -1772,11 +1724,19 @@ const render2 = (uid, diffResult) => {
     oldState,
     newState
   } = get$1(uid);
-  set$1(uid, newState, newState);
+  set$2(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
 
+const HandleBlur = 'handleBlur';
+const HandleClearFilterClick = 'handleClearFilterClick';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFilterInput = 'handleFilterInput';
+const HandlePointerDown = 'handlePointerDown';
+const HandleSelect = 'handleSelect';
+const HandleButtonClick = 'handleButtonClick';
+
 const getActionButtonVirtualDom = button => {
   const {
     id,
@@ -1788,7 +1748,8 @@ const getActionButtonVirtualDom = button => {
     className: IconButton,
     name: id,
     title: label,
-    childCount: 1
+    childCount: 1,
+    onClick: HandleButtonClick
   }, {
     type: VirtualDomElements.Div,
     className: mergeClassNames(MaskIcon, icon)
@@ -1799,12 +1760,20 @@ const getActionButtonsVirtualDom = buttons => {
   return buttons.flatMap(getActionButtonVirtualDom);
 };
 
-const HandleBlur = 'handleBlur';
-const HandleClearFilterClick = 'handleClearFilterClick';
-const HandleContextMenu = 'handleContextMenu';
-const HandleFilterInput = 'handleFilterInput';
-const HandlePointerDown = 'handlePointerDown';
-const HandleSelect = 'handleSelect';
+const getFilterVirtualDom = () => {
+  const placeholder = 'Filter';
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'Filter',
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Input,
+    className: 'InputBox FilterInput',
+    childCount: 0,
+    placeholder,
+    onInput: HandleFilterInput
+  }];
+};
 
 const getOptionVirtualDom = option => {
   const {
@@ -1831,36 +1800,25 @@ const getSelectVirtualDom = options => {
 
 const getChildCount = buttonsLength => {
   const selectLength = 1;
-  return buttonsLength + selectLength;
+  const filterCount = 1;
+  return buttonsLength + filterCount + selectLength;
 };
-const getActionsVirtualDom = options => {
-  const buttons = [{
-    id: 'Clear',
-    label: 'Clear',
-    icon: 'MaskIconClearAll'
-  }, {
-    id: 'Scroll Lock',
-    label: 'Scroll Lock',
-    icon: 'MaskIconListFlat'
-  }, {
-    id: 'Settings',
-    label: 'Settings',
-    icon: 'MaskIconListFlat'
-  }];
+const getActionsVirtualDom = (options, buttons) => {
   const childCount = getChildCount(buttons.length);
   return [{
     type: VirtualDomElements.Div,
     className: Actions,
     role: AriaRoles.ToolBar,
     childCount
-  }, ...getSelectVirtualDom(options), ...getActionButtonsVirtualDom(buttons)];
+  }, ...getFilterVirtualDom(), ...getSelectVirtualDom(options), ...getActionButtonsVirtualDom(buttons)];
 };
 
 const renderActions = state => {
   const {
-    options
+    options,
+    buttons
   } = state;
-  const dom = getActionsVirtualDom(options);
+  const dom = getActionsVirtualDom(options, buttons);
   return dom;
 };
 
@@ -1868,6 +1826,9 @@ const renderEventListeners = () => {
   return [{
     name: HandleBlur,
     params: ['handleBlur']
+  }, {
+    name: HandleButtonClick,
+    params: ['handleButtonClick', 'event.target.name']
   }, {
     name: HandleSelect,
     params: ['handleSelect', 'event.target.value']
@@ -1919,7 +1880,7 @@ const commandMap = {
   'Output.diff2': diff2,
   'Output.focusIndex': wrapCommand(focusIndex),
   'Output.getCommandIds': getCommandIds,
-  'Output.getKeyBindings': getKeyBindings$1,
+  'Output.getKeyBindings': getKeyBindings,
   'Output.handleData': wrapCommand(handleData),
   'Output.handleError': wrapCommand(handleError),
   'Output.initialize': initialize,
@@ -1933,12 +1894,11 @@ const commandMap = {
   'Output.setOutputChannel': wrapCommand(setOutputChannel),
   'Output.getActions': getActions,
   'Output.terminate': terminate,
-  'Output.handleSelect': wrapCommand(handleSelect)
+  'Output.handleSelect': wrapCommand(handleSelect),
+  'Output.handleFilterInput': wrapCommand(handleFilterInput),
+  'Output.handleButtonClick': wrapCommand(handleButtonClick)
 };
 
-const {
-  set} = RendererWorker;
-
 const listen = async () => {
   Object.assign(commandMapRef, commandMap);
   const rpc = await WebWorkerRpcClient.create({

package/package.json

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