[gnome-shell/wip/fmuellner/es6-classes: 11/12] docs: Update HACKING
- From: Florian Müllner <fmuellner src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/fmuellner/es6-classes: 11/12] docs: Update HACKING
- Date: Thu, 24 Jan 2019 15:11:11 +0000 (UTC)
commit 9ecaea1d2193b1717df27cd38af4112ed357db6a
Author: Florian Müllner <fmuellner gnome org>
Date: Tue Nov 27 23:03:07 2018 +0100
docs: Update HACKING
We no longer use Lang.Class(), so update the guidelines accordingly.
https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/361
HACKING.md | 80 ++++++++++++++++++++++++++------------------------------------
1 file changed, 34 insertions(+), 46 deletions(-)
---
diff --git a/HACKING.md b/HACKING.md
index c9c0de661..d8d940d04 100644
--- a/HACKING.md
+++ b/HACKING.md
@@ -120,40 +120,34 @@ See [What's new in JavaScript 1.7](https://developer.mozilla.org/en/JavaScript/N
## Classes
-There are many approaches to classes in JavaScript. We use our own class framework
-(sigh), which is built in gjs. The advantage is that it supports inheriting from
-GObjects, although this feature isn't used very often in the Shell itself.
+There are many approaches to classes in JavaScript. We use standard ES6 classes
+whenever possible, that is when not inheriting from GObjects.
```javascript
- var IconLabelMenuItem = new Lang.Class({
- Name: 'IconLabelMenuItem',
- Extends: PopupMenu.PopupMenuBaseItem,
-
- _init(icon, label) {
- this.parent({ reactive: false });
+ var IconLabelMenuItem = class extends PopupMenu.PopupMenuBaseItem {
+ constructor(icon, label) {
+ super({ reactive: false });
this.actor.add_child(icon);
this.actor.add_child(label);
- },
+ }
open() {
log("menu opened!");
}
- });
+ };
```
-* 'Name' is required. 'Extends' is optional. If you leave it out, you will
- automatically inherit from Object.
-
-* Leave a blank line between the "class header" (Name, Extends, and other
- things) and the "class body" (methods). Leave a blank line between each
- method.
-
-* No space before the colon, one space after.
-
-* No trailing comma after the last item.
+For GObject inheritence, we use the GObject.registerClass() function provided
+by gjs.
+```javascript
+ var MyActor = GObject.registerClass(
+ class MyActor extends Clutter.Actor {
+ _init(params) {
+ super._init(params);
-* Make sure to use a semicolon after the closing paren to the class. It's
- still a giant function call, even though it may resemble a more
- conventional syntax.
+ this.name = 'MyCustomActor';
+ }
+ });
+```
## GObject Introspection
@@ -161,17 +155,16 @@ GObject Introspection is a powerful feature that allows us to have native
bindings for almost any library built around GObject. If a library requires
you to inherit from a type to use it, you can do so:
```javascript
- var MyClutterActor = new Lang.Class({
- Name: 'MyClutterActor',
- Extends: Clutter.Actor,
+ var MyClutterActor = GObject.registerClass(
+ class MyClutterActor extends Clutter.Actor {
vfunc_get_preferred_width(actor, forHeight) {
return [100, 100];
- },
+ }
vfunc_get_preferred_height(actor, forWidth) {
return [100, 100];
- },
+ }
vfunc_paint(actor) {
let alloc = this.get_allocation_box();
@@ -206,20 +199,18 @@ that has a property called `actor`. We call this wrapper class the "delegate".
We sometimes use expando properties to set a property called `_delegate` on
the actor itself:
```javascript
- var MyClass = new Lang.Class({
- Name: 'MyClass',
-
- _init() {
+ var MyClass = class {
+ constructor() {
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!");
}
- });
+ };
```
The 'delegate' property is important for anything which trying to get the
@@ -252,19 +243,18 @@ notation.
A more realistic example would be connecting to a signal on a method of a
prototype:
```javascript
- const Lang = imports.lang;
const FnorbLib = imports.fborbLib;
- var MyClass = new Lang.Class({
+ var MyClass = class {
_init() {
let fnorb = new FnorbLib.Fnorb();
fnorb.connect('frobate', this._onFnorbFrobate.bind(this));
- },
+ }
_onFnorbFrobate(fnorb) {
this._updateFnorb();
}
- });
+ };
```
## Object literal syntax
@@ -298,23 +288,21 @@ property.
```javascript
var ANIMATION_TIME = 2000;
- var MyClass = new Lang.Class({
- Name: 'MyClass',
-
- _init() {
+ var MyClass = class {
+ constructor() {
this.actor = new St.BoxLayout();
this._position = 0;
- },
+ }
get position() {
return this._position;
- },
+ }
set position(value) {
this._position = value;
this.actor.set_position(value, value);
}
- });
+ };
let myThing = new MyClass();
Tweener.addTween(myThing,
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]