Upgrade to GNOME Shell 45 and ESM

.vscode/settings.json

@@ -4,5 +4,8 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "cSpell.words": [
+    "girs"
+  ]
 }

.yarnrc.yml

@@ -1,5 +1,5 @@
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+compressionLevel: mixed
 
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+enableGlobalCache: false
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

examples/hello-world/esbuild.js

@@ -1,8 +1,13 @@
-const { build } = require("esbuild");
-const fs = require("fs");
-const path = require("path");
-const AdmZip = require("adm-zip");
-const metadata = require("./src/metadata.json");
+import { build } from "esbuild";
+import { copyFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from 'url';
+import AdmZip from "adm-zip";
+import metadata from "./src/metadata.json" assert { type: 'json' };
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+console.debug(`Building ${metadata.name} v${metadata.version}...`);
 
 build({
     entryPoints: ['src/extension.ts'],
@@ -16,21 +21,21 @@ build({
     // firefox91  // Since GJS 1.71.1
     // firefox102 // Since GJS 1.73.2
     target: "firefox78",
+    platform: "neutral",
     platform: "node",
-    // platform: "neutral",
     // mainFields: ['main'],
     // conditions: ['require', 'default'],
-    // format: 'cjs',
-    external: ['gi://*', 'system', 'gettext', 'cairo'],
+    format: 'esm',
+    external: ['gi://*', 'resource://*', 'system', 'gettext', 'cairo'],
 }).then(() => {
-    const metaSrc = path.resolve(__dirname, "src/metadata.json");
-    const metaDist = path.resolve(__dirname, "dist/metadata.json");
+    const metaSrc = resolve(__dirname, "src/metadata.json");
+    const metaDist = resolve(__dirname, "dist/metadata.json");
     const zipFilename = `${metadata.uuid}.zip`;
-    const zipDist = path.resolve(__dirname, zipFilename);
-    fs.copyFileSync(metaSrc, metaDist);
+    const zipDist = resolve(__dirname, zipFilename);
+    copyFileSync(metaSrc, metaDist);
 
     const zip = new AdmZip();
-    zip.addLocalFolder(path.resolve(__dirname, "dist"));
+    zip.addLocalFolder(resolve(__dirname, "dist"));
     zip.writeZip(zipDist);
 
     console.log(`Build complete. Zip file: ${zipFilename}\n`);

examples/hello-world/package.json

@@ -2,6 +2,7 @@
   "name": "@gjsify/gnome-shell-hello-world-example",
   "version": "3.0.0",
   "description": "Simple Gnome Shell Hello World Extension example",
+  "type": "module",
   "main": "dist/extension.js",
   "private": true,
   "scripts": {
@@ -14,10 +15,12 @@
   "license": "MIT",
   "devDependencies": {
     "adm-zip": "^0.5.10",
-    "esbuild": "^0.17.19",
-    "typescript": "^5.0.4"
+    "esbuild": "^0.19.5",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@girs/gnome-shell": "workspace:^"
+    "@girs/gnome-shell": "workspace:^",
+    "@girs/gobject-2.0": "^2.78.0-3.2.4",
+    "@girs/st-13": "^13.0.0-3.2.4"
   }
 }

examples/hello-world/src/extension.ts

@@ -1,6 +1,9 @@
 import { misc, ui, ExtensionMetadata } from '@girs/gnome-shell';
 
-const { St, GObject } = imports.gi;
+import St from '@girs/st-13';
+import GObject from '@girs/gobject-2.0';
+
+// const { St, GObject } = imports.gi;
 
 const ExtensionUtils = misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();

package.json

@@ -3,6 +3,7 @@
     "version": "3.0.0",
     "description": "GJS TypeScript type definitions for GNOME Shell Extensions",
     "main": "src/index.js",
+    "type": "module",
     "private": true,
     "typedoc": {
         "entryPoint": "./src/index.d.ts",
@@ -41,8 +42,8 @@
         "url": "https://github.com/gjsify/gnome-shell/issues"
     },
     "homepage": "https://github.com/gjsify/gnome-shell#readme",
-    "packageManager": "yarn@3.5.1",
+    "packageManager": "yarn@4.0.2",
     "devDependencies": {
-        "typescript": "^5.0.4"
+        "typescript": "^5.2.2"
     }
 }

packages/gnome-shell/README.md

@@ -27,4 +27,16 @@ If you prefer CommonJS, you can also use this:
 const GnomeShell = require('@girs/gnome-shell');
 ```
 
-GNOME Shell extensions currently [do not yet support ESM imports](https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1499) and instead rely on the global `imports` [variable from GJS](https://gjs.guide/guides/gjs/intro.html). However, you can still use ESM syntax in TypeScript, but you need to ensure that your bundler translates these imports to CommonJS. We recommended to use [esbuild](https://esbuild.github.io/), which we also use [in our example](examples/hello-world).
+## ESM vs. CommonJS
+
+GJS supports two different import syntaxes. The new modern ESM syntax and the old global imports syntax.
+
+In TypeScript projects for GJS and GNOME Shell extensions, you have the flexibility to use `ESM` syntax and then decide the import syntax for your bundled file. If your bundler is configured to use `CommonJS`, it will convert to the GJS-specific global imports syntax, like `const moduleName = imports.gi[moduleName]`. This is different from the traditional `require` syntax seen in Node.js. The global imports syntax is chosen because it aligns with the CommonJS format supported by NPM, which is used for the generated type definitions and this package.
+
+On the other hand, if you configure your bundler to use ESM, it will retain the ESM import syntax. It's crucial to ensure that your bundler is set up to correctly translate and bundle these imports into either CommonJS or ESM format, depending on your project's requirements.
+
+This approach is particularly important due to the `@girs` types, which include both `*.cjs `files, using the GJS global imports syntax, and `*.js` files, which utilize the ESM syntax. By appropriately setting up your bundler, you can control which syntax—CommonJS or ESM—is used in your project. The choice of CommonJS in this context is also due to the similarity between the GJS-specific global imports and CommonJS syntax, allowing for easier management and bundling in these specific types of projects.
+
+If you build an GNOME Shell extension for the GNOME Shell < 45, you need to use CommonJS because it has [no support for ESM](https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1499) and you need to use the global imports syntax, but since GNOME Shell 45 you can use the ESM syntax.
+
+We recommended to use [esbuild](https://esbuild.github.io/) for bundling, which we also use [in our example](examples/hello-world).

packages/gnome-shell/package.json

@@ -3,6 +3,7 @@
     "version": "3.0.0",
     "description": "GJS TypeScript type definitions for GNOME Shell Extensions",
     "main": "src/index.js",
+    "type": "module",
     "typedoc": {
         "entryPoint": "./src/index.d.ts",
         "readmeFile": "./README.md",
@@ -16,24 +17,24 @@
         "publish:next": "yarn npm publish --tolerate-republish --tag next --access public"
     },
     "dependencies": {
-        "@girs/atk-1.0": "^2.45.1-3.0.0",
-        "@girs/cally-12": "^12.0.0-3.0.0",
-        "@girs/clutter-12": "^12.0.0-3.0.0",
-        "@girs/cogl-2.0": "^2.0.0-3.0.0",
-        "@girs/gcr-4": "^4.0.0-3.0.0",
-        "@girs/gio-2.0": "^2.76.1-3.0.0",
-        "@girs/gjs": "^3.0.0",
-        "@girs/glib-2.0": "^2.76.1-3.0.0",
-        "@girs/gnomebg-4.0": "^4.0.0-3.0.0",
-        "@girs/gnomedesktop-4.0": "^4.0.0-3.0.0",
-        "@girs/gobject-2.0": "^2.76.1-3.0.0",
-        "@girs/meta-12": "^12.0.0-3.0.0",
-        "@girs/shell-12": "^12.0.0-3.0.0",
-        "@girs/shew-0": "^0.0.0-3.0.0",
-        "@girs/st-12": "^12.0.0-3.0.0"
+        "@girs/atk-1.0": "^2.50.0-3.2.4",
+        "@girs/cally-13": "^13.0.0-3.2.4",
+        "@girs/clutter-13": "^13.0.0-3.2.4",
+        "@girs/cogl-2.0": "^2.0.0-3.2.4",
+        "@girs/gcr-4": "^4.1.0-3.2.4",
+        "@girs/gio-2.0": "^2.78.0-3.2.4",
+        "@girs/gjs": "^3.2.4",
+        "@girs/glib-2.0": "^2.78.0-3.2.4",
+        "@girs/gnomebg-4.0": "^4.0.0-3.2.4",
+        "@girs/gnomedesktop-4.0": "^4.0.0-3.2.4",
+        "@girs/gobject-2.0": "^2.78.0-3.2.4",
+        "@girs/meta-13": "^13.0.0-3.2.4",
+        "@girs/shell-13": "^13.0.0-3.2.4",
+        "@girs/shew-0": "^0.0.0-3.2.4",
+        "@girs/st-13": "^13.0.0-3.2.4"
     },
     "devDependencies": {
-        "typescript": "^5.0.4"
+        "typescript": "^5.2.2"
     },
     "keywords": [
         "Gir",

packages/gnome-shell/src/index.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  misc: imports.misc,
+  ui: imports.ui
+}

packages/gnome-shell/src/index.js

@@ -1,4 +1,2 @@
-module.exports = {
-  misc: imports.misc,
-  ui: imports.ui
-}
+export const misc = imports.misc;
+export const ui = imports.ui;

packages/gnome-shell/src/misc/dbusUtils.cjs

@@ -0,0 +1 @@
+module.exports = imports.misc.dbusUtils;

packages/gnome-shell/src/misc/dbusUtils.js

@@ -1 +1 @@
-module.exports = imports.misc.dbusUtils;
+export * from 'resource:///org/gnome/shell/misc/dbusUtils.js';

packages/gnome-shell/src/misc/extensionUtils.cjs

@@ -0,0 +1 @@
+module.exports = imports.misc.extensionUtils;

packages/gnome-shell/src/misc/extensionUtils.js

@@ -1 +1 @@
-module.exports = imports.misc.extensionUtils;
+export * from 'resource:///org/gnome/shell/misc/extensionUtils.js';

packages/gnome-shell/src/misc/fileUtils.cjs

@@ -0,0 +1 @@
+module.exports = imports.misc.fileUtils;

packages/gnome-shell/src/misc/fileUtils.js

@@ -1 +1 @@
-module.exports = imports.misc.fileUtils;
+export * from 'resource:///org/gnome/shell/misc/fileUtils.js';

packages/gnome-shell/src/misc/gnomeSession.cjs

@@ -0,0 +1,3 @@
+module.exports = imports.misc.gnomeSession;
+
+

packages/gnome-shell/src/misc/gnomeSession.js

@@ -1,3 +1 @@
-module.exports = imports.misc.gnomeSession;
-
-
+export * from 'resource:///org/gnome/shell/misc/gnomeSession.js';

packages/gnome-shell/src/misc/parentalControlsManager.cjs

@@ -0,0 +1 @@
+module.exports = imports.misc.parentalControlsManager;

packages/gnome-shell/src/misc/parentalControlsManager.d.ts

@@ -2,7 +2,7 @@
 
 import type GObject from '@girs/gobject-2.0';
 import type Gio from '@girs/gio-2.0';
-import type Shell from '@girs/shell-12';
+import type Shell from '@girs/shell-13';
 
 declare class ParentalControlsManager extends GObject.Object {
 

packages/gnome-shell/src/misc/parentalControlsManager.js

@@ -1 +1 @@
-module.exports = imports.misc.parentalControlsManager;
+export * from 'resource:///org/gnome/shell/misc/parentalControlsManager.js';

packages/gnome-shell/src/misc/signals.cjs

@@ -0,0 +1,3 @@
+module.exports = imports.misc.signals;
+
+

packages/gnome-shell/src/misc/signals.js

@@ -1,3 +1 @@
-module.exports = imports.misc.signals;
-
-
+export * from 'resource:///org/gnome/shell/misc/signals.js';

packages/gnome-shell/src/ui/accessDialog.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.accessDialog;

packages/gnome-shell/src/ui/accessDialog.js

@@ -1 +1 @@
-module.exports = imports.ui.accessDialog;
+export * from 'resource:///org/gnome/shell/ui/accessDialog.js';

packages/gnome-shell/src/ui/altTab.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.altTab;

packages/gnome-shell/src/ui/altTab.d.ts

@@ -1,11 +1,8 @@
 // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/altTab.js
 
-
-
-
 import type GLib from '@girs/glib-2.0';
-import type Clutter from '@girs/clutter-12';
-import type Meta from '@girs/meta-12';
+import type Clutter from '@girs/clutter-13';
+import type Meta from '@girs/meta-13';
 
 import { SwitcherPopup } from './switcherPopup.js'
 

packages/gnome-shell/src/ui/altTab.js

@@ -1 +1 @@
-module.exports = imports.ui.altTab;
+export * from 'resource:///org/gnome/shell/ui/altTab.js';

packages/gnome-shell/src/ui/animation.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.animation;

packages/gnome-shell/src/ui/animation.d.ts

@@ -2,7 +2,7 @@
 
 import type GLib from '@girs/glib-2.0';
 import type Gio from '@girs/gio-2.0';
-import type St from '@girs/st-12';
+import type St from '@girs/st-13';
 
 export class Animation extends St.Bin {
     constructor(file: Gio.File, width: number, height: number, speed: number);

packages/gnome-shell/src/ui/animation.js

@@ -1 +1 @@
-module.exports = imports.ui.animation;
+export * from 'resource:///org/gnome/shell/ui/animation.js';

packages/gnome-shell/src/ui/appDisplay.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.appDisplay;

packages/gnome-shell/src/ui/appDisplay.d.ts

@@ -1,8 +1,8 @@
 // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/appDisplay.js
 
 import type Gio from '@girs/gio-2.0';
-import type St from '@girs/st-12';
-import type Clutter from '@girs/clutter-12';
+import type St from '@girs/st-13';
+import type Clutter from '@girs/clutter-13';
 
 import { GridSearchResult } from './search.js';
 

packages/gnome-shell/src/ui/appDisplay.js

@@ -1 +1 @@
-module.exports = imports.ui.appDisplay;
+export * from 'resource:///org/gnome/shell/ui/appDisplay.js';

packages/gnome-shell/src/ui/appFavorites.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.appFavorites;

packages/gnome-shell/src/ui/appFavorites.d.ts

@@ -1,6 +1,6 @@
 // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/appFavorites.js
 
-import type Shell from '@girs/shell-12';
+import type Shell from '@girs/shell-13';
 
 import { EventEmitter } from '../misc/signals.js';
 

packages/gnome-shell/src/ui/appFavorites.js

@@ -1 +1 @@
-module.exports = imports.ui.appFavorites;
+export * from 'resource:///org/gnome/shell/ui/appFavorites.js';

packages/gnome-shell/src/ui/appMenu.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.appMenu;

packages/gnome-shell/src/ui/appMenu.d.ts

@@ -1,8 +1,8 @@
 // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/appMenu.js
 
-import type St from '@girs/st-12';
-import type Clutter from '@girs/clutter-12';
-import type Shell from '@girs/shell-12';
+import type St from '@girs/st-13';
+import type Clutter from '@girs/clutter-13';
+import type Shell from '@girs/shell-13';
 
 import type { PopupMenu, PopupSeparatorMenuItem, PopupMenuSection } from './popupMenu.js';
 import type { getAppFavorites } from './appFavorites.js';

packages/gnome-shell/src/ui/appMenu.js

@@ -1 +1 @@
-module.exports = imports.ui.appMenu;
+export * from 'resource:///org/gnome/shell/ui/appMenu.js';

packages/gnome-shell/src/ui/audioDeviceSelection.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.audioDeviceSelection;

packages/gnome-shell/src/ui/audioDeviceSelection.d.ts

@@ -1,7 +1,7 @@
 // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/audioDeviceSelection.js
 
 import type Gio from '@girs/gio-2.0';
-import type St from '@girs/st-12';
+import type St from '@girs/st-13';
 
 import type { ModalDialog } from './modalDialog.js';
 

packages/gnome-shell/src/ui/audioDeviceSelection.js

@@ -1 +1 @@
-module.exports = imports.ui.audioDeviceSelection;
+export * from 'resource:///org/gnome/shell/ui/audioDeviceSelection.js';

packages/gnome-shell/src/ui/background.cjs

@@ -0,0 +1 @@
+module.exports = imports.ui.background;