Split simple-bar & yabai context in order to optimize rerenders + add…

… memo on spaces & process widgets

index.jsx

@@ -1,6 +1,6 @@
 import UserWidgets from "./lib/components/data/user-widgets.jsx";
 import * as Error from "./lib/components/error.jsx";
-import ContextProvider from "./lib/components/context.jsx";
+import SimpleBarContextProvider from "./lib/components/simple-bar-context.jsx";
 import * as Spaces from "./lib/components/spaces/spaces.jsx";
 import * as Process from "./lib/components/spaces/process.jsx";
 import * as Variables from "./lib/styles/core/variables";
@@ -29,6 +29,7 @@ import * as DataWidgetLoader from "./lib/components/data/data-widget-loader.jsx"
 import * as DataWidget from "./lib/components/data/data-widget.jsx";
 import * as Utils from "./lib/utils";
 import * as Settings from "./lib/settings";
+import YabaiContextProvider from "./lib/components/yabai-context.jsx";
 
 const refreshFrequency = false;
 
@@ -109,17 +110,20 @@ const render = ({ output, error }) => {
   Utils.handleBarFocus();
 
   return (
-    <ContextProvider
+    <SimpleBarContextProvider
       initialSettings={settings}
-      SIPDisabled={SIPDisabled}
       displays={displays}
-      spaces={spaces}
-      windows={windows}
-      skhdMode={skhdMode}
+      SIPDisabled={SIPDisabled}
     >
       <div className={classes}>
-        <Spaces.Component />
-        <Process.Component />
+        <YabaiContextProvider
+          spaces={spaces}
+          windows={windows}
+          skhdMode={skhdMode}
+        >
+          <Spaces.Component />
+          <Process.Component />
+        </YabaiContextProvider>
         <Settings.Wrapper />
         <div className="simple-bar__data">
           <UserWidgets />
@@ -143,7 +147,7 @@ const render = ({ output, error }) => {
           <Time.Widget />
         </div>
       </div>
-    </ContextProvider>
+    </SimpleBarContextProvider>
   );
 };
 

lib/components/data/battery.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { batteryStyles as styles } from "../../styles/components/data/battery";

lib/components/data/browser-track.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { browserTrackStyles as styles } from "../../styles/components/data/browser-track";

lib/components/data/cpu.jsx

@@ -5,7 +5,7 @@ import Graph from "./graph.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { cpuStyles as styles } from "../../styles/components/data/cpu";

lib/components/data/crypto.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { cryptoStyles as styles } from "../../styles/components/data/crypto";

lib/components/data/date-display.jsx

@@ -5,7 +5,7 @@ import * as Icons from "../icons.jsx";
 import * as Utils from "../../utils";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 
 export { dateStyles as styles } from "../../styles/components/data/date-display";
 

lib/components/data/keyboard.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { keyboardStyles as styles } from "../../styles/components/data/keyboard";

lib/components/data/mic.jsx

@@ -5,7 +5,7 @@ import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import * as Utils from "../../utils";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 
 const { React } = Uebersicht;
 

lib/components/data/mpd.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { mpdStyles as styles } from "../../styles/components/data/mpd";

lib/components/data/music.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { musicStyles as styles } from "../../styles/components/data/music";

lib/components/data/netstats.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import Graph from "./graph.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh.js";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Icons from "../icons.jsx";
 import * as Utils from "../../utils.js";
 

lib/components/data/sound.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { soundStyles as styles } from "../../styles/components/data/sound";

lib/components/data/spotify.jsx

@@ -3,7 +3,7 @@ import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Icons from "../icons.jsx";
 import * as Utils from "../../utils";
 

lib/components/data/stock.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { stockStyles as styles } from "../../styles/components/data/stock";

lib/components/data/time.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { timeStyles as styles } from "../../styles/components/data/time";

lib/components/data/user-widgets.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Settings from "../../settings";
 import * as Utils from "../../utils";
 

lib/components/data/viscosity-vpn.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { viscosityVPNStyles as styles } from "../../styles/components/data/viscosity-vpn";

lib/components/data/weather.jsx

@@ -5,7 +5,7 @@ import * as Icons from "../icons.jsx";
 import * as Utils from "../../utils";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 
 export { weatherStyles as styles } from "../../styles/components/data/weather";
 

lib/components/data/wifi.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { wifiStyles as styles } from "../../styles/components/data/wifi";

lib/components/data/zoom.jsx

@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import * as Icons from "../icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 export { zoomStyles as styles } from "../../styles/components/data/zoom";

lib/components/context.jsx → lib/components/simple-bar-context.jsx

@@ -11,15 +11,10 @@ const SimpleBarContext = React.createContext({
 
 export const useSimpleBarContext = () => React.useContext(SimpleBarContext);
 
-export default React.memo(ContextProvider);
-
-function ContextProvider({
+export default function SimpleBarContextProvider({
   initialSettings,
-  spaces,
-  windows,
   displays,
   SIPDisabled,
-  skhdMode,
   children,
 }) {
   const [settings, setSettings] = React.useState(initialSettings);
@@ -35,10 +30,6 @@ function ContextProvider({
         SIPDisabled,
         settings,
         setSettings,
-        spaces,
-        windows,
-        displays,
-        skhdMode,
       }}
     >
       {children}

lib/components/spaces/opened-apps.jsx

@@ -1,7 +1,7 @@
 import * as AppIcons from "../../app-icons";
 import * as Utils from "../../utils";
 
-const OpenedApps = ({ apps }) => {
+export default function OpenedApps({ apps }) {
   if (!apps.length) return null;
   return Utils.sortWindows(apps).map((app, i) => {
     const {
@@ -29,6 +29,4 @@ const OpenedApps = ({ apps }) => {
 
     return <Icon className={classes} key={i} />;
   });
-};
-
-export default OpenedApps;
+}

lib/components/spaces/process.jsx

@@ -1,12 +1,16 @@
+import * as Uebersicht from "uebersicht";
 import Window from "./window.jsx";
 import * as Utils from "../../utils";
-import { useSimpleBarContext } from "../context.jsx";
+import { useYabaiContext } from "../yabai-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 
 export { processStyles as styles } from "../../styles/components/process";
 
-export const Component = () => {
-  const { displayIndex, spaces, windows, skhdMode, settings } =
-    useSimpleBarContext();
+const { React } = Uebersicht;
+
+export const Component = React.memo(() => {
+  const { spaces, windows, skhdMode } = useYabaiContext();
+  const { displayIndex, settings } = useSimpleBarContext();
   const { process, spacesDisplay, widgets } = settings;
   const { processWidget } = widgets;
   const { exclusionsAsRegex } = spacesDisplay;
@@ -78,4 +82,6 @@ export const Component = () => {
       </div>
     </div>
   );
-};
+});
+
+Component.displayName = "Process";

lib/components/spaces/space-options.jsx

@@ -1,5 +1,5 @@
 import * as Icons from "../icons.jsx";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 import * as Yabai from "../../yabai";
 

lib/components/spaces/space.jsx

@@ -1,14 +1,21 @@
 import * as Uebersicht from "uebersicht";
 import OpenedApps from "./opened-apps.jsx";
 import SpaceOptions from "./space-options.jsx";
-import { useSimpleBarContext } from "../context.jsx";
+import { useYabaiContext } from "../yabai-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 import * as Yabai from "../../yabai";
 
 const { React } = Uebersicht;
 
-const Space = ({ space, display, currentSpaceIndex, lastOfSpace }) => {
-  const { SIPDisabled, windows, settings } = useSimpleBarContext();
+export default function Space({
+  space,
+  display,
+  currentSpaceIndex,
+  lastOfSpace,
+}) {
+  const { windows } = useYabaiContext();
+  const { SIPDisabled, settings } = useSimpleBarContext();
   const { spacesDisplay } = settings;
   const {
     displayAllSpacesOnAllScreens,
@@ -150,6 +157,4 @@ const Space = ({ space, display, currentSpaceIndex, lastOfSpace }) => {
       </div>
     </React.Fragment>
   );
-};
-
-export default Space;
+}

lib/components/spaces/spaces.jsx

@@ -2,17 +2,18 @@ import * as Uebersicht from "uebersicht";
 import Space from "./space.jsx";
 import Stickies from "./stickies.jsx";
 import * as Icons from "../icons.jsx";
+import { useYabaiContext } from "../yabai-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 import * as Yabai from "../../yabai";
-import { useSimpleBarContext } from "../context.jsx";
 
 export { spacesStyles as styles } from "../../styles/components/spaces/spaces";
 
 const { React } = Uebersicht;
 
 export const Component = React.memo(() => {
-  const { SIPDisabled, displayIndex, spaces, windows, settings } =
-    useSimpleBarContext();
+  const { spaces, windows } = useYabaiContext();
+  const { SIPDisabled, displayIndex, settings } = useSimpleBarContext();
   const { spacesDisplay, process } = settings;
   const {
     displayStickyWindowsSeparately,

lib/components/spaces/stickies.jsx

@@ -1,12 +1,14 @@
 import * as Uebersicht from "uebersicht";
 import OpenedApps from "./opened-apps.jsx";
-import { useSimpleBarContext } from "../context.jsx";
+import { useYabaiContext } from "../yabai-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 
 const { React } = Uebersicht;
 
 const Stickies = ({ display }) => {
-  const { settings, windows } = useSimpleBarContext();
+  const { windows } = useYabaiContext();
+  const { settings } = useSimpleBarContext();
   const { spacesDisplay } = settings;
   const { exclusionsAsRegex, hideDuplicateAppsInSpaces } = spacesDisplay;
   const exclusions = exclusionsAsRegex

lib/components/spaces/window.jsx

@@ -1,6 +1,6 @@
 import * as Uebersicht from "uebersicht";
 import * as AppIcons from "../../app-icons";
-import { useSimpleBarContext } from "../context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
 import * as Utils from "../../utils";
 import * as Yabai from "../../yabai";