You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: newIDE/docs/Supported-JavaScript-features-and-coding-style.md
+28-3
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,7 @@
1
1
# Supported JavaScript features and coding styles
2
2
3
+
> *tl;dr:* the game engine is a classic "ES5" JavaScript project and needs caution. The editor is a modern, shiny codebase with bundling and latest JavaScript features.
4
+
3
5
## For the game engine (GDJS) and extensions
4
6
5
7
Most of the game engine and extensions are written using "classic" JavaScript "ES5" syntax, i.e: using `function` and `var` for declaring functions. "Classes" are declared using `function` for the constructor, and function declared on the `prototype` of the class for methods.
@@ -8,15 +10,32 @@ Most of the game engine and extensions are written using "classic" JavaScript "E
8
10
9
11
Hence the recommendation **currently** is to stay with "ES5" syntax and do a *cautious adoption* of new features. If you know that your extension will only be used on evergreen browsers and platforms like Electron, arrow functions and const/let are good practice.
10
12
13
+
> Android 4.x is supported by GDevelop so we still need to avoid fat arrows functions (`=>`) and `let`/`const`.
14
+
11
15
In the **future**, we might default to newer JavaScript syntax if supported on most platforms (and potentially run a "codemod" to transform and modernize the whole codebase).
12
16
17
+
### Can I declare variables in the global scope? (i.e: what about bundling?)
18
+
19
+
In short: no.
20
+
21
+
The game engine and extensions don't have any advanced bundling applied using Webpack.
22
+
This means that all the JS files from the game engine/extensions are living in the "global scope". Hence, if you writing `var myVariable = 1;` outside of a function, then `myVariable` will be a global variable.
23
+
24
+
This is problematic because global variables are polluting the global namespace and, worse, can be overriden by other extensions/scripts.
25
+
26
+
To avoid this:
27
+
28
+
* Always declare your objects and functions as part of `gdjs`: `gdjs.MyExtension = {};`, `gdjs.MyExtension.someStaticVariableOrFunction`...
29
+
* For objects/behaviors, the convention is to attach them to `gdjs` too: `gdjs.MyRuntimeObject`, `gdjs.MyRuntimeBehavior`...
30
+
* More generally, don't use `var something = blabla` outside of any function or object.
31
+
13
32
### What about typing?
14
33
15
34
> ℹ️ Typing is adding annotation about the type of variables, to enable auto completion and have automatic verification for bugs.
16
35
17
-
It's recommended to add JSDoc annotation so that the game engine and your extensions can have:
36
+
It's recommended to add **[JSDoc annotation](https://jsdoc.app/index.html)** so that the game engine and your extensions can have:
18
37
**documentation* auto-generated
19
-
**auto-completion* provided by **[Typescript]**.
38
+
**auto-completion* provided by **[Typescript](https://www.typescriptlang.org/)**.
20
39
* in the **future**, static verification for bugs with **Typescript**.
21
40
22
41
### What about code formatting?
@@ -30,6 +49,12 @@ The editor sources are processed by Babel, which *transpiles* the JavaScript lat
30
49
31
50
All source files should use the arrow function (`=>`), `class`, `let`/`const` and anything that makes the codebase more readable, concise and less error prone.
32
51
52
+
### Can I declare variables in the global scope? (i.e: what about bundling?)
53
+
54
+
In short: you don't need to worry because all files are bundled.
55
+
56
+
This is because the editor sources are bundled with Webpack. Anything that you declare is scoped to the file - the only thing available outside are the thing that you expose with `export` and that you `import` something else. The joy!
57
+
33
58
### What about typing?
34
59
35
60
The codebase is typed using **[Flow](https://flow.org/)**. It's a powerful typechecker that does not require any recompilation.
@@ -40,4 +65,4 @@ While properly typing can be seen as cumbersome, it's something that is rather q
40
65
41
66
### What about code formatting?
42
67
43
-
All the code is auto formatted with Prettier. Install it in your IDE/text editor and never think about formatting again in your life 🎉
68
+
All the code is auto formatted with Prettier. Install it in your IDE/text editor and never think about formatting again in your life. The joy! 🎉
0 commit comments