@lvce-editor/activity-bar-worker 1.3.0 → 1.5.0

package/dist/activityBarWorkerMain.js

@@ -969,6 +969,49 @@ const create$1 = (id, uri, x, y, width, height, args, parentUid, platform = 0) =
   return state;
 };
 
+const isEqual$2 = (oldState, newState) => {
+  // TODO compute css more optimized
+  // maybe only when items change, and even then not
+  // always, but only when it affects the css
+  return false;
+};
+
+const isEqual$1 = (oldState, newState) => {
+  return oldState.focused === newState.focused && oldState.focus === newState.focus;
+};
+
+const isEqual = (oldState, newState) => {
+  return oldState.focusedIndex === newState.focusedIndex && oldState.activityBarItems === newState.activityBarItems;
+};
+
+const RenderItems = 4;
+const RenderFocus = 6;
+const RenderFocusContext = 7;
+const RenderCss = 11;
+
+const modules = [isEqual, isEqual$1, isEqual$1, isEqual$2];
+const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderCss];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const diff2 = uid => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  const result = diff(oldState, newState);
+  return result;
+};
+
 const List = 1;
 
 const focus = state => {
@@ -1011,13 +1054,10 @@ const focusNone = state => {
   return focusIndex(state, -1);
 };
 
-const Button = 'event.button';
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const CtrlKey = 'event.ctrlKey';
-const DeltaMode = 'event.deltaMode';
-const DeltaY = 'event.deltaY';
-const TargetValue = 'event.target.value';
+const Button$1 = 'button';
+const None = 'none';
+const Tab$1 = 'tab';
+const ToolBar = 'toolbar';
 
 const Enter = 3;
 const Space = 9;
@@ -1033,7 +1073,11 @@ const LeftClick = 0;
 const DebugWorker = 55;
 const RendererWorker$1 = 1;
 
+const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
+
 const FocusActivityBar = 5;
+const FocusExplorer = 13;
 
 const getKeyBindings$1 = () => {
   return [{
@@ -1521,6 +1565,10 @@ const handleClick = async (state, button, index, x, y) => {
   }
 };
 
+const handleResize = state => {
+  return state;
+};
+
 const findIndex = (activityBarItems, id) => {
   for (let i = 0; i < activityBarItems.length; i++) {
     if (activityBarItems[i].id === id) {
@@ -1538,106 +1586,317 @@ const handleSideBarViewletChange = (state, id, ...args) => {
   };
 };
 
+const Tab = 1;
+const Button = 1 << 1;
+const Progress = 1 << 2;
+const Enabled = 1 << 3;
+const Selected = 1 << 4;
+const Focused = 1 << 5;
+const MarginTop = 1 << 6;
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const Explorer$1 = 'Explorer';
+const Search$2 = 'Search';
+const SourceControl$2 = 'Source Control';
+const RunAndDebug$1 = 'Run and Debug';
+const Extensions$2 = 'Extensions';
+const Settings = 'Settings';
+const ActivityBar$2 = 'Activity Bar';
+
+const explorer = () => {
+  return i18nString(Explorer$1);
+};
+const search = () => {
+  return i18nString(Search$2);
+};
+const sourceControl = () => {
+  return i18nString(SourceControl$2);
+};
+const runAndDebug = () => {
+  return i18nString(RunAndDebug$1);
+};
+const extensions = () => {
+  return i18nString(Extensions$2);
+};
+const settings = () => {
+  return i18nString(Settings);
+};
+const activityBar = () => {
+  return i18nString(ActivityBar$2);
+};
+
+const DebugAlt2 = 'DebugAlt2';
+const Extensions$1 = 'Extensions';
+const Files = 'Files';
+const Search$1 = 'Search';
+const SettingsGear = 'SettingsGear';
+const SourceControl$1 = 'SourceControl';
+
+const Explorer = 'Explorer';
+const Extensions = 'Extensions';
+const RunAndDebug = 'Run And Debug';
+const Search = 'Search';
+const SourceControl = 'Source Control';
+
+const getActivityBarItems = () => {
+  return [
+  // Top
+  {
+    id: Explorer,
+    title: explorer(),
+    icon: Files,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+E'
+  }, {
+    id: Search,
+    title: search(),
+    icon: Search$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+F'
+  }, {
+    id: SourceControl,
+    title: sourceControl(),
+    icon: SourceControl$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+G'
+  }, {
+    id: RunAndDebug,
+    title: runAndDebug(),
+    icon: DebugAlt2,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+D'
+  }, {
+    id: Extensions,
+    title: extensions(),
+    icon: Extensions$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+X'
+  },
+  // Bottom
+  {
+    id: 'Settings',
+    title: settings(),
+    icon: SettingsGear,
+    flags: Button | Enabled | MarginTop,
+    keyShortcuts: ''
+  }];
+};
+
 const loadContent = async (state, savedState) => {
+  const items = getActivityBarItems();
   return {
-    ...state
+    ...state,
+    activityBarItems: items
   };
 };
 
+const renderCss = (oldState, newState) => {
+  return [];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  if (newState.focus === List) {
+    return [SetFocusContext, newState.uid, FocusExplorer];
+  }
+  return [];
+};
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const Vertical = 'vertical';
+
+const ActivityBar$1 = 'ActivityBar';
+const ActivityBarItem = 'ActivityBarItem';
+const ActivityBarItemNested = 'ActivityBarItemNested';
+const ActivityBarItemSelected = 'ActivityBarItemSelected';
+const Badge = 'Badge';
+const BadgeContent = 'BadgeContent';
+const FocusOutline = 'FocusOutline';
+const Icon = 'Icon';
+const MarginTopAuto = 'MarginTopAuto';
+const Viewlet = 'Viewlet';
+
+const HandleBlur = 'handleBlur';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFocus = 'handleFocus';
+const HandleMouseDown = 'handleMouseDown';
+
+const ActivityBar = 'ActivityBar';
+
+const Div = 4;
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: None,
+    childCount: 0
+  };
+};
+
+const getAriaSelected = (isTab, isSelected) => {
+  if (!isTab) {
+    return undefined;
+  }
+  return Boolean(isSelected);
+};
+const createActivityBarItem = item => {
+  const {
+    flags,
+    title,
+    icon
+  } = item;
+  const isTab = flags & Tab;
+  const isSelected = flags & Selected;
+  const isFocused = flags & Focused;
+  const isProgress = flags & Progress;
+  const role = isTab ? Tab$1 : Button$1;
+  const ariaSelected = getAriaSelected(isTab, isSelected);
+  const marginTop = flags & MarginTop;
+  let className = ActivityBarItem;
+  if (isFocused) {
+    className += ' ' + FocusOutline;
+  }
+  if (marginTop) {
+    className += ' ' + MarginTopAuto;
+  }
+  if (isSelected) {
+    className += ' ' + ActivityBarItemSelected;
+    return [{
+      type: Div,
+      className,
+      ariaLabel: '',
+      title,
+      role,
+      ariaSelected,
+      childCount: 1
+    }, getIconVirtualDom(icon)];
+  }
+
+  // TODO support progress on selected activity bar item
+  if (isProgress) {
+    className += ' ' + ActivityBarItemNested;
+    return [{
+      type: Div,
+      className,
+      ariaLabel: '',
+      title,
+      role,
+      ariaSelected,
+      childCount: 2
+    }, {
+      type: Div,
+      className: Icon,
+      role: None,
+      childCount: 0,
+      maskImage: icon
+    }, {
+      type: Div,
+      className: Badge,
+      childCount: 1
+    }, {
+      type: Div,
+      className: BadgeContent,
+      childCount: 1
+    }, {
+      type: Div,
+      className: Icon,
+      maskImage: 'Progress'
+    }];
+  }
+  return [{
+    type: Div,
+    className: `${className} Icon${icon}`,
+    ariaLabel: '',
+    title,
+    role,
+    ariaSelected,
+    childCount: 0
+  }];
+};
+const getVirtualDom = visibleItems => {
+  const dom = visibleItems.flatMap(createActivityBarItem);
+  return dom;
+};
+
+const getActivityBarVirtualDom = visibleItems => {
+  return [{
+    type: Div,
+    id: ActivityBar,
+    className: mergeClassNames(Viewlet, ActivityBar$1),
+    role: ToolBar,
+    ariaRoleDescription: activityBar(),
+    ariaOrientation: Vertical,
+    tabIndex: 0,
+    onMouseDown: HandleMouseDown,
+    onContextMenu: HandleContextMenu,
+    onFocus: HandleFocus,
+    onBlur: HandleBlur,
+    childCount: visibleItems.length
+  }, ...getVirtualDom(visibleItems)];
+};
+
+const renderItems = (oldState, newState) => {
+  const {
+    uid,
+    activityBarItems
+  } = newState;
+  const dom = getActivityBarVirtualDom(activityBarItems);
+  return [SetDom2, uid, dom];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderItems:
+      return renderItems;
+    case RenderFocusContext:
+      return renderFocusContext;
+    case RenderFocus:
+      return renderFocusContext;
+    case RenderCss:
+      return renderCss;
+    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 render2 = (uid, diffResult) => {
   const {
+    oldState,
     newState
   } = get$1(uid);
   set$3(uid, newState, newState);
-  const commands = applyRender();
+  const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
 
-const HandleClick = 1;
-const HandleClickOpenFolder = 2;
-const HandleContextMenu = 3;
-const HandleDragLeave = 4;
-const HandleDragOver = 5;
-const HandleDrop = 6;
-const HandleEditingInput = 7;
-const HandleInputBlur = 8;
-const HandleInputClick = 9;
-const HandleListBlur = 11;
-const HandleListFocus = 12;
-const HandlePointerDown = 14;
-const HandleWheel = 15;
-const HandleDragStart = 17;
-
 const renderEventListeners = () => {
-  return [{
-    name: HandleInputBlur,
-    params: ['handleInputBlur']
-  },
-  // {
-  //   name: DomEventListenersFunctions.HandleInputKeyDown,
-  //   params: ['handleInputKeyDown'],
-  //   stopPropagation: true, // TODO find a way to do this without stopPropagation
-  // },
-  // {
-  //   name: DomEventListenersFunctions.HandleListKeyDown,
-  //   params: ['handleKeyDown', 'event.key'],
-  //   preventDefault: true,
-  // },
-  {
-    name: HandleListFocus,
-    params: ['handleFocus', 'event.isTrusted', 'event.target.className']
-  }, {
-    name: HandleListBlur,
-    params: ['handleBlur']
-  }, {
-    name: HandleClick,
-    params: ['handleClickAt', 'event.defaultPrevented', Button, CtrlKey, 'event.shiftKey', ClientX, ClientY],
-    preventDefault: true
-  }, {
-    name: HandleInputClick,
-    params: ['handleInputClick'],
-    preventDefault: true
-  }, {
-    name: HandleClickOpenFolder,
-    params: ['handleClickOpenFolder'],
-    preventDefault: true
-  }, {
-    name: HandlePointerDown,
-    params: ['handlePointerDown', Button, ClientX, ClientY]
-    // preventDefault: true,
-  }, {
-    name: HandleEditingInput,
-    params: ['updateEditingValue', TargetValue]
-  }, {
-    name: HandleContextMenu,
-    params: ['handleContextMenu', Button, ClientX, ClientY],
-    preventDefault: true
-  }, {
-    name: HandleWheel,
-    params: ['handleWheel', DeltaMode, DeltaY],
-    passive: true
-  }, {
-    name: HandleDragOver,
-    params: ['handleDragOver', ClientX, ClientY],
-    preventDefault: true
-  }, {
-    name: HandleDrop,
-    params: ['handleDrop', ClientX, ClientY, 'event.dataTransfer.files2', 'event.dataTransfer.files'],
-    preventDefault: true
-  }, {
-    name: HandleDragLeave,
-    params: ['handleDragLeave']
-  }, {
-    name: HandleDragStart,
-    params: ['handleDragStart'],
-    // @ts-ignore
-    dragEffect: 'copyMove'
-  }];
+  return [];
 };
 
 const saveState = state => {
@@ -1650,23 +1909,25 @@ const saveState = state => {
 };
 
 const commandMap = {
+  'ActivityBar.create': create$1,
+  'ActivityBar.diff2': diff2,
   'ActivityBar.focus': wrapCommand(focus),
   'ActivityBar.focusFirst': wrapCommand(focusFirst),
   'ActivityBar.focusIndex': wrapCommand(focusIndex),
-  'ActivityBar.loadContent': wrapCommand(loadContent),
   'ActivityBar.focusLast': wrapCommand(focusLast),
   'ActivityBar.focusNext': wrapCommand(focusNext),
-  'ActivityBar.handleBlur': wrapCommand(handleBlur),
   'ActivityBar.focusNone': wrapCommand(focusNone),
-  'ActivityBar.handleSideBarViewletChange': wrapCommand(handleSideBarViewletChange),
+  'ActivityBar.getCommandIds': getCommandIds,
   'ActivityBar.getKeyBindings': getKeyBindings$1,
+  'ActivityBar.handleBlur': wrapCommand(handleBlur),
+  'ActivityBar.handleResize': wrapCommand(handleResize),
   'ActivityBar.handleClick': wrapCommand(handleClick),
-  'ActivityBar.getCommandIds': getCommandIds,
+  'ActivityBar.handleSideBarViewletChange': wrapCommand(handleSideBarViewletChange),
+  'ActivityBar.loadContent': wrapCommand(loadContent),
   'ActivityBar.render2': render2,
   'ActivityBar.renderEventListeners': renderEventListeners,
   'ActivityBar.saveState': wrapGetter(saveState),
-  'ActivityBar.terminate': terminate,
-  'ActivityBar.create': create$1
+  'ActivityBar.terminate': terminate
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/activity-bar-worker",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",