refactor(ags binto): switch to typescript

devices/binto/config/ags/.eslintrc.json

@@ -0,0 +1,146 @@
+{
+  "env": {
+    "es2021": true
+  },
+  "extends": "eslint:recommended",
+  "parser": "@typescript-eslint/parser",
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@stylistic", "@typescript-eslint"],
+  "rules": {
+    "array-callback-return": ["error", {
+      "allowImplicit": true,
+      "checkForEach": true
+    }],
+    "no-constructor-return": ["error"],
+    "no-unreachable-loop": ["error", { "ignore": [
+      "ForInStatement", "ForOfStatement"
+    ]}],
+    "no-use-before-define": ["error", {
+      "functions": false
+    }],
+
+
+    "block-scoped-var": ["error"],
+    "capitalized-comments": ["warn", "always", {
+      "ignoreConsecutiveComments": true
+    }],
+    "class-methods-use-this": ["error"],
+    "curly": ["warn"],
+    "default-case-last": ["warn"],
+    "default-param-last": ["error"],
+    "eqeqeq": ["error", "smart"],
+    "func-names": ["warn", "never"],
+    "func-style": ["warn", "expression"],
+    "logical-assignment-operators": ["warn", "always"],
+    "no-array-constructor": ["error"],
+    "no-empty-function": ["warn"],
+    "no-empty-static-block": ["warn"],
+    "no-extend-native": ["error"],
+    "no-extra-bind": ["warn"],
+    "no-implicit-coercion": ["warn"],
+    "no-iterator": ["error"],
+    "no-labels": ["error"],
+    "no-lone-blocks": ["error"],
+    "no-lonely-if": ["error"],
+    "no-loop-func": ["error"],
+    "no-magic-numbers": ["error", {
+      "ignore": [-1, 0.1, 0, 1, 2, 3, 10, 33, 66, 100, 255, 360, 450, 1000],
+      "ignoreDefaultValues": true
+    }],
+    "no-multi-assign": ["error"],
+    "no-new": ["error"],
+    "no-new-func": ["error"],
+    "no-new-wrappers": ["error"],
+    "no-object-constructor": ["error"],
+    "no-proto": ["error"],
+    "no-return-assign": ["error"],
+    "no-sequences": ["error"],
+    "no-shadow": ["error", { "builtinGlobals": true }],
+    "no-undef-init": ["warn"],
+    "no-undefined": ["error"],
+    "no-useless-constructor": ["warn"],
+    "no-useless-escape": ["off"],
+    "no-useless-return": ["error"],
+    "no-var": ["error"],
+    "no-void": ["error"],
+    "no-with": ["error"],
+    "object-shorthand": ["error", "always"],
+    "one-var": ["error", "never"],
+    "operator-assignment": ["warn", "always"],
+    "prefer-arrow-callback": ["error"],
+    "prefer-const": ["error"],
+    "prefer-object-has-own": ["error"],
+    "prefer-regex-literals": ["error"],
+    "prefer-template": ["warn"],
+
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+
+    "@stylistic/array-bracket-newline": ["warn", "consistent"],
+    "@stylistic/array-bracket-spacing": ["warn", "never"],
+    "@stylistic/arrow-parens": ["warn", "always"],
+    "@stylistic/brace-style": ["warn", "stroustrup"],
+    "@stylistic/comma-dangle": ["warn", "always-multiline"],
+    "@stylistic/comma-spacing": ["warn", { "before": false, "after": true }],
+    "@stylistic/comma-style": ["error", "last"],
+    "@stylistic/dot-location": ["error", "property"],
+    "@stylistic/function-call-argument-newline": ["warn", "consistent"],
+    "@stylistic/function-paren-newline": ["warn", "consistent"],
+    "@stylistic/indent": ["warn", 4, {
+      "SwitchCase": 1,
+      "ignoreComments": true
+    }],
+    "@stylistic/key-spacing": ["warn", { "beforeColon": false, "afterColon": true }],
+    "@stylistic/keyword-spacing": ["warn", { "before": true }],
+    "@stylistic/linebreak-style": ["error", "unix"],
+    "@stylistic/lines-between-class-members": ["warn", "always", { "exceptAfterSingleLine": true }],
+    "@stylistic/max-len": ["warn", {
+      "code": 80,
+      "ignoreComments": true,
+      "ignoreTrailingComments": true,
+      "ignoreUrls": true
+    }],
+    "@stylistic/multiline-ternary": ["warn", "always-multiline"],
+    "@stylistic/new-parens": ["error"],
+    "@stylistic/no-mixed-operators": ["warn"],
+    "@stylistic/no-mixed-spaces-and-tabs": ["error"],
+    "@stylistic/no-multi-spaces": ["error"],
+    "@stylistic/no-tabs": ["error"],
+    "@stylistic/no-trailing-spaces": ["error"],
+    "@stylistic/no-whitespace-before-property": ["warn"],
+    "@stylistic/nonblock-statement-body-position": ["error", "below"],
+    "@stylistic/object-curly-newline": ["warn", { "consistent": true }],
+    "@stylistic/object-curly-spacing": ["warn", "always"],
+    "@stylistic/operator-linebreak": ["warn", "after"],
+    "@stylistic/padded-blocks": ["error", "never"],
+    "@stylistic/padding-line-between-statements": ["warn",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
+      { "blankLine": "any",    "prev": ["const", "let", "var"], "next": ["const", "let", "var"]},
+      { "blankLine": "always", "prev": ["case", "default"], "next": "*" }
+    ],
+    "@stylistic/quote-props": ["error", "consistent-as-needed"],
+    "@stylistic/quotes": ["error", "single", { "avoidEscape": true }],
+    "@stylistic/semi": ["error", "always"],
+    "@stylistic/semi-spacing": ["warn"],
+    "@stylistic/space-before-blocks": ["warn"],
+    "@stylistic/space-before-function-paren": ["warn", "never"],
+    "@stylistic/space-infix-ops": ["warn"],
+    "@stylistic/spaced-comment": ["warn", "always"],
+    "@stylistic/switch-colon-spacing": ["warn"],
+    "@stylistic/wrap-regex": ["warn"]
+  },
+  "globals": {
+    "ARGV": "readonly",
+    "imports": "readonly",
+    "print": "readonly",
+    "console": "readonly",
+    "logError": "readonly",
+    "setTimeout": "readonly",
+    "setInterval": "readonly"
+  }
+}

devices/binto/config/ags/.stylelintrc.yml

@@ -0,0 +1,17 @@
+extends: stylelint-config-standard-scss
+ignoreFiles:
+  - "**/*.js"
+  - "**/*.ts"
+rules:
+  selector-type-no-unknown: null
+  selector-class-pattern: null
+  declaration-empty-line-before: null
+  no-descending-specificity: null
+  selector-pseudo-class-no-unknown: null
+  color-function-notation: legacy
+  alpha-value-notation: number
+  scss/operator-no-unspaced: null
+  scss/no-global-function-names: null
+  scss/dollar-variable-empty-line-before: null
+  no-invalid-position-at-import-rule: null
+  font-family-no-missing-generic-family-keyword: null

devices/binto/config/ags/config.js

@@ -1,41 +1,11 @@
-import App      from 'resource:///com/github/Aylur/ags/app.js';
+import { watchAndCompileSass, transpileTypeScript } from 'file:///home/matt/.nix/devices/wim/config/ags/js/utils.js';
-import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 
-import Pointers from 'file:///home/matt/.nix/devices/wim/config/ags/services/pointers.js';
+watchAndCompileSass();
 
-import AppLauncher from 'file:///home/matt/.nix/devices/wim/config/ags/js/applauncher/main.js';
+// Compile wim's config since that is where the big boy code is
-import Bar from './js/bar/main.js';
+// I have it symlinked in the git repo so TS server can see it
-import { NotifPopups, NotifCenter } from './js/notifications/main.js';
+await transpileTypeScript(
-import Powermenu from 'file:///home/matt/.nix/devices/wim/config/ags/js/powermenu.js';
+    '/home/matt/.nix/devices/wim/config/ags',
-
+    '/tmp/ags/wim',
-const scss = App.configDir + '/scss/main.scss';
+);
-const css  = App.configDir + '/style.css';
+export default (await import(await transpileTypeScript())).default;
-exec(`sassc ${scss} ${css}`)
-const closeWinDelay = 800;;
-
-
-// TODO: add OSD, workspace indicator / overview and current window indicator
-export default {
-    style: css,
-
-    notificationPopupTimeout: 5000,
-    cacheNotificationActions: true,
-
-    onConfigParsed: () => {
-        globalThis.Pointers = Pointers;
-    },
-
-    closeWindowDelay: {
-        'applauncher': closeWinDelay,
-        'notification-center': closeWinDelay,
-        'powermenu': closeWinDelay,
-    },
-    windows: [
-        AppLauncher(),
-        NotifCenter(),
-        Powermenu(),
-
-        Bar(),
-        NotifPopups(),
-    ],
-};

devices/binto/config/ags/package.json

@@ -0,0 +1,19 @@
+{
+  "main": "config.js",
+  "dependencies": {
+    "fzf": "^0.5.2"
+  },
+  "devDependencies": {
+    "eslint": "^8.52.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "@stylistic/eslint-plugin": "^1.4.0",
+    "@girs/dbusmenugtk3-0.4": "^0.4.0-3.2.0",
+    "@girs/gudev-1.0": "^1.0.0-3.2.2",
+    "@girs/gobject-2.0": "^2.76.1-3.2.3",
+    "@girs/gtk-3.0": "^3.24.39-3.2.2",
+    "@girs/gvc-1.0": "^1.0.0-3.1.0",
+    "@girs/nm-1.0": "^1.43.1-3.1.0"
+  }
+}

devices/binto/config/ags/ts/bar/buttons/clock.ts

@@ -1,7 +1,7 @@
 import { Label } from 'resource:///com/github/Aylur/ags/widget.js';
 
 
-export default () => Label({ className: 'clock' })
+export default () => Label({ class_name: 'clock' })
     .poll(1000, (self) => {
         const time = imports.gi.GLib
             .DateTime.new_now_local();

devices/binto/config/ags/ts/bar/main.ts

@@ -1,8 +1,8 @@
 import { Box, CenterBox, Window } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import SysTray from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/items/systray.js';
+import SysTray from '../../wim/ts/bar/items/systray.js';
-import Separator from 'file:///home/matt/.nix/devices/wim/config/ags/js/misc/separator.js';
+import Separator from '../../wim/ts/misc/separator.js';
-import NotifButton from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/items/notif-button.js';
+import NotifButton from '../../wim/ts/bar/items/notif-button.js';
 import Clock from './buttons/clock.js';
 
 const PADDING = 20;
@@ -19,7 +19,7 @@ export default () => Window({
         vertical: true,
         children: [
             CenterBox({
-                className: 'bar',
+                class_name: 'bar',
                 start_widget: Box({
                     hpack: 'start',
                     children: [
@@ -37,14 +37,14 @@ export default () => Window({
                     hpack: 'end',
                     children: [
                         NotifButton(),
-                        Separator(PADDING/2),
+                        Separator(PADDING / 2),
                         Clock(),
 
                         Separator(PADDING),
                     ],
                 }),
             }),
-            Separator(PADDING, {vertical: true}),
+            Separator(PADDING, { vertical: true }),
         ],
     }),
 });

devices/binto/config/ags/ts/main.ts

@@ -0,0 +1,33 @@
+import Pointers from '../wim/services/pointers.js';
+
+import AppLauncher from '../wim/ts/applauncher/main.js';
+import Bar from './bar/main.js';
+import { NotifPopups, NotifCenter } from './notifications/main.js';
+import Powermenu from '../wim/ts/powermenu.js';
+
+const closeWinDelay = 800;
+
+
+// TODO: add OSD, workspace indicator / overview and current window indicator
+export default {
+    notificationPopupTimeout: 5000,
+    cacheNotificationActions: true,
+
+    onConfigParsed: () => {
+        globalThis.Pointers = Pointers;
+    },
+
+    closeWindowDelay: {
+        'applauncher': closeWinDelay,
+        'notification-center': closeWinDelay,
+        'powermenu': closeWinDelay,
+    },
+    windows: [
+        AppLauncher(),
+        NotifCenter(),
+        Powermenu(),
+
+        Bar(),
+        NotifPopups(),
+    ],
+};

devices/binto/config/ags/ts/notifications/main.ts

@@ -1,9 +1,9 @@
 import { Window } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import NotifCenterWidget from 'file:///home/matt/.nix/devices/wim/config/ags/js/notifications/center.js';
+import NotifCenterWidget from '../../wim/ts/notifications/center.js';
-import PopUpsWidget from 'file:///home/matt/.nix/devices/wim/config/ags/js/notifications/popup.js';
+import PopUpsWidget from '../../wim/ts/notifications/popup.js';
 
-import PopupWindow from 'file:///home/matt/.nix/devices/wim/config/ags/js/misc/popup.js';
+import PopupWindow from '../../wim/ts/misc/popup.js';
 
 
 export const NotifPopups = () => Window({
@@ -18,7 +18,6 @@ export const NotifPopups = () => Window({
 export const NotifCenter = () => PopupWindow({
     name: 'notification-center',
     anchor: ['bottom', 'right'],
-    margins: [0, 187, 0, 0],
     transition: 'slide_up',
     monitor: 1,
 

devices/binto/config/ags/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022"
+    ],
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "typeRoots": [
+      "./types/ags.d.ts",
+      "./node_modules/@girs"
+    ],
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

devices/binto/config/ags/wim

@@ -0,0 +1 @@
+../../../wim/config/ags

devices/wim/config/ags/config.js

@@ -1,57 +1,4 @@
-import App from 'resource:///com/github/Aylur/ags/app.js';
+import { watchAndCompileSass, transpileTypeScript } from 'js/utils';
-import { execAsync, monitorFile } from 'resource:///com/github/Aylur/ags/utils.js';
-
-
-const watchAndCompileSass = () => {
-    const reloadCss = () => {
-        const scss = `${App.configDir}/scss/main.scss`;
-        const css = '/tmp/ags/style.css';
-
-        execAsync(`sassc ${scss} ${css}`).then(() => {
-            App.resetCss();
-            App.applyCss(css);
-        });
-    };
-
-    monitorFile(
-        `${App.configDir}/scss`,
-        reloadCss,
-        'directory',
-    );
-    reloadCss();
-};
-
-const transpileTypeScript = async() => {
-    const dir = '/tmp/ags';
-    const promises = [];
-    const files = (await execAsync([
-        'find', `${App.configDir}/`,
-        '-wholename', '*services/*.ts',
-        '-o',
-        '-wholename', '*/ts/*.ts',
-    ])).split('\n');
-
-    /** @param {string} p */
-    const getDirectoryPath = (p) => p.substring(0, p.lastIndexOf('/'));
-
-    files.forEach((file) => {
-        const outDir = getDirectoryPath(dir + file
-            .replace(`${App.configDir}/ts`, '/js')
-            .replace(`${App.configDir}/services`, '/services'));
-
-        promises.push(
-            execAsync([
-                'bun', 'build', file,
-                '--outdir', outDir,
-                '--external', '*',
-            ]).catch(print),
-        );
-    });
-
-    await Promise.all(promises);
-
-    return await import(`file://${dir}/js/main.js`);
-};
 
 watchAndCompileSass();
-export default (await transpileTypeScript()).default;
+export default (await import(await transpileTypeScript())).default;

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

@@ -0,0 +1,56 @@
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import { execAsync, monitorFile } from 'resource:///com/github/Aylur/ags/utils.js';
+
+
+export const watchAndCompileSass = () => {
+    const reloadCss = () => {
+        const scss = `${App.configDir}/scss/main.scss`;
+        const css = '/tmp/ags/style.css';
+
+        execAsync(`sassc ${scss} ${css}`).then(() => {
+            App.resetCss();
+            App.applyCss(css);
+        });
+    };
+
+    monitorFile(
+        `${App.configDir}/scss`,
+        reloadCss,
+        'directory',
+    );
+    reloadCss();
+};
+
+export const transpileTypeScript = async(
+    src = App.configDir,
+    out = '/tmp/ags',
+) => {
+    const promises = [];
+    const files = (await execAsync([
+        'find', `${src}/`,
+        '-wholename', `${src}/services/*.ts`,
+        '-o',
+        '-wholename', `${src}/ts/*.ts`,
+    ])).split('\n');
+
+    /** @param {string} p */
+    const getDirectoryPath = (p) => p.substring(0, p.lastIndexOf('/'));
+
+    files.forEach((file) => {
+        const outDir = getDirectoryPath(out + file
+            .replace(`${src}/ts`, '/ts')
+            .replace(`${src}/services`, '/services'));
+
+        promises.push(
+            execAsync([
+                'bun', 'build', file,
+                '--outdir', outDir,
+                '--external', '*',
+            ]).catch(print),
+        );
+    });
+
+    await Promise.all(promises);
+
+    return `file://${out}/ts/main.js`;
+};