@lvce-editor/status-bar-worker 3.27.0 → 3.29.0

package/dist/statusBarWorkerMain.js

@@ -265,11 +265,10 @@ const {
   getCommandIds,
   getKeys,
   registerCommands,
-  set: set$7,
+  set: set$6,
   wrapCommand,
   wrapGetter,
-  wrapSerialCommand
-} = create$8();
+  wrapSerialAsyncCommand} = create$8();
 
 const create$7 = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
@@ -282,7 +281,7 @@ const create$7 = (uid, uri, x, y, width, height, platform, assetDir) => {
     uid,
     warningCount: 0
   };
-  set$7(uid, state, state);
+  set$6(uid, state, state);
 };
 
 const isEqual = (oldState, newState) => {
@@ -319,6 +318,317 @@ const getComponentState = uid => {
   return get$5(uid).newState;
 };
 
+const Status = 'status';
+
+const MaskIcon = 'MaskIcon';
+
+const Audio = 0;
+const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
+const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
+const Code = 65;
+const Label = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
+const Reference = 100;
+
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button: Button$1,
+  Canvas,
+  Circle,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
+const Button = 'event.button';
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetName = 'event.target.name';
+
+const ExtensionManagementWorker = 9006;
+const RendererProcess = 1670;
+const RendererWorker = 1;
+
+const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
+
+new Set(Object.values(VirtualDomElements));
+
+const HandleContextMenu = 2;
+const HandleClick = 11;
+
+const ProblemsErrorIcon = 'ProblemsErrorIcon';
+const ProblemsWarningIcon = 'ProblemsWarningIcon';
+const StatusBarItem = 'StatusBarItem';
+const StatusBarItemsLeft = 'StatusBarItemsLeft';
+const StatusBarItemsRight = 'StatusBarItemsRight';
+
+const getTextVirtualDom = (element, name) => {
+  return [{
+    childCount: 1,
+    className: 'StatusBarItemLabel',
+    name,
+    type: Span
+  }, text(element.value)];
+};
+const getIconVirtualDom = (element, name) => {
+  return [{
+    childCount: 0,
+    className: mergeClassNames(MaskIcon, 'StatusBarIcon', element.value, element.spinning ? 'Spinning' : ''),
+    name,
+    type: Div
+  }];
+};
+const getStatusBarItemElementVirtualDom = (element, name) => {
+  if (element.type === 'text') {
+    return getTextVirtualDom(element, name);
+  }
+  if (element.type === 'icon') {
+    return getIconVirtualDom(element, name);
+  }
+  return [];
+};
+
+const getStatusBarItemVirtualDom = statusBarItem => {
+  const {
+    ariaLabel,
+    elements,
+    name,
+    tooltip
+  } = statusBarItem;
+  const elementNodes = elements.flatMap(element => getStatusBarItemElementVirtualDom(element, name));
+  const buttonNode = {
+    ariaLabel,
+    childCount: elements.length,
+    className: StatusBarItem,
+    name,
+    tabIndex: -1,
+    title: tooltip,
+    type: Button$1
+  };
+  return [buttonNode, ...elementNodes];
+};
+
+const getStatusBarItemsVirtualDom = (items, className) => {
+  if (items.length === 0) {
+    return [];
+  }
+  return [{
+    childCount: items.length,
+    className,
+    type: Div
+  }, ...items.flatMap(getStatusBarItemVirtualDom)];
+};
+
+const emptyStatusBarItemsLeftDom = [{
+  childCount: 0,
+  className: StatusBarItemsLeft,
+  type: Div
+}];
+const getStatusBarItemsLeftDom = statusBarItemsLeft => {
+  if (statusBarItemsLeft.length === 0) {
+    return emptyStatusBarItemsLeftDom;
+  }
+  return getStatusBarItemsVirtualDom(statusBarItemsLeft, StatusBarItemsLeft);
+};
+
+const getStatusBarItemsRightDom = statusBarItemsRight => {
+  return getStatusBarItemsVirtualDom(statusBarItemsRight, StatusBarItemsRight);
+};
+
+const getChildCount = rightCount => {
+  return rightCount > 0 ? 2 : 1;
+};
+const getStatusBarVirtualDom = (statusBarItemsLeft, statusBarItemsRight) => {
+  const dom = [{
+    childCount: getChildCount(statusBarItemsRight.length),
+    className: 'StatusBar',
+    onClick: HandleClick,
+    onContextMenu: HandleContextMenu,
+    role: Status,
+    type: Div
+  }, ...getStatusBarItemsLeftDom(statusBarItemsLeft), ...getStatusBarItemsRightDom(statusBarItemsRight)];
+  return dom;
+};
+
+const renderItems = (oldState, newState) => {
+  const {
+    statusBarItemsLeft,
+    statusBarItemsRight,
+    uid
+  } = newState;
+  const dom = getStatusBarVirtualDom(statusBarItemsLeft, statusBarItemsRight);
+  return [SetDom2, uid, dom];
+};
+
+const getComponentDom = uid => {
+  const state = getComponentState(uid);
+  return renderItems(state, state)[2];
+};
+
 const getMatchingItemInternal = (items, name) => {
   for (const item of items) {
     if (item.name === name) {
@@ -1235,407 +1545,222 @@ const create$5 = (method, params) => {
 const create$4 = (id, method, params) => {
   const message = {
     id,
-    jsonrpc: Two,
-    method,
-    params
-  };
-  return message;
-};
-
-let id = 0;
-const create$3 = () => {
-  return ++id;
-};
-
-const registerPromise = map => {
-  const id = create$3();
-  const {
-    promise,
-    resolve
-  } = Promise.withResolvers();
-  map[id] = resolve;
-  return {
-    id,
-    promise
-  };
-};
-
-const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
-  const {
-    id,
-    promise
-  } = registerPromise(callbacks);
-  const message = create$4(id, method, params);
-  if (useSendAndTransfer && ipc.sendAndTransfer) {
-    ipc.sendAndTransfer(message);
-  } else {
-    ipc.send(message);
-  }
-  const responseMessage = await promise;
-  return unwrapJsonRpcResult(responseMessage);
-};
-const createRpc = ipc => {
-  const callbacks = Object.create(null);
-  ipc._resolve = (id, response) => {
-    const fn = callbacks[id];
-    if (!fn) {
-      console.warn(`callback ${id} may already be disposed`);
-      return;
-    }
-    fn(response);
-    delete callbacks[id];
-  };
-  const rpc = {
-    async dispose() {
-      await ipc?.dispose();
-    },
-    invoke(method, ...params) {
-      return invokeHelper(callbacks, ipc, method, params, false);
-    },
-    invokeAndTransfer(method, ...params) {
-      return invokeHelper(callbacks, ipc, method, params, true);
-    },
-    // @ts-ignore
-    ipc,
-    /**
-     * @deprecated
-     */
-    send(method, ...params) {
-      const message = create$5(method, params);
-      ipc.send(message);
-    }
-  };
-  return rpc;
-};
-
-const requiresSocket = () => {
-  return false;
-};
-const preparePrettyError = error => {
-  return error;
-};
-const logError = () => {
-  // handled by renderer worker
-};
-const handleMessage = event => {
-  const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
-  const actualExecute = event?.target?.execute || execute;
-  return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
-};
-
-const handleIpc = ipc => {
-  if ('addEventListener' in ipc) {
-    ipc.addEventListener('message', handleMessage);
-  } else if ('on' in ipc) {
-    // deprecated
-    ipc.on('message', handleMessage);
-  }
-};
-
-const listen$1 = async (module, options) => {
-  const rawIpc = await module.listen(options);
-  if (module.signal) {
-    module.signal(rawIpc);
-  }
-  const ipc = module.wrap(rawIpc);
-  return ipc;
-};
-
-const create$2 = async ({
-  commandMap,
-  isMessagePortOpen = true,
-  messagePort
-}) => {
-  // TODO create a commandMap per rpc instance
-  register(commandMap);
-  const rawIpc = await IpcParentWithMessagePort$1.create({
-    isMessagePortOpen,
-    messagePort
-  });
-  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
-  handleIpc(ipc);
-  const rpc = createRpc(ipc);
-  messagePort.start();
-  return rpc;
-};
-
-const create$1 = async ({
-  commandMap
-}) => {
-  // TODO create a commandMap per rpc instance
-  register(commandMap);
-  const ipc = await listen$1(IpcChildWithModuleWorkerAndMessagePort$1);
-  handleIpc(ipc);
-  const rpc = createRpc(ipc);
-  return rpc;
-};
-
-const createMockRpc = ({
-  commandMap
-}) => {
-  const invocations = [];
-  const invoke = (method, ...params) => {
-    invocations.push([method, ...params]);
-    const command = commandMap[method];
-    if (!command) {
-      throw new Error(`command ${method} not found`);
-    }
-    return command(...params);
-  };
-  const mockRpc = {
-    invocations,
-    invoke,
-    invokeAndTransfer: invoke
+    jsonrpc: Two,
+    method,
+    params
   };
-  return mockRpc;
+  return message;
 };
 
-const rpcs = Object.create(null);
-const set$6 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$3 = id => {
-  return rpcs[id];
-};
-const remove = id => {
-  delete rpcs[id];
+let id = 0;
+const create$3 = () => {
+  return ++id;
 };
 
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create = rpcId => {
+const registerPromise = map => {
+  const id = create$3();
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  map[id] = resolve;
   return {
+    id,
+    promise
+  };
+};
+
+const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
+  const {
+    id,
+    promise
+  } = registerPromise(callbacks);
+  const message = create$4(id, method, params);
+  if (useSendAndTransfer && ipc.sendAndTransfer) {
+    ipc.sendAndTransfer(message);
+  } else {
+    ipc.send(message);
+  }
+  const responseMessage = await promise;
+  return unwrapJsonRpcResult(responseMessage);
+};
+const createRpc = ipc => {
+  const callbacks = Object.create(null);
+  ipc._resolve = (id, response) => {
+    const fn = callbacks[id];
+    if (!fn) {
+      console.warn(`callback ${id} may already be disposed`);
+      return;
+    }
+    fn(response);
+    delete callbacks[id];
+  };
+  const rpc = {
     async dispose() {
-      const rpc = get$3(rpcId);
-      await rpc.dispose();
+      await ipc?.dispose();
     },
-    // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$3(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
+      return invokeHelper(callbacks, ipc, method, params, false);
     },
-    // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$3(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    registerMockRpc(commandMap) {
-      const mockRpc = createMockRpc({
-        commandMap
-      });
-      set$6(rpcId, mockRpc);
-      // @ts-ignore
-      mockRpc[Symbol.dispose] = () => {
-        remove(rpcId);
-      };
-      // @ts-ignore
-      return mockRpc;
-    },
-    set(rpc) {
-      set$6(rpcId, rpc);
-    }
-  };
-};
-
-const Status = 'status';
-
-const MaskIcon = 'MaskIcon';
-
-const Audio = 0;
-const Button$1 = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const H1 = 5;
-const Input = 6;
-const Kbd = 7;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const I = 16;
-const Img = 17;
-const Root = 0;
-const Ins = 20;
-const Del = 21;
-const H2 = 22;
-const H3 = 23;
-const H4 = 24;
-const H5 = 25;
-const H6 = 26;
-const Article = 27;
-const Aside = 28;
-const Footer = 29;
-const Header = 30;
-const Nav = 40;
-const Section = 41;
-const Search = 42;
-const Dd = 43;
-const Dl = 44;
-const Figcaption = 45;
-const Figure = 46;
-const Hr = 47;
-const Li = 48;
-const Ol = 49;
-const P = 50;
-const Pre = 51;
-const A = 53;
-const Abbr = 54;
-const Br = 55;
-const Cite = 56;
-const Data = 57;
-const Time = 58;
-const Tfoot = 59;
-const Ul = 60;
-const Video = 61;
-const TextArea = 62;
-const Select = 63;
-const Option = 64;
-const Code = 65;
-const Label = 66;
-const Dt = 67;
-const Iframe = 68;
-const Main = 69;
-const Strong = 70;
-const Em = 71;
-const Style = 72;
-const Html = 73;
-const Head = 74;
-const Title = 75;
-const Meta = 76;
-const Canvas = 77;
-const Form = 78;
-const BlockQuote = 79;
-const Quote = 80;
-const Circle = 81;
-const Defs = 82;
-const Ellipse = 83;
-const G = 84;
-const Line = 85;
-const Path = 86;
-const Polygon = 87;
-const Polyline = 88;
-const Rect = 89;
-const Svg = 90;
-const Use = 91;
-const Reference = 100;
-
-const VirtualDomElements = {
-  __proto__: null,
-  A,
-  Abbr,
-  Article,
-  Aside,
-  Audio,
-  BlockQuote,
-  Br,
-  Button: Button$1,
-  Canvas,
-  Circle,
-  Cite,
-  Code,
-  Col,
-  ColGroup,
-  Data,
-  Dd,
-  Defs,
-  Del,
-  Div,
-  Dl,
-  Dt,
-  Ellipse,
-  Em,
-  Figcaption,
-  Figure,
-  Footer,
-  Form,
-  G,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Head,
-  Header,
-  Hr,
-  Html,
-  I,
-  Iframe,
-  Img,
-  Input,
-  Ins,
-  Kbd,
-  Label,
-  Li,
-  Line,
-  Main,
-  Meta,
-  Nav,
-  Ol,
-  Option,
-  P,
-  Path,
-  Polygon,
-  Polyline,
-  Pre,
-  Quote,
-  Rect,
-  Reference,
-  Root,
-  Search,
-  Section,
-  Select,
-  Span,
-  Strong,
-  Style,
-  Svg,
-  TBody,
-  THead,
-  Table,
-  Td,
-  Text,
-  TextArea,
-  Tfoot,
-  Th,
-  Time,
-  Title,
-  Tr,
-  Ul,
-  Use,
-  Video
+      return invokeHelper(callbacks, ipc, method, params, true);
+    },
+    // @ts-ignore
+    ipc,
+    /**
+     * @deprecated
+     */
+    send(method, ...params) {
+      const message = create$5(method, params);
+      ipc.send(message);
+    }
+  };
+  return rpc;
 };
 
-const Button = 'event.button';
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const TargetName = 'event.target.name';
+const requiresSocket = () => {
+  return false;
+};
+const preparePrettyError = error => {
+  return error;
+};
+const logError = () => {
+  // handled by renderer worker
+};
+const handleMessage = event => {
+  const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
+  const actualExecute = event?.target?.execute || execute;
+  return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
+};
 
-const ExtensionManagementWorker = 9006;
-const RendererProcess = 1670;
-const RendererWorker = 1;
+const handleIpc = ipc => {
+  if ('addEventListener' in ipc) {
+    ipc.addEventListener('message', handleMessage);
+  } else if ('on' in ipc) {
+    // deprecated
+    ipc.on('message', handleMessage);
+  }
+};
 
-const SetDom2 = 'Viewlet.setDom2';
-const SetFocusContext = 'Viewlet.setFocusContext';
+const listen$1 = async (module, options) => {
+  const rawIpc = await module.listen(options);
+  if (module.signal) {
+    module.signal(rawIpc);
+  }
+  const ipc = module.wrap(rawIpc);
+  return ipc;
+};
+
+const create$2 = async ({
+  commandMap,
+  isMessagePortOpen = true,
+  messagePort
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const rawIpc = await IpcParentWithMessagePort$1.create({
+    isMessagePortOpen,
+    messagePort
+  });
+  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  messagePort.start();
+  return rpc;
+};
+
+const create$1 = async ({
+  commandMap
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const ipc = await listen$1(IpcChildWithModuleWorkerAndMessagePort$1);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  return rpc;
+};
+
+const createMockRpc = ({
+  commandMap
+}) => {
+  const invocations = [];
+  const invoke = (method, ...params) => {
+    invocations.push([method, ...params]);
+    const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
+    return command(...params);
+  };
+  const mockRpc = {
+    invocations,
+    invoke,
+    invokeAndTransfer: invoke
+  };
+  return mockRpc;
+};
+
+const rpcs = Object.create(null);
+const set$5 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$3 = id => {
+  return rpcs[id];
+};
+const remove = id => {
+  delete rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const create = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$3(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$3(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$3(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$5(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
+    set(rpc) {
+      set$5(rpcId, rpc);
+    }
+  };
+};
 
 const {
   invoke: invoke$3,
-  set: set$5
+  set: set$4
 } = create(ExtensionManagementWorker);
 
 const {
   invoke: invoke$2,
-  set: set$4
+  set: set$3
 } = create(RendererProcess);
 
 const {
   invoke: invoke$1,
-  set: set$3
+  set: set$2
 } = create(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
@@ -1741,6 +1866,27 @@ const handleContextMenu = async (state, button, x, y) => {
   return state;
 };
 
+let editorStatus;
+const get$2 = () => editorStatus;
+const applyUpdate = update => {
+  if (update === undefined) {
+    editorStatus = undefined;
+    return editorStatus;
+  }
+  // Older editor workers omit these fields; retain their original display defaults.
+  const next = {
+    endOfLine: 'lf',
+    insertSpaces: true,
+    ...editorStatus,
+    ...update
+  };
+  if (typeof next.column !== 'number' || typeof next.encoding !== 'string' || typeof next.endOfLine !== 'string' || typeof next.insertSpaces !== 'boolean' || typeof next.languageId !== 'string' || typeof next.line !== 'number' || typeof next.tabSize !== 'number') {
+    throw new TypeError('The first editor status update must contain a complete status');
+  }
+  editorStatus = next;
+  return editorStatus;
+};
+
 const textItem = (name, text, ariaLabel, tooltip) => ({
   ariaLabel,
   command: '',
@@ -1770,6 +1916,156 @@ const getEditorStatusBarItems = status => {
   return [textItem(EditorPosition, `Ln ${line}, Col ${column}`, `Line ${line}, Column ${column}`, 'Go to Line/Column'), textItem(EditorIndentation, indentationLabel, indentationLabel, 'Select Indentation'), textItem(EditorEncoding, encodingLabel, `Encoding: ${encodingLabel}`, 'Select Encoding'), textItem(EditorEndOfLine, endOfLineLabel, `End of Line: ${endOfLineLabel}`, 'Select End of Line Sequence'), textItem(EditorLanguage, languageId, `Language: ${languageId}`, 'Select Language Mode')];
 };
 
+const dependencies = {
+  [EditorEncoding]: ['encoding'],
+  [EditorEndOfLine]: ['endOfLine'],
+  [EditorIndentation]: ['insertSpaces', 'tabSize'],
+  [EditorLanguage]: ['languageId'],
+  [EditorPosition]: ['line', 'column']
+};
+const handleEditorStatusChanged = (state, editorStatus, previous = state) => {
+  const {
+    statusBarItemsRight
+  } = state;
+  const oldStatus = previous.editorStatus;
+  if (!editorStatus) {
+    if (!oldStatus) {
+      return state;
+    }
+    return {
+      ...state,
+      editorStatus,
+      statusBarItemsRight: statusBarItemsRight.filter(item => !isEditorStatus(item.name))
+    };
+  }
+  const replacements = new Map();
+  for (const item of getEditorStatusBarItems(editorStatus)) {
+    if (!oldStatus || dependencies[item.name].some(key => oldStatus[key] !== editorStatus[key])) {
+      replacements.set(item.name, item);
+    }
+  }
+  if (replacements.size === 0) {
+    return state;
+  }
+  const updatedItems = statusBarItemsRight.map(item => {
+    const replacement = replacements.get(item.name);
+    replacements.delete(item.name);
+    return replacement || item;
+  });
+  const notificationIndex = updatedItems.findIndex(item => item.name === Notifications);
+  updatedItems.splice(notificationIndex === -1 ? updatedItems.length : notificationIndex, 0, ...replacements.values());
+  return {
+    ...state,
+    editorStatus,
+    statusBarItemsRight: updatedItems
+  };
+};
+
+const renderIncremental = (oldState, newState) => {
+  return renderItems(oldState, newState);
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderIncremental:
+      return renderIncremental;
+    case RenderItems:
+      return renderItems;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
+  }
+  return commands;
+};
+
+const state = {
+  connected: false
+};
+const isConnected = () => {
+  const {
+    connected
+  } = state;
+  return connected;
+};
+const invoke = (method, ...params) => {
+  return invoke$2(method, ...params);
+};
+const set$1 = rpc => {
+  set$3(rpc);
+  state.connected = true;
+};
+
+const renderDirect = async (uid, commands) => {
+  const rendererWorkerCommands = commands.filter(command => command[0] === SetFocusContext);
+  const rendererProcessCommands = commands.filter(command => command[0] !== SetFocusContext);
+  const transactionId = await invoke('Viewlet.queueCommands', uid, rendererProcessCommands);
+  return [...rendererWorkerCommands, ['Viewlet.commitPending', uid, transactionId]];
+};
+const render2 = (uid, diffResult) => {
+  const {
+    newState,
+    oldState
+  } = get$5(uid);
+  set$6(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  if (!isConnected()) {
+    return commands;
+  }
+  return renderDirect(uid, commands);
+};
+
+const renderOutOfBand = async uid => {
+  if (!isConnected()) {
+    return;
+  }
+  const {
+    newState
+  } = get$5(uid);
+  if (newState.initial) {
+    return;
+  }
+  const diffResult = diff2(uid);
+  if (diffResult.length === 0) {
+    return;
+  }
+  const commands = await render2(uid, diffResult);
+  if (commands.length === 0) {
+    return;
+  }
+  await invoke('Viewlet.sendMultiple', commands);
+};
+
+const handleEditorStatusChangedAll = async update => {
+  const previous = {
+    editorStatus: get$2()
+  };
+  const editorStatus = applyUpdate(update);
+  const changedUids = [];
+  for (const uid of getKeys()) {
+    const {
+      newState,
+      oldState
+    } = get$5(uid);
+    const newerState = handleEditorStatusChanged(newState, editorStatus, previous);
+    if (newState === newerState || oldState === newerState) {
+      continue;
+    }
+    set$6(uid, oldState, newerState);
+    changedUids.push(uid);
+  }
+  await Promise.all(changedUids.map(renderOutOfBand));
+};
+
 const getAriaLabel = count => {
   if (count === 0) {
     return 'No Notifications';
@@ -1798,12 +2094,6 @@ const getNotificationsStatusBarItem = (enabled, count = 0) => {
   }];
 };
 
-const ProblemsErrorIcon = 'ProblemsErrorIcon';
-const ProblemsWarningIcon = 'ProblemsWarningIcon';
-const StatusBarItem = 'StatusBarItem';
-const StatusBarItemsLeft = 'StatusBarItemsLeft';
-const StatusBarItemsRight = 'StatusBarItemsRight';
-
 const getProblemsAriaLabel = (errorCount, warningCount) => {
   const parts = [];
   if (errorCount > 0) {
@@ -1985,205 +2275,6 @@ const handleItemsChanged = async state => {
   return handleExtensionsChanged(state);
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
-  };
-};
-
-new Set(Object.values(VirtualDomElements));
-
-const HandleContextMenu = 2;
-const HandleClick = 11;
-
-const getTextVirtualDom = (element, name) => {
-  return [{
-    childCount: 1,
-    className: 'StatusBarItemLabel',
-    name,
-    type: Span
-  }, text(element.value)];
-};
-const getIconVirtualDom = (element, name) => {
-  return [{
-    childCount: 0,
-    className: mergeClassNames(MaskIcon, 'StatusBarIcon', element.value, element.spinning ? 'Spinning' : ''),
-    name,
-    type: Div
-  }];
-};
-const getStatusBarItemElementVirtualDom = (element, name) => {
-  if (element.type === 'text') {
-    return getTextVirtualDom(element, name);
-  }
-  if (element.type === 'icon') {
-    return getIconVirtualDom(element, name);
-  }
-  return [];
-};
-
-const getStatusBarItemVirtualDom = statusBarItem => {
-  const {
-    ariaLabel,
-    elements,
-    name,
-    tooltip
-  } = statusBarItem;
-  const elementNodes = elements.flatMap(element => getStatusBarItemElementVirtualDom(element, name));
-  const buttonNode = {
-    ariaLabel,
-    childCount: elements.length,
-    className: StatusBarItem,
-    name,
-    tabIndex: -1,
-    title: tooltip,
-    type: Button$1
-  };
-  return [buttonNode, ...elementNodes];
-};
-
-const getStatusBarItemsVirtualDom = (items, className) => {
-  if (items.length === 0) {
-    return [];
-  }
-  return [{
-    childCount: items.length,
-    className,
-    type: Div
-  }, ...items.flatMap(getStatusBarItemVirtualDom)];
-};
-
-const emptyStatusBarItemsLeftDom = [{
-  childCount: 0,
-  className: StatusBarItemsLeft,
-  type: Div
-}];
-const getStatusBarItemsLeftDom = statusBarItemsLeft => {
-  if (statusBarItemsLeft.length === 0) {
-    return emptyStatusBarItemsLeftDom;
-  }
-  return getStatusBarItemsVirtualDom(statusBarItemsLeft, StatusBarItemsLeft);
-};
-
-const getStatusBarItemsRightDom = statusBarItemsRight => {
-  return getStatusBarItemsVirtualDom(statusBarItemsRight, StatusBarItemsRight);
-};
-
-const getChildCount = rightCount => {
-  return rightCount > 0 ? 2 : 1;
-};
-const getStatusBarVirtualDom = (statusBarItemsLeft, statusBarItemsRight) => {
-  const dom = [{
-    childCount: getChildCount(statusBarItemsRight.length),
-    className: 'StatusBar',
-    onClick: HandleClick,
-    onContextMenu: HandleContextMenu,
-    role: Status,
-    type: Div
-  }, ...getStatusBarItemsLeftDom(statusBarItemsLeft), ...getStatusBarItemsRightDom(statusBarItemsRight)];
-  return dom;
-};
-
-const renderItems = (oldState, newState) => {
-  const {
-    statusBarItemsLeft,
-    statusBarItemsRight,
-    uid
-  } = newState;
-  const dom = getStatusBarVirtualDom(statusBarItemsLeft, statusBarItemsRight);
-  return [SetDom2, uid, dom];
-};
-
-const renderIncremental = (oldState, newState) => {
-  return renderItems(oldState, newState);
-};
-
-const getRenderer = diffType => {
-  switch (diffType) {
-    case RenderIncremental:
-      return renderIncremental;
-    case RenderItems:
-      return renderItems;
-    default:
-      throw new Error('unknown renderer');
-  }
-};
-
-const applyRender = (oldState, newState, diffResult) => {
-  const commands = [];
-  for (const item of diffResult) {
-    const fn = getRenderer(item);
-    const result = fn(oldState, newState);
-    if (result.length > 0) {
-      commands.push(result);
-    }
-  }
-  return commands;
-};
-
-const state = {
-  connected: false
-};
-const isConnected = () => {
-  const {
-    connected
-  } = state;
-  return connected;
-};
-const invoke = (method, ...params) => {
-  return invoke$2(method, ...params);
-};
-const set$2 = rpc => {
-  set$4(rpc);
-  state.connected = true;
-};
-
-const renderDirect = async (uid, commands) => {
-  const rendererWorkerCommands = commands.filter(command => command[0] === SetFocusContext);
-  const rendererProcessCommands = commands.filter(command => command[0] !== SetFocusContext);
-  const transactionId = await invoke('Viewlet.queueCommands', uid, rendererProcessCommands);
-  return [...rendererWorkerCommands, ['Viewlet.commitPending', uid, transactionId]];
-};
-const render2 = (uid, diffResult) => {
-  const {
-    newState,
-    oldState
-  } = get$5(uid);
-  set$7(uid, newState, newState);
-  const commands = applyRender(oldState, newState, diffResult);
-  if (!isConnected()) {
-    return commands;
-  }
-  return renderDirect(uid, commands);
-};
-
-const renderOutOfBand = async uid => {
-  if (!isConnected()) {
-    return;
-  }
-  const {
-    newState
-  } = get$5(uid);
-  if (newState.initial) {
-    return;
-  }
-  const diffResult = diff2(uid);
-  if (diffResult.length === 0) {
-    return;
-  }
-  const commands = await render2(uid, diffResult);
-  if (commands.length === 0) {
-    return;
-  }
-  await invoke('Viewlet.sendMultiple', commands);
-};
-
 const handleExtensionManagementChange = async () => {
   for (const uid of getKeys()) {
     const {
@@ -2194,7 +2285,7 @@ const handleExtensionManagementChange = async () => {
     if (newState === newerState || oldState === newerState) {
       continue;
     }
-    set$7(uid, oldState, {
+    set$6(uid, oldState, {
       ...newState,
       ...newerState
     });
@@ -2221,15 +2312,15 @@ const handleNotificationCountChanged = (state, count) => {
 };
 
 let latestCount;
-const get$2 = () => {
+const get$1 = () => {
   return latestCount;
 };
-const set$1 = count => {
+const set = count => {
   latestCount = count;
 };
 
 const handleNotificationCountChangedAll = async count => {
-  set$1(count);
+  set(count);
   for (const uid of getKeys()) {
     const {
       newState,
@@ -2239,7 +2330,7 @@ const handleNotificationCountChangedAll = async count => {
     if (newState === newerState || oldState === newerState) {
       continue;
     }
-    set$7(uid, oldState, newerState);
+    set$6(uid, oldState, newerState);
     await renderOutOfBand(uid);
   }
 };
@@ -2254,61 +2345,10 @@ const handleExtensionManagementMessagePort = async port => {
     commandMap: commandMap$1,
     messagePort: port
   });
-  set$5(rpc);
-};
-
-let editorStatus;
-const get$1 = () => editorStatus;
-const set = value => {
-  editorStatus = value;
-};
-
-const equals = (oldStatus, newStatus) => {
-  if (!oldStatus || !newStatus) {
-    return oldStatus === newStatus;
-  }
-  return oldStatus.column === newStatus.column && oldStatus.endOfLine === newStatus.endOfLine && oldStatus.encoding === newStatus.encoding && oldStatus.insertSpaces === newStatus.insertSpaces && oldStatus.languageId === newStatus.languageId && oldStatus.line === newStatus.line && oldStatus.tabSize === newStatus.tabSize;
-};
-const updateItems = (items, status) => {
-  const remainingItems = items.filter(item => !isEditorStatus(item.name));
-  const editorItems = getEditorStatusBarItems(status);
-  if (editorItems.length === 0) {
-    return remainingItems;
-  }
-  const notificationIndex = remainingItems.findIndex(item => item.name === Notifications);
-  const insertIndex = notificationIndex === -1 ? remainingItems.length : notificationIndex;
-  return [...remainingItems.slice(0, insertIndex), ...editorItems, ...remainingItems.slice(insertIndex)];
-};
-const handleEditorStatusChanged = (state, editorStatus) => {
-  const {
-    editorStatus: oldEditorStatus,
-    statusBarItemsRight
-  } = state;
-  if (equals(oldEditorStatus, editorStatus)) {
-    return state;
-  }
-  return {
-    ...state,
-    editorStatus,
-    statusBarItemsRight: updateItems(statusBarItemsRight, editorStatus)
-  };
+  set$4(rpc);
 };
 
-const handleEditorStatusChangedAll = async editorStatus => {
-  set(editorStatus);
-  for (const uid of getKeys()) {
-    const {
-      newState,
-      oldState
-    } = get$5(uid);
-    const newerState = handleEditorStatusChanged(newState, editorStatus);
-    if (newState === newerState || oldState === newerState) {
-      continue;
-    }
-    set$7(uid, oldState, newerState);
-    await renderOutOfBand(uid);
-  }
-};
+const supportsEditorStatusDeltas = () => true;
 
 const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
   const executeViewletCommand = async (uid, command, ...args) => {
@@ -2322,12 +2362,13 @@ const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess =
   const rpc = await create$2({
     commandMap: {
       'StatusBar.handleEditorStatusChanged': handleEditorStatusChangedAll,
+      'StatusBar.supportsEditorStatusDeltas': supportsEditorStatusDeltas,
       'Viewlet.executeViewletCommand': executeViewletCommand
     },
     messagePort: port
   });
   if (setAsRendererProcess) {
-    set$2(rpc);
+    set$1(rpc);
   }
 };
 
@@ -2432,7 +2473,7 @@ const loadContent = async state => {
     platform,
     warningCount
   } = state;
-  const editorStatus = get$1();
+  const editorStatus = get$2();
   const {
     builtinNotificationsEnabled,
     builtinProblemsEnabled,
@@ -2457,13 +2498,34 @@ const loadContent = async state => {
     statusBarItemsRight: statusBarItems.filter(item => isRight(item.name)),
     warningCount: 0
   };
-  const latestNotificationCount = get$2();
+  const currentState = itemsVisible ? handleEditorStatusChanged(loadedState, get$2()) : loadedState;
+  const latestNotificationCount = get$1();
   if (latestNotificationCount === undefined) {
-    return loadedState;
+    return currentState;
   }
-  return handleNotificationCountChanged(loadedState, latestNotificationCount);
+  return handleNotificationCountChanged(currentState, latestNotificationCount);
 };
 
+const refreshExtensionItems = wrapSerialAsyncCommand(async context => {
+  const state = context.getState();
+  const {
+    statusBarItemsLeft
+  } = state;
+  const updated = await handleItemsChanged(state);
+  if (updated === state) {
+    return;
+  }
+  await context.updateState(current => {
+    if (current.statusBarItemsLeft !== statusBarItemsLeft) {
+      return current;
+    }
+    return {
+      ...current,
+      statusBarItemsLeft: updated.statusBarItemsLeft
+    };
+  });
+});
+
 const renderEventListeners = () => {
   return [{
     name: HandleContextMenu,
@@ -2512,7 +2574,6 @@ const setComponentState = wrapCommand(applyComponentState);
 
 const handleDirectMessagePort = (port, setAsRendererProcess = true) => handleMessagePort(port, commandMap, setAsRendererProcess);
 const activateOnWorkspaceChange = wrapCommand(handleWorkspaceChange);
-const refreshExtensionItems = wrapSerialCommand(handleItemsChanged);
 const handleWorkspaceChangeAndRefresh = async (uid, workspacePath) => {
   await activateOnWorkspaceChange(uid, workspacePath);
   await refreshExtensionItems(uid);
@@ -2521,13 +2582,15 @@ const commandMap = {
   'StatusBar.create': create$7,
   'StatusBar.diff2': diff2,
   'StatusBar.getCommandIds': getCommandIds,
+  'StatusBar.getComponentDom': getComponentDom,
   'StatusBar.getComponentState': getComponentState,
-  'StatusBar.handleChange': wrapSerialCommand(handleItemsChanged),
+  'StatusBar.handleChange': refreshExtensionItems,
   'StatusBar.handleClick': wrapCommand(handleClick),
   'StatusBar.handleContextMenu': wrapCommand(handleContextMenu),
+  'StatusBar.handleEditorStatusChanged': handleEditorStatusChangedAll,
   'StatusBar.handleExtensionManagementMessagePort': handleExtensionManagementMessagePort,
-  'StatusBar.handleExtensionsChanged': wrapCommand(handleExtensionsChanged),
-  'StatusBar.handleItemsChanged': wrapSerialCommand(handleItemsChanged),
+  'StatusBar.handleExtensionsChanged': refreshExtensionItems,
+  'StatusBar.handleItemsChanged': refreshExtensionItems,
   'StatusBar.handleMessagePort': handleDirectMessagePort,
   'StatusBar.handleNotificationCountChanged': wrapCommand(handleNotificationCountChanged),
   'StatusBar.handleProblemsSummaryChange': wrapCommand(handleProblemsSummaryChange),
@@ -2542,6 +2605,7 @@ const commandMap = {
   'StatusBar.resize': wrapCommand(resize),
   'StatusBar.saveState': wrapGetter(saveState),
   'StatusBar.setComponentState': setComponentState,
+  'StatusBar.supportsEditorStatusDeltas': supportsEditorStatusDeltas,
   'StatusBar.terminate': terminate
 };
 
@@ -2549,7 +2613,7 @@ const initializeRenderWorker = async () => {
   const rpc = await create$1({
     commandMap: commandMap
   });
-  set$3(rpc);
+  set$2(rpc);
 };
 
 const listen = async () => {