From 01a386b286a0471a81968bdc8bae2cc84ccec226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Thu, 25 Jan 2024 23:15:42 +0100
Subject: [PATCH] doc: Fix style errors in coding style

As we've adapted our coding style, the corresponding documentation
hasn't always caught up. Fix the errors that eslint would point
out if it checked the code snippets.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3146>
---
 HACKING.md | 67 +++++++++++++++++++++++++++---------------------------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/HACKING.md b/HACKING.md
index b42eecf9f..337bb94bb 100644
--- a/HACKING.md
+++ b/HACKING.md
@@ -28,7 +28,7 @@ what to do.
         else
             bar = do_thing(b);
 
-        if (var == 5) {
+        if (var === 5) {
             for (let i = 0; i < 10; i++)
                 print(i);
         } else {
@@ -122,15 +122,15 @@ whenever possible, that is when not inheriting from GObjects.
 ```javascript
     export class IconLabelMenuItem extends PopupMenu.PopupMenuBaseItem {
         constructor(icon, label) {
-            super({ reactive: false });
+            super({reactive: false});
             this.actor.add_child(icon);
             this.actor.add_child(label);
         }
 
         open() {
-            log("menu opened!");
+            log('menu opened!');
         }
-    };
+    }
 ```
 
 For GObject inheritance, we use the GObject.registerClass() function provided
@@ -138,8 +138,8 @@ by gjs.
 ```javascript
     export const MyActor = GObject.registerClass(
     class MyActor extends Clutter.Actor {
-        _init(params) {
-            super._init(params);
+        constructor(params) {
+            super(params);
 
             this.name = 'MyCustomActor';
         }
@@ -154,26 +154,25 @@ you to inherit from a type to use it, you can do so:
 ```javascript
     export const MyClutterActor = GObject.registerClass(
     class MyClutterActor extends Clutter.Actor {
-
         vfunc_get_preferred_width(forHeight) {
-             return [100, 100];
+            return [100, 100];
         }
 
         vfunc_get_preferred_height(forWidth) {
-             return [100, 100];
+            return [100, 100];
         }
 
         vfunc_paint(paintContext) {
-             let framebuffer = paintContext.get_framebuffer();
-             let coglContext = framebuffer.get_context();
-             let alloc = this.get_allocation_box();
+            let framebuffer = paintContext.get_framebuffer();
+            let coglContext = framebuffer.get_context();
+            let alloc = this.get_allocation_box();
 
-             let pipeline = Cogl.Pipeline.new(coglContext);
-             pipeline.set_color4ub(255, 0, 0, 255);
+            let pipeline = Cogl.Pipeline.new(coglContext);
+            pipeline.set_color4ub(255, 0, 0, 255);
 
-             framebuffer.draw_rectangle(pipeline,
-		 alloc.x1, alloc.y1,
-		 alloc.x2, alloc.y2);
+            framebuffer.draw_rectangle(pipeline,
+                alloc.x1, alloc.y1,
+                alloc.x2, alloc.y2);
         }
     });
 ```
@@ -200,8 +199,8 @@ the actor itself:
 ```javascript
     export const MyActor = GObject.registerClass(
     class MyActor extends Clutter.Actor {
-        _init(params) {
-            super._init(params);
+        constructor(params) {
+            super(params);
             this._delegate = this;
         }
     });
@@ -211,16 +210,16 @@ Or using the deprecated `actor`:
 ```javascript
     export class MyClass {
         constructor() {
-            this.actor = new St.Button({ text: "This is a button" });
+            this.actor = new St.Button({text: 'This is a button'});
             this.actor._delegate = this;
 
             this.actor.connect('clicked', this._onClicked.bind(this));
         }
 
         _onClicked(actor) {
-            actor.set_label("You clicked the button!");
+            actor.set_label('You clicked the button!');
         }
-    };
+    }
 ```
 
 The 'delegate' property is important for anything which trying to get the
@@ -265,30 +264,30 @@ prototype:
         _onFnorbFrobate(fnorb) {
             this._updateFnorb();
         }
-    };
+    }
 ```
 
 ## Object literal syntax
 
 In JavaScript, these are equivalent:
 ```javascript
-    foo = { 'bar': 42 };
-    foo = { bar: 42 };
+    foo = {'bar': 42};
+    foo = {bar: 42};
 ```
 
 and so are these:
 ```javascript
-    var b = foo['bar'];
-    var b = foo.bar;
+    b = foo['bar'];
+    b = foo.bar;
 ```
 
 If your usage of an object is like an object, then you're defining "member
-variables." For member variables, use the no-quotes no-brackets syntax: `{ bar:
-42 }` `foo.bar`.
+variables." For member variables, use the no-quotes no-brackets syntax:
+`{bar: 42}` `foo.bar`.
 
 If your usage of an object is like a hash table (and thus conceptually the keys
-can have special chars in them), don't use quotes, but use brackets: `{ bar: 42
-}`, `foo['bar']`.
+can have special chars in them), don't use quotes, but use brackets:
+`{bar: 42}`, `foo['bar']`.
 
 ## Animations
 
@@ -301,7 +300,7 @@ are animatable, which means they can use implicit animations:
             x,
             y,
             duration: 500, // ms
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
     }
 ```
@@ -317,7 +316,7 @@ be preferred over the more verbose:
         actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
         actor.set({
             x,
-            y
+            y,
         });
 
         actor.restore_easing_state();
@@ -332,7 +331,7 @@ actor (or actor meta) properties that cannot use implicit animations:
         let factor = desaturate ? 1.0 : 0.0;
         actor.ease_property('@effects.desaturate.factor', factor, {
             duration: 500, // ms
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
     }
 ```