Rebar

https://github.com/stuyk/rebar-altv
Admin
Rebar is a TypeScript framework for alt:V that prioritizes plugins and translations, offering a...
Tokens:134,309
Snippets:507
Trust Score:9.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Rebar-altv Dependencies

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Installs all necessary npm packages and alt:V server binaries for Rebar. This command also compiles the code once.

```bash
pnpm install
```

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

### Start Local Documentation Server

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Starts a local server to view the Rebar documentation. This command assumes Retype is installed globally and the docs are in the './docs' directory.

```sh
retype start ./docs
```

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

### Start Rebar Server (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server on Windows using pnpm.

```javascript
pnpm start

```

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

### Start Rebar Server (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server on Linux using pnpm.

```javascript
pnpm start:linux

```

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

### Run Rebar-altv Development Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Starts the Rebar-altv development server. This mode ensures the server automatically reloads and reconnects your game when source code is modified.

```bash
pnpm dev
```

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

### Run Rebar-altv Production Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Starts the Rebar-altv server in production mode. This is typically used for deploying the server after development is complete.

```bash
pnpm start
```

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

### Start Rebar in Development Mode (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode on Windows using pnpm.

```javascript
pnpm dev

```

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

### Start Rebar in Development Mode (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode on Linux using pnpm.

```javascript
pnpm dev:linux

```

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

### Install Retype for Local Documentation

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Installs the Retype application globally to allow for local documentation serving. This is a prerequisite for running the documentation locally.

```sh
pnpm install retypeapp --global
```

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

### Run Rebar AltV Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Command to start the Rebar AltV development server.

```bash
pnpm dev

```

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

### Install Dependencies (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs project dependencies using pnpm for Windows.

```javascript
pnpm install

```

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

### Start Rebar in Hot Reload Mode (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode with hot reloading enabled on Windows using pnpm.

```javascript
pnpm dev:hot

```

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

### Implement Server-Side Keybind

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Explains how to create server-side keybinds in Rebar, allowing for callbacks when a specific key is pressed. This example teleports the player when 'K' is pressed.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const Keybinder = Rebar.useKeybinder();

const K_KEY = 75;

Keybinder.on(K_KEY, (player) => {
    player.pos = new alt.Vector3({
        x: 912,
        y: -199,
        z: 73,
    });
});
```

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

### Install Dependencies (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs project dependencies using pnpm for Linux.

```javascript
pnpm install

```

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

### Example Registration Output

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This bash output shows an example of the data structure logged to the server console after a successful user registration in an AltV server using Rebar. It includes the generated MongoDB document ID, username, and the hashed password.

```bash
{
  _id: '6670a71daafac905d549f376',
  username: 'hello',
  password: 'c1wXtKqGCzUxXgOjmfrQt0tOQN5AjYSLer4/jwMeICM=$dWF2Wc7wL1VgnSTo1RcMAmcH7Oa5nidQ9SctqXb+51BZLa6wcKBgTwmztir61yDPVWPmH+OCC72Jsv9nip2UNPJF/kPrbNOohhl3VVjYg5ovGZ3Evw4Qyr8IJABvrjiSZ65hict60EBci0tY+VWmijg3jbKXsCshxWpq7V7n3L4zmXni1kp+YSwGN5IJtIBn3LuOrbEKrkDN+cIoKvlyISU0CvZGze0wxsTjlEqQKUye151qIHTW/+fkafQZPEwsuTcbgdtv5A35z37VjtT46PVgAHJAJ8Rp2joSxn2+2LkzVd8l4YtpI3f3tRNcq/ziWnd6zTONHsadu4nF4QQMIYZfWsHQkynfP1fFgJJCP5dlPAggR5VDkQTNmug34FB5X1+9i86Tpf1P/87OXlzrVITRfFYs8SCsmFKOnYailvgtyZ899sAuXl85ZIUdd0xoI397ewZRKZmcRIv647TywhxhnyCOudOSIBm7tUHmeHx+xMTKQEuT98JX04oYb69KekMmu83ZwE6O4OKtxc71tU/ojblXuMSZRSigTAPKEolDxaaf5zW5DFnHeNeGV+Esn2WPwvEAur6zeWnIZeeUZYRfHIZKQMJRkaY6TQH1qlkqGJoCDgQePSG4b6bU1cvaI9qf7J57uSHMF4rgVO71hhxWFPXRNrU7vVSk6WS1y8A='
}
```

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

### Clone Rebar-altv Repository

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

This command downloads the Rebar-altv source code from GitHub to your local machine. Ensure you are in the desired directory before executing.

```bash
git clone https://github.com/Stuyk/rebar-altv/
```

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

### Get Async API and Hook Events

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/api/api.md

This example shows how to asynchronously retrieve an API (like 'auth-api') in Rebar AltV and then hook into its events, such as `onLogin`. It utilizes `useClientApi().getAsync()` and demonstrates logging a message when the player is ready.

```javascript
import * as alt from 'alt-client';
import { useClientApi } from '@Client/api/index.js';

const api = useClientApi();

async function init() {
    // Wait for isReady and Get the API
    const authApi = await api.getAsync('auth-api');

    // Hook in your events
    authApi.onLogin((player) => {
        alt.log('Player Ready!');
    });
}

init();
```

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

### Show Screen Mission Text

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Demonstrates how to display text in the bottom center of the screen, commonly used for mission-related information. This example shows how to display a website URL.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.on('playerConnect', (player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showMissionText('Visit our website at https://rebarv.com');
});
```

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

### Draggable Component Example Page (Vue/TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/webview/components/draggable.md

An example Vue.js page showcasing two draggable divs. It includes the necessary script setup for handling drag and click events and logging their status to the console.

```vue
<script lang="ts" setup>
    import Draggable from '../../../../webview/src/components/Draggable.vue';

    function handleDrag(from_id: string, to_id: string) {
        console.log(`drag: `, from_id, to_id);
    }

    function handleClick(id: string) {
        console.log('left-click: ', id);
    }

    function handleDoubleClick(id: string) {
        console.log('dbl-click: ', id);
    }

    function handleMiddleClick(id: string) {
        console.log('middle-click: ', id);
    }

    function handleRightClick(id: string) {
        console.log('right-click: ', id);
    }
</script>

<template>
    <div class="flex flex-row gap-2">
        <Draggable
            @onDrag="handleDrag"
            @onLeftClick="handleClick"
            @onDblClick="handleDoubleClick"
            @onMiddleClick="handleMiddleClick"
            @onRightClick="handleRightClick"
        >
            <div class="size-32 bg-red-500" id="item-a">Item A</div>
        </Draggable>
        <Draggable
            @onDrag="handleDrag"
            @onLeftClick="handleClick"
            @onDblClick="handleDoubleClick"
            @onMiddleClick="handleMiddleClick"
            @onRightClick="handleRightClick"
        >
            <div class="size-32 bg-red-500" id="item-b">Item B</div>
        </Draggable>
    </div>
</template>
```

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

### Download Binaries (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Downloads necessary binaries for Rebar on Windows using pnpm.

```javascript
pnpm binaries

```

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

### Install VSCode Extensions for Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-04-opening-source.md

This snippet lists the necessary VSCode extension IDs to install for Rebar development. These extensions help with MongoDB integration, code formatting, TypeScript error display, Vue development, and Tailwind CSS support.

```bash
mongodb.mongodb-vscode
esbenp.prettier-vscode
YoavBls.pretty-ts-errors
Vue.volar
bradlc.vscode-tailwindcss
```

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

### Nested Menus Example (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/menus/native-menu.md

Provides an example of creating nested menus, where one menu can open another. It demonstrates how to manage the previous menu's state and provide a callback to return to it.

```typescript
function openMain() {
    const menu = useNativeMenu({
        header: 'main Menu',
        noExit: false,
        options: [
            {
                text: 'Menu 1',
                type: 'invoke',
                value: '',
                callback: () => {
                    openOne(menu);
                },
            },
            {
                text: 'Menu 2',
                type: 'invoke',
                value: '',
                callback: () => {
                    openTwo(menu);
                },
            },
        ],
    });

    menu.open();
}

function openOne(prevMenu: ReturnType<typeof useNativeMenu>) {
    prevMenu.destroy();

    const menu = useNativeMenu({
        header: 'Menu One',
        backCallback: openMain,
        options: [
            {
                text: 'Invoke Event',
                type: 'invoke',
                value: '',
                callback: (value) => {
                    alt.log(value);
                },
            },
        ],
    });

    menu.open();
}

function openTwo(prevMenu: ReturnType<typeof useNativeMenu>) {
    prevMenu.destroy();

    const menu = useNativeMenu({
        header: 'Menu Two',
        backCallback: openMain,
        options: [
            {
                text: 'Invoke Event',
                type: 'invoke',
                value: '',
                callback: (value) => {
                    alt.log(value);
                },
            },
        ],
    });

    menu.open();
}

openMain();
```

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

### Download Binaries (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Downloads necessary binaries for Rebar on Linux using pnpm.

```javascript
pnpm binaries

```

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

### Vue Component Example

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/what-is-a-plugin.md

An example of a Vue component that could be part of a shared UI plugin.

```vue
<template>
  <button><slot></slot></button>
</template>

<script setup>
// Component logic here
</script>

<style scoped>
button {
  /* Button styles */
}
</style>
```

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

### Keybind Example - FiveM vs Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/index.md

Demonstrates how to register a keybind in both FiveM (Lua) and Rebar (TypeScript). The FiveM example uses a Citizen.CreateThread loop to check for key presses, while Rebar utilizes a more direct Keybinder.on method.

```Lua
Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)

        if IsControlJustPressed(1, 51) then
            print("E key was pressed!")
        end
    end
end)
```

```TypeScript
Keybinder.on(75, (player) => {
    console.log('Pressed k');
});
```

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

### Teleport Player to Waypoint (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Registers a chat command '/tpwp' that teleports the player to their current waypoint. It uses Rebar's player and messenger modules to get the waypoint position and apply it to the player.

```TypeScript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const Messenger = Rebar.messenger.useMessenger();

Messenger.commands.register({
    name: '/tpwp',
    desc: 'teleport to a given waypoint',
    callback: async (player: alt.Player) => {
        const pos = await Rebar.player.useWaypoint(player).get();
        if (!pos) {
            return;
        }

        player.pos = pos.add(0, 0, 1);
    },
});
```

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

### Modify Server Configuration Settings

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Illustrates how to alter Rebar's server configuration settings by creating a plugin. This example shows how to disable various default behaviors like pistol whip, vehicle auto-start/stop, and UI elements.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const ServerConfig = Rebar.useServerConfig();

ServerConfig.set('disablePistolWhip', true);
ServerConfig.set('disableVehicleEngineAutoStart', true);
ServerConfig.set('disableVehicleEngineAutoStop', true);
ServerConfig.set('disableVehicleSeatSwap', true);
ServerConfig.set('hideAreaName', true);
ServerConfig.set('hideHealthArmour', true);
ServerConfig.set('hideMinimapInPage', true);
ServerConfig.set('hideMinimapInVehicle', true);
ServerConfig.set('hideMinimapOnFoot', true);
ServerConfig.set('hideStreetName', true);
ServerConfig.set('hideVehicleClass', true);
ServerConfig.set('hideVehicleName', true);
```

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

### Verify Git Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command checks if Git is installed on your system by displaying its version. It's a crucial step for version control operations within the project.

```bash
git version
```

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

### Navigate to Rebar-altv Directory

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Changes the current directory in the terminal to the cloned 'rebar-altv' folder, allowing you to execute commands within the project.

```bash
cd rebar-altv
```

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

### Example: Ban Endpoint with Hono

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useHono.md

A complete example demonstrating the creation of a `/ban` API endpoint using Hono and Rebar. It includes input validation, localOnly middleware, player data retrieval, and banning logic.

```typescript
import { HttpBindings } from "@hono/node-server";
import { useRebar } from "@Server/index.js";
import { Account } from "@Shared/types/account.js";
import { Hono } from "hono";

const Rebar = useRebar();
const hono = Rebar.useHono();
const app = new Hono<{ Bindings: HttpBindings }>();

app.get('/ban', hono.middlewares.localOnly, (c) => {
    let { reason, _id } = c.req.query();

    if (!_id) {
        c.status(400);
        return c.json({ data: 'ID was not provided' });
    }

    if (!reason) {
        reason = 'No Reason Given';
    }

    const onlinePlayer = Rebar.get.usePlayerGetter().byAccount(_id);
    if (!onlinePlayer) {
        const document = Rebar.document.virtual.useVirtual<Account>(_id, Rebar.database.CollectionNames.Accounts);
        if (!document.get()) {
            c.status(400);
            return c.json({ data: `Account does not exist on the server` });
        } else {
            document.setBulk({
                banned: true,
                reason,
            });
        }
    } else {
        const rPlayer = Rebar.usePlayer(onlinePlayer);
        rPlayer.account.setBanned(reason);
    }
    c.status(200);
    return c.json({ data: `Banned ${_id} with reason '${reason}'` });
})

hono.addRouter('/api/v1', app);
```

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

### Import Rebar Server API

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Demonstrates two ways to import the Rebar framework on the server-side for AltV. This is the initial step to access Rebar's functionalities.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
```

```javascript
import * as alt from 'alt-server';

const Rebar = alt.getMeta('Rebar');
```

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

### Manual Upgrade Steps

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Manual steps to upgrade Rebar by copying files and running pnpm commands.

```javascript
pnpm upgrade
pnpm install

```

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

### Get Client-Side API (With Arguments)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/api/api.md

This snippet illustrates how to get and use a client-side API that was registered with arguments in Rebar AltV. It shows fetching the API using `useClientApi().get()` and then invoking it with the necessary arguments.

```javascript
import { useClientApi } from '@Client/api/index.js';

const useMyCoolAPI = useClientApi().get('my-cool-api');

function someFunction(somePlayer: alt.Player) {
    useMyCoolAPI(somePlayer).logPlayerName();
}
```

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

### Verify Node.js Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command verifies the installation of Node.js by displaying its npm version. Node.js is essential for running JavaScript-based server-side applications.

```bash
npm --version
```

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

### Clone Rebar Repository

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Clones the Rebar repository from GitHub to your local machine using Git.

```bash
git clone https://github.com/Stuyk/rebar-altv/

```

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

### Navigate to Rebar Directory

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Changes the current directory to the cloned Rebar repository.

```bash
cd rebar-altv

```

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

### Run Development Server (Bash)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

Starts a local development server for the Rebar project. This allows for in-browser development and previewing changes without needing to rebuild in-game.

```bash
pnpm webview:dev
```

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

### TypeScript Interfaces for Object Structure

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-07-programming.md

Demonstrates how to define interfaces in TypeScript to specify the expected structure of objects. Includes examples of required and optional properties.

```TypeScript
interface User {
    name: string;
    age: number;
    data: {
        address: string;
    };
}

const user: User = {
    name: 'Kirk',
    age: 25,
    data: {
        address: 'everywhere',
    },
};

interface UserOptional {
    name: string;
    age: number;
    data?: {
        address: string;
    };
}

const user2: UserOptional = {
    name: 'Kirk',
    age: 25,
};
```

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

### Rebar Project Structure Example

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Illustrates the typical folder structure for a Rebar project, including client, server, shared, and plugin directories. It also shows the structure for a sample plugin with client, server, translate, and webview components.

```text
├───main
│   ├───client
│   ├───server
│   ├───shared
│   └───translate
└───plugins
    └───your-plugin
        ├───client
        │   └───index.ts
        ├───server
        │   └───index.ts
        ├───translate
        │   └───index.ts
        └───webview
            └───MyCustomPage.vue
```

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

### Create Index Files for Plugin

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Creates the main entry point files (index.ts) for both the server and client components of the plugin.

```bash
echo > src/plugins/my-first-plugin/server/index.ts

```

```bash
echo > src/plugins/my-first-plugin/client/index.ts

```

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

### Get Missing Number in Sequence

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/shared/utility.md

Finds a missing number within a given sequence of numbers, starting from a specified base.

```typescript
// Result should be 2
const numberResult = Utility.math.getMissingNumber([0, 1, 3], 0);
```

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

### Create Plugin Directories

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Creates the necessary folders for a new Rebar plugin, including separate directories for server and client-side code.

```bash
mkdir src/plugins/my-first-plugin

```

```bash
mkdir src/plugins/my-first-plugin/server

```

```bash
mkdir src/plugins/my-first-plugin/client

```

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

### Client-Side Plugin Initialization

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Sets up the initial client-side code for a Rebar plugin, including importing necessary modules and logging a message.

```typescript
import * as alt from 'alt-client';

alt.log('Hello from client!');

```

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

### Get Multiple Documents by Filter from Rebar Database

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useDatabase.md

Fetches multiple documents from a collection that match a given filter criteria. It returns an array of documents and provides an example of accessing the first result.

```typescript
async function test() {
    const results = await getMany<{ name: string }>({ name: 'Stuyk' }, 'Person');
    if (results.length <= 0) {
        console.warn('Could not find the data!');
        return;
    }

    const user = results[0];
    console.warn(`Found ${user.name}`);
}
```

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

### Retrieve Account Data

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-account.md

Illustrates how to retrieve the bound account data for a player using the `useAccount` hook and its `get` method. The retrieved data can then be accessed, for example, to log the player's email.

```typescript
const account = Rebar.document.account.useAccount(player);
const data = account.get();
console.log(data.email);
```

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

### Plugin Structure Example

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/what-is-a-plugin.md

Illustrates a comprehensive plugin structure for Rebar AltV, including client, server, shared, and resource files like fonts, images, RMLUI, sounds, and webview components.

```tree
├───main
│   ├───client
│   ├───server
│   ├───shared
│   └───translate
└───plugins
    └───your-plugin
        ├───dependencies.json (alt: package.json)
        ├───client
        │   └───index.ts
        ├───fonts
        │   ├───arial.otf
        │   └───inter.ttf
        ├───images
        │   ├───somelogo.png
        │   └───bg.jpg
        ├───rmlui
        │   └───index.html (yes this actually html)
        │   └───font.ttf
        ├───server
        │   └───index.ts
        ├───sounds
        │   ├───alert_a.ogg
        │   └───alert_b.ogg
        ├───translate
        │   └───index.ts
        └───webview
            └───MyCustomPage.vue
```

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

### Server-Side Plugin Initialization

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Sets up the initial server-side code for a Rebar plugin, including importing necessary modules and logging a message.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

alt.log('Hello from server!');

```

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

### Install libatomic (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs the libatomic library on Ubuntu 22.04+ using apt-get.

```bash
sudo apt-get update
sudo apt-get install libatomic1

```

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

### Server-Side Plugin Initialization (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/your-first-plugin.md

Initializes a server-side plugin for Rebar AltV. It imports necessary modules from 'alt-server' and '@Server/index.js', logs a message to the server console, and sets up the Rebar instance.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.log('Hello from Server!');
```

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

### Upgrade Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Upgrades an existing Rebar installation to the latest version using pnpm.

```javascript
pnpm rebar:upgrade

```

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

### Install pnpm Globally

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command installs the pnpm package manager globally using npm. It's a prerequisite for managing project dependencies.

```powershell
npm install -g pnpm
```

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

### Create Interaction Points with Visuals

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Details how to set up interaction points that players can activate by pressing 'E'. This includes creating local and global markers, text labels, and blips for visual cues.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';
import { MarkerType } from '@Shared/types/marker.js';

const Rebar = useRebar();

const posRef = new alt.Vector3({
    x: 912.6202392578125,
    y: -198.6721649169922,
    z: 71.22137451171875,
});

const interaction = Rebar.controllers.useInteraction(
    new alt.ColshapeCylinder(posRef.x, posRef.y, posRef.z, 3, 3),
    'player',
);

interaction.onEnter((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Entered the point!');
});

interaction.onLeave((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Left the point!');
});

interaction.on((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Pressed E on the Point!');
});

Rebar.controllers.useMarkerGlobal({
    pos: posRef,
    color: new alt.RGBA(0, 255, 0, 75),
    scale: new alt.Vector3(3, 3, 1),
    type: MarkerType.CYLINDER,
});

Rebar.controllers.useTextLabelGlobal({
    pos: posRef.add(0, 0, 1),
    text: 'Press E to do something!',
});

Rebar.controllers.useBlipGlobal({
    color: 6,
    pos: posRef,
    shortRange: true,
    sprite: 128,
    text: 'Interaction Point',
});
```

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

### Set PowerShell Execution Policy

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Sets the PowerShell execution policy to unrestricted, which may be necessary for installing pnpm on Windows.

```powershell
set-executionpolicy unrestricted
```

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

### Verify pnpm Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command checks if pnpm, a performant Node.js package manager, is installed. It's used for managing project dependencies efficiently.

```bash
pnpm --version
```

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

### Get Character Document

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-character.md

Retrieve the entire character document bound to a player using the `get` method from `useCharacter`. This returns the complete character data object.

```typescript
function someFunction(player: alt.Player) {
    const character = Rebar.document.character.useCharacter(player);
    const document = character.get();
}
```

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

### Create Vue Template for Authentication

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This Vue.js template defines a basic 'Hello World' component for the authentication page. It imports necessary Vue composables like 'ref', 'watch', and 'useEvents'.

```vue
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useEvents } from '../../../../webview/composables/useEvents';

const Events = useEvents();
</script>

<template>
    <div>Hello World!</div>
</template>
```

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

### Finish Player Loading Process

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This TypeScript function, `finish`, is responsible for completing the player's loading process after authentication and character selection. It reverses initial setup steps like freezing the player and camera, resets player properties (visibility, dimension, model), spawns the player at a specific location, and hides the webview using Rebar utilities.

```typescript
function finish(player: alt.Player) {
    player.frozen = false;
    player.visible = true;
    player.dimension = 0;
    player.model = 'mp_m_freemode_01';
    player.spawn(
        new alt.Vector3({
            x: -864.1437377929688,
            y: -172.6201934814453,
            z: 37.799232482910156,
        }),
    );

    const rPlayer = Rebar.usePlayer(player);
    rPlayer.world.freezeCamera(false);
    rPlayer.world.clearScreenBlur(200);
    rPlayer.world.enableControls();
    rPlayer.webview.hide('Authentication');
}
```

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

### Get World Information with useWorldGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Provides utilities for querying information about the in-game world. This includes checking if an entity is in water or if a specific position is clear of obstructions.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.useWorldGetter();
```

```typescript
// Check if an entity is in ocean water
const isInWater = getter.isInOceanWater(somePlayerOrVehicle);

// Check if a position is completely clear
const isClear = await getter.positionIsClear(new alt.Vector3(0, 0, 0), 'all');
```

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

### Show Screen Shard Effect

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Provides an example of displaying a full-screen effect similar to 'Mission Failed' in GTA:V. This function allows customization of the title and duration.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.on('playerConnect', (player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showShard({
        title: 'Welcome to the Server',
        duration: 2000,
    });
});
```

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

### Get Vehicle Document Data

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-vehicle.md

Illustrates how to retrieve all data associated with a bound vehicle document using the `get` method of the `useVehicle` hook in rebar-altv. The retrieved data can then be accessed.

```TypeScript
async function someFunction(vehicle: alt.Vehicle) {
    const document = Rebar.document.vehicle.useVehicle(vehicle);
    const data = document.get();
    console.log(data.model);
}
```

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

### Get Multiple Vehicle Information with useVehiclesGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Retrieves information about all vehicles within a specified range of a given position. This function is useful for managing or querying multiple vehicles simultaneously.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.useVehiclesGetter();
const results = getter.inRange(new alt.Vector3(0, 0, 0), 5);
```

```typescript
// Get all vehicles in range of a position
const vehiclesInRange = getter.inRange(new alt.Vector3(0, 0, 0), 5);
```

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

### Get All Data from Virtual Document (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-virtual.md

Shows how to fetch all data from a virtual document after it has been retrieved using `useVirtual`. It includes a check to ensure the document exists before attempting to get its data.

```ts
async function someFunction() {
    const virtualDocument = await Rebar.document.virtual.useVirtual<CustomDocument>(
        '663ce39eb270106cf02fb7e3',
        'SomeCollection',
    );
    if (!virtualDocument) {
        return;
    }
    const data = virtualDocument.get();
    console.log(data);
}
```

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

### Connect to Rebar-altv Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

The IP address and port used to directly connect to the running Rebar-altv server from the alt:V client. This is used to verify server connectivity.

```bash
127.0.0.1:7788
```

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

### Get Multiple Player Information with usePlayersGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Retrieves information about all players currently in the game. This includes finding players who are driving, within a certain range, in a vehicle, online, or holding a weapon.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.usePlayersGetter();
const results = getter.driving();
```

```typescript
// Returns an array of players who are driving
const playersDriving = getter.driving();

// Returns an array of players in range of a position
const playersInRange = getter.inRange(new alt.Vector3(0, 0, 0), 5);

// Returns an array with players who are close, and the distance they are from the position
const playersInRangeWithDist = getter.inRangeWithDistance(new alt.Vector3(0, 0, 0), 5);

// Returns all players in a vehicle
const playersInVehicle = getter.inVehicle(someVehicle);

// Returns all players who are currently using a character, and playing
const playersOnline = getter.online();

// Returns all players who are currently using a character, playing, and have a weapon out
const playersOnlineWithWeapon = getter.onlineWithWeapons();

// Returns all players who are currently walking around
const playersWalking = getter.walking();

// Returns all players who have a certain name
const playersWithName = getter.withName('john_doe');
```

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

### Create Native Menu (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/menus/native-menu.md

Demonstrates how to create a native menu using the `useNativeMenu` hook. It includes examples of different option types like 'invoke', 'selection', 'color', and 'input', along with their respective callbacks and configurations.

```typescript
import * as alt from 'alt-client';
import { useNativeMenu } from '@Client/menus/native/index.js';

const menu = useNativeMenu({
    header: 'My Menu',
    noExit: false, // Prevent menu from exiting forcing it open if set to true
    backCallback: () => {}, // Call another function when backspace is pressed. Showing another menu, or something else.
    options: [
        {
            text: 'Invoke Event',
            type: 'invoke',
            value: 'any-value-you-want',
            callback: (value) => {
                alt.log(value);
            },
        },
        {
            text: 'My Selection Group',
            type: 'selection',
            callback: (value) => {
                alt.log(value);
            },
            index: 0,
            options: [
                {
                    text: 'afdsfdsfdsdsss',
                    value: 'a',
                },
                {
                    text: 'b',
                    value: 'b',
                },
            ],
        },
        {
            text: 'My Color Group',
            type: 'color',
            callback: (value) => {
                alt.log(value);
            },
            index: 0,
            options: [
                {
                    text: 'red',
                    color: new alt.RGBA(255, 0, 0, 255),
                    value: 0,
                },
                {
                    text: 'green',
                    color: new alt.RGBA(0, 255, 0, 255),
                    value: 1,
                },
            ],
        },
        {
            text: 'Input',
            type: 'input',
            callback: (value) => {
                alt.log(value);
            },
            value: 'initial value',
        },
    ],
});

menu.open();
```

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

### Client-Side Plugin Initialization (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/your-first-plugin.md

Initializes a client-side plugin for Rebar AltV. It imports the 'alt-client' module and logs a message to the client console.

```typescript
import * as alt from 'alt-client';

alt.log('Hello from Client!');
```

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

### Initialize useVehicle

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useVehicle.md

Initializes the useVehicle functionality by importing and using the Rebar instance to create a new vehicle document.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

const rVehicle = Rebar.vehicle.useVehicle(new alt.Vehicle('infernus', alt.Vector3.zero, alt.Vector3.zero));
```

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

### Get Single Vehicle Information with useVehicleGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Fetches details about a specific vehicle using its database ID or Alt:V identifier. It can also find the closest vehicle, its driver, or vehicles in front of a given vehicle, and check model validity.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.useVehicleGetter();
```

```typescript
// Get a vehicle by database id
const someVehicle = getter.byId('_id');
const someVehicle = getter.byId(5);

// Get a vehicle by alt:V identifier
const someVehicle2 = getter.byAltvId(5);

// Get closest vehicle to a player, that isn't the vehicle the player is driving
const someVehicle3 = getter.closestVehicle(somePlayer);

// Get the driver of a vehicle
const someDriver = getter.driver(someVehicle);

// Get vehicle in front of a vehicle
const someVehicle4 = getter.inFrontOf(someVehicle);

// Check if a vehicle is near a position
const isNearPosition = getter.isNearPosition(someVehicle, new alt.Vector3(0, 0, 0), 5);

// Check if a vehicle model is valid
const isValidModel = getter.isValidModel(alt.hash('infernus'));

// Get the passengers of a vehicle
const passengers = getter.passengers(someVehicle);
```

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

### Show WebView Page

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This TypeScript code snippet demonstrates how to show a WebView page named 'Authentication' with the type 'page' using Rebar's player functionality in AltV.

```typescript
// server/index.ts

rPlayer.webview.show('Authentication', 'page');
```

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

### Create Instructional Buttons (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/screen/instructional-menu.md

This snippet demonstrates how to create instructional buttons for a menu using the `useInstructionalButtons` hook from the Rebar AltV client-side library. It defines an array of button objects, each with a text label and an input binding.

```typescript
import { useInstructionalButtons } from '@Client/screen/instructionalButtons.js';

let instructionalButtons = useInstructionalButtons();

instructionalButtons.create([
    { text: 'Back / Exit', input: '~INPUT_FRONTEND_RRIGHT~' },
    { text: 'Enter', input: '~INPUT_FRONTEND_RDOWN~' },
    { text: 'Change', input: '~INPUTGROUP_CELLPHONE_NAVIGATE_LR~' },
    { text: 'Navigate', input: '~INPUTGROUP_CELLPHONE_NAVIGATE_UD~' },
]);
```

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

### Get Player Information with usePlayerGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Fetches information about a single player using various criteria like account ID, character ID, name, or proximity to other entities. It also includes utility functions to check if a player is valid or near a specific position.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.usePlayerGetter();
const result = getter.byAccount('_id');
```

```typescript
// Returns a account by account _id, or id
const somePlayer = getter.byAccount('_id');
const somePlayer2 = getter.byAccount(5);

// Returns a player by character _id, or id
const somePlayer2 = getter.byCharacter('_id');
const somePlayer2 = getter.byCharacter(5);

// Returns a player by full name
const somePlayer3 = getter.byName('john_doe');

// Returns a player by partial name
const somePlayer4 = getter.byPartialName('john');

// Returns the closest player to a player
const somePlayer5 = getter.closestToPlayer(somePlayer);

// Returns the closest player to a vehicle
const somePlayer6 = getter.closestToVehicle(someVehicle);

// Returns a player in front of the player, if present
const somePlayer7 = getter.inFrontOf(somePlayer, 5); // Returns a player in front of the player, if present

// Returns true if player is near a position
const result1 = getter.isNearPosition(somePlayer, new alt.Vector3(0, 0, 0));

// Returns true if the player is logged in and playing on a character
const result2 = getter.isValid(somePlayer);
```

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

### Get Current Weather

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useServices.md

Retrieves the current weather condition of the game.

```TypeScript
const currentWeather = Rebar.services.useWeatherService().getWeather();
```

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

### Get Weather Forecast

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useServices.md

Retrieves the current weather forecast, which is an array of weather types.

```TypeScript
const weatherForecast = Rebar.services.useWeatherService().getWeatherForecast();
```

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

### Create Centered Wrapper (Vue)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

Applies fixed CSS positioning and flexbox properties to create a full-screen, centered container for UI elements. This wrapper is designed to be responsive and maintain its layout across different screen resolutions.

```vue
<template>
    <div class="fixed left-0 top-0 flex h-screen w-screen items-center justify-center">
        <div class="flex w-1/3 flex-col gap-4 rounded-lg bg-zinc-900 bg-opacity-80 p-6">
            <!-- Our Content Goes Here -->
        </div>
    </div>
</template>
```

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

### Get Groups via Account

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/systems/permissions/playerGroups.md

Fetches a list of all groups associated with a player's account.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

function getGroups(player: alt.Player) {
  const account = Rebar.document.account.useAccount('account-id');
  return account.groups.get();
}
```
Tokens:
Raw