-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: update examples to show js and ts code
- Loading branch information
Showing
7 changed files
with
202 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,77 +1,117 @@ | ||
# Load json in singleton | ||
|
||
This example shows how to load a file like a ``config`` inside a singleton to access it everywhere. | ||
We use ``TypeScript`` for this example all `.ts` files will be compiled as `.mjs` to the folder `scripts/generated/**`. If you use `TypeScript` you need to set `"resolveJsonModule": true` inside your `tsconfig.json`. | ||
This example shows how to load a file like a `config` inside a singleton to access it everywhere. | ||
|
||
For the `TypeScript` examples, all `.ts` files will be compiled as `.mjs` to the folder `scripts/generated/**`. | ||
|
||
> **Note:** If you use `TypeScript` you need to set `"resolveJsonModule": true` inside your `tsconfig.json`. | ||
## 1. Create file | ||
|
||
We create a new folder named ``config`` and a new file `test.json`. | ||
We create a new folder named `config` and a new file `test.json`. | ||
|
||
Next we write this to the ``test.json``: | ||
Next we write this to the `test.json`: | ||
|
||
````json title="test.json" | ||
```json title="test.json" | ||
{ | ||
"test": true | ||
} | ||
```` | ||
``` | ||
|
||
## 2. Create the singleton | ||
|
||
We create a new file inside our `src` folder like ``read-config.ts`` and add this code to it: | ||
We create a new file inside our `src` folder like `read-config.(mjs|ts)` and add this code to it: | ||
|
||
````ts title="read-config.ts" | ||
// @ts-ignore | ||
import TestJson from "res://config/test.json"; | ||
=== "JavaScript" | ||
|
||
type TestType = { | ||
test: boolean; | ||
}; | ||
```javascript title="read-config.mjs" | ||
import TestJson from "res://config/test.json"; | ||
|
||
export default class ReadConfig extends godot.Node { | ||
static _singleton: ReadConfig; | ||
export default class ReadConfig extends godot.Node { | ||
static _singleton; | ||
|
||
static get singleton() { | ||
return ReadConfig._singleton; | ||
} | ||
static get singleton() { | ||
return ReadConfig._singleton; | ||
} | ||
|
||
constructor() { | ||
super(); | ||
if (!ReadConfig._singleton) { | ||
ReadConfig._singleton = this; | ||
constructor() { | ||
super(); | ||
if (!ReadConfig._singleton) { | ||
ReadConfig._singleton = this; | ||
} | ||
} | ||
|
||
// This property is available for other classes | ||
config = TestJson; | ||
} | ||
} | ||
|
||
// This property is available for other classes | ||
config: TestType = TestJson as TestType; | ||
} | ||
```` | ||
``` | ||
|
||
=== "TypeScript" | ||
|
||
```ts title="read-config.ts" | ||
// @ts-ignore | ||
import TestJson from "res://config/test.json"; | ||
|
||
type TestType = { | ||
test: boolean; | ||
}; | ||
|
||
export default class ReadConfig extends godot.Node { | ||
static _singleton: ReadConfig; | ||
|
||
static get singleton() { | ||
return ReadConfig._singleton; | ||
} | ||
|
||
constructor() { | ||
super(); | ||
if (!ReadConfig._singleton) { | ||
ReadConfig._singleton = this; | ||
} | ||
} | ||
|
||
// This property is available for other classes | ||
config: TestType = TestJson as TestType; | ||
} | ||
``` | ||
|
||
## 3. Autoload singleton in project | ||
|
||
We need to update the ``[autoload]`` inside `project.godot`: | ||
We need to update the `[autoload]` inside `project.godot`: | ||
|
||
````text title="project.godot" | ||
```text title="project.godot" | ||
... | ||
[autoload] | ||
; Use the generated `.mjs` file instead of `.ts` | ||
ReadConfig="*res://scripts/generated/read-config.mjs" | ||
... | ||
```` | ||
``` | ||
|
||
## 4. Use the singleton in other class | ||
|
||
In another class e.g. ``main.ts`` you need to import the `ReadConfig` then you can access every public property and method from `ReadConfig` via `ReadConfig.singleton`: | ||
In another class e.g. `main.(mjs|ts)` you need to import the `ReadConfig` then you can access every public property and method from `ReadConfig` via `ReadConfig.singleton`: | ||
|
||
````ts title="main.ts" | ||
import ReadConfig from "./read-config"; | ||
=== "JavaScript" | ||
|
||
export default class Main extends godot.Node { | ||
_ready(): void { | ||
console.log(ReadConfig.singleton.config.test); // prints "true" | ||
} | ||
} | ||
```ts title="main.mjs" | ||
import ReadConfig from "./read-config"; | ||
|
||
export default class Main extends godot.Node { | ||
_ready() { | ||
console.log(ReadConfig.singleton.config.test); // prints "true" | ||
} | ||
} | ||
``` | ||
|
||
```` | ||
=== "TypeScript" | ||
|
||
```ts title="main.ts" | ||
import ReadConfig from "./read-config"; | ||
|
||
export default class Main extends godot.Node { | ||
_ready(): void { | ||
console.log(ReadConfig.singleton.config.test); // prints "true" | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
# Use GDScript in TypeScript | ||
|
||
This example shows how to use a class written in GDScript in another TS class. | ||
|
||
For the `TypeScript` examples, all `.ts` files will be compiled as `.mjs` to the folder `scripts/generated/**`. | ||
|
||
## 1. Create the GDScript file | ||
|
||
First we create a simple class with GDScript inside a new file `scripts/gd/GDTest.gd`: | ||
|
||
````gdscript title="GDTest.gd" | ||
extends Node | ||
func _ready(): | ||
pass | ||
func print_in_gd_test(): | ||
print("gd_test") | ||
```` | ||
|
||
## 2. Create a declaration (*.d.ts) for GDScript (only TypeScript) | ||
|
||
For proper TypeScript support we need to add a ``gdtest.d.ts`` file: | ||
|
||
````ts title="gdtest.d.ts" | ||
declare module "res://scripts/gd/GDTest.gd" { | ||
class GDTest { | ||
call(func: "print_in_gd_test"): void; | ||
|
||
static new() { | ||
return this; | ||
} | ||
} | ||
export = GDTest; | ||
} | ||
```` | ||
|
||
## 3. Use the class inside your TS file | ||
|
||
In the end we need to call the ``GDTest.gd`` from another `(.mjs|.ts)` file, like `main.(mjs|ts)`: | ||
|
||
=== "JavaScript" | ||
````ts title="main.mjs" | ||
import GDTest from "res://scripts/gd/GDTest.gd"; | ||
|
||
export default class Main extends godot.Node { | ||
_ready() { | ||
const gdTest = GDTest.new(); | ||
gdTest.call("print_in_gd_test"); | ||
} | ||
} | ||
|
||
```` | ||
=== "TypeScript" | ||
````ts title="main.ts" | ||
import GDTest from "res://scripts/gd/GDTest.gd"; | ||
|
||
export default class Main extends godot.Node { | ||
_ready(): void { | ||
const gdTest: GDTest = GDTest.new(); | ||
gdTest.call("print_in_gd_test"); | ||
} | ||
} | ||
|
||
```` | ||
|
||
> **Note:** The important thing here is that you use `new()` to instantiate and `call` to execute the function |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.