Enhance Label module regex for better format handling and add CPU and Memory modules with dynamic updates

src/routes/waybar/Label.ts

@@ -41,10 +41,10 @@ export const createLabel = (opts: LabelOpts) => {
       return "N/A";
     }
 
-    const regex = /\{(\w+)\}|{:(.*?)}/g;
+    const regex = /\{(\w+)?\}|{:(.*?)}/g;
     const result = format.replace(regex, (match, key, dateFmt) => {
-      if (key !== undefined) {
-        return data[key] !== undefined ? data[key] : match;
+      if (match === "{}" || key !== undefined) {
+        return data[key || ""] !== undefined ? data[key || ""] : match;
       }
 
       if (dateFmt !== undefined) {

src/routes/waybar/modules.ts

@@ -14,4 +14,10 @@ export const modules = {
     import("./modules/temperature").then(
       ({ createTemperatureModule }) => createTemperatureModule
     ),
+  cpu: () =>
+    import("./modules/cpu").then(({ createCpuModule }) => createCpuModule),
+  memory: () =>
+    import("./modules/memory").then(
+      ({ createMemoryModule }) => createMemoryModule
+    ),
 };

src/routes/waybar/modules/battery.ts

@@ -9,7 +9,7 @@ export const createBatteryModule = (
   config: WaybarConfig["battery"]
 ) => {
   const label = createLabel({
-    interval: 1000,
+    interval: 2000,
     update: () => update(),
     config: config!,
     module,

src/routes/waybar/modules/cpu.ts

@@ -0,0 +1,27 @@
+import type { WaybarConfig } from "../configParser";
+import type { Module } from "../createModule";
+import { createLabel } from "../Label";
+
+export const createCpuModule = (
+  module: Module,
+  config: WaybarConfig["cpu"]
+) => {
+  const label = createLabel({
+    interval: 1000,
+    update: () => update(),
+    config: config!,
+    module,
+  });
+
+  module.element.appendChild(label.element);
+
+  const update = async () => {
+    const usage = Math.round(Math.random() * 100);
+
+    label.set({
+      usage,
+    });
+  };
+
+  update();
+};

src/routes/waybar/modules/memory.ts

@@ -0,0 +1,27 @@
+import type { WaybarConfig } from "../configParser";
+import type { Module } from "../createModule";
+import { createLabel } from "../Label";
+
+export const createMemoryModule = (
+  module: Module,
+  config: WaybarConfig["memory"]
+) => {
+  const label = createLabel({
+    interval: 1000,
+    update: () => update(),
+    config: config!,
+    module,
+  });
+
+  module.element.appendChild(label.element);
+
+  const update = async () => {
+    const usage = Math.round(Math.random() * 100);
+
+    label.set({
+      "": usage,
+    });
+  };
+
+  update();
+};