feat(ags): add scss auto update and prep for TS

.gitignore

@@ -4,4 +4,5 @@
 *types/
 *build/
 **/ags/style.css
+**/ags/flake.lock
 result*

devices/wim/config/ags/.stylelintrc.yml

@@ -1,5 +1,7 @@
 extends: stylelint-config-standard-scss
-ignoreFiles: "**/*.js"
+ignoreFiles:
+  - "**/*.js"
+  - "**/*.ts"
 rules:
   selector-type-no-unknown: null
   selector-class-pattern: null

devices/wim/config/ags/config.js

@@ -1,29 +1,12 @@
-import App from 'resource:///com/github/Aylur/ags/app.js';
-import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
+import { watchAndCompileSass } from './js/utils.js';
+import windows from './js/main.js';
 
-import Setup from './js/setup.js';
-import AppLauncher from './js/applauncher/main.js';
-import Bar from './js/bar/main.js';
-import BgFade from './js/misc/background-fade.js';
-import Calendar from './js/date.js';
-import Corners from './js/corners/main.js';
-import { NotifPopups, NotifCenter } from './js/notifications/main.js';
-import OSD from './js/osd/main.js';
-import OSK from './js/on-screen-keyboard/main.js';
-import Overview from './js/overview/main.js';
-import Powermenu from './js/powermenu.js';
-import QSettings from './js/quick-settings/main.js';
+watchAndCompileSass();
 
-const scss = `${App.configDir }/scss/main.scss`;
-const css = `${App.configDir }/style.css`;
 const closeWinDelay = 800;
 
-exec(`sassc ${scss} ${css}`);
-Setup();
-
 
 export default {
-    style: css,
     notificationPopupTimeout: 5000,
     cacheNotificationActions: true,
     closeWindowDelay: {
@@ -37,21 +20,6 @@ export default {
         'quick-settings': closeWinDelay,
     },
     windows: [
-        // Put the corners first so they
-        // don't block the cursor on the bar
-        ...Corners(),
-
-        AppLauncher(),
-        Calendar(),
-        NotifCenter(),
-        OSD(),
-        OSK(),
-        Overview(),
-        Powermenu(),
-        QSettings(),
-
-        Bar(),
-        BgFade(),
-        NotifPopups(),
+        ...windows,
     ],
 };

devices/wim/config/ags/flake.nix

@@ -0,0 +1,32 @@
+{
+  inputs.main.url = "path:../../../../.";
+
+  outputs = {
+    self,
+    main,
+  }: let
+    inherit (main.inputs) nixpkgs;
+    supportedSystems = ["x86_64-linux"];
+
+    perSystem = attrs:
+      nixpkgs.lib.genAttrs supportedSystems (system: let
+        pkgs = nixpkgs.legacyPackages.${system};
+      in
+        attrs system pkgs);
+  in {
+    devShells = perSystem (_: pkgs: {
+      default = pkgs.mkShell {
+        nativeBuildInputs = with pkgs; [
+          nix
+          git
+          alejandra
+          typescript
+          bun
+          nodejs_18
+        ];
+      };
+    });
+
+    formatter = perSystem (_: pkgs: pkgs.alejandra);
+  };
+}

devices/wim/config/ags/js/main.js

@@ -0,0 +1,33 @@
+import Setup from './setup.js';
+import AppLauncher from './applauncher/main.js';
+import Bar from './bar/main.js';
+import BgFade from './misc/background-fade.js';
+import Calendar from './date.js';
+import Corners from './corners/main.js';
+import { NotifPopups, NotifCenter } from './notifications/main.js';
+import OSD from './osd/main.js';
+import OSK from './on-screen-keyboard/main.js';
+import Overview from './overview/main.js';
+import Powermenu from './powermenu.js';
+import QSettings from './quick-settings/main.js';
+
+Setup();
+
+export default [
+    // Put the corners first so they
+    // don't block the cursor on the bar
+    ...Corners(),
+
+    AppLauncher(),
+    Calendar(),
+    NotifCenter(),
+    OSD(),
+    OSK(),
+    Overview(),
+    Powermenu(),
+    QSettings(),
+
+    Bar(),
+    BgFade(),
+    NotifPopups(),
+];

devices/wim/config/ags/js/utils.js

@@ -0,0 +1,36 @@
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import { monitorFile, exec } from 'resource:///com/github/Aylur/ags/utils.js';
+
+
+export const watchAndCompileSass = () => {
+    const reloadCss = () => {
+        // Main scss file
+        const scss = `${App.configDir}/scss/main.scss`;
+
+        // Target css file
+        const css = `${App.configDir}/style.css`;
+
+        // Compile, reset, apply
+        exec(`sassc ${scss} ${css}`);
+        App.resetCss();
+        App.applyCss(css);
+    };
+
+    monitorFile(
+        // Directory that contains the scss files
+        `${App.configDir}/scss`,
+
+        reloadCss,
+
+        // Specify that its a directory
+        'directory',
+    );
+    reloadCss();
+};
+
+export const compileTypescript = () => {
+    const ts = `${App.configDir}/ts/main.ts`;
+    const js = `${App.configDir}/compiled.js`;
+
+    exec(`bash -c 'cd ${App.configDir} && nix develop && bun install && tsc ${ts} --outfile ${js}'`);
+};