@lvce-editor/static-server 0.40.0

package/static/c76328b/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -0,0 +1,3385 @@
+const Two = '2.0';
+const create$4 = (method, params) => {
+  return {
+    jsonrpc: Two,
+    method,
+    params
+  };
+};
+const state$1 = {
+  callbacks: Object.create(null)
+};
+const set = (id, fn) => {
+  state$1.callbacks[id] = fn;
+};
+const get = id => {
+  return state$1.callbacks[id];
+};
+const remove$1 = id => {
+  delete state$1.callbacks[id];
+};
+let id = 0;
+const create$3 = () => {
+  return ++id;
+};
+const warn = (...args) => {
+  console.warn(...args);
+};
+const registerPromise = () => {
+  const id = create$3();
+  const {
+    resolve,
+    promise
+  } = Promise.withResolvers();
+  set(id, resolve);
+  return {
+    id,
+    promise
+  };
+};
+const resolve = (id, response) => {
+  const fn = get(id);
+  if (!fn) {
+    console.log(response);
+    warn(`callback ${id} may already be disposed`);
+    return;
+  }
+  fn(response);
+  remove$1(id);
+};
+const create$2 = (method, params) => {
+  const {
+    id,
+    promise
+  } = registerPromise();
+  const message = {
+    jsonrpc: Two,
+    method,
+    params,
+    id
+  };
+  return {
+    message,
+    promise
+  };
+};
+class JsonRpcError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'JsonRpcError';
+  }
+}
+const NewLine$3 = '\n';
+const DomException = 'DOMException';
+const ReferenceError$1 = 'ReferenceError';
+const SyntaxError$1 = 'SyntaxError';
+const TypeError$1 = 'TypeError';
+const getErrorConstructor = (message, type) => {
+  if (type) {
+    switch (type) {
+      case DomException:
+        return DOMException;
+      case TypeError$1:
+        return TypeError;
+      case SyntaxError$1:
+        return SyntaxError;
+      case ReferenceError$1:
+        return ReferenceError;
+      default:
+        return Error;
+    }
+  }
+  if (message.startsWith('TypeError: ')) {
+    return TypeError;
+  }
+  if (message.startsWith('SyntaxError: ')) {
+    return SyntaxError;
+  }
+  if (message.startsWith('ReferenceError: ')) {
+    return ReferenceError;
+  }
+  return Error;
+};
+const constructError = (message, type, name) => {
+  const ErrorConstructor = getErrorConstructor(message, type);
+  if (ErrorConstructor === DOMException && name) {
+    return new ErrorConstructor(message, name);
+  }
+  if (ErrorConstructor === Error) {
+    const error = new Error(message);
+    if (name && name !== 'VError') {
+      error.name = name;
+    }
+    return error;
+  }
+  return new ErrorConstructor(message);
+};
+const getNewLineIndex$2 = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine$3, startIndex);
+};
+const getParentStack = error => {
+  let parentStack = error.stack || error.data || error.message || '';
+  if (parentStack.startsWith('    at')) {
+    parentStack = error.message + NewLine$3 + parentStack;
+  }
+  return parentStack;
+};
+const joinLines$1 = lines => {
+  return lines.join(NewLine$3);
+};
+const MethodNotFound = -32601;
+const Custom = -32001;
+const splitLines$1 = lines => {
+  return lines.split(NewLine$3);
+};
+const restoreJsonRpcError = error => {
+  if (error && error instanceof Error) {
+    return error;
+  }
+  const currentStack = joinLines$1(splitLines$1(new Error().stack || '').slice(1));
+  if (error && error.code && error.code === MethodNotFound) {
+    const restoredError = new JsonRpcError(error.message);
+    const parentStack = getParentStack(error);
+    restoredError.stack = parentStack + NewLine$3 + currentStack;
+    return restoredError;
+  }
+  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$3 + error.data.stack + NewLine$3 + 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$2(lowerStack);
+        const parentStack = getParentStack(error);
+        // @ts-ignore
+        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
+      }
+      if (error.codeFrame) {
+        // @ts-ignore
+        restoredError.codeFrame = error.codeFrame;
+      }
+    }
+    return restoredError;
+  }
+  if (typeof error === 'string') {
+    return new Error(`JsonRpc Error: ${error}`);
+  }
+  return new Error(`JsonRpc Error: ${error}`);
+};
+const unwrapJsonRpcResult = responseMessage => {
+  if ('error' in responseMessage) {
+    const restoredError = restoreJsonRpcError(responseMessage.error);
+    throw restoredError;
+  }
+  if ('result' in responseMessage) {
+    return responseMessage.result;
+  }
+  throw new JsonRpcError('unexpected response message');
+};
+const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
+const getErrorType = prettyError => {
+  if (prettyError && prettyError.type) {
+    return prettyError.type;
+  }
+  if (prettyError && prettyError.constructor && prettyError.constructor.name) {
+    return prettyError.constructor.name;
+  }
+  return undefined;
+};
+const getErrorProperty = (error, prettyError) => {
+  if (error && error.code === E_COMMAND_NOT_FOUND) {
+    return {
+      code: MethodNotFound,
+      message: error.message,
+      data: error.stack
+    };
+  }
+  return {
+    code: Custom,
+    message: prettyError.message,
+    data: {
+      stack: prettyError.stack,
+      codeFrame: prettyError.codeFrame,
+      type: getErrorType(prettyError),
+      code: prettyError.code,
+      name: prettyError.name
+    }
+  };
+};
+const create$1 = (message, error) => {
+  return {
+    jsonrpc: Two,
+    id: message.id,
+    error
+  };
+};
+const getErrorResponse = (message, error, preparePrettyError, logError) => {
+  const prettyError = preparePrettyError(error);
+  logError(error, prettyError);
+  const errorProperty = getErrorProperty(error, prettyError);
+  return create$1(message, errorProperty);
+};
+const create$5 = (message, result) => {
+  return {
+    jsonrpc: Two,
+    id: message.id,
+    result: result ?? null
+  };
+};
+const getSuccessResponse = (message, result) => {
+  const resultProperty = result ?? null;
+  return create$5(message, resultProperty);
+};
+const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
+  try {
+    const result = requiresSocket(message.method) ? await execute(message.method, ipc, ...message.params) : await execute(message.method, ...message.params);
+    return getSuccessResponse(message, result);
+  } catch (error) {
+    return getErrorResponse(message, error, preparePrettyError, logError);
+  }
+};
+const defaultPreparePrettyError = error => {
+  return error;
+};
+const defaultLogError = () => {
+  // ignore
+};
+const defaultRequiresSocket = () => {
+  return false;
+};
+const defaultResolve = resolve;
+
+// TODO maybe remove this in v6 or v7, only accept options object to simplify the code
+const normalizeParams = args => {
+  if (args.length === 1) {
+    const options = args[0];
+    return {
+      ipc: options.ipc,
+      message: options.message,
+      execute: options.execute,
+      resolve: options.resolve || defaultResolve,
+      preparePrettyError: options.preparePrettyError || defaultPreparePrettyError,
+      logError: options.logError || defaultLogError,
+      requiresSocket: options.requiresSocket || defaultRequiresSocket
+    };
+  }
+  return {
+    ipc: args[0],
+    message: args[1],
+    execute: args[2],
+    resolve: args[3],
+    preparePrettyError: args[4],
+    logError: args[5],
+    requiresSocket: args[6]
+  };
+};
+const handleJsonRpcMessage = async (...args) => {
+  const options = normalizeParams(args);
+  const {
+    message,
+    ipc,
+    execute,
+    resolve,
+    preparePrettyError,
+    logError,
+    requiresSocket
+  } = options;
+  if ('id' in message) {
+    if ('method' in message) {
+      const response = await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+      try {
+        ipc.send(response);
+      } catch (error) {
+        const errorResponse = getErrorResponse(message, error, preparePrettyError, logError);
+        ipc.send(errorResponse);
+      }
+      return;
+    }
+    resolve(message.id, message);
+    return;
+  }
+  if ('method' in message) {
+    await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+    return;
+  }
+  throw new JsonRpcError('unexpected message');
+};
+const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
+  const {
+    message,
+    promise
+  } = create$2(method, params);
+  if (useSendAndTransfer && ipc.sendAndTransfer) {
+    ipc.sendAndTransfer(message);
+  } else {
+    ipc.send(message);
+  }
+  const responseMessage = await promise;
+  return unwrapJsonRpcResult(responseMessage);
+};
+const send = (transport, method, ...params) => {
+  const message = create$4(method, params);
+  transport.send(message);
+};
+const invoke$1 = (ipc, method, ...params) => {
+  return invokeHelper(ipc, method, params, false);
+};
+const invokeAndTransfer = (ipc, method, ...params) => {
+  return invokeHelper(ipc, method, params, true);
+};
+
+const commands = Object.create(null);
+const register = commandMap => {
+  Object.assign(commands, commandMap);
+};
+const getCommand = key => {
+  return commands[key];
+};
+const execute = (command, ...args) => {
+  const fn = getCommand(command);
+  if (!fn) {
+    throw new Error(`command not found ${command}`);
+  }
+  return fn(...args);
+};
+
+const getData$1 = event => {
+  return event.data;
+};
+const attachEvents = that => {
+  const handleMessage = (...args) => {
+    const data = that.getData(...args);
+    that.dispatchEvent(new MessageEvent('message', {
+      data
+    }));
+  };
+  that.onMessage(handleMessage);
+  const handleClose = event => {
+    that.dispatchEvent(new Event('close'));
+  };
+  that.onClose(handleClose);
+};
+class Ipc extends EventTarget {
+  constructor(rawIpc) {
+    super();
+    this._rawIpc = rawIpc;
+    attachEvents(this);
+  }
+}
+const readyMessage = 'ready';
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
+  }
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
+    }
+    return;
+  }
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
+  }
+};
+const isMessagePort = value => {
+  return value && value instanceof MessagePort;
+};
+const isMessagePortMain = value => {
+  return value && value.constructor && value.constructor.name === 'MessagePortMain';
+};
+const isOffscreenCanvas = value => {
+  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
+};
+const isInstanceOf = (value, constructorName) => {
+  return value?.constructor?.name === constructorName;
+};
+const isSocket = value => {
+  return isInstanceOf(value, 'Socket');
+};
+const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
+const isTransferrable = value => {
+  for (const fn of transferrables) {
+    if (fn(value)) {
+      return true;
+    }
+  }
+  return false;
+};
+const getTransferrables = value => {
+  const transferrables = [];
+  walkValue(value, transferrables, isTransferrable);
+  return transferrables;
+};
+const listen$2 = () => {
+  // @ts-ignore
+  if (typeof WorkerGlobalScope === 'undefined') {
+    throw new TypeError('module is not in web worker scope');
+  }
+  return globalThis;
+};
+const signal$2 = global => {
+  global.postMessage(readyMessage);
+};
+class IpcChildWithModuleWorker extends Ipc {
+  getData(event) {
+    return getData$1(event);
+  }
+  send(message) {
+    // @ts-ignore
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    // @ts-ignore
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    // ignore
+  }
+  onClose(callback) {
+    // ignore
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+}
+const wrap$5 = global => {
+  return new IpcChildWithModuleWorker(global);
+};
+const E_INCOMPATIBLE_NATIVE_MODULE = 'E_INCOMPATIBLE_NATIVE_MODULE';
+const E_MODULES_NOT_SUPPORTED_IN_ELECTRON = 'E_MODULES_NOT_SUPPORTED_IN_ELECTRON';
+const ERR_MODULE_NOT_FOUND = 'ERR_MODULE_NOT_FOUND';
+const NewLine$1 = '\n';
+const joinLines = lines => {
+  return lines.join(NewLine$1);
+};
+const splitLines = lines => {
+  return lines.split(NewLine$1);
+};
+const isModuleNotFoundMessage = line => {
+  return line.includes('[ERR_MODULE_NOT_FOUND]');
+};
+const getModuleNotFoundError = stderr => {
+  const lines = splitLines(stderr);
+  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
+  const message = lines[messageIndex];
+  return {
+    message,
+    code: ERR_MODULE_NOT_FOUND
+  };
+};
+const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
+const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
+const RE_MESSAGE_CODE_BLOCK_START = /^Error: The module '.*'$/;
+const RE_MESSAGE_CODE_BLOCK_END = /^\s* at/;
+const RE_AT = /^\s+at/;
+const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
+const isUnhelpfulNativeModuleError = stderr => {
+  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
+};
+const isMessageCodeBlockStartIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_START.test(line);
+};
+const isMessageCodeBlockEndIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_END.test(line);
+};
+const getMessageCodeBlock = stderr => {
+  const lines = splitLines(stderr);
+  const startIndex = lines.findIndex(isMessageCodeBlockStartIndex);
+  const endIndex = startIndex + lines.slice(startIndex).findIndex(isMessageCodeBlockEndIndex, startIndex);
+  const relevantLines = lines.slice(startIndex, endIndex);
+  const relevantMessage = relevantLines.join(' ').slice('Error: '.length);
+  return relevantMessage;
+};
+const getNativeModuleErrorMessage = stderr => {
+  const message = getMessageCodeBlock(stderr);
+  return {
+    message: `Incompatible native node module: ${message}`,
+    code: E_INCOMPATIBLE_NATIVE_MODULE
+  };
+};
+const isModulesSyntaxError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
+};
+const getModuleSyntaxError = () => {
+  return {
+    message: `ES Modules are not supported in electron`,
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
+  };
+};
+const isModuleNotFoundError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('ERR_MODULE_NOT_FOUND');
+};
+const isNormalStackLine = line => {
+  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
+};
+const getDetails = lines => {
+  const index = lines.findIndex(isNormalStackLine);
+  if (index === -1) {
+    return {
+      actualMessage: joinLines(lines),
+      rest: []
+    };
+  }
+  let lastIndex = index - 1;
+  while (++lastIndex < lines.length) {
+    if (!isNormalStackLine(lines[lastIndex])) {
+      break;
+    }
+  }
+  return {
+    actualMessage: lines[index - 1],
+    rest: lines.slice(index, lastIndex)
+  };
+};
+const getHelpfulChildProcessError = (stdout, stderr) => {
+  if (isUnhelpfulNativeModuleError(stderr)) {
+    return getNativeModuleErrorMessage(stderr);
+  }
+  if (isModulesSyntaxError(stderr)) {
+    return getModuleSyntaxError();
+  }
+  if (isModuleNotFoundError(stderr)) {
+    return getModuleNotFoundError(stderr);
+  }
+  const lines = splitLines(stderr);
+  const {
+    actualMessage,
+    rest
+  } = getDetails(lines);
+  return {
+    message: `${actualMessage}`,
+    code: '',
+    stack: rest
+  };
+};
+const normalizeLine$1 = line => {
+  if (line.startsWith('Error: ')) {
+    return line.slice('Error: '.length);
+  }
+  if (line.startsWith('VError: ')) {
+    return line.slice('VError: '.length);
+  }
+  return line;
+};
+const getCombinedMessage$1 = (error, message) => {
+  const stringifiedError = normalizeLine$1(`${error}`);
+  if (message) {
+    return `${message}: ${stringifiedError}`;
+  }
+  return stringifiedError;
+};
+const NewLine$2 = '\n';
+const getNewLineIndex$1 = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine$2, startIndex);
+};
+const mergeStacks$1 = (parent, child) => {
+  if (!child) {
+    return parent;
+  }
+  const parentNewLineIndex = getNewLineIndex$1(parent);
+  const childNewLineIndex = getNewLineIndex$1(child);
+  if (childNewLineIndex === -1) {
+    return parent;
+  }
+  const parentFirstLine = parent.slice(0, parentNewLineIndex);
+  const childRest = child.slice(childNewLineIndex);
+  const childFirstLine = normalizeLine$1(child.slice(0, childNewLineIndex));
+  if (parentFirstLine.includes(childFirstLine)) {
+    return parentFirstLine + childRest;
+  }
+  return child;
+};
+let VError$1 = class VError extends Error {
+  constructor(error, message) {
+    const combinedMessage = getCombinedMessage$1(error, message);
+    super(combinedMessage);
+    this.name = 'VError';
+    if (error instanceof Error) {
+      this.stack = mergeStacks$1(this.stack, error.stack);
+    }
+    if (error.codeFrame) {
+      // @ts-ignore
+      this.codeFrame = error.codeFrame;
+    }
+    if (error.code) {
+      // @ts-ignore
+      this.code = error.code;
+    }
+  }
+};
+class IpcError extends VError$1 {
+  // @ts-ignore
+  constructor(betterMessage, stdout = '', stderr = '') {
+    if (stdout || stderr) {
+      // @ts-ignore
+      const {
+        message,
+        code,
+        stack
+      } = getHelpfulChildProcessError(stdout, stderr);
+      const cause = new Error(message);
+      // @ts-ignore
+      cause.code = code;
+      cause.stack = stack;
+      super(cause, betterMessage);
+    } else {
+      super(betterMessage);
+    }
+    // @ts-ignore
+    this.name = 'IpcError';
+    // @ts-ignore
+    this.stdout = stdout;
+    // @ts-ignore
+    this.stderr = stderr;
+  }
+}
+const withResolvers = () => {
+  let _resolve;
+  const promise = new Promise(resolve => {
+    _resolve = resolve;
+  });
+  return {
+    resolve: _resolve,
+    promise
+  };
+};
+const waitForFirstMessage = async port => {
+  const {
+    resolve,
+    promise
+  } = withResolvers();
+  port.addEventListener('message', resolve, {
+    once: true
+  });
+  const event = await promise;
+  // @ts-ignore
+  return event.data;
+};
+const listen$1$1 = async () => {
+  const parentIpcRaw = listen$2();
+  signal$2(parentIpcRaw);
+  const parentIpc = wrap$5(parentIpcRaw);
+  const firstMessage = await waitForFirstMessage(parentIpc);
+  if (firstMessage.method !== 'initialize') {
+    throw new IpcError('unexpected first message');
+  }
+  const type = firstMessage.params[0];
+  if (type === 'message-port') {
+    parentIpc.send({
+      jsonrpc: '2.0',
+      id: firstMessage.id,
+      result: null
+    });
+    parentIpc.dispose();
+    const port = firstMessage.params[1];
+    return port;
+  }
+  return globalThis;
+};
+class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
+  constructor(port) {
+    super(port);
+  }
+  getData(event) {
+    return getData$1(event);
+  }
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    if (this._rawIpc.close) {
+      this._rawIpc.close();
+    }
+  }
+  onClose(callback) {
+    // ignore
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+    this._rawIpc.start();
+  }
+}
+const wrap$4 = port => {
+  return new IpcChildWithModuleWorkerAndMessagePort(port);
+};
+const IpcChildWithModuleWorkerAndMessagePort$1 = {
+  __proto__: null,
+  listen: listen$1$1,
+  wrap: wrap$4
+};
+
+const createRpc = ipc => {
+  const rpc = {
+    /**
+     * @deprecated
+     */
+    send(method, ...params) {
+      send(ipc, method, ...params);
+    },
+    invoke(method, ...params) {
+      return invoke$1(ipc, method, ...params);
+    },
+    invokeAndTransfer(method, ...params) {
+      return invokeAndTransfer(ipc, method, ...params);
+    }
+  };
+  return rpc;
+};
+const requiresSocket = () => {
+  return false;
+};
+const preparePrettyError = error => {
+  return error;
+};
+const logError = () => {
+  // handled by renderer worker
+};
+const handleMessage = event => {
+  return handleJsonRpcMessage(event.target, event.data, execute, resolve, preparePrettyError, logError, requiresSocket);
+};
+const handleIpc = ipc => {
+  ipc.addEventListener('message', handleMessage);
+};
+
+// @ts-ignore
+const listen$1 = async () => {
+  const module = IpcChildWithModuleWorkerAndMessagePort$1;
+  const rawIpc = await module.listen();
+  const ipc = module.wrap(rawIpc);
+  return ipc;
+};
+const create = async ({
+  commandMap
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const ipc = await listen$1();
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  return rpc;
+};
+const WebWorkerRpcClient = {
+  __proto__: null,
+  create
+};
+
+const RE_CHARACTERS = /^[a-zA-Z.-]+$/;
+const compareStringNumeric = (a, b) => {
+  if (RE_CHARACTERS.test(a) && RE_CHARACTERS.test(b)) {
+    return a < b ? -1 : 1;
+  }
+  return a.localeCompare(b, 'en', {
+    numeric: true
+  });
+};
+
+const BlockDevice = 1;
+const CharacterDevice = 2;
+const Directory = 3;
+const DirectoryExpanded = 4;
+const DirectoryExpanding = 5;
+const File = 7;
+const Socket = 8;
+const Symlink = 9;
+const SymLinkFile = 10;
+const SymLinkFolder = 11;
+const Unknown = 12;
+
+const priorityMapFoldersFirst = {
+  [Directory]: 1,
+  [SymLinkFolder]: 1,
+  [File]: 0,
+  [SymLinkFile]: 0,
+  [Unknown]: 0,
+  [Socket]: 0
+};
+const compareDirentType = (direntA, direntB) => {
+  return priorityMapFoldersFirst[direntB.type] - priorityMapFoldersFirst[direntA.type];
+};
+const compareDirentName = (direntA, direntB) => {
+  return compareStringNumeric(direntA.name, direntB.name);
+};
+const compareDirent = (direntA, direntB) => {
+  return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
+};
+
+const getFileIcon = ({
+  name
+}) => {
+  return '';
+};
+const getIcon = dirent => {
+  return '';
+};
+
+// TODO use posInSet and setSize properties to compute more effectively
+const computeExplorerRenamedDirent = (dirents, index, newName) => {
+  let startIndex = index;
+  let innerEndIndex = index + 1;
+  let insertIndex = -1;
+  let posInSet = -1;
+  const oldDirent = dirents[index];
+  const newDirent = {
+    ...oldDirent,
+    name: newName,
+    path: oldDirent.path.slice(0, -oldDirent.name.length) + newName,
+    icon: getFileIcon({
+      name: newName
+    })
+  };
+  const depth = newDirent.depth;
+  // TODO
+  for (; startIndex >= 0; startIndex--) {
+    const dirent = dirents[startIndex];
+    if (dirent.depth > depth) {
+      continue;
+    }
+    if (dirent.depth < depth) {
+      break;
+    }
+    if (compareDirent(dirent, newDirent) === 1) {
+      insertIndex = startIndex;
+      posInSet = dirent.posInSet;
+      // dirent.posInSet++
+    }
+  }
+  startIndex++;
+  for (; innerEndIndex < dirents.length; innerEndIndex++) {
+    const dirent = dirents[innerEndIndex];
+    if (dirent.depth <= depth) {
+      break;
+    }
+    dirent.path = newDirent.path + dirent.path.slice(oldDirent.path.length);
+  }
+  innerEndIndex--;
+  let endIndex = innerEndIndex + 1;
+  for (; endIndex < dirents.length; endIndex++) {
+    const dirent = dirents[endIndex];
+    if (dirent.depth > depth) {
+      continue;
+    }
+    if (dirent.depth < depth) {
+      break;
+    }
+    if (insertIndex === -1 && compareDirent(dirent, newDirent === -1)) {
+      for (; endIndex < dirents.length; endIndex++) {
+      }
+      insertIndex = endIndex;
+      posInSet = dirent.posInSet + 1;
+    }
+  }
+  endIndex--;
+  for (let j = startIndex; j < index; j++) {
+    const dirent = dirents[j];
+    if (dirent.depth === depth) {
+      dirent.posInSet++;
+    }
+  }
+  for (let j = index; j < endIndex; j++) {
+    const dirent = dirents[j];
+    if (dirent.depth === depth) {
+      dirent.posInSet--;
+    }
+  }
+
+  // for (let j = startIndex; j < index; j++) {
+  //   const dirent = dirents[j]
+  //   dirent.posInSet++
+  // }
+
+  if (insertIndex === -1) {
+    insertIndex = index;
+    return {
+      focusedIndex: index,
+      newDirents: [...dirents.slice(0, index), newDirent, ...dirents.slice(index + 1)]
+    };
+  }
+  newDirent.posInSet = posInSet;
+  const newDirents = [...dirents];
+  if (index < insertIndex) {
+    insertIndex--;
+  }
+  newDirents.splice(index, 1);
+  newDirents.splice(insertIndex, 0, newDirent);
+  return {
+    newDirents,
+    focusedIndex: insertIndex
+  };
+};
+
+const None$3 = 0;
+const CreateFile = 1;
+const CreateFolder = 2;
+const Rename = 3;
+
+const remove = async diren => {};
+const readDirWithFileTypes = async uri => {};
+const getPathSeparator$1 = async root => {};
+const getRealPath = async path => {};
+const stat = async dirent => {};
+const createFile = async uri => {};
+const mkdir = async uri => {};
+const rename$1 = async (oldUri, newUri) => {};
+const copy$1 = async (oldUri, newUri) => {};
+
+const dirname = (pathSeparator, path) => {
+  const index = path.lastIndexOf(pathSeparator);
+  if (index === -1) {
+    return path;
+  }
+  return path.slice(0, index);
+};
+const join = (pathSeparator, ...parts) => {
+  return parts.join(pathSeparator);
+};
+const getBaseName = (pathSeparator, path) => {
+  return path.slice(path.lastIndexOf(pathSeparator) + 1);
+};
+
+const getParentFolder = (dirents, index, root) => {
+  if (index < 0) {
+    return root;
+  }
+  return dirents[index].path;
+};
+const acceptCreate = async (state, newDirentType, createFn) => {
+  const {
+    focusedIndex,
+    editingValue
+  } = state;
+  const newFileName = editingValue;
+  if (!newFileName) {
+    // TODO show error message that file name must not be empty
+    // below input box
+    // await ErrorHandling.showErrorDialog(new Error('file name must not be empty'))
+    return state;
+  }
+  const parentFolder = getParentFolder(state.items, focusedIndex, state.root);
+  const absolutePath = [parentFolder, newFileName].join(state.pathSeparator);
+  // TODO better handle error
+  try {
+    await createFn(absolutePath);
+  } catch (error) {
+    // TODO display error
+    return state;
+  }
+  const parentDirent = focusedIndex >= 0 ? state.items[focusedIndex] : {
+    depth: 0,
+    path: state.root
+  };
+  const depth = parentDirent.depth + 1;
+  const newDirent = {
+    path: absolutePath,
+    posInSet: -1,
+    setSize: 1,
+    depth,
+    name: newFileName,
+    type: newDirentType,
+    icon: ''
+  };
+  newDirent.icon = getIcon();
+  let insertIndex = state.focusedIndex;
+  let deltaPosInSet = 0;
+  let posInSet = 1;
+  let setSize = 1;
+  let i = Math.max(state.focusedIndex, -1) + 1;
+  const {
+    items
+  } = state;
+  // TODO update posinset and setsize of all affected dirents
+  for (; i < items.length; i++) {
+    const dirent = items[i];
+    if (dirent.depth !== depth) {
+      break;
+    }
+    const compareResult = compareDirent(dirent, newDirent);
+    if (compareResult === 1) {
+      insertIndex = i - 1;
+      deltaPosInSet = 1 - 1;
+      break;
+    } else {
+      posInSet = dirent.posInSet + 1;
+      setSize = dirent.setSize + 1;
+      insertIndex = i;
+    }
+    dirent.setSize++;
+    dirent.posInSet += deltaPosInSet;
+  }
+  newDirent.setSize = setSize;
+  newDirent.posInSet = posInSet;
+  items.splice(insertIndex + 1, 0, newDirent);
+  const newDirents = [...items];
+  const newMaxlineY = Math.max(state.maxLineY, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    editingIndex: -1,
+    focusedIndex: insertIndex + 1,
+    editingType: None$3,
+    maxLineY: newMaxlineY
+  };
+};
+const acceptRename = async state => {
+  const {
+    editingIndex,
+    editingValue,
+    items,
+    pathSeparator
+  } = state;
+  const renamedDirent = items[editingIndex];
+  try {
+    // TODO this does not work with rename of nested file
+    const oldAbsolutePath = renamedDirent.path;
+    const oldParentPath = dirname(pathSeparator, oldAbsolutePath);
+    const newAbsolutePath = [oldParentPath, editingValue].join(pathSeparator);
+    await rename$1(oldAbsolutePath, newAbsolutePath);
+  } catch (error) {
+    // TODO
+    // await ErrorHandling.showErrorDialog(error)
+    return state;
+  }
+  const {
+    newDirents,
+    focusedIndex
+  } = computeExplorerRenamedDirent(items, editingIndex, editingValue);
+  //  TODO move focused index
+  state.items = newDirents;
+  return {
+    ...state,
+    editingIndex: -1,
+    editingValue: '',
+    editingType: None$3,
+    editingIcon: '',
+    focusedIndex,
+    focused: true
+  };
+};
+const acceptEdit = state => {
+  const {
+    editingType
+  } = state;
+  switch (editingType) {
+    case CreateFile:
+      return acceptCreate(state, File, createFile);
+    case CreateFolder:
+      return acceptCreate(state, Directory, mkdir);
+    case Rename:
+      return acceptRename(state);
+    default:
+      return state;
+  }
+};
+
+const getFocusedDirent$1 = state => {
+  const {
+    focusedIndex,
+    minLineY,
+    items
+  } = state;
+  const dirent = items[focusedIndex + minLineY];
+  return dirent;
+};
+
+const copyPath$1 = async state => {
+  // await Command.execute(RendererWorkerCommandType.ClipBoardWriteText, /* text */ path)
+  return state;
+};
+
+const state = {
+  rpc: undefined
+};
+const invoke = (method, ...params) => {
+  const rpc = state.rpc;
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const setRpc = rpc => {
+  state.rpc = rpc;
+};
+
+const writeText = async text => {
+  await invoke('ClipBoard.writeText', /* text */text);
+};
+const readNativeFiles = async () => {
+  return invoke('ClipBoard.readNativeFiles');
+};
+
+const copyRelativePath$1 = async state => {
+  const dirent = getFocusedDirent$1(state);
+  const relativePath = dirent.path.slice(1);
+  // TODO handle error
+  await writeText(relativePath);
+  return state;
+};
+
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return 'number';
+    case 'function':
+      return 'function';
+    case 'string':
+      return 'string';
+    case 'object':
+      if (value === null) {
+        return 'null';
+      }
+      if (Array.isArray(value)) {
+        return 'array';
+      }
+      return 'object';
+    case 'boolean':
+      return 'boolean';
+    default:
+      return 'unknown';
+  }
+};
+const object = value => {
+  const type = getType(value);
+  if (type !== 'object') {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
+const number = value => {
+  const type = getType(value);
+  if (type !== 'number') {
+    throw new AssertionError('expected value to be of type number');
+  }
+};
+const array = value => {
+  const type = getType(value);
+  if (type !== 'array') {
+    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 isSymbolicLink = dirent => {
+  return dirent.type === Symlink;
+};
+
+const ENOENT = 'ENOENT';
+
+const getSymlinkType = type => {
+  switch (type) {
+    case File:
+      return SymLinkFile;
+    case Directory:
+      return SymLinkFolder;
+    default:
+      return Symlink;
+  }
+};
+
+// TODO maybe resolving of symbolic links should happen in shared process?
+// so that there is less code and less work in the frontend
+const resolveSymbolicLink = async (uri, rawDirent) => {
+  try {
+    // TODO support windows paths
+    const absolutePath = uri + '/' + rawDirent.name;
+    const type = await stat(absolutePath);
+    const symLinkType = getSymlinkType(type);
+    return {
+      name: rawDirent.name,
+      type: symLinkType
+    };
+  } catch (error) {
+    // @ts-ignore
+    if (error && error.code === ENOENT) {
+      return {
+        name: rawDirent.name,
+        type: SymLinkFile
+      };
+    }
+    console.error(`Failed to resolve symbolic link for ${rawDirent.name}: ${error}`);
+    return rawDirent;
+  }
+};
+const resolveSymbolicLinks = async (uri, rawDirents) => {
+  const promises = [];
+  for (const rawDirent of rawDirents) {
+    if (isSymbolicLink(rawDirent)) {
+      const resolvedDirent = resolveSymbolicLink(uri, rawDirent);
+      promises.push(resolvedDirent);
+    } else {
+      promises.push(rawDirent);
+    }
+  }
+  const resolvedDirents = await Promise.all(promises);
+  return resolvedDirents;
+};
+
+const sortExplorerItems = rawDirents => {
+  rawDirents.sort(compareDirent);
+};
+
+const toDisplayDirents = (pathSeparator, rawDirents, parentDirent, excluded) => {
+  sortExplorerItems(rawDirents);
+  // TODO figure out whether this uses too much memory (name,path -> redundant, depth could be computed on demand)
+  const toDisplayDirent = (rawDirent, index) => {
+    const path = [parentDirent.path, rawDirent.name].join(pathSeparator);
+    return {
+      name: rawDirent.name,
+      posInSet: index + 1,
+      setSize: rawDirents.length,
+      depth: parentDirent.depth + 1,
+      type: rawDirent.type,
+      path,
+      // TODO storing absolute path might be too costly, could also store relative path here
+      icon: getIcon()
+    };
+  };
+  const result = [];
+  let i = 0;
+  for (const rawDirent of rawDirents) {
+    if (excluded.includes(rawDirent.name)) {
+      continue;
+    }
+    result.push(toDisplayDirent(rawDirent, i));
+    i++;
+  }
+  return result;
+};
+
+const hasSymbolicLinks = rawDirents => {
+  return rawDirents.some(isSymbolicLink);
+};
+const getChildDirentsRaw = async uri => {
+  const rawDirents = await readDirWithFileTypes();
+  array(rawDirents);
+  if (hasSymbolicLinks(rawDirents)) {
+    return resolveSymbolicLinks(uri, rawDirents);
+  }
+  return rawDirents;
+};
+const getChildDirents = async (pathSeparator, parentDirent, excluded = []) => {
+  string(pathSeparator);
+  object(parentDirent);
+  // TODO use event/actor based code instead, this is impossible to cancel right now
+  // also cancel updating when opening new folder
+  // const dispose = state => state.pendingRequests.forEach(cancelRequest)
+  // TODO should use FileSystem directly in this case because it is globally available anyway
+  // and more typesafe than Command.execute
+  // and more performant
+  const uri = parentDirent.path;
+  const rawDirents = await getChildDirentsRaw(uri);
+  const displayDirents = toDisplayDirents(pathSeparator, rawDirents, parentDirent, excluded);
+  return displayDirents;
+};
+
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
+  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
+  return maxLineY;
+};
+
+const expandAll = async state => {
+  const {
+    items,
+    focusedIndex,
+    pathSeparator,
+    minLineY,
+    height,
+    itemHeight
+  } = state;
+  if (focusedIndex === -1) {
+    return state;
+  }
+  const dirent = items[focusedIndex];
+  const depth = dirent.depth;
+  const newDirents = [...items];
+  // TODO fetch child dirents in parallel
+  for (const dirent of newDirents) {
+    if (dirent.depth === depth && dirent.type === Directory) {
+      // TODO expand
+      // TODO avoid mutating state here
+      dirent.type = DirectoryExpanding;
+      // TODO handle error
+      // TODO race condition
+      const childDirents = await getChildDirents(pathSeparator, dirent);
+      const newIndex = newDirents.indexOf(dirent);
+      if (newIndex === -1) {
+        continue;
+      }
+      newDirents.splice(newIndex + 1, 0, ...childDirents);
+      // TODO avoid mutating state here
+      dirent.type = DirectoryExpanded;
+      // await expand(state, dirent.index)
+    }
+  }
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    maxLineY
+  };
+};
+
+const getParentEndIndex = (dirents, index) => {
+  const dirent = dirents[index];
+  let endIndex = index + 1;
+  while (endIndex < dirents.length && dirents[endIndex].depth > dirent.depth) {
+    endIndex++;
+  }
+  return endIndex;
+};
+
+const makeExpanded = dirent => {
+  if (dirent.type === Directory) {
+    return {
+      ...dirent,
+      type: DirectoryExpanded
+    };
+  }
+  return dirent;
+};
+const expandRecursively = async state => {
+  const {
+    items,
+    focusedIndex,
+    pathSeparator,
+    root,
+    height,
+    itemHeight,
+    minLineY
+  } = state;
+  const dirent = focusedIndex < 0 ? {
+    type: Directory,
+    path: root,
+    depth: 0
+  } : items[focusedIndex];
+  if (dirent.type !== Directory && dirent.type !== DirectoryExpanding && dirent.type !== DirectoryExpanded) {
+    return state;
+  }
+  // TODO this is very inefficient
+  const getChildDirentsRecursively = async dirent => {
+    switch (dirent.type) {
+      case File:
+        return [dirent];
+      case Directory:
+      case DirectoryExpanding:
+      case DirectoryExpanded:
+        const childDirents = await getChildDirents(pathSeparator, dirent);
+        const all = [makeExpanded(dirent)];
+        for (const childDirent of childDirents) {
+          const childAll = await getChildDirentsRecursively(childDirent);
+          all.push(...childAll);
+        }
+        return all;
+      default:
+        return [];
+    }
+  };
+  // TODO race condition: what if folder is being collapse while it is recursively expanding?
+  // TODO race condition: what if folder is being deleted while it is recursively expanding?
+  // TODO race condition: what if a new file/folder is created while the folder is recursively expanding?
+  const childDirents = await getChildDirentsRecursively(dirent);
+  const startIndex = focusedIndex;
+  if (focusedIndex >= 0) {
+    const endIndex = getParentEndIndex(items, focusedIndex);
+    const newDirents = [...items.slice(0, startIndex), ...childDirents, ...items.slice(endIndex)];
+    const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+    return {
+      ...state,
+      items: newDirents,
+      maxLineY
+    };
+  }
+  const newDirents = childDirents.slice(1);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    maxLineY
+  };
+};
+
+const focusIndex = (state, index) => {
+  const {
+    minLineY,
+    maxLineY
+  } = state;
+  if (index < minLineY) {
+    if (index < 0) {
+      return {
+        ...state,
+        focusedIndex: index,
+        focused: true
+      };
+    }
+    const diff = maxLineY - minLineY;
+    return {
+      ...state,
+      focusedIndex: index,
+      focused: true,
+      minLineY: index,
+      maxLineY: index + diff
+    };
+  }
+  if (index >= maxLineY) {
+    const diff = maxLineY - minLineY;
+    return {
+      ...state,
+      focusedIndex: index,
+      focused: true,
+      minLineY: index + 1 - diff,
+      maxLineY: index + 1
+    };
+  }
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: true
+  };
+};
+
+const focusFirst = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  if (items.length === 0 || focusedIndex === 0) {
+    return state;
+  }
+  return focusIndex(state, 0);
+};
+
+const lastIndex = array => {
+  return array.length - 1;
+};
+
+const focusLast = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const lastIndex$1 = lastIndex(items);
+  if (items.length === 0 || focusedIndex === lastIndex$1) {
+    return state;
+  }
+  return focusIndex(state, lastIndex$1);
+};
+
+const focusNext = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  if (focusedIndex === lastIndex(items)) {
+    return state;
+  }
+  return focusIndex(state, focusedIndex + 1);
+};
+
+const focusPrevious = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  switch (focusedIndex) {
+    case -1:
+      if (items.length === 0) {
+        return state;
+      }
+      return focusIndex(state, lastIndex(items));
+    case 0:
+      return state;
+    default:
+      return focusIndex(state, focusedIndex - 1);
+  }
+};
+
+const None$2 = 'none';
+const Tree = 'tree';
+const TreeItem$1 = 'treeitem';
+
+const Button$1 = 'Button';
+const ButtonPrimary = 'ButtonPrimary';
+const Explorer$1 = 'Explorer';
+const FileIcon = 'FileIcon';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const TreeItem = 'TreeItem';
+const TreeItemActive = 'TreeItemActive';
+const Viewlet = 'Viewlet';
+const Welcome = 'Welcome';
+const WelcomeMessage = 'WelcomeMessage';
+
+const HandleBlur = 'handleBlur';
+const HandleClick = 'handleClick';
+const handleClickOpenFolder$1 = 'handleClickOpenFolder';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFocus = 'handleFocus';
+const HandlePointerDown = 'handlePointerDown';
+const HandleWheel = 'handleWheel';
+
+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);
+};
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  NewFile: 'New File...',
+  NewFolder: 'New Folder...',
+  OpenContainingFolder: 'Open Containing Folder',
+  OpenInIntegratedTerminal: 'Open in integrated Terminal',
+  Cut: 'Cut',
+  Copy: 'Copy',
+  Paste: 'Paste',
+  CopyPath: 'Copy Path',
+  CopyRelativePath: 'Copy Relative Path',
+  Rename: 'Rename',
+  Delete: 'Delete',
+  RefreshExplorer: 'Refresh Explorer',
+  CollapseAllFoldersInExplorer: 'Collapse All Folders in Explorer',
+  Explorer: 'Explorer',
+  FilesExplorer: 'Files Explorer',
+  YouHaveNotYetOpenedAFolder: 'You have not yet opened a folder',
+  OpenFolder: 'Open folder',
+  NoFolderOpen: 'No Folder Open'
+};
+const newFile = () => {
+  return i18nString(UiStrings.NewFile);
+};
+const newFolder = () => {
+  return i18nString(UiStrings.NewFolder);
+};
+const openContainingFolder$1 = () => {
+  return i18nString(UiStrings.OpenContainingFolder);
+};
+const openInIntegratedTerminal = () => {
+  return i18nString(UiStrings.OpenInIntegratedTerminal);
+};
+const cut = () => {
+  return i18nString(UiStrings.Cut);
+};
+const copy = () => {
+  return i18nString(UiStrings.Copy);
+};
+const paste = () => {
+  return i18nString(UiStrings.Paste);
+};
+const copyPath = () => {
+  return i18nString(UiStrings.CopyPath);
+};
+const copyRelativePath = () => {
+  return i18nString(UiStrings.CopyRelativePath);
+};
+const rename = () => {
+  return i18nString(UiStrings.Rename);
+};
+const deleteItem = () => {
+  return i18nString(UiStrings.Delete);
+};
+const filesExplorer = () => {
+  return i18nString(UiStrings.FilesExplorer);
+};
+const youHaveNotYetOpenedAFolder = () => {
+  return i18nString(UiStrings.YouHaveNotYetOpenedAFolder);
+};
+const openFolder$1 = () => {
+  return i18nString(UiStrings.OpenFolder);
+};
+
+const Button = 1;
+const Div = 4;
+const Input = 6;
+const Text = 12;
+const Img = 17;
+const P = 50;
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None$2,
+    childCount: 0
+  };
+};
+
+const defaultIndent = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent}rem`;
+};
+
+const ExplorerInput = 'ExploreerInput';
+
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getItemVirtualDomFile = item => {
+  const {
+    posInSet,
+    setSize,
+    icon,
+    name,
+    path,
+    depth,
+    isFocused,
+    isEditing
+  } = item;
+  const dom = [];
+  dom.push({
+    type: Div,
+    role: TreeItem$1,
+    className: TreeItem,
+    draggable: true,
+    title: path,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    ariaLevel: depth,
+    childCount: 2,
+    paddingLeft: getTreeItemIndent(depth),
+    ariaLabel: name,
+    ariaDescription: ''
+  }, getFileIconVirtualDom(icon));
+  if (isEditing) {
+    dom.push({
+      type: Input,
+      className: InputBox,
+      id: 'ExplorerInput',
+      onInput: 'handleEditingInput',
+      childCount: 0,
+      name: ExplorerInput
+    });
+  } else {
+    dom.push({
+      type: Div,
+      className: Label,
+      childCount: 1
+    }, text(name));
+  }
+  if (isFocused) {
+    // @ts-ignore
+    dom[0].id = 'TreeItemActive';
+    // @ts-ignore
+    dom[0].className += ' ' + TreeItemActive;
+  }
+  return dom;
+};
+const getItemVirtualDomFolder = item => {
+  const {
+    posInSet,
+    setSize,
+    icon,
+    name,
+    path,
+    depth,
+    type,
+    isFocused
+  } = item;
+  let ariaExpanded = '';
+  switch (type) {
+    // TODO decide on directory vs folder
+    case Directory:
+      ariaExpanded = 'false';
+      break;
+    case DirectoryExpanding:
+      ariaExpanded = 'true'; // TODO tree should be aria-busy then
+      break;
+    case DirectoryExpanded:
+      ariaExpanded = 'true';
+      break;
+  }
+  const dom = [];
+  dom.push({
+    type: Div,
+    role: TreeItem$1,
+    className: TreeItem,
+    draggable: true,
+    title: path,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    ariaLevel: depth,
+    childCount: 2,
+    paddingLeft: getTreeItemIndent(depth),
+    ariaLabel: name,
+    ariaExpanded,
+    ariaDescription: ''
+  });
+  dom.push(getFileIconVirtualDom(icon), {
+    type: Div,
+    className: Label,
+    childCount: 1
+  }, text(name));
+  if (isFocused) {
+    // @ts-ignore
+    dom[0].id = 'TreeItemActive';
+  }
+  return dom;
+};
+const getExplorerItemVirtualDom = item => {
+  const {
+    type
+  } = item;
+  switch (type) {
+    case Directory:
+    case DirectoryExpanding:
+    case DirectoryExpanded:
+      return getItemVirtualDomFolder(item);
+    default:
+      return getItemVirtualDomFile(item);
+  }
+};
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const getExplorerWelcomeVirtualDom = isWide => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer$1),
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Div,
+    className: Welcome,
+    childCount: 2
+  }, {
+    type: P,
+    className: WelcomeMessage,
+    childCount: 1
+  }, text(youHaveNotYetOpenedAFolder()), {
+    type: Button,
+    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? 'ButtonWide' : 'ButtonNarrow'),
+    childCount: 1,
+    onClick: handleClickOpenFolder$1
+  }, text(openFolder$1())];
+};
+
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
+  if (!root) {
+    return getExplorerWelcomeVirtualDom(isWide);
+  }
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer$1),
+    tabIndex: 0,
+    role: Tree,
+    ariaLabel: filesExplorer(),
+    childCount: visibleItems.length,
+    ariaActiveDescendant: focusedIndex >= 0 ? 'TreeItemActive' : undefined,
+    onFocus: HandleFocus,
+    onBlur: HandleBlur,
+    onContextMenu: HandleContextMenu,
+    onPointerDown: HandlePointerDown,
+    onWheel: HandleWheel,
+    onClick: HandleClick
+  });
+  dom.push(...visibleItems.flatMap(getExplorerItemVirtualDom));
+  return dom;
+};
+
+const Enter = 3;
+const Escape = 8;
+const Space = 9;
+const End = 255;
+const Home = 12;
+const LeftArrow = 13;
+const UpArrow = 14;
+const RightArrow = 15;
+const DownArrow = 16;
+const Delete = 18;
+const KeyC = 31;
+const KeyV = 50;
+const F2 = 58;
+const Star = 131;
+
+const CtrlCmd = 1 << 11 >>> 0;
+const Alt = 1 << 9 >>> 0;
+
+const FocusExplorer = 13;
+const FocusExplorerEditBox = 14;
+
+const getKeyBindings = () => {
+  return [{
+    key: RightArrow,
+    command: 'Explorer.handleArrowRight',
+    when: FocusExplorer
+  }, {
+    key: LeftArrow,
+    command: 'Explorer.handleArrowLeft',
+    when: FocusExplorer
+  }, {
+    key: Home,
+    command: 'Explorer.focusFirst',
+    when: FocusExplorer
+  }, {
+    key: End,
+    command: 'Explorer.focusLast',
+    when: FocusExplorer
+  }, {
+    key: UpArrow,
+    command: 'Explorer.focusPrevious',
+    when: FocusExplorer
+  }, {
+    key: DownArrow,
+    command: 'Explorer.focusNext',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | Star,
+    command: 'Explorer.expandAll',
+    when: FocusExplorer
+  }, {
+    key: Alt | RightArrow,
+    command: 'Explorer.expandRecursively',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | LeftArrow,
+    command: 'Explorer.collapseAll',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | KeyV,
+    command: 'Explorer.handlePaste',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | KeyC,
+    command: 'Explorer.handleCopy',
+    when: FocusExplorer
+  }, {
+    key: F2,
+    command: 'Explorer.rename',
+    when: FocusExplorer
+  }, {
+    key: Escape,
+    command: 'Explorer.cancelEdit',
+    when: FocusExplorerEditBox
+  }, {
+    key: Enter,
+    command: 'Explorer.acceptEdit',
+    when: FocusExplorerEditBox
+  }, {
+    key: Delete,
+    command: 'Explorer.removeDirent',
+    when: FocusExplorer
+  }, {
+    key: Escape,
+    command: 'Explorer.focusNone',
+    when: FocusExplorer
+  }, {
+    key: Space,
+    command: 'Explorer.handleClickCurrentButKeepFocus',
+    when: FocusExplorer
+  }, {
+    key: Enter,
+    command: 'Explorer.handleClickCurrent',
+    when: FocusExplorer
+  }];
+};
+
+const Separator = 1;
+const None$1 = 0;
+const RestoreFocus = 6;
+
+const menuEntrySeparator = {
+  id: 'separator',
+  label: '',
+  flags: Separator,
+  command: ''
+};
+
+const menuEntryNewFile = {
+  id: 'newFile',
+  label: newFile(),
+  flags: None$1,
+  command: 'Explorer.newFile'
+};
+const menuEntryNewFolder = {
+  id: 'newFolder',
+  label: newFolder(),
+  flags: None$1,
+  command: 'Explorer.newFolder'
+};
+const menuEntryOpenContainingFolder = {
+  id: 'openContainingFolder',
+  label: openContainingFolder$1(),
+  flags: RestoreFocus,
+  command: 'Explorer.openContainingFolder'
+};
+const menuEntryOpenInIntegratedTerminal = {
+  id: 'openInIntegratedTerminal',
+  label: openInIntegratedTerminal(),
+  flags: None$1,
+  command: /* TODO */-1
+};
+const menuEntryCut = {
+  id: 'cut',
+  label: cut(),
+  flags: RestoreFocus,
+  command: /* TODO */-1
+};
+const menuEntryCopy = {
+  id: 'copy',
+  label: copy(),
+  flags: RestoreFocus,
+  command: 'Explorer.handleCopy'
+};
+const menuEntryPaste = {
+  id: 'paste',
+  label: paste(),
+  flags: None$1,
+  command: 'Explorer.handlePaste'
+};
+const menuEntryCopyPath = {
+  id: 'copyPath',
+  label: copyPath(),
+  flags: RestoreFocus,
+  command: 'Explorer.copyPath'
+};
+const menuEntryCopyRelativePath = {
+  id: 'copyRelativePath',
+  label: copyRelativePath(),
+  flags: RestoreFocus,
+  command: 'Explorer.copyRelativePath'
+};
+const menuEntryRename = {
+  id: 'rename',
+  label: rename(),
+  flags: None$1,
+  command: 'Explorer.renameDirent'
+};
+const menuEntryDelete = {
+  id: 'delete',
+  label: deleteItem(),
+  flags: None$1,
+  command: 'Explorer.removeDirent'
+};
+const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
+
+// TODO there are two possible ways of getting the focused dirent of explorer
+// 1. directly access state of explorer (bad because it directly accesses state of another component)
+// 2. expose getFocusedDirent method in explorer (bad because explorer code should not know about for menuEntriesExplorer, which needs that method)
+const getFocusedDirent = explorerState => {
+  if (!explorerState || explorerState.focusedIndex < 0) {
+    return undefined;
+  }
+  return explorerState.items[explorerState.focusedIndex];
+};
+const getMenuEntriesDirectory = () => {
+  return ALL_ENTRIES;
+};
+const getMenuEntriesFile = () => {
+  return [menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
+};
+const getMenuEntriesDefault = () => {
+  return ALL_ENTRIES;
+};
+const getMenuEntriesRoot = () => {
+  return [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath];
+};
+const getMenuEntries = state => {
+  const focusedDirent = getFocusedDirent(state);
+  if (!focusedDirent) {
+    return getMenuEntriesRoot();
+  }
+  switch (focusedDirent.type) {
+    case Directory:
+      return getMenuEntriesDirectory();
+    case File:
+      return getMenuEntriesFile();
+    default:
+      return getMenuEntriesDefault();
+  }
+};
+
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue) => {
+  const visible = [];
+  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
+    const item = items[i];
+    if (i === editingIndex) {
+      visible.push({
+        ...item,
+        isFocused: i === focusedIndex,
+        isEditing: true,
+        icon: getFileIcon({
+          name: editingValue
+        })
+      });
+    } else {
+      visible.push({
+        ...item,
+        isFocused: i === focusedIndex
+      });
+    }
+  }
+  if (editingType !== None$3 && editingIndex === -1) {
+    visible.push({
+      depth: 3,
+      posInSet: 1,
+      setSize: 1,
+      icon: '',
+      isFocused: false,
+      name: 'new',
+      path: '/test/new',
+      type: 2,
+      isEditing: true
+    });
+  }
+  return visible;
+};
+
+const handleBlur = state => {
+  // TODO when blur event occurs because of context menu, focused index should stay the same
+  // but focus outline should be removed
+  const {
+    editingType
+  } = state;
+  if (editingType !== None$3) {
+    return state;
+  }
+  return {
+    ...state,
+    focused: false
+  };
+};
+
+// TODO viewlet should only have create and refresh functions
+// every thing else can be in a separate module <viewlet>.lazy.js
+// and  <viewlet>.ipc.js
+
+// viewlet: creating | refreshing | done | disposed
+// TODO recycle viewlets (maybe)
+
+// TODO instead of root string, there should be a root dirent
+
+// TODO rename dirents to items, then can use virtual list component directly
+
+// TODO support multiselection and removing multiple dirents
+
+// TODO use posInSet and setSize properties to compute more effectively
+
+// TODO much shared logic with newFolder
+
+const handleClickFile$1 = async (state, dirent, index, keepFocus = false) => {
+  // await Command.execute(/* Main.openAbsolutePath */ 'Main.openUri', /* absolutePath */ dirent.path, /* focus */ !keepFocus)
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+const handleClickDirectory$1 = async (state, dirent, index, keepFocus) => {
+  dirent.type = DirectoryExpanding;
+  // TODO handle error
+  const dirents = await getChildDirents(state.pathSeparator, dirent);
+  const state2 = {};
+  if (!state2) {
+    return state;
+  }
+  // TODO use Viewlet.getState here and check if it exists
+  const newIndex = state2.items.indexOf(dirent);
+  // TODO if viewlet is disposed or root has changed, return
+  if (newIndex === -1) {
+    return state;
+  }
+  const newDirents = [...state2.items];
+  newDirents.splice(newIndex + 1, 0, ...dirents);
+  dirent.type = DirectoryExpanded;
+  dirent.icon = getIcon();
+  const {
+    height,
+    itemHeight,
+    minLineY
+  } = state2;
+  // TODO when focused index has changed while expanding, don't update it
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    focusedIndex: newIndex,
+    focused: keepFocus,
+    maxLineY
+  };
+};
+const handleClickDirectoryExpanding = (state, dirent, index, keepFocus) => {
+  dirent.type = Directory;
+  dirent.icon = getIcon();
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+const handleClickDirectoryExpanded$1 = (state, dirent, index, keepFocus) => {
+  const {
+    minLineY,
+    maxLineY,
+    itemHeight
+  } = state;
+  dirent.type = Directory;
+  dirent.icon = getIcon();
+  const endIndex = getParentEndIndex(state.items, index);
+  const removeCount = endIndex - index - 1;
+  // TODO race conditions and side effects are everywhere
+  const newDirents = [...state.items];
+  newDirents.splice(index + 1, removeCount);
+  const newTotal = newDirents.length;
+  if (newTotal < maxLineY) {
+    const visibleItems = Math.min(maxLineY - minLineY, newTotal);
+    const newMaxLineY = Math.min(maxLineY, newTotal);
+    const newMinLineY = newMaxLineY - visibleItems;
+    const deltaY = newMinLineY * itemHeight;
+    return {
+      ...state,
+      items: newDirents,
+      focusedIndex: index,
+      focused: keepFocus,
+      minLineY: newMinLineY,
+      maxLineY: newMaxLineY,
+      deltaY
+    };
+  }
+  return {
+    ...state,
+    items: newDirents,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+const handleClickSymLink$1 = async (state, dirent, index) => {
+  await getRealPath();
+  const type = await stat();
+  switch (type) {
+    case File:
+      return handleClickFile$1(state, dirent, index);
+    default:
+      throw new Error(`unsupported file type ${type}`);
+  }
+};
+const getClickFn = direntType => {
+  switch (direntType) {
+    case File:
+    case SymLinkFile:
+      return handleClickFile$1;
+    case Directory:
+    case SymLinkFolder:
+      return handleClickDirectory$1;
+    case DirectoryExpanding:
+      return handleClickDirectoryExpanding;
+    case DirectoryExpanded:
+      return handleClickDirectoryExpanded$1;
+    case Symlink:
+      return handleClickSymLink$1;
+    case CharacterDevice:
+      throw new Error('Cannot open character device files');
+    case BlockDevice:
+      throw new Error('Cannot open block device files');
+    case Socket:
+      throw new Error('Cannot open socket files');
+    default:
+      throw new Error(`unsupported dirent type ${direntType}`);
+  }
+};
+
+const getIndexFromPosition = (state, eventX, eventY) => {
+  const {
+    y,
+    itemHeight,
+    items
+  } = state;
+  const index = Math.floor((eventY - y) / itemHeight);
+  if (index < 0) {
+    return 0;
+  }
+  if (index >= items.length) {
+    return -1;
+  }
+  return index;
+};
+
+const getParentStartIndex = (dirents, index) => {
+  const dirent = dirents[index];
+  let startIndex = index - 1;
+  while (startIndex >= 0 && dirents[startIndex].depth >= dirent.depth) {
+    startIndex--;
+  }
+  return startIndex;
+};
+
+const Keyboard = -1;
+const LeftClick = 0;
+
+const openFolder = async () => {
+  // TODO
+};
+
+// TODO viewlet should only have create and refresh functions
+// every thing else can be in a separate module <viewlet>.lazy.js
+// and  <viewlet>.ipc.js
+
+// viewlet: creating | refreshing | done | disposed
+// TODO recycle viewlets (maybe)
+
+// TODO instead of root string, there should be a root dirent
+
+const updateIcon = dirent => {
+  return {
+    ...dirent,
+    icon: getIcon()
+  };
+};
+const updateIcons = state => {
+  const newDirents = state.items.map(updateIcon);
+  return {
+    ...state,
+    items: newDirents
+  };
+};
+const handleIconThemeChange = state => {
+  return updateIcons(state);
+};
+
+// TODO rename dirents to items, then can use virtual list component directly
+const setDeltaY = (state, deltaY) => {
+  const {
+    itemHeight,
+    height,
+    items
+  } = state;
+  if (deltaY < 0) {
+    deltaY = 0;
+  } else if (deltaY > items.length * itemHeight - height) {
+    deltaY = Math.max(items.length * itemHeight - height, 0);
+  }
+  if (state.deltaY === deltaY) {
+    return state;
+  }
+  const minLineY = Math.round(deltaY / itemHeight);
+  const maxLineY = minLineY + Math.round(height / itemHeight);
+  return {
+    ...state,
+    deltaY,
+    minLineY,
+    maxLineY
+  };
+};
+const handleWheel = (state, deltaMode, deltaY) => {
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
+// TODO support multiselection and removing multiple dirents
+const removeDirent = async state => {
+  if (state.focusedIndex < 0) {
+    return state;
+  }
+  const dirent = getFocusedDirent$1(state);
+  const absolutePath = dirent.path;
+  try {
+    // TODO handle error
+    await remove(absolutePath);
+  } catch (error) {
+    // TODO vscode shows error as alert (no stacktrace) and retry button
+    // maybe should show alert as well, but where to put stacktrace?
+    // on web should probably show notification (dialog)
+    // ErrorHandling.handleError(error)
+    // await ErrorHandling.showErrorDialog(error)
+    return;
+  }
+  // TODO avoid state mutation
+  const newVersion = ++state.version;
+  // TODO race condition
+  // const newState = await loadContent(state:any)
+  if (state.version !== newVersion || state.disposed) {
+    return state;
+  }
+  // TODO is it possible to make this more functional instead of mutating state?
+  // maybe every function returns a new state?
+  const index = state.items.indexOf(dirent);
+  let deleteEnd = index + 1;
+  for (; deleteEnd < state.items.length; deleteEnd++) {
+    if (state.items[deleteEnd].depth <= dirent.depth) {
+      break;
+    }
+  }
+  const deleteCount = deleteEnd - index;
+  const newDirents = [...state.items];
+  newDirents.splice(index, deleteCount);
+  let indexToFocus = -1;
+  if (newDirents.length === 0) {
+    indexToFocus = -1;
+  } else if (index < state.focusedIndex) {
+    indexToFocus = state.focusedIndex - 1;
+  } else if (index === state.focusedIndex) {
+    indexToFocus = Math.max(state.focusedIndex - 1, 0);
+  } else {
+    indexToFocus = Math.max(state.focusedIndex - 1, 0);
+  }
+  return {
+    ...state,
+    items: newDirents,
+    focusedIndex: indexToFocus
+  };
+};
+const renameDirent = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const item = items[focusedIndex];
+  // Focus.setFocus(FocusKey.ExplorerEditBox)
+  return {
+    ...state,
+    editingIndex: focusedIndex,
+    editingType: Rename,
+    editingValue: item.name
+  };
+};
+
+// TODO use posInSet and setSize properties to compute more effectively
+
+const cancelEdit = state => {
+  const {
+    editingIndex
+  } = state;
+  return {
+    ...state,
+    focusedIndex: editingIndex,
+    focused: true,
+    editingIndex: -1,
+    editingValue: '',
+    editingType: None$3
+  };
+};
+
+// TODO much shared logic with newFolder
+
+const handleClickFile = async (state, dirent, index, keepFocus = false) => {
+  // await Command.execute(/* Main.openAbsolutePath */ 'Main.openUri', /* absolutePath */ dirent.path, /* focus */ !keepFocus)
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+const handleClickDirectory = async (state, dirent, index, keepFocus) => {
+  dirent.type = DirectoryExpanding;
+  // TODO handle error
+  const dirents = await getChildDirents(state.pathSeparator, dirent);
+  const state2 = {};
+  if (!state2) {
+    return state;
+  }
+  // TODO use Viewlet.getState here and check if it exists
+  const newIndex = state2.items.indexOf(dirent);
+  // TODO if viewlet is disposed or root has changed, return
+  if (newIndex === -1) {
+    return state;
+  }
+  const newDirents = [...state2.items];
+  newDirents.splice(newIndex + 1, 0, ...dirents);
+  dirent.type = DirectoryExpanded;
+  dirent.icon = getIcon();
+  const {
+    height,
+    itemHeight,
+    minLineY
+  } = state2;
+  // TODO when focused index has changed while expanding, don't update it
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    focusedIndex: newIndex,
+    focused: keepFocus,
+    maxLineY
+  };
+};
+const handleClickDirectoryExpanded = (state, dirent, index, keepFocus) => {
+  const {
+    minLineY,
+    maxLineY,
+    itemHeight
+  } = state;
+  dirent.type = Directory;
+  dirent.icon = getIcon();
+  const endIndex = getParentEndIndex(state.items, index);
+  const removeCount = endIndex - index - 1;
+  // TODO race conditions and side effects are everywhere
+  const newDirents = [...state.items];
+  newDirents.splice(index + 1, removeCount);
+  const newTotal = newDirents.length;
+  if (newTotal < maxLineY) {
+    const visibleItems = Math.min(maxLineY - minLineY, newTotal);
+    const newMaxLineY = Math.min(maxLineY, newTotal);
+    const newMinLineY = newMaxLineY - visibleItems;
+    const deltaY = newMinLineY * itemHeight;
+    return {
+      ...state,
+      items: newDirents,
+      focusedIndex: index,
+      focused: keepFocus,
+      minLineY: newMinLineY,
+      maxLineY: newMaxLineY,
+      deltaY
+    };
+  }
+  return {
+    ...state,
+    items: newDirents,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+const handleClick = (state, index, keepFocus = false) => {
+  const {
+    items,
+    minLineY
+  } = state;
+  if (index === -1) {
+    return focusIndex(state, -1);
+  }
+  const actualIndex = index + minLineY;
+  const dirent = items[actualIndex];
+  if (!dirent) {
+    console.warn(`[explorer] dirent at index ${actualIndex} not found`, state);
+    return state;
+  }
+  const clickFn = getClickFn(dirent.type);
+  return clickFn(state, dirent, actualIndex, keepFocus);
+};
+const handleClickAt = (state, button, x, y) => {
+  if (button !== LeftClick) {
+    return state;
+  }
+  const index = getIndexFromPosition(state, x, y);
+  return handleClick(state, index);
+};
+const handleClickCurrentButKeepFocus = state => {
+  return handleClick(state, state.focusedIndex - state.minLineY, /* keepFocus */true);
+};
+
+// export const handleBlur=()=>{}
+
+const handleClickSymLink = async (state, dirent, index) => {
+  await getRealPath();
+  const type = await stat();
+  switch (type) {
+    case File:
+      return handleClickFile(state, dirent, index);
+    default:
+      throw new Error(`unsupported file type ${type}`);
+  }
+};
+const handleArrowRightDirectoryExpanded = (state, dirent) => {
+  const {
+    items,
+    focusedIndex
+  } = state;
+  if (focusedIndex === items.length - 1) {
+    return state;
+  }
+  const nextDirent = items[focusedIndex + 1];
+  if (nextDirent.depth === dirent.depth + 1) {
+    return focusIndex(state, focusedIndex + 1);
+  }
+};
+const handleArrowRight = async state => {
+  const {
+    items,
+    focusedIndex
+  } = state;
+  if (focusedIndex === -1) {
+    return state;
+  }
+  const dirent = items[focusedIndex];
+  switch (dirent.type) {
+    case File:
+    case SymLinkFile:
+      return state;
+    case Directory:
+    case SymLinkFolder:
+      // @ts-ignore
+      return handleClickDirectory(state, dirent);
+    case DirectoryExpanded:
+      return handleArrowRightDirectoryExpanded(state, dirent);
+    case Symlink:
+      return handleClickSymLink(state, dirent, focusedIndex);
+    default:
+      throw new Error(`unsupported file type ${dirent.type}`);
+  }
+};
+const focusParentFolder = state => {
+  const parentStartIndex = getParentStartIndex(state.items, state.focusedIndex);
+  if (parentStartIndex === -1) {
+    return state;
+  }
+  return focusIndex(state, parentStartIndex);
+};
+const handleArrowLeft = state => {
+  const {
+    items,
+    focusedIndex
+  } = state;
+  if (focusedIndex === -1) {
+    return state;
+  }
+  const dirent = items[focusedIndex];
+  switch (dirent.type) {
+    case Directory:
+    case File:
+    case SymLinkFile:
+      return focusParentFolder(state);
+    case DirectoryExpanded:
+      // @ts-ignore
+      return handleClickDirectoryExpanded(state, dirent, focusedIndex);
+    default:
+      // TODO handle expanding directory and cancel file system call to read child dirents
+      return state;
+  }
+};
+
+// TODO what happens when mouse leave and anther mouse enter event occur?
+// should update preview instead of closing and reopening
+
+// TODO maybe just insert items into explorer and refresh whole explorer
+
+const handleClickOpenFolder = async state => {
+  await openFolder();
+  return state;
+};
+
+const show = async (x, y, id, ...args) => {
+  return invoke('ContextMenu.show', x, y, id, ...args);
+};
+
+const Explorer = 4;
+
+const handleContextMenuKeyboard = async state => {
+  const {
+    focusedIndex,
+    x,
+    y,
+    minLineY,
+    itemHeight
+  } = state;
+  const menuX = x;
+  const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
+  await show(menuX, menuY, Explorer);
+  return state;
+};
+
+const handleContextMenuMouseAt = async (state, x, y) => {
+  number(x);
+  number(y);
+  const focusedIndex = getIndexFromPosition(state, x, y);
+  await show(x, y, Explorer);
+  return {
+    ...state,
+    focusedIndex,
+    focused: false
+  };
+};
+
+const handleContextMenu = (state, button, x, y) => {
+  switch (button) {
+    case Keyboard:
+      return handleContextMenuKeyboard(state);
+    default:
+      return handleContextMenuMouseAt(state, x, y);
+  }
+};
+
+const getFilePathElectron = async file => {
+  return invoke('GetFilePathElectron.getFilePathElectron', file);
+};
+
+const mergeDirents$2 = (oldDirents, newDirents) => {
+  return newDirents;
+};
+
+// TODO copy files in parallel
+const copyFilesElectron = async (root, pathSeparator, files) => {
+  for (const file of files) {
+    await getFilePathElectron(file);
+    // const from = file.path
+    join(pathSeparator, root, file.name);
+    await copy$1();
+  }
+};
+const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
+  const childDirents = await getChildDirents(pathSeparator, {
+    path: root,
+    depth: 0
+  });
+  const mergedDirents = mergeDirents$2(dirents, childDirents);
+  return mergedDirents;
+};
+const handleDrop$2 = async (state, files) => {
+  const {
+    root,
+    pathSeparator,
+    items
+  } = state;
+  await copyFilesElectron(root, pathSeparator, files);
+  const mergedDirents = await getMergedDirents$2(root, pathSeparator, items);
+  return {
+    ...state,
+    items: mergedDirents,
+    dropTargets: []
+  };
+};
+
+const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
+  // TODO send to renderer worker
+};
+
+const mergeDirents$1 = (oldDirents, newDirents) => {
+  return newDirents;
+};
+const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
+  const childDirents = await getChildDirents(pathSeparator, {
+    path: root,
+    depth: 0
+  });
+  const mergedDirents = mergeDirents$1(dirents, childDirents);
+  return mergedDirents;
+};
+const handleDrop$1 = async (state, files) => {
+  const {
+    root,
+    pathSeparator,
+    items
+  } = state;
+  const handled = await uploadFileSystemHandles();
+  if (handled) {
+    return state;
+  }
+  const mergedDirents = await getMergedDirents$1(root, pathSeparator, items);
+  return {
+    ...state,
+    items: mergedDirents,
+    dropTargets: []
+  };
+};
+
+const getModule = isElectron => {
+  if (isElectron) {
+    return handleDrop$2;
+  }
+  return handleDrop$1;
+};
+const handleDropRoot = async (state, files) => {
+  const fn = await getModule(state.isElectron);
+  return fn(state, files);
+};
+
+const getEndIndex = (items, index, dirent) => {
+  for (let i = index + 1; i < items.length; i++) {
+    if (items[i].depth === dirent.depth) {
+      return i;
+    }
+  }
+  return items.length;
+};
+const getMergedDirents = (items, index, dirent, childDirents) => {
+  const startIndex = index;
+  const endIndex = getEndIndex(items, index, dirent);
+  const mergedDirents = [...items.slice(0, startIndex), {
+    ...dirent,
+    type: DirectoryExpanded
+  }, ...childDirents, ...items.slice(endIndex)];
+  return mergedDirents;
+};
+const handleDropIntoFolder = async (state, dirent, index, files) => {
+  const {
+    pathSeparator,
+    items
+  } = state;
+  for (const file of files) {
+    await copy$1();
+  }
+  const childDirents = await getChildDirents(pathSeparator, dirent);
+  const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
+  // TODO update maxlineY
+  return {
+    ...state,
+    items: mergedDirents,
+    dropTargets: []
+  };
+};
+const handleDropIntoFile = (state, dirent, index, files) => {
+  const {
+    items
+  } = state;
+  const parentIndex = getParentStartIndex(items, index);
+  if (parentIndex === -1) {
+    return handleDropRoot(state, files);
+  }
+  // @ts-ignore
+  return handleDropIndex(parentIndex);
+};
+const handleDropIndex = (state, index, files) => {
+  const {
+    items
+  } = state;
+  const dirent = items[index];
+  // TODO if it is a file, drop into the folder of the file
+  // TODO if it is a folder, drop into the folder
+  // TODO if it is a symlink, read symlink and determine if file can be dropped
+  switch (dirent.type) {
+    case Directory:
+    case DirectoryExpanded:
+      return handleDropIntoFolder(state, dirent, index, files);
+    case File:
+      return handleDropIntoFile(state, dirent, index, files);
+    default:
+      return state;
+  }
+};
+
+const normalizeLine = line => {
+  if (line.startsWith('Error: ')) {
+    return line.slice('Error: '.length);
+  }
+  if (line.startsWith('VError: ')) {
+    return line.slice('VError: '.length);
+  }
+  return line;
+};
+const getCombinedMessage = (error, message) => {
+  const stringifiedError = normalizeLine(`${error}`);
+  if (message) {
+    return `${message}: ${stringifiedError}`;
+  }
+  return stringifiedError;
+};
+const NewLine = '\n';
+const getNewLineIndex = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine, startIndex);
+};
+const mergeStacks = (parent, child) => {
+  if (!child) {
+    return parent;
+  }
+  const parentNewLineIndex = getNewLineIndex(parent);
+  const childNewLineIndex = getNewLineIndex(child);
+  if (childNewLineIndex === -1) {
+    return parent;
+  }
+  const parentFirstLine = parent.slice(0, parentNewLineIndex);
+  const childRest = child.slice(childNewLineIndex);
+  const childFirstLine = normalizeLine(child.slice(0, childNewLineIndex));
+  if (parentFirstLine.includes(childFirstLine)) {
+    return parentFirstLine + childRest;
+  }
+  return child;
+};
+class VError extends Error {
+  constructor(error, message) {
+    const combinedMessage = getCombinedMessage(error, message);
+    super(combinedMessage);
+    this.name = 'VError';
+    if (error instanceof Error) {
+      this.stack = mergeStacks(this.stack, error.stack);
+    }
+    if (error.codeFrame) {
+      // @ts-ignore
+      this.codeFrame = error.codeFrame;
+    }
+    if (error.code) {
+      // @ts-ignore
+      this.code = error.code;
+    }
+  }
+}
+
+const handleDrop = async (state, x, y, files) => {
+  try {
+    const index = getIndexFromPosition(state, x, y);
+    switch (index) {
+      case -1:
+        return await handleDropRoot(state, files);
+      default:
+        return await handleDropIndex(state, index, files);
+    }
+  } catch (error) {
+    throw new VError(error, 'Failed to drop files');
+  }
+};
+
+const getTopLevelDirents = (root, pathSeparator, excluded) => {
+  if (!root) {
+    return [];
+  }
+  return getChildDirents(pathSeparator, {
+    depth: 0,
+    path: root,
+    type: Directory
+  }, excluded);
+};
+
+const mergeDirents = (oldDirents, newDirents) => {
+  const merged = [];
+  for (const newDirent of newDirents) {
+    merged.push(newDirent);
+  }
+  return merged;
+};
+
+// TODO add lots of tests for this
+const updateRoot = async state1 => {
+  if (state1.disposed) {
+    return state1;
+  }
+  // const file = nativeFiles.files[0]
+  // @ts-ignore
+  const topLevelDirents = await getTopLevelDirents(state1.root, state1.pathSeparator);
+  // const state2 = Viewlet.getState('Explorer')
+  // // TODO what if root changes while reading directories?
+  // if (state2.disposed || state2.root !== state1.root) {
+  //   return state2
+  // }
+  const newDirents = mergeDirents(state1.items, topLevelDirents);
+  const state3 = {
+    ...state1,
+    items: newDirents
+  };
+  return state3;
+};
+
+const handlePasteCopy = async (state, nativeFiles) => {
+  // TODO handle pasting files into nested folder
+  // TODO handle pasting files into symlink
+  // TODO handle pasting files into broken symlink
+  // TODO handle pasting files into hardlink
+  // TODO what if folder is big and it takes a long time
+  for (const source of nativeFiles.files) {
+    join(state.pathSeperator, state.root, getBaseName(state.pathSeparator, source));
+    await copy$1();
+  }
+  // TODO only update folder at which level it changed
+  return updateRoot(state);
+};
+
+const handlePasteCut = async (state, nativeFiles) => {
+  for (const source of nativeFiles.files) {
+    `${state.root}${state.pathSeparator}${getBaseName(state.pathSeparator, source)}`;
+    await rename$1();
+  }
+  return state;
+};
+
+const handlePasteNone = (state, nativeFiles) => {
+  console.info('[ViewletExplorer/handlePaste] no paths detected');
+  return state;
+};
+
+const None = 'none';
+const Copy = 'copy';
+const Cut = 'cut';
+
+const handlePaste = async state => {
+  const nativeFiles = await readNativeFiles();
+  // TODO detect cut/paste event, not sure if that is possible
+  // TODO check that pasted folder is not a parent folder of opened folder
+  // TODO support pasting multiple paths
+  // TODO what happens when pasting multiple paths, but some of them error?
+  // how many error messages should be shown? Should the operation be undone?
+  // TODO what if it is a large folder and takes a long time to copy? Should show progress
+  // TODO what if there is a permission error? Probably should show a modal to ask for permission
+  // TODO if error is EEXISTS, just rename the copy (e.g. file-copy-1.txt, file-copy-2.txt)
+  // TODO actual target should be selected folder
+  // TODO but what if a file is currently selected? Then maybe the parent folder
+  // TODO but will it work if the folder is a symlink?
+  // TODO handle error gracefully when copy fails
+  switch (nativeFiles.type) {
+    case None:
+      return handlePasteNone(state);
+    case Copy:
+      return handlePasteCopy(state, nativeFiles);
+    case Cut:
+      return handlePasteCut(state, nativeFiles);
+    default:
+      throw new Error(`unexpected native paste type: ${nativeFiles.type}`);
+  }
+};
+
+const handlePointerDown = (state, button, x, y) => {
+  const index = getIndexFromPosition(state, x, y);
+  if (button === LeftClick && index === -1) {
+    return {
+      ...state,
+      focused: true,
+      focusedIndex: -1
+    };
+  }
+  return state;
+};
+
+// TODO viewlet should only have create and refresh functions
+// every thing else can be in a separate module <viewlet>.lazy.js
+// and  <viewlet>.ipc.js
+
+// viewlet: creating | refreshing | done | disposed
+// TODO recycle viewlets (maybe)
+
+// TODO instead of root string, there should be a root dirent
+
+const getPathSeparator = root => {
+  return getPathSeparator$1();
+};
+const restoreExpandedState = async (savedState, root, pathSeparator, excluded) => {
+  {
+    return [];
+  }
+};
+const getExcluded = () => {
+  const excludedObject = {};
+  const excluded = [];
+  for (const [key, value] of Object.entries(excludedObject)) {
+    if (value) {
+      excluded.push(key);
+    }
+  }
+  return excluded;
+};
+const getSavedRoot$1 = (savedState, workspacePath) => {
+  return workspacePath;
+};
+const loadContent = async (state, savedState) => {
+  const root = getSavedRoot$1(savedState, '');
+  // TODO path separator could be restored from saved state
+  const pathSeparator = await getPathSeparator(); // TODO only load path separator once
+  const excluded = getExcluded();
+  const restoredDirents = await restoreExpandedState();
+  const {
+    itemHeight,
+    height
+  } = state;
+  let minLineY = 0;
+  if (savedState && typeof savedState.minLineY === 'number') {
+    minLineY = savedState.minLineY;
+  }
+  let deltaY = 0;
+  if (savedState && typeof savedState.deltaY === 'number') {
+    deltaY = savedState.deltaY;
+  }
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, restoredDirents.length);
+  return {
+    ...state,
+    root,
+    items: restoredDirents,
+    minLineY,
+    deltaY,
+    maxLineY,
+    pathSeparator,
+    excluded
+  };
+};
+
+const getContaingingFolder = (root, dirents, focusedIndex, pathSeparator) => {
+  if (focusedIndex < 0) {
+    return root;
+  }
+  const dirent = dirents[focusedIndex];
+  const direntPath = dirent.path;
+  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
+  const path = `${direntParentPath}`;
+  return path;
+};
+const openContainingFolder = async state => {
+  const {
+    focusedIndex,
+    root,
+    items,
+    pathSeparator
+  } = state;
+  const path = getContaingingFolder(root, items, focusedIndex);
+  await invoke('OpenNativeFolder.openNativeFolder', /* path */path);
+  return state;
+};
+
+const getSavedRoot = (savedState, workspacePath) => {
+  return workspacePath;
+};
+const restoreState = savedState => {
+  if (!savedState) {
+    return {
+      minLineY: 0,
+      deltaY: 0
+    };
+  }
+  const root = getSavedRoot(savedState, savedState.workspacePath || '');
+  let minLineY = 0;
+  if (savedState && typeof savedState.minLineY === 'number') {
+    minLineY = savedState.minLineY;
+  }
+  let deltaY = 0;
+  if (savedState && typeof savedState.deltaY === 'number') {
+    deltaY = savedState.deltaY;
+  }
+  return {
+    ...savedState,
+    root,
+    minLineY,
+    deltaY
+  };
+};
+
+const getIndex = (dirents, uri) => {
+  for (let i = 0; i < dirents.length; i++) {
+    const dirent = dirents[i];
+    if (dirent.path === uri) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+const getPathParts = (root, uri, pathSeparator) => {
+  const parts = [];
+  let index = root.length - 1;
+  let depth = 0;
+  while ((index = uri.indexOf('/', index + 1)) !== -1) {
+    const partUri = uri.slice(0, index);
+    parts.push({
+      path: partUri,
+      depth: depth++,
+      root,
+      pathSeparator
+    });
+  }
+  return parts;
+};
+
+const isTopLevel = dirent => {
+  return dirent.depth === 1;
+};
+const orderDirents = dirents => {
+  if (dirents.length === 0) {
+    return dirents;
+  }
+  // const parentMap = Object.create(null)
+  // for(const dirent of dirents){
+  //   const parentPath = dirent.slice(0, dirent.lastIndexOf('/'))
+  //   parentMap[parentPath]||=[]
+  //   parentMap[parentPath].push(dirent)
+  // }
+  const withDeepChildren = parent => {
+    const children = [];
+    for (const dirent of dirents) {
+      if (dirent.depth === parent.depth + 1 && dirent.path.startsWith(parent.path)) {
+        children.push(dirent, ...withDeepChildren(dirent));
+      }
+    }
+    return [parent, ...children];
+  };
+  const topLevelDirents = dirents.filter(isTopLevel);
+  const ordered = topLevelDirents.flatMap(withDeepChildren);
+  return ordered;
+};
+
+const scrollInto = (index, minLineY, maxLineY) => {
+  const diff = maxLineY - minLineY;
+  const smallerHalf = Math.floor(diff / 2);
+  const largerHalf = diff - smallerHalf;
+  if (index < minLineY) {
+    return {
+      newMinLineY: index - smallerHalf,
+      newMaxLineY: index + largerHalf
+    };
+  }
+  if (index >= maxLineY) {
+    return {
+      newMinLineY: index - smallerHalf,
+      newMaxLineY: index + largerHalf
+    };
+  }
+  return {
+    newMinLineY: minLineY,
+    newMaxLineY: maxLineY
+  };
+};
+
+const getPathPartsToReveal = (root, pathParts, dirents) => {
+  for (let i = 0; i < pathParts.length; i++) {
+    const pathPart = pathParts[i];
+    const index = getIndex(dirents, pathPart.uri);
+    if (index === -1) {
+      continue;
+    }
+    return pathParts.slice(i);
+  }
+  return pathParts;
+};
+const getPathPartChildren = pathPart => {
+  const children = getChildDirents(pathPart.pathSeparator, pathPart);
+  return children;
+};
+const mergeVisibleWithHiddenItems = (visibleItems, hiddenItems) => {
+  const merged = [...hiddenItems];
+  const seen = Object.create(null);
+  const unique = [];
+  for (const item of merged) {
+    if (seen[item.path]) {
+      continue;
+    }
+    seen[item.path] = true;
+    unique.push(item);
+  }
+
+  // depth one
+  //   let depth=1
+  //   while(true){
+  //     for(const item of unique){
+  //       if(item.depth===depth){
+  //         ordered.push(item)
+  //       }
+  //     }
+  // break
+  //   }
+  // const getChildren = (path) => {
+  //   const children = []
+  //   for (const item of unique) {
+  //     if (item.path.startsWith(path) && item.path !== path) {
+  //       ordered.push(item)
+  //     }
+  //   }
+  //   return children
+  // }
+  // for (const item of unique) {
+  //   for (const potentialChild of unique) {
+  //     if (
+  //       potentialChild.path.startsWith(item.path) &&
+  //       potentialChild.path !== item.path
+  //     ) {
+  //       ordered.push(potentialChild)
+  //     }
+  //   }
+  // }
+  // const refreshedRoots = Object.create(null)
+  // for (const hiddenItem of hiddenItems) {
+  //   const parent = hiddenItem.path.slice(0, hiddenItem.path.lastIndexOf('/'))
+  //   refreshedRoots[parent] = true
+  // }
+  // const mergedDirents = []
+  // for(const v)
+  // for (const visibleItem of visibleItems) {
+  //   if (visibleItem.path === hiddenItemRoot) {
+  //     // TODO update aria posinset and aria setsize
+  //     mergedDirents.push(...hiddenItems)
+  //   } else {
+  //     for (const hiddenItem of hiddenItems) {
+  //       if (hiddenItem.path === visibleItem.path) {
+  //         continue
+  //       }
+  //     }
+  //     mergedDirents.push(visibleItem)
+  //   }
+  // }
+
+  return unique;
+};
+
+// TODO maybe just insert items into explorer and refresh whole explorer
+const revealItemHidden = async (state, uri) => {
+  const {
+    root,
+    pathSeparator,
+    items,
+    minLineY,
+    maxLineY
+  } = state;
+  const pathParts = getPathParts(root, uri, pathSeparator);
+  if (pathParts.length === 0) {
+    return state;
+  }
+  const pathPartsToReveal = getPathPartsToReveal(root, pathParts, items);
+  const pathPartsChildren = await Promise.all(pathPartsToReveal.map(getPathPartChildren));
+  const pathPartsChildrenFlat = pathPartsChildren.flat(1);
+  const orderedPathParts = orderDirents(pathPartsChildrenFlat);
+  const mergedDirents = mergeVisibleWithHiddenItems(items, orderedPathParts);
+  const index = getIndex(mergedDirents, uri);
+  if (index === -1) {
+    throw new Error(`File not found in explorer ${uri}`);
+  }
+  const {
+    newMinLineY,
+    newMaxLineY
+  } = scrollInto(index, minLineY, maxLineY);
+  return {
+    ...state,
+    items: mergedDirents,
+    focused: true,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY
+  };
+};
+
+const revealItemVisible = (state, index) => {
+  const {
+    minLineY,
+    maxLineY
+  } = state;
+  const {
+    newMinLineY,
+    newMaxLineY
+  } = scrollInto(index, minLineY, maxLineY);
+  return {
+    ...state,
+    focused: true,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY
+  };
+};
+
+const revealItem = async (state, uri) => {
+  object(state);
+  string(uri);
+  const {
+    items
+  } = state;
+  const index = getIndex(items, uri);
+  if (index === -1) {
+    return revealItemHidden(state, uri);
+  }
+  return revealItemVisible(state, index);
+};
+
+const isExpandedDirectory = dirent => {
+  return dirent.type === DirectoryExpanded;
+};
+const getPath = dirent => {
+  return dirent.path;
+};
+const saveState = state => {
+  const {
+    items,
+    root,
+    deltaY,
+    minLineY,
+    maxLineY
+  } = state;
+  const expandedPaths = items.filter(isExpandedDirectory).map(getPath);
+  return {
+    expandedPaths,
+    root,
+    minLineY,
+    maxLineY,
+    deltaY
+  };
+};
+
+const commandMap = {
+  'Explorer.acceptEdit': acceptEdit,
+  'Explorer.cancelEdit': cancelEdit,
+  'Explorer.copyPath': copyPath$1,
+  'Explorer.copyRelativePath': copyRelativePath$1,
+  'Explorer.expandAll': expandAll,
+  'Explorer.expandRecursively': expandRecursively,
+  'Explorer.focusFirst': focusFirst,
+  'Explorer.focusIndex': focusIndex,
+  'Explorer.focusLast': focusLast,
+  'Explorer.focusNext': focusNext,
+  'Explorer.focusPrevious': focusPrevious,
+  'Explorer.getKeyBindings': getKeyBindings,
+  'Explorer.getMenuEntries': getMenuEntries,
+  'Explorer.getVirtualDom': getExplorerVirtualDom,
+  'Explorer.getVisibleItems': getVisibleExplorerItems,
+  'Explorer.handleArrowLeft': handleArrowLeft,
+  'Explorer.handleArrowRight': handleArrowRight,
+  'Explorer.handleBlur': handleBlur,
+  'Explorer.handleClick': handleClick,
+  'Explorer.handleClickAt': handleClickAt,
+  'Explorer.handleClickCurrentButKeepFocus': handleClickCurrentButKeepFocus,
+  'Explorer.handleClickOpenFolder': handleClickOpenFolder,
+  'Explorer.handleContextMenu': handleContextMenu,
+  'Explorer.handleDrop': handleDrop,
+  'Explorer.handleIconThemeChange': handleIconThemeChange,
+  'Explorer.handlePaste': handlePaste,
+  'Explorer.handlePointerDown': handlePointerDown,
+  'Explorer.handleWheel': handleWheel,
+  'Explorer.loadContent': loadContent,
+  'Explorer.openContainingFolder': openContainingFolder,
+  'Explorer.removeDirent': removeDirent,
+  'Explorer.renameDirent': renameDirent,
+  'Explorer.restoreState': restoreState,
+  'Explorer.revealItem': revealItem,
+  'Explorer.saveState': saveState
+};
+
+const listen = async () => {
+  const rpc = await WebWorkerRpcClient.create({
+    commandMap: commandMap
+  });
+  setRpc(rpc);
+};
+
+const main = async () => {
+  await listen();
+};
+
+main();