refactor: ensure components shared between extension.js and prefs.js …

…imports only the right libraries

esbuild.mjs

@@ -124,17 +124,29 @@ build({
     target: 'firefox78',
     platform: 'node',
     format: 'esm',
-    external: ['gi://*', 'resource://*', 'system', 'gettext', 'cairo', '@girs*'],
-    plugins: [sassPlugin()]/*,
-    banner: {
-        js: banner,
-    },
-    footer: {
-        js: footer
-    }*/
+    external: ['gi://*', 'resource://*'],
+    plugins: [sassPlugin()],
 }).then(() => {
     fs.renameSync(path.resolve(distDir, "extension.css"), path.resolve(distDir, "stylesheet.css"));
     fs.cpSync(resourcesDir, distDir, { recursive: true });
+    // warn if you imported GTK libraries in GNOME Shell (Gdk, Gtk or Adw)
+    const extensionJSContent = fs.readFileSync(`${distDir}/extension.js`).toString().split('\n');
+    ['Gdk', 'Gtk', 'Adw'].forEach(moduleName => {
+        for (let lineNumber = 0; lineNumber < extensionJSContent.length; lineNumber++) {
+            if (extensionJSContent[lineNumber].indexOf(`import ${moduleName}`) >= 0) {
+                console.error(`⚠️  Error: "${moduleName}" was imported in extension.js at line ${lineNumber}`);
+            }
+        }
+    });
+    // warn if you imported GNOME Shell libraries in Preferences (Clutter, Meta, St or Shell)
+    const prefsJSContent = fs.readFileSync(`${distDir}/prefs.js`).toString().split('\n');
+    ['Clutter', 'Meta', 'Mtk', 'St', 'Shell'].forEach(moduleName => {
+        for (let lineNumber = 0; lineNumber < prefsJSContent.length; lineNumber++) {
+            if (prefsJSContent[lineNumber].indexOf(`import ${moduleName}`) >= 0) {
+                console.error(`⚠️  Error: "${moduleName}" was imported in prefs.js at line ${lineNumber}`);
+            }
+        }
+    });
 }).then(async () => {
     console.log("   💡", "Generating legacy version...");
     // duplicate the build into distLegacyDir

src/components/editor/editableTilePreview.ts

@@ -1,5 +1,5 @@
 import TilePreview from '../tilepreview/tilePreview';
-import { GObject, St, Clutter, Mtk } from '@gi';
+import { GObject, St, Clutter, Mtk } from '@gi.ext';
 import Tile from '../layout/Tile';
 import Slider from './slider';
 import TileUtils from '../layout/TileUtils';

src/components/editor/editorDialog.ts

@@ -1,6 +1,6 @@
 import Settings from '@settings/settings';
 import { registerGObjectClass } from '@/utils/gjs';
-import { St, Clutter, Gio } from '@gi';
+import { St, Clutter, Gio } from '@gi.ext';
 import LayoutButton from '../../indicator/layoutButton';
 import GlobalState from '@utils/globalState';
 import Layout from '@/components/layout/Layout';

src/components/editor/hoverLine.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { GLib, St, Clutter, Shell } from '@gi';
+import { GLib, St, Clutter, Shell } from '@gi.ext';
 import EditableTilePreview from './editableTilePreview';
 import { getScalingFactorOf } from '@utils/ui';
 

src/components/editor/layoutEditor.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { GObject, St, Clutter, Mtk, Meta, Shell } from '@gi';
+import { GObject, St, Clutter, Mtk, Meta, Shell } from '@gi.ext';
 import Settings from '@settings/settings';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import {

src/components/editor/slider.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { GObject, St, Clutter, Mtk, Meta } from '@gi';
+import { GObject, St, Clutter, Mtk, Meta } from '@gi.ext';
 import EditableTilePreview from './editableTilePreview';
 import { getEventCoords, getScalingFactorOf } from '@utils/ui';
 

src/components/layout/LayoutWidget.ts

@@ -1,4 +1,4 @@
-import { St, Clutter, Mtk } from '@gi';
+import { St, Clutter, Mtk } from '@gi.ext';
 import TilePreview from '../tilepreview/tilePreview';
 import {
     buildRectangle,

src/components/layout/Tile.ts

@@ -1,4 +1,4 @@
-import { GObject } from '@prefs.gi'; // prefs.gi because for transitivity this is also declared in prefs.js
+import { GObject } from '@gi.shared'; // gi.shared because it is imported by Layout which is also imported in prefs.ts
 
 export default class Tile {
     // @ts-expect-error "GObject has TYPE_JSOBJECT"

src/components/layout/TileUtils.ts

@@ -1,4 +1,4 @@
-import { Mtk } from '@gi';
+import { Mtk } from '@gi.ext';
 import Tile from './Tile';
 import { buildRectangle } from '@utils/ui';
 

src/components/snapassist/snapAssist.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { GObject, St, Clutter, Mtk, Meta, Gio } from '@gi';
+import { GObject, St, Clutter, Mtk, Meta, Gio } from '@gi.ext';
 import SnapAssistTile from './snapAssistTile';
 import SnapAssistLayout from './snapAssistLayout';
 import Layout from '../layout/Layout';

src/components/snapassist/snapAssistLayout.ts

@@ -1,6 +1,6 @@
 import { registerGObjectClass } from '@/utils/gjs';
 import { buildRectangle, getScalingFactorOf } from '@/utils/ui';
-import { Clutter, Mtk } from '@gi';
+import { Clutter, Mtk } from '@gi.ext';
 import LayoutWidget from '../layout/LayoutWidget';
 import Layout from '../layout/Layout';
 import Tile from '../layout/Tile';

src/components/snapassist/snapAssistTile.ts

@@ -1,7 +1,7 @@
 import { registerGObjectClass } from '@/utils/gjs';
 import TilePreview from '../tilepreview/tilePreview';
 import Tile from '../layout/Tile';
-import { St, Clutter, Mtk } from '@gi';
+import { St, Clutter, Mtk } from '@gi.ext';
 import { getScalingFactorOf } from '@utils/ui';
 
 @registerGObjectClass

src/components/snapassist/snapAssistTileButton.ts

@@ -1,6 +1,6 @@
 import Tile from '@components/layout/Tile';
 import { registerGObjectClass } from '@utils/gjs';
-import { St, Clutter, Mtk } from '@gi';
+import { St, Clutter, Mtk } from '@gi.ext';
 import SnapAssistTile from '@components/snapassist/snapAssistTile';
 
 @registerGObjectClass

src/components/tilepreview/blurTilePreview.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { registerGObjectClass } from '@/utils/gjs';
-import { Shell } from '@gi';
+import { Shell } from '@gi.ext';
 import TilePreview from './tilePreview';
 
 @registerGObjectClass

src/components/tilepreview/selectionTilePreview.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { GObject, St, Clutter, Gio } from '@gi';
+import { GObject, St, Clutter, Gio } from '@gi.ext';
 import TilePreview from './tilePreview';
 import Settings from '@settings/settings';
 import { buildBlurEffect } from '@utils/ui';

src/components/tilepreview/tilePreview.ts

@@ -1,4 +1,4 @@
-import { St, Clutter, Mtk, Meta } from '@gi';
+import { St, Clutter, Mtk, Meta } from '@gi.ext';
 import { registerGObjectClass } from '@/utils/gjs';
 import { buildRectangle, getScalingFactorOf } from '@utils/ui';
 import GlobalState from '@utils/globalState';

src/components/tilingsystem/edgeTilingManager.ts

@@ -3,7 +3,7 @@ import {
     isPointInsideRect,
     clampPointInsideRect,
 } from '@utils/ui';
-import { GObject, Mtk } from '@gi';
+import { GObject, Mtk } from '@gi.ext';
 import Settings from '@settings/settings';
 import { registerGObjectClass } from '@utils/gjs';
 

src/components/tilingsystem/extendedWindow.ts

@@ -1,5 +1,5 @@
 import Tile from '@components/layout/Tile';
-import { Mtk, Meta } from '@gi';
+import { Mtk, Meta } from '@gi.ext';
 
 interface ExtendedWindow extends Meta.Window {
     originalSize: Mtk.Rectangle | undefined;

src/components/tilingsystem/resizeManager.ts

@@ -1,4 +1,4 @@
-import { St, Mtk, Meta } from '@gi';
+import { St, Mtk, Meta } from '@gi.ext';
 import SignalHandling from '@utils/signalHandling';
 import Settings from '@settings/settings';
 import ExtendedWindow from './extendedWindow';

src/components/tilingsystem/tilingLayout.ts

@@ -1,5 +1,5 @@
 import { registerGObjectClass } from '@/utils/gjs';
-import { Clutter, Mtk, Meta } from '@gi';
+import { Clutter, Mtk, Meta } from '@gi.ext';
 import TilePreview, {
     TilePreviewConstructorProperties,
 } from '../tilepreview/tilePreview';

src/components/tilingsystem/tilingManager.ts

@@ -1,4 +1,4 @@
-import { Clutter, Mtk, Meta, GLib } from '@gi';
+import { Clutter, Mtk, Meta, GLib } from '@gi.ext';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import { logger } from '@utils/logger';
 import {

src/components/tilingsystem/touchPointer.ts

@@ -1,5 +1,5 @@
 import { buildRectangle } from '@utils/ui';
-import { Mtk, Meta } from '@gi';
+import { Mtk, Meta } from '@gi.ext';
 
 export default class TouchPointer {
     private static _instance: TouchPointer | null = null;

src/components/windowBorderManager.ts

@@ -1,4 +1,4 @@
-import { GObject, Meta, St, Clutter } from '@gi';
+import { GObject, Meta, St, Clutter } from '@gi.ext';
 import SignalHandling from '@utils/signalHandling';
 import { logger } from '@utils/logger';
 import { registerGObjectClass } from '@utils/gjs';
@@ -27,6 +27,8 @@ class WindowBorder extends St.Bin {
         this.trackWindow(win, true);
 
         this.connect('destroy', () => {
+            this._bindings.forEach((b) => b.unbind());
+            this._bindings = [];
             this._signals.disconnect();
         });
     }
@@ -36,7 +38,7 @@ class WindowBorder extends St.Bin {
 
         this._bindings.forEach((b) => b.unbind());
         this._bindings = [];
-        this._signals.disconnect(this._window);
+        this._signals.disconnect();
         this._window = win;
         this.close();
         const winActor =

src/components/windowManager/tilingShellWindowManager.ts

@@ -1,7 +1,7 @@
 import { registerGObjectClass } from '@utils/gjs';
 import { logger } from '@utils/logger';
 import SignalHandling from '@utils/signalHandling';
-import { GObject, Meta } from '@gi';
+import { GObject, Meta } from '@gi.ext';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 
 const debug = logger('TilingShellWindowManager');

src/components/window_menu/layoutIcon.ts

@@ -4,7 +4,7 @@ import Tile from '@components/layout/Tile';
 import SnapAssistTile from '@components/snapassist/snapAssistTile';
 import { registerGObjectClass } from '@utils/gjs';
 import { buildRectangle, getScalingFactorOf } from '@utils/ui';
-import { Clutter, Mtk } from '@gi';
+import { Clutter, Mtk } from '@gi.ext';
 
 @registerGObjectClass
 export default class LayoutIcon extends LayoutWidget<SnapAssistTile> {

src/components/window_menu/layoutTileButtons.ts

@@ -2,7 +2,7 @@ import Layout from '@components/layout/Layout';
 import LayoutWidget from '@components/layout/LayoutWidget';
 import { registerGObjectClass } from '@utils/gjs';
 import { buildMarginOf, buildRectangle, getScalingFactorOf } from '@utils/ui';
-import { Clutter, Mtk } from '@gi';
+import { Clutter, Mtk } from '@gi.ext';
 import SnapAssistTileButton from '../snapassist/snapAssistTileButton';
 import Tile from '@components/layout/Tile';
 

src/components/window_menu/overriddenWindowMenu.ts

@@ -2,7 +2,7 @@
 import * as windowMenu from 'resource:///org/gnome/shell/ui/windowMenu.js';
 import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
-import { GObject, St, Clutter, Meta } from '@gi';
+import { GObject, St, Clutter, Meta } from '@gi.ext';
 import GlobalState from '@utils/globalState';
 import Settings from '@settings/settings';
 import { registerGObjectClass } from '@utils/gjs';

src/dbus.ts

@@ -4,7 +4,7 @@ const node = `<node>
     </interface>
 </node>`;
 
-import { Gio } from '@gi';
+import { Gio } from '@gi.ext';
 
 export default class DBus {
     private _dbus: Gio.DBusExportedObject | null;

src/extension.ts

@@ -1,10 +1,10 @@
 import './styles/stylesheet.scss';
 
+import { Gio, GLib, Meta } from '@gi.ext';
 import { logger } from '@utils/logger';
 import { getMonitors, squaredEuclideanDistance } from '@/utils/ui';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import { TilingManager } from '@/components/tilingsystem/tilingManager';
-import { Gio, GLib, Meta } from '@gi';
 import Settings from '@settings/settings';
 import SignalHandling from './utils/signalHandling';
 import GlobalState from './utils/globalState';

src/gi.ts → src/gi.ext.ts

@@ -1,7 +1,5 @@
+import { Gio, GLib, GObject } from '@gi.shared';
 import Clutter from 'gi://Clutter';
-import Gio from 'gi://Gio';
-import GLib from 'gi://GLib';
-import GObject from 'gi://GObject';
 import Meta from 'gi://Meta';
 import Mtk from 'gi://Mtk';
 import Shell from 'gi://Shell';

src/gi.prefs.ts

@@ -0,0 +1,6 @@
+import { Gio, GLib, GObject } from '@gi.shared';
+import Gdk from 'gi://Gdk';
+import Gtk from 'gi://Gtk'; // Starting from GNOME 40, the preferences dialog uses GTK4
+import Adw from 'gi://Adw';
+
+export { Adw, Gio, GLib, GObject, Gdk, Gtk };

src/gi.shared.ts

@@ -0,0 +1,9 @@
+// import this file from places that are imported by both prefs.js and extension.js
+// ensuring you do not import GNOME Shell libraries in Preferences (Clutter, Meta, St or Shell)
+// and you do not import GTK libraries in GNOME Shell (Gdk, Gtk or Adw)
+
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import GObject from 'gi://GObject';
+
+export { Gio, GLib, GObject };

src/indicator/defaultMenu.ts

@@ -1,4 +1,4 @@
-import { GObject, St, Clutter, Gio } from '@gi';
+import { GObject, St, Clutter, Gio } from '@gi.ext';
 import SignalHandling from '@utils/signalHandling';
 import Indicator from './indicator';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';

src/indicator/editingMenu.ts

@@ -1,4 +1,4 @@
-import { St } from '@gi';
+import { St } from '@gi.ext';
 import Indicator from './indicator';
 import * as IndicatorUtils from './utils';
 import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';

src/indicator/indicator.ts

@@ -1,4 +1,4 @@
-import { St, Clutter, Shell, Gio } from '@gi';
+import { St, Clutter, Shell, Gio } from '@gi.ext';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
 import Settings from '@settings/settings';

src/indicator/layoutButton.ts

@@ -1,4 +1,4 @@
-import { St, Clutter, Mtk } from '@gi';
+import { St, Clutter, Mtk } from '@gi.ext';
 import LayoutWidget from '@/components/layout/LayoutWidget';
 import SnapAssistTile from '@/components/snapassist/snapAssistTile';
 import Layout from '@/components/layout/Layout';

src/indicator/utils.ts

@@ -1,4 +1,4 @@
-import { St, Clutter, Gio } from '@gi';
+import { St, Clutter, Gio } from '@gi.ext';
 
 export const createButton = (
     iconName: string,

src/keybindings.ts

@@ -1,5 +1,5 @@
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
-import { GObject, Meta, Gio, Shell, GLib } from '@gi';
+import { GObject, Meta, Gio, Shell, GLib } from '@gi.ext';
 import Settings from '@settings/settings';
 import SettingsOverride from '@settings/settingsOverride';
 import SignalHandling from '@utils/signalHandling';

src/prefs.ts

@@ -1,6 +1,4 @@
-import Gtk from 'gi://Gtk'; // Starting from GNOME 40, the preferences dialog uses GTK4
-import Adw from 'gi://Adw';
-import { Gio, GLib, Gdk, GObject } from '@prefs.gi';
+import { Gtk, Adw, Gio, GLib, Gdk, GObject } from '@gi.prefs';
 import Settings, { ActivationKey } from './settings/settings';
 import { logger } from './utils/logger';
 import { ExtensionPreferences } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';

src/settings/settings.ts

@@ -1,4 +1,4 @@
-import { Gio, GObject, GLib } from '@prefs.gi';
+import { Gio, GObject, GLib } from '@gi.shared';
 import Layout from '../components/layout/Layout';
 import Tile from '../components/layout/Tile';
 

src/settings/settingsExport.ts

@@ -1,4 +1,4 @@
-import { Gio, GLib } from '@prefs.gi';
+import { Gio, GLib } from '@gi.prefs';
 import Settings from '@settings/settings';
 import SettingsOverride from '@settings/settingsOverride';
 

src/settings/settingsOverride.ts

@@ -1,5 +1,5 @@
 import Settings from '@settings/settings';
-import { Gio, GLib } from '@prefs.gi';
+import { Gio, GLib } from '@gi.shared';
 
 export default class SettingsOverride {
     // map schema_id with map of keys and old values

src/utils/gjs.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { GObject } from '@gi';
+import { GObject } from '@gi.ext';
 
 // Taken from https://github.com/material-shell/material-shell/blob/main/src/utils/gjs.ts
 // Decorator function to call `GObject.registerClass` with the given class.

src/utils/globalState.ts

@@ -2,7 +2,7 @@ import { registerGObjectClass } from '@utils/gjs';
 import Layout from '../components/layout/Layout';
 import Settings from '../settings/settings';
 import SignalHandling from './signalHandling';
-import { GObject, Meta, Gio } from '@gi';
+import { GObject, Meta, Gio } from '@gi.ext';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import { logger } from './logger';