Wonderland Engine JavaScript API

https://github.com/wonderlandengine/api
Admin
Provides JavaScript and TypeScript bindings for Wonderland Engine's WebAssembly runtime, enabling...
Tokens:1,513
Snippets:14
Trust Score:7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @wonderlandengine/api

Source: https://github.com/wonderlandengine/api/blob/master/README.md

Instructions for installing the Wonderland Engine API package using npm or yarn. It also covers updating to the latest version.

```sh
npm i --save @wonderlandengine/api
# or:
yarn add @wonderlandengine/api
```

```sh
npm i --save @wonderlandengine/api@latest
```

--------------------------------

### Install Wonderland Engine API

Source: https://github.com/wonderlandengine/api/blob/master/packages/api/README.md

Installs the Wonderland Engine API package using npm or yarn. Use `@latest` to update to the newest version.

```sh
npm i --save @wonderlandengine/api
# or:
yarn add @wonderlandengine/api
```

```sh
npm i --save @wonderlandengine/api@latest
```

--------------------------------

### Write Custom Component in JavaScript

Source: https://github.com/wonderlandengine/api/blob/master/README.md

Example of how to write a custom component using JavaScript for Wonderland Engine. It demonstrates importing Component and Property, defining static properties, and implementing the update loop.

```js
import {Component, Property} from '@wonderlandengine/api';

class Forward extends Component {
    static TypeName = 'forward';
    static Properties = {
        speed: Property.float(1.5)
    };

    _forward = new Float32Array(3);

    update(dt) {
        this.object.getForward(this._forward);
        this._forward[0] *= this.speed*dt;
        this._forward[1] *= this.speed*dt;
        this._forward[2] *= this.speed*dt;
        this.object.translateLocal(this._forward);
    }
}
```

--------------------------------

### Write Custom Component in TypeScript

Source: https://github.com/wonderlandengine/api/blob/master/README.md

Example of how to write a custom component using TypeScript for Wonderland Engine. It utilizes decorators for property definition and demonstrates the component's update logic.

```ts
import {Component} from '@wonderlandengine/api';
import {Component} from '@wonderlandengine/api/decorators.js';

class Forward extends Component {
    static TypeName = 'forward';

    @property.float(1.5)
    speed!: number;

    private _forward = new Float32Array(3);

    update(dt) {
        this.object.getForward(this._forward);
        this._forward[0] *= this.speed*dt;
        this._forward[1] *= this.speed*dt;
        this._forward[2] *= this.speed*dt;
        this.object.translateLocal(this._forward);
    }
}
```

--------------------------------

### Create JavaScript Component for Wonderland Engine

Source: https://github.com/wonderlandengine/api/blob/master/packages/api/README.md

Example of a custom JavaScript component using the Wonderland Engine API. It defines a 'forward' component with a 'speed' property and implements an update loop to move the object.

```javascript
import {Component, Property} from '@wonderlandengine/api';

class Forward extends Component {
    static TypeName = 'forward';
    static Properties = {
        speed: Property.float(1.5)
    };

    _forward = new Float32Array(3);

    update(dt) {
        this.object.getForward(this._forward);
        this._forward[0] *= this.speed*dt;
        this._forward[1] *= this.speed*dt;
        this._forward[2] *= this.speed*dt;
        this.object.translateLocal(this._forward);
    }
}
```

--------------------------------

### Create TypeScript Component for Wonderland Engine

Source: https://github.com/wonderlandengine/api/blob/master/packages/api/README.md

Example of a custom TypeScript component using the Wonderland Engine API. It utilizes decorators for property definition and implements an update loop for object movement.

```typescript
import {Component} from '@wonderlandengine/api';
import {property} from '@wonderlandengine/api/decorators.js';

class Forward extends Component {
    static TypeName = 'forward';

    @property.float(1.5)
    speed!: number;

    private _forward = new Float32Array(3);

    update(dt) {
        this.object.getForward(this._forward);
        this._forward[0] *= this.speed*dt;
        this._forward[1] *= this.speed*dt;
        this._forward[2] *= this.speed*dt;
        this.object.translateLocal(this._forward);
    }
}
```

--------------------------------

### Build Test Projects

Source: https://github.com/wonderlandengine/api/blob/master/packages/test-e2e/README.md

Before running end-to-end tests, you need to build the test projects. Navigate to the 'test' directory and use the 'npm run build' command, providing the path to the wonderlandeditor-binary.

```sh
cd ./test
npm run build -- path/to/wonderlandeditor-binary
```

--------------------------------

### Run All End-to-End Tests

Source: https://github.com/wonderlandengine/api/blob/master/packages/test-e2e/README.md

Execute all end-to-end tests from the API root directory. It's mandatory to pass the Wonderland Editor deploy folder using the '--deploy' argument. If omitted, it defaults to '../../deploy'.

```sh
npm run test:e2e -- --deploy path/to/wonderland/deploy
```

--------------------------------

### Run Specific Test File

Source: https://github.com/wonderlandengine/api/blob/master/packages/test-e2e/README.md

To run tests within a specific file, append the filename to the 'npm run test:e2e' command, followed by the '--deploy' argument. Paths are relative to the 'test' folder.

```sh
npm run test:e2e -- component.test.ts --deploy path/to/wonderland/deploy
```

--------------------------------

### Configure Peer Dependencies for Libraries

Source: https://github.com/wonderlandengine/api/blob/master/README.md

Guidance for library maintainers on how to specify API version compatibility in `package.json` using `peerDependencies`. This ensures users can integrate libraries with compatible Wonderland Engine API versions.

```json
{
  "peerDependencies": {
    "@wonderlandengine/api": ">= 1.0.0 < 2"
  }
}
```

--------------------------------

### Build Wonderland Engine API

Source: https://github.com/wonderlandengine/api/blob/master/README.md

Commands for building the Wonderland Engine API TypeScript code. It includes options for a standard build and a watch mode for continuous compilation during development.

```sh
cd api
npm run build
npm run build:watch
```

--------------------------------

### Configure Peer Dependencies for Library Maintainers

Source: https://github.com/wonderlandengine/api/blob/master/packages/api/README.md

Specifies compatible API version ranges for a library using 'peerDependencies' in package.json. This ensures users can integrate the library with various Wonderland Engine API versions.

```json
{
    "peerDependencies": {
        "@wonderlandengine/api": ">= 1.0.0 < 2"
    }
}
```

--------------------------------

### Watch Tests for Changes

Source: https://github.com/wonderlandengine/api/blob/master/packages/test-e2e/README.md

Enable continuous test execution as files change by adding the '--watch' flag to the 'npm run test:e2e' command. This is useful for iterative development.

```sh
npm run test:e2e -- --deploy path/to/wonderland/deploy --watch
```

--------------------------------

### Filter Tests with Grep

Source: https://github.com/wonderlandengine/api/blob/master/packages/test-e2e/README.md

Filter tests using a regular expression with the '--grep' or '-g' flag. This allows running only tests that match a specific pattern, optionally combined with a file path.

```sh
npm run test:e2e -- -g 'MeshComponent'
npm run test:e2e -- component.test.ts -g 'MeshComponent'
```
Tokens:
Raw