feat(agsv2): add node_modules and types with nix

nixosModules/ags/v2/.gitignore

@@ -1,3 +1,3 @@
-@girs/
+@girs
-node_modules/
+node_modules
 tsconfig.json

nixosModules/ags/v2/app.ts

@@ -1,10 +1,14 @@
 import { App } from 'astal';
+
 import style from 'inline:./style.scss';
-import Bar from './widget/Bar';
+
+import Bar from './widgets/bar/main';
+
 
 App.start({
     css: style,
-    main() {
+
-        Bar(0);
+    main: () => {
+        Bar();
     },
 });

nixosModules/ags/v2/default.nix

@@ -1,8 +1,15 @@
-self: {pkgs, ...}: {
+self: {
+  lib,
+  pkgs,
+  ...
+}: {
   config = let
+    inherit (lib) attrValues removeAttrs;
+
     inherit (self.inputs) agsV2;
 
     agsV2Packages = agsV2.packages.${pkgs.system};
+    astalLibs = attrValues (removeAttrs agsV2.inputs.astal.packages.${pkgs.system} ["docs"]);
     configDir = "/home/matt/.nix/nixosModules/ags/v2";
   in {
     home = {
@@ -16,27 +23,43 @@ self: {pkgs, ...}: {
         })
       ];
 
-      file = {
+      file = let
-        "${configDir}/tsconfig.json".source = pkgs.writers.writeJSON "tsconfig.json" {
+        inherit
-          "$schema" = "https://json.schemastore.org/tsconfig";
+          (import "${self}/lib" {inherit pkgs self;})
-          "compilerOptions" = {
+          buildNodeModules
-            "target" = "ES2023";
+          buildNodeTypes
-            "module" = "ES2022";
+          ;
-            "lib" = ["ES2023"];
+      in (
-            "strict" = true;
+        (buildNodeTypes {
-            "moduleResolution" = "Bundler";
+          pname = "agsV2";
-            "skipLibCheck" = true;
+          configPath = "${configDir}/@girs";
-            "checkJs" = true;
+          packages = astalLibs;
-            "allowJs" = true;
+        })
-            "jsx" = "react-jsx";
+        // {
-            "jsxImportSource" = "${agsV2Packages.astal}/share/astal/gjs/src/jsx";
+          "${configDir}/node_modules".source =
-            "paths" = {
+            buildNodeModules ./. "sha256-WjCfS8iEw5Mjor/sQ2t+i0Q1pqVpSDEDbbgrKwK+3cg=";
-              "astal" = ["${agsV2Packages.astal}/share/astal/gjs"];
+
-              "astal/*" = ["${agsV2Packages.astal}/share/astal/gjs/src/*"];
+          "${configDir}/tsconfig.json".source = pkgs.writers.writeJSON "tsconfig.json" {
+            "$schema" = "https://json.schemastore.org/tsconfig";
+            "compilerOptions" = {
+              "target" = "ES2023";
+              "module" = "ES2022";
+              "lib" = ["ES2023"];
+              "strict" = true;
+              "moduleResolution" = "Bundler";
+              "skipLibCheck" = true;
+              "checkJs" = true;
+              "allowJs" = true;
+              "jsx" = "react-jsx";
+              "jsxImportSource" = "${agsV2Packages.astal}/share/astal/gjs/src/jsx";
+              "paths" = {
+                "astal" = ["${agsV2Packages.astal}/share/astal/gjs"];
+                "astal/*" = ["${agsV2Packages.astal}/share/astal/gjs/src/*"];
+              };
             };
           };
-        };
+        }
-      };
+      );
     };
   };
 

nixosModules/ags/v2/widget/Bar.tsx

@@ -1,39 +0,0 @@
-import { App, Variable, Astal, Gtk } from 'astal';
-
-const time = Variable<string>('').poll(1000, 'date');
-
-/**
- * @param monitor the id of the monitor on which we want the widget to appear
- * @returns the bar window
- */
-export default function Bar(monitor: number) {
-    return (
-        <window
-            className="Bar"
-            monitor={monitor}
-            exclusivity={Astal.Exclusivity.EXCLUSIVE}
-            anchor={
-                Astal.WindowAnchor.TOP |
-                Astal.WindowAnchor.LEFT |
-                Astal.WindowAnchor.RIGHT
-            }
-            application={App}
-        >
-            <centerbox>
-                <button
-                    onClicked="echo hello"
-                    halign={Gtk.Align.CENTER}
-                >
-                    Welcome to AGS!
-                </button>
-                <box />
-                <button
-                    onClick={() => print('hello')}
-                    halign={Gtk.Align.CENTER}
-                >
-                    <label label={time()} />
-                </button>
-            </centerbox>
-        </window>
-    );
-}

nixosModules/ags/v2/widgets/bar/main.tsx

@@ -0,0 +1,30 @@
+import { App, Astal, Gtk, idle, Variable } from 'astal';
+
+
+const isVisible = Variable<boolean>(false);
+
+export default () => {
+    return (
+        <window
+            className="Bar"
+            exclusivity={Astal.Exclusivity.EXCLUSIVE}
+            anchor={
+                Astal.WindowAnchor.TOP |
+                Astal.WindowAnchor.LEFT |
+                Astal.WindowAnchor.RIGHT
+            }
+            application={App}
+            setup={() => idle(() => {
+                isVisible.set(true);
+            })}
+        >
+            <revealer
+                revealChild={isVisible()}
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
+                transitionDuration={500}
+            >
+                <label label="hi" />
+            </revealer>
+        </window>
+    );
+};