ags: init rewrite

home/programs/ags/config/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2021: true
   },
-  extends: "eslint:recommended",
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   overrides: [
     {
       env: {
@@ -15,9 +15,11 @@ module.exports = {
       }
     }
   ],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module"
   },
+  plugins: ["@typescript-eslint"],
   rules: {}
 };

home/programs/ags/config/config.js

@@ -1,21 +1,21 @@
-import { App, Utils } from "./import.js";
+const entry = App.configDir + "/ts/main.ts";
-import { Bar } from "./js/main.js";
+const outdir = "/tmp/ags/js";
 
-const scss = App.configDir + "/main.scss";
+try {
-const css = App.configDir + "/style.css";
+  await Utils.execAsync([
-
+    "bun",
-Utils.exec(`sass ${scss} ${css}`);
+    "build",
-
+    entry,
-function reloadCss() {
+    "--outdir",
-  console.log("scss updating");
+    outdir,
-  Utils.exec(`sass ${scss} ${css}`);
+    "--external",
-  App.resetCss();
+    "resource://*",
-  App.applyCss(css);
+    "--external",
+    "gi://*"
+  ]);
+  await import(`file://${outdir}/main.js`);
+} catch (error) {
+  console.error(error);
 }
 
-Utils.monitorFile(`${App.configDir}/scss`, reloadCss, "directory");
+export {};
-
-export default {
-  style: css,
-  windows: [Bar(2)]
-};

home/programs/ags/config/import.js

@@ -1,23 +0,0 @@
-import App from "resource:///com/github/Aylur/ags/app.js";
-import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
-import Service from "resource:///com/github/Aylur/ags/service.js";
-import Variable from "resource:///com/github/Aylur/ags/variable.js";
-import Widget from "resource:///com/github/Aylur/ags/widget.js";
-import Audio from "resource:///com/github/Aylur/ags/service/audio.js";
-import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js";
-import Network from "resource:///com/github/Aylur/ags/service/network.js";
-import SystemTray from "resource:///com/github/Aylur/ags/service/systemtray.js";
-import Mpris from "resource:///com/github/Aylur/ags/service/mpris.js";
-
-export {
-  App,
-  Audio,
-  Hyprland,
-  Mpris,
-  Network,
-  Service,
-  SystemTray,
-  Utils,
-  Variable,
-  Widget
-};

home/programs/ags/config/js/main.js

@@ -1,35 +0,0 @@
-import { Widget } from "../import.js";
-import { Time } from "./widgets/time.js";
-import { nixosLogo } from "./widgets/images/image.js";
-import { Media } from "./widgets/music.js";
-import { Workspaces } from "./widgets/hyprland.js";
-
-const Start = () =>
-  Widget.Box({
-    hpack: "start",
-    children: [nixosLogo(), Workspaces()]
-  });
-const Center = () =>
-  Widget.Box({
-    children: [Media()]
-  });
-const End = () =>
-  Widget.Box({
-    hpack: "end",
-    children: [Time()]
-  });
-
-const Bar = (monitor) =>
-  Widget.Window({
-    monitor,
-    name: `bar`,
-    anchor: ["top", "left", "right"],
-    exclusivity: "exclusive",
-    child: Widget.CenterBox({
-      startWidget: Start(),
-      centerWidget: Center(),
-      endWidget: End()
-    })
-  });
-
-export { Bar };

home/programs/ags/config/js/widgets/hyprland.js

@@ -1,19 +0,0 @@
-import { Hyprland, Widget } from "../../import.js";
-
-const Workspaces = () =>
-  Widget.Box({
-    class_name: "workspaces",
-    children: Hyprland.bind("workspaces").transform((ws) => {
-      return ws.map(({ id }) =>
-        Widget.Button({
-          on_clicked: () => Hyprland.sendMessage(`dispatch workspace ${id}`),
-          child: Widget.Label(`${id}`),
-          class_name: Hyprland.active.workspace
-            .bind("id")
-            .transform((i) => `${i === id ? "focused" : ""}`)
-        })
-      );
-    })
-  });
-
-export { Workspaces };

home/programs/ags/config/js/widgets/images/image.js

@@ -1,8 +0,0 @@
-import { Widget } from "../../../import.js";
-
-const nixosLogo = () =>
-  Widget.Icon({
-    icon: "/home/notoh/snowflake/home/programs/ags/config/js/widgets/images/static/nixos.png"
-  });
-
-export { nixosLogo };

home/programs/ags/config/js/widgets/music.js

@@ -1,20 +0,0 @@
-import { Mpris, Widget } from "../../import.js";
-
-const Media = () =>
-  Widget.Box({
-    class_name: "media",
-    child: Widget.Label("-").hook(
-      Mpris,
-      (self) => {
-        if (Mpris.players[0]) {
-          const { track_artists, track_title } = Mpris.players[0];
-          self.label = `${track_artists.join(", ")} - ${track_title}`;
-        } else {
-          self.label = "Nothing is playing";
-        }
-      },
-      "player-changed"
-    )
-  });
-
-export { Media };

home/programs/ags/config/js/widgets/time.js

@@ -1,14 +0,0 @@
-import { Utils, Widget } from "../../import.js";
-
-const Time = () =>
-  Widget.Box({
-    child: Widget.Label({
-      className: "date"
-    }).poll(1000, (self) =>
-      Utils.execAsync(["date", "+%a %b %d  %H:%M"]).then(
-        (time) => (self.label = time)
-      )
-    )
-  });
-
-export { Time };

home/programs/ags/config/jsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "target": "ES2020",
-    "jsx": "react",
-    "allowImportingTsExtensions": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true
-  },
-  "exclude": ["node_modules", "**/node_modules/*"]
-}

home/programs/ags/config/main.scss

@@ -1,9 +0,0 @@
-@import "scss/bar.scss";
-@import "scss/general.scss";
-@import "scss/widgets.scss";
-
-* {
-    all: unset;
-    margin: 3px;
-    font-family: "Monaspace Krypton";
-}

home/programs/ags/config/package.json

@@ -1,15 +1,11 @@
 {
   "name": "snowflake-ags",
-  "version": "1.0.0",
+  "version": "0.0.1",
-  "description": "snowflake ags",
+  "description": "",
   "main": "config.js",
-  "repository": {
+  "scripts": {
-    "type": "git",
+    "test": "echo \"Error: no test specified\" && exit 1"
-    "url": "https://git.flake.sh/notohh/snowflake"
   },
   "author": "notohh",
-  "license": "MIT",
+  "license": "MIT"
-  "devDependencies": {
-    "eslint": "^8.56.0"
-  }
 }

home/programs/ags/config/scss/bar.scss

@@ -1,5 +0,0 @@
-@import "colors.scss";
-
-window {
-    background-color: #000000;
-}

home/programs/ags/config/scss/colors.scss

@@ -1,24 +0,0 @@
-/* tokyonight */
-
-$red: #f7768e;
-$orange: #ff9e64;
-$yellow: #e0af68;
-$light-green: #9ece6a;
-$green: #73daca;
-$turquoise: #89ddff;
-$light-cyan: #b4f9f8;
-$teal: #2ac3de;
-$cyan: #7dcfff;
-$blue: #7aa2f7;
-$magenta: #bb9af7;
-$white: #c0caf5;
-$light-gray: #9aa5ce;
-$parameters: #cfc9c2;
-$comment: #565f89;
-$black: #414868;
-$foreground: #a9b1d6;
-$foreground-highlight: #c0caf5;
-$foreground-gutter: #363b54;
-$background: #1a1b26;
-$background-highlight: #30374b;
-$background-menu: #16161e;

home/programs/ags/config/scss/widgets.scss

@@ -1,21 +0,0 @@
-@import "colors.scss";
-
-@mixin widget {
-    color: $white;
-}
-
-.date {
-    @include widget();
-}
-
-.workspaces {
-    @include widget();
-}
-
-.media {
-    @include widget();
-}
-
-image {
-    font-size: 24px;
-}

home/programs/ags/config/style.scss

@@ -0,0 +1 @@
+@import "./style/main.scss";

home/programs/ags/config/style/main.scss

@@ -0,0 +1,3 @@
+* {
+    all: unset;
+}

home/programs/ags/config/ts/main.ts

@@ -0,0 +1,48 @@
+const scss = App.configDir + "/main.scss";
+const css = App.configDir + "/style.css";
+
+const time = Variable("", {
+  poll: [
+    1000,
+    function () {
+      return Date().toString();
+    }
+  ]
+});
+
+Utils.monitorFile(
+  `${App.configDir}/style`,
+
+  function () {
+    const scss = `${App.configDir}/style.scss`;
+
+    const css = `./style.css`;
+
+    Utils.exec(`sass ${scss} ${css}`);
+    App.resetCss();
+    App.applyCss(css);
+  }
+);
+
+const Bar = (monitor: number) =>
+  Widget.Window({
+    monitor,
+    name: `bar${monitor}`,
+    anchor: ["top", "left", "right"],
+    exclusivity: "exclusive",
+    child: Widget.CenterBox({
+      start_widget: Widget.Label({
+        hpack: "center",
+        label: "Welcome to AGS!"
+      }),
+      end_widget: Widget.Label({
+        hpack: "center",
+        label: time.bind()
+      })
+    })
+  });
+
+App.config({
+  style: css,
+  windows: [Bar(2)]
+});

home/programs/ags/config/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022"],
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "typeRoots": ["./types"],
+    "skipLibCheck": true
+  }
+}

home/programs/ags/config/types

@@ -0,0 +1 @@
+/home/notoh/.local/share/com.github.Aylur.ags/types

home/programs/ags/default.nix

@@ -9,7 +9,7 @@ in {
     enable = true;
     extraPackages = with pkgs; [libsoup_3 libdbusmenu-gtk3];
   };
-  home.packages = with pkgs; [dart-sass];
+  home.packages = with pkgs; [dart-sass bun];
   xdg.configFile = {
     "ags".source = config.lib.file.mkOutOfStoreSymlink "${configDir}";
   };