- remove own types, and solely use the @girs/gnome-shell types

- fix the rollup config and tsconfig to use the new types
-  fix alle names of properties, that can be snake_case OR camelCase, but the types use camelCase all the time, so it had to be changed
-  fix the type of openExtensionPreferences, that only works with an Extension, and not every ExtensionBase
- remove unused method 'getMonitorConstraintForIndex'

rollup.config.mjs

@@ -30,23 +30,22 @@ const importsGeneral = {
   'gi://Adw?version=1': { name: 'gi://Adw' },
 
   // extension.js + prefs.js resources
-  '@gnome-shell/misc/util': { name: 'resource://EXT_ROOT/misc/util.js' },
-  '@gnome-shell/misc/animationUtils': { name: 'resource://EXT_ROOT/misc/animationUtils.js' },
-  '@gnome-shell/extensions/extension': { name: 'resource://EXT_ROOT/extensions/extension.js' },
-  '@gnome-shell/ui/layout': { name: 'resource://EXT_ROOT/ui/layout.js' },
-  '@gnome-shell/ui/main': { name: 'resource://EXT_ROOT/ui/main.js' },
-  '@gnome-shell/ui/messageTray': { name: 'resource://EXT_ROOT/ui/messageTray.js' },
-  '@gnome-shell/ui/lightbox': { name: 'resource://EXT_ROOT/ui/lightbox.js' },
-  '@gnome-shell/ui/dialog': { name: 'resource://EXT_ROOT/ui/dialog.js' },
-  '@gnome-shell/ui/modalDialog': { name: 'resource://EXT_ROOT/ui/modalDialog.js' },
-  '@gnome-shell/ui/popupMenu': { name: 'resource://EXT_ROOT/ui/popupMenu.js' },
-  '@gnome-shell/ui/panelMenu': { name: 'resource://EXT_ROOT/ui/panelMenu.js' },
+  '@girs/gnome-shell/dist/misc/animationUtils': { name: 'resource://EXT_ROOT/misc/animationUtils.js' },
+  '@girs/gnome-shell/dist/extensions/extension': { name: 'resource://EXT_ROOT/extensions/extension.js' },
+  '@girs/gnome-shell/dist/ui/layout': { name: 'resource://EXT_ROOT/ui/layout.js' },
+  '@girs/gnome-shell/dist/ui/main': { name: 'resource://EXT_ROOT/ui/main.js' },
+  '@girs/gnome-shell/dist/ui/messageTray': { name: 'resource://EXT_ROOT/ui/messageTray.js' },
+  '@girs/gnome-shell/dist/ui/lightbox': { name: 'resource://EXT_ROOT/ui/lightbox.js' },
+  '@girs/gnome-shell/dist/ui/dialog': { name: 'resource://EXT_ROOT/ui/dialog.js' },
+  '@girs/gnome-shell/dist/ui/modalDialog': { name: 'resource://EXT_ROOT/ui/modalDialog.js' },
+  '@girs/gnome-shell/dist/ui/popupMenu': { name: 'resource://EXT_ROOT/ui/popupMenu.js' },
+  '@girs/gnome-shell/dist/ui/panelMenu': { name: 'resource://EXT_ROOT/ui/panelMenu.js' },
 };
 
 // prefs.js specific resources
 const importsPrefs = {
   ...importsGeneral,
-  '@gnome-shell/extensions/prefs': { name: 'resource://EXT_ROOT/extensions/prefs.js' },
+  '@girs/gnome-shell/dist/extensions/prefs': { name: 'resource://EXT_ROOT/extensions/prefs.js' },
 };
 
 const ExtensionEntries = Object.fromEntries(

src/components/codePanoItem.ts

@@ -1,7 +1,7 @@
 import Gio from '@girs/gio-2.0';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import Pango from '@girs/pango-1.0';
 import St1 from '@girs/st-14';
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
@@ -18,11 +18,11 @@ export class CodePanoItem extends PanoItem {
     this.codeItemSettings = this.settings.get_child('code-item');
 
     this.label = new St1.Label({
-      style_class: 'pano-item-body-code-content',
-      clip_to_allocation: true,
+      styleClass: 'pano-item-body-code-content',
+      clipToAllocation: true,
     });
-    this.label.clutter_text.use_markup = true;
-    this.label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+    this.label.clutterText.useMarkup = true;
+    this.label.clutterText.ellipsize = Pango.EllipsizeMode.END;
     this.body.add_child(this.label);
     this.connect('activated', this.setClipboardContent.bind(this));
     this.setStyle();
@@ -41,7 +41,7 @@ export class CodePanoItem extends PanoItem {
     this.body.set_style(`background-color: ${bodyBgColor}`);
     this.label.set_style(`font-size: ${bodyFontSize}px; font-family: ${bodyFontFamily};`);
 
-    this.label.clutter_text.set_markup(markupCode(this.dbItem.content.trim(), characterLength));
+    this.label.clutterText.set_markup(markupCode(this.dbItem.content.trim(), characterLength));
   }
 
   private setClipboardContent(): void {

src/components/colorPanoItem.ts

@@ -1,7 +1,7 @@
 import Clutter from '@girs/clutter-14';
 import Gio from '@girs/gio-2.0';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import St1 from '@girs/st-14';
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
@@ -20,29 +20,29 @@ export class ColorPanoItem extends PanoItem {
 
     const colorContainer = new St1.BoxLayout({
       vertical: false,
-      x_expand: true,
-      y_expand: true,
-      y_align: Clutter.ActorAlign.FILL,
-      x_align: Clutter.ActorAlign.FILL,
-      style_class: 'color-container',
+      xExpand: true,
+      yExpand: true,
+      yAlign: Clutter.ActorAlign.FILL,
+      xAlign: Clutter.ActorAlign.FILL,
+      styleClass: 'color-container',
       style: `background-color: ${this.dbItem.content};`,
     });
 
     this.label = new St1.Label({
-      x_align: Clutter.ActorAlign.CENTER,
-      y_align: Clutter.ActorAlign.CENTER,
-      x_expand: true,
-      y_expand: true,
+      xAlign: Clutter.ActorAlign.CENTER,
+      yAlign: Clutter.ActorAlign.CENTER,
+      xExpand: true,
+      yExpand: true,
       text: this.dbItem.content,
-      style_class: 'color-label',
+      styleClass: 'color-label',
     });
 
     colorContainer.add_child(this.label);
 
     colorContainer.add_constraint(
       new Clutter.AlignConstraint({
         source: this,
-        align_axis: Clutter.AlignAxis.Y_AXIS,
+        alignAxis: Clutter.AlignAxis.Y_AXIS,
         factor: 0.005,
       }),
     );

src/components/emojiPanoItem.ts

@@ -1,8 +1,8 @@
 import Clutter from '@girs/clutter-14';
 import Gio from '@girs/gio-2.0';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import Pango from '@girs/pango-1.0';
 import St1 from '@girs/st-14';
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
@@ -21,24 +21,24 @@ export class EmojiPanoItem extends PanoItem {
 
     const emojiContainer = new St1.BoxLayout({
       vertical: false,
-      x_expand: true,
-      y_expand: true,
-      y_align: Clutter.ActorAlign.FILL,
-      x_align: Clutter.ActorAlign.FILL,
-      style_class: 'emoji-container',
+      xExpand: true,
+      yExpand: true,
+      yAlign: Clutter.ActorAlign.FILL,
+      xAlign: Clutter.ActorAlign.FILL,
+      styleClass: 'emoji-container',
     });
 
     this.label = new St1.Label({
-      x_align: Clutter.ActorAlign.CENTER,
-      y_align: Clutter.ActorAlign.CENTER,
-      x_expand: true,
-      y_expand: true,
+      xAlign: Clutter.ActorAlign.CENTER,
+      yAlign: Clutter.ActorAlign.CENTER,
+      xExpand: true,
+      yExpand: true,
       text: this.dbItem.content,
-      style_class: 'pano-item-body-emoji-content',
+      styleClass: 'pano-item-body-emoji-content',
     });
-    this.label.clutter_text.line_wrap = true;
-    this.label.clutter_text.line_wrap_mode = Pango.WrapMode.WORD_CHAR;
-    this.label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+    this.label.clutterText.lineWrap = true;
+    this.label.clutterText.lineWrapMode = Pango.WrapMode.WORD_CHAR;
+    this.label.clutterText.ellipsize = Pango.EllipsizeMode.END;
     emojiContainer.add_child(this.label);
 
     this.body.add_child(emojiContainer);

src/components/filePanoItem.ts

@@ -1,8 +1,8 @@
 import Clutter from '@girs/clutter-14';
 import Gio from '@girs/gio-2.0';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import Pango from '@girs/pango-1.0';
 import St1 from '@girs/st-14';
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType, FileOperation } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
@@ -25,11 +25,11 @@ export class FilePanoItem extends PanoItem {
     this.fileItemSettings = this.settings.get_child('file-item');
 
     const container = new St1.BoxLayout({
-      style_class: 'copied-files-container',
+      styleClass: 'copied-files-container',
       vertical: true,
-      x_expand: true,
-      y_expand: false,
-      y_align: Clutter.ActorAlign.FILL,
+      xExpand: true,
+      yExpand: false,
+      yAlign: Clutter.ActorAlign.FILL,
     });
 
     this.fileList
@@ -40,27 +40,27 @@ export class FilePanoItem extends PanoItem {
       .forEach((uri) => {
         const bl = new St1.BoxLayout({
           vertical: false,
-          style_class: 'copied-file-name',
-          x_expand: true,
-          x_align: Clutter.ActorAlign.FILL,
-          clip_to_allocation: true,
-          y_align: Clutter.ActorAlign.FILL,
+          styleClass: 'copied-file-name',
+          xExpand: true,
+          xAlign: Clutter.ActorAlign.FILL,
+          clipToAllocation: true,
+          yAlign: Clutter.ActorAlign.FILL,
         });
         bl.add_child(
           new St1.Icon({
-            icon_name: this.operation === FileOperation.CUT ? 'edit-cut-symbolic' : 'edit-copy-symbolic',
-            x_align: Clutter.ActorAlign.START,
-            icon_size: 14,
-            style_class: 'file-icon',
+            iconName: this.operation === FileOperation.CUT ? 'edit-cut-symbolic' : 'edit-copy-symbolic',
+            xAlign: Clutter.ActorAlign.START,
+            iconSize: 14,
+            styleClass: 'file-icon',
           }),
         );
         const uriLabel = new St1.Label({
           text: uri,
-          style_class: 'pano-item-body-file-name-label',
-          x_align: Clutter.ActorAlign.FILL,
-          x_expand: true,
+          styleClass: 'pano-item-body-file-name-label',
+          xAlign: Clutter.ActorAlign.FILL,
+          xExpand: true,
         });
-        uriLabel.clutter_text.ellipsize = Pango.EllipsizeMode.MIDDLE;
+        uriLabel.clutterText.ellipsize = Pango.EllipsizeMode.MIDDLE;
         bl.add_child(uriLabel);
         container.add_child(bl);
       });

src/components/imagePanoItem.ts

@@ -1,7 +1,7 @@
 import Clutter from '@girs/clutter-14';
 import Gio from '@girs/gio-2.0';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import St1 from '@girs/st-14';
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
@@ -35,56 +35,56 @@ export class ImagePanoItem extends PanoItem {
     );
 
     this.metaContainer = new St1.BoxLayout({
-      style_class: 'pano-item-body-meta-container',
+      styleClass: 'pano-item-body-meta-container',
       vertical: true,
-      x_expand: true,
-      y_expand: true,
-      y_align: Clutter.ActorAlign.END,
-      x_align: Clutter.ActorAlign.FILL,
+      xExpand: true,
+      yExpand: true,
+      yAlign: Clutter.ActorAlign.END,
+      xAlign: Clutter.ActorAlign.FILL,
     });
 
     const resolutionContainer = new St1.BoxLayout({
       vertical: false,
-      x_expand: true,
-      y_align: Clutter.ActorAlign.FILL,
-      x_align: Clutter.ActorAlign.FILL,
-      style_class: 'pano-item-body-image-resolution-container',
+      xExpand: true,
+      yAlign: Clutter.ActorAlign.FILL,
+      xAlign: Clutter.ActorAlign.FILL,
+      styleClass: 'pano-item-body-image-resolution-container',
     });
 
     this.resolutionTitle = new St1.Label({
       text: 'Resolution',
-      x_align: Clutter.ActorAlign.START,
-      x_expand: true,
-      style_class: 'pano-item-body-image-meta-title',
+      xAlign: Clutter.ActorAlign.START,
+      xExpand: true,
+      styleClass: 'pano-item-body-image-meta-title',
     });
     this.resolutionValue = new St1.Label({
       text: `${width} x ${height}`,
-      x_align: Clutter.ActorAlign.END,
-      x_expand: false,
-      style_class: 'pano-item-body-image-meta-value',
+      xAlign: Clutter.ActorAlign.END,
+      xExpand: false,
+      styleClass: 'pano-item-body-image-meta-value',
     });
     resolutionContainer.add_child(this.resolutionTitle);
     resolutionContainer.add_child(this.resolutionValue);
 
     const sizeContainer = new St1.BoxLayout({
       vertical: false,
-      x_expand: true,
-      y_align: Clutter.ActorAlign.FILL,
-      x_align: Clutter.ActorAlign.FILL,
-      style_class: 'pano-item-body-image-size-container',
+      xExpand: true,
+      yAlign: Clutter.ActorAlign.FILL,
+      xAlign: Clutter.ActorAlign.FILL,
+      styleClass: 'pano-item-body-image-size-container',
     });
 
     this.sizeLabel = new St1.Label({
       text: 'Size',
-      x_align: Clutter.ActorAlign.START,
-      x_expand: true,
-      style_class: 'pano-item-body-image-meta-title',
+      xAlign: Clutter.ActorAlign.START,
+      xExpand: true,
+      styleClass: 'pano-item-body-image-meta-title',
     });
     this.sizeValue = new St1.Label({
       text: prettyBytes(size),
-      x_align: Clutter.ActorAlign.END,
-      x_expand: false,
-      style_class: 'pano-item-body-image-meta-value',
+      xAlign: Clutter.ActorAlign.END,
+      xExpand: false,
+      styleClass: 'pano-item-body-image-meta-value',
     });
     sizeContainer.add_child(this.sizeLabel);
     sizeContainer.add_child(this.sizeValue);
@@ -94,7 +94,7 @@ export class ImagePanoItem extends PanoItem {
     this.metaContainer.add_constraint(
       new Clutter.AlignConstraint({
         source: this,
-        align_axis: Clutter.AlignAxis.Y_AXIS,
+        alignAxis: Clutter.AlignAxis.Y_AXIS,
         factor: 0.001,
       }),
     );

src/components/indicator/clearHistoryDialog.ts

@@ -1,14 +1,14 @@
 import Clutter from '@girs/clutter-14';
-import type St from '@girs/st-13';
-import * as dialog from '@gnome-shell/ui/dialog';
-import * as modalDialog from '@gnome-shell/ui/modalDialog';
-import type { ExtensionBase } from '@pano/types/extension/extension';
+import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
+import { MessageDialogContent } from '@girs/gnome-shell/dist/ui/dialog';
+import { ModalDialog } from '@girs/gnome-shell/dist/ui/modalDialog';
+import type St from '@girs/st-14';
 import { registerGObjectClass } from '@pano/utils/gjs';
 import { gettext, logger } from '@pano/utils/shell';
 const debug = logger('clear-history-dialog');
 
 @registerGObjectClass
-export class ClearHistoryDialog extends modalDialog.ModalDialog {
+export class ClearHistoryDialog extends ModalDialog {
   private cancelButton: St.Button;
   private clearButton: St.Button;
   private onClear: () => Promise<void>;
@@ -31,7 +31,7 @@ export class ClearHistoryDialog extends modalDialog.ModalDialog {
       action: this.onClearButtonPressed.bind(this),
     });
 
-    const content = new dialog.MessageDialogContent({
+    const content = new MessageDialogContent({
       title: _('Clear History'),
       description: _('Are you sure you want to clear history?'),
     });

src/components/indicator/index.ts

@@ -1,15 +1,15 @@
-import { ExtensionBase } from '@gnome-shell/extensions/extension';
+import type { Extension } from '@girs/gnome-shell/dist/extensions/extension';
 import { SettingsMenu } from '@pano/components/indicator/settingsMenu';
 import { addToStatusArea } from '@pano/utils/ui';
 
 export default class PanoIndicator {
   private indicatorChangeSignalId: number | null;
   private settingsMenu: SettingsMenu | null;
-  private extension: ExtensionBase;
+  private extension: Extension;
   private onClear: () => Promise<void>;
   private onToggle: () => void;
 
-  constructor(ext: ExtensionBase, onClear: () => Promise<void>, onToggle: () => void) {
+  constructor(ext: Extension, onClear: () => Promise<void>, onToggle: () => void) {
     this.extension = ext;
     this.onClear = onClear;
     this.onToggle = onToggle;