From 89b36bd629148f06bbf1530406031b5d07e430ca Mon Sep 17 00:00:00 2001 From: Jean Tinland Date: Mon, 25 Dec 2023 11:03:36 +0100 Subject: [PATCH] Split simple-bar & yabai context in order to optimize rerenders + add memo on spaces & process widgets --- index.jsx | 22 ++++++++++-------- lib/components/data/battery.jsx | 2 +- lib/components/data/browser-track.jsx | 2 +- lib/components/data/cpu.jsx | 2 +- lib/components/data/crypto.jsx | 2 +- lib/components/data/date-display.jsx | 2 +- lib/components/data/keyboard.jsx | 2 +- lib/components/data/mic.jsx | 2 +- lib/components/data/mpd.jsx | 2 +- lib/components/data/music.jsx | 2 +- lib/components/data/netstats.jsx | 2 +- lib/components/data/sound.jsx | 2 +- lib/components/data/spotify.jsx | 2 +- lib/components/data/stock.jsx | 2 +- lib/components/data/time.jsx | 2 +- lib/components/data/user-widgets.jsx | 2 +- lib/components/data/viscosity-vpn.jsx | 2 +- lib/components/data/weather.jsx | 2 +- lib/components/data/wifi.jsx | 2 +- lib/components/data/zoom.jsx | 2 +- .../{context.jsx => simple-bar-context.jsx} | 11 +-------- lib/components/spaces/opened-apps.jsx | 6 ++--- lib/components/spaces/process.jsx | 16 +++++++++---- lib/components/spaces/space-options.jsx | 2 +- lib/components/spaces/space.jsx | 17 +++++++++----- lib/components/spaces/spaces.jsx | 7 +++--- lib/components/spaces/stickies.jsx | 6 +++-- lib/components/spaces/window.jsx | 2 +- lib/components/yabai-context.jsx | 23 +++++++++++++++++++ lib/hooks/use-server-socket.js | 2 +- 30 files changed, 91 insertions(+), 61 deletions(-) rename lib/components/{context.jsx => simple-bar-context.jsx} (81%) create mode 100644 lib/components/yabai-context.jsx diff --git a/index.jsx b/index.jsx index c701d761..d79b2701 100644 --- a/index.jsx +++ b/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 ( -
- - + + + +
@@ -143,7 +147,7 @@ const render = ({ output, error }) => {
- + ); }; diff --git a/lib/components/data/battery.jsx b/lib/components/data/battery.jsx index 8ae349e4..ac499052 100644 --- a/lib/components/data/battery.jsx +++ b/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"; diff --git a/lib/components/data/browser-track.jsx b/lib/components/data/browser-track.jsx index b7e51dec..9145e9e7 100644 --- a/lib/components/data/browser-track.jsx +++ b/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"; diff --git a/lib/components/data/cpu.jsx b/lib/components/data/cpu.jsx index f803c187..9206f662 100644 --- a/lib/components/data/cpu.jsx +++ b/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"; diff --git a/lib/components/data/crypto.jsx b/lib/components/data/crypto.jsx index 381da0f3..c21d663e 100644 --- a/lib/components/data/crypto.jsx +++ b/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"; diff --git a/lib/components/data/date-display.jsx b/lib/components/data/date-display.jsx index 2adf08a0..f81e5c36 100644 --- a/lib/components/data/date-display.jsx +++ b/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"; diff --git a/lib/components/data/keyboard.jsx b/lib/components/data/keyboard.jsx index b7005353..157deb80 100644 --- a/lib/components/data/keyboard.jsx +++ b/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"; diff --git a/lib/components/data/mic.jsx b/lib/components/data/mic.jsx index e70d8b95..140f5763 100644 --- a/lib/components/data/mic.jsx +++ b/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; diff --git a/lib/components/data/mpd.jsx b/lib/components/data/mpd.jsx index eadc3654..97d96685 100644 --- a/lib/components/data/mpd.jsx +++ b/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"; diff --git a/lib/components/data/music.jsx b/lib/components/data/music.jsx index 3b4ff878..3af859f3 100644 --- a/lib/components/data/music.jsx +++ b/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"; diff --git a/lib/components/data/netstats.jsx b/lib/components/data/netstats.jsx index 21c7d87d..c843816a 100644 --- a/lib/components/data/netstats.jsx +++ b/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"; diff --git a/lib/components/data/sound.jsx b/lib/components/data/sound.jsx index b5bf9e50..d37ae56c 100644 --- a/lib/components/data/sound.jsx +++ b/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"; diff --git a/lib/components/data/spotify.jsx b/lib/components/data/spotify.jsx index b184e56d..506bc3f7 100644 --- a/lib/components/data/spotify.jsx +++ b/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"; diff --git a/lib/components/data/stock.jsx b/lib/components/data/stock.jsx index e3e2ac27..904de9f3 100644 --- a/lib/components/data/stock.jsx +++ b/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"; diff --git a/lib/components/data/time.jsx b/lib/components/data/time.jsx index 389976a4..d51db163 100644 --- a/lib/components/data/time.jsx +++ b/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"; diff --git a/lib/components/data/user-widgets.jsx b/lib/components/data/user-widgets.jsx index 2325c032..751e1c81 100644 --- a/lib/components/data/user-widgets.jsx +++ b/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"; diff --git a/lib/components/data/viscosity-vpn.jsx b/lib/components/data/viscosity-vpn.jsx index 4b828a64..7a4369d6 100644 --- a/lib/components/data/viscosity-vpn.jsx +++ b/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"; diff --git a/lib/components/data/weather.jsx b/lib/components/data/weather.jsx index 0ea6bab0..3eefec12 100644 --- a/lib/components/data/weather.jsx +++ b/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"; diff --git a/lib/components/data/wifi.jsx b/lib/components/data/wifi.jsx index 517ec979..a2b7389c 100644 --- a/lib/components/data/wifi.jsx +++ b/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"; diff --git a/lib/components/data/zoom.jsx b/lib/components/data/zoom.jsx index cfee1a72..cdf87e17 100644 --- a/lib/components/data/zoom.jsx +++ b/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"; diff --git a/lib/components/context.jsx b/lib/components/simple-bar-context.jsx similarity index 81% rename from lib/components/context.jsx rename to lib/components/simple-bar-context.jsx index 47a1d501..00fb6e40 100644 --- a/lib/components/context.jsx +++ b/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} diff --git a/lib/components/spaces/opened-apps.jsx b/lib/components/spaces/opened-apps.jsx index b00587c3..92fa6818 100644 --- a/lib/components/spaces/opened-apps.jsx +++ b/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 ; }); -}; - -export default OpenedApps; +} diff --git a/lib/components/spaces/process.jsx b/lib/components/spaces/process.jsx index d1fba96d..0336a404 100644 --- a/lib/components/spaces/process.jsx +++ b/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 = () => { ); -}; +}); + +Component.displayName = "Process"; diff --git a/lib/components/spaces/space-options.jsx b/lib/components/spaces/space-options.jsx index ba8006b3..124385de 100644 --- a/lib/components/spaces/space-options.jsx +++ b/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"; diff --git a/lib/components/spaces/space.jsx b/lib/components/spaces/space.jsx index f938b263..f7842128 100644 --- a/lib/components/spaces/space.jsx +++ b/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 }) => { ); -}; - -export default Space; +} diff --git a/lib/components/spaces/spaces.jsx b/lib/components/spaces/spaces.jsx index af71e04d..3a6b2375 100644 --- a/lib/components/spaces/spaces.jsx +++ b/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, diff --git a/lib/components/spaces/stickies.jsx b/lib/components/spaces/stickies.jsx index 6a234f81..9739b017 100644 --- a/lib/components/spaces/stickies.jsx +++ b/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 diff --git a/lib/components/spaces/window.jsx b/lib/components/spaces/window.jsx index 0753de30..523dbfa4 100644 --- a/lib/components/spaces/window.jsx +++ b/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"; diff --git a/lib/components/yabai-context.jsx b/lib/components/yabai-context.jsx new file mode 100644 index 00000000..894863ef --- /dev/null +++ b/lib/components/yabai-context.jsx @@ -0,0 +1,23 @@ +import * as Uebersicht from "uebersicht"; + +const { React } = Uebersicht; + +const YabaiContext = React.createContext({ + spaces: [], + windows: [], + skhdMode: "", +}); + +export function useYabaiContext() { + return React.useContext(YabaiContext); +} + +export default React.memo(YabaiContextProvider); + +function YabaiContextProvider({ spaces, windows, skhdMode, children }) { + return ( + + {children} + + ); +} diff --git a/lib/hooks/use-server-socket.js b/lib/hooks/use-server-socket.js index 0144547e..ede5da82 100644 --- a/lib/hooks/use-server-socket.js +++ b/lib/hooks/use-server-socket.js @@ -1,6 +1,6 @@ import * as Uebersicht from "uebersicht"; import * as Settings from "../settings"; -import { useSimpleBarContext } from "../components/context.jsx"; +import { useSimpleBarContext } from "../components/simple-bar-context.jsx"; const { React } = Uebersicht;