RAGE Editor: In-game JS editor w/ built-in IntelliSense 0.2.0

RAGE Editor is a resource that allows you to write, test, and save JavaScript code without leaving the game.

Features

• Derived from VS Code. RAGE Editor is built on top of Monaco Editor, which is the same text editor that powers VS Code. This means you can use familiar keybindings and color schemes when editing your code for maximum productivity.
• Multiple tabs and file management. You can create as many simultaneous tabs as you want in order to switch between testing environments. Tabs can be persisted to your local storage by any name and restored at any time, even through game restarts.
• Execute code on multiple environments. Run code dynamically on your local client, the server, or all other clients. You can also highlight a specific section of code and right click to run only that selection on any environment.
• Built-in up-to-date RAGE API typings w/ context switching. Typings for server-side and client-side RAGE APIs are fetched directly from GitHub to ensure you get the most up-to-date auto-complete and IntelliSense features without installing or setting up TypeScript. Local recently updated typing backups are also bundled with RAGE Editor in the event you're trying to work offline. You can switch between server-side and client-side typings with the click of a button.
• Configurable key binding. You can set the key binds to be any key you want for your server.
• Customizable user authentication using custom logic or built-in IP whitelisting. Without modification, you can specify a whitelist of IP addresses that will be able to access the editor in order to prevent anyone from running code on your server or other players, or you can omit whitelisting altogether to allow anyone to run code anywhere (not recommended, though). For more control, you can override this method by specifying your own logic to control who can access the editor, and which features they can use. See below.
• Dynamically move and resize the editor to your liking. In order to accommodate testing different UI components and optimizing for performance, you can drag/resize the editor to be any place and shape on your screen.
• Access convenient libraries such as rage-rpc. RAGE Editor uses rage-rpc under the hood to route code for remote execution. The editor also exposes a global rpc variable for you to use in your scripts for easy client<->server communication and testing!

Installation

1. Extract the provided rage-editor.zip file into your servers root. Installation is the same as any other resource.
2. Don't forget to include the client_package in your client-side index.js:

require('./rage-editor/index.js');

       3. When in game, simply press the key binding (default is F8) in order to toggle the editor view.

Configuration

RAGE Editor gives you some flexibility in order to make it work smoothly in your environment.

There is a config.json file located in packages/rage-editor/config.json. The default version of this file should look like something like this once you open it in a text editor:

{
    "key": 119, // F8
    "port": 8083,
    "whitelistIPs": [],
    "useNgrok": true
}

Options:

• key: The key that the player will press in-game to toggle the editor. This defaults to F8. You must use the decimal representation of the key for now. Check this link for keys: https://docs.microsoft.com/en-us/windows/desktop/inputdev/virtual-key-codes
• port: The port that the built-in web server will serve the editor from. Monaco Editor requires web workers to function, and Chromium won't load web workers unless they are over HTTP/HTTPS. It's recommended that you open this port and disable useNgrok for the best performance and reliability. More on this below.
• whitelistIPs: This is an array of IPv4 strings that you want to allow to use RAGE Editor. If the list is empty, anyone will be allowed to use it without restrictions. If the list is not empty, only players whose IPs are in the list will be able to open the editor. This means you can use it in a production environment if you really want to. Be careful who you give access as they will have the ability to execute any code they want on the server or other users.
• useNgrok: ngrok is a utility that can open an HTTP tunnel to your server without you having to open a port (similar to Hamachi), and it comes with RAGE Editor by default. With this option enabled, you do not have to open the port specified above. However, anonymous ngrok tunnels have a maximum life-span of ~8 hours and have a limit on concurrent open connections. It's recommended that you disable this and open the port specified above yourself. This way, traffic can directly talk to your server without going through a middleman. It will increase load-time as well as reliability. Ngrok is a good way to get started and is perfectly acceptable if you have a small number of people using RAGE Editor, or you don't use it often. Connections from the same computer will always be served from localhost, whether this option is enabled or not.

Usage

The UI for RAGE Editor is pretty straight-forward. The top left toolbar has a few buttons that do different things regarding tab and file management:

• New: Opens a blank new tab.
• Open: Opens a previously saved file. You can only open files that aren't already open in any other tab.
• Save: Saves the current tab. It will prompt you for a file name of your choice if the tab is fresh. It'll overwrite the existing data if it's not a fresh tab.
• Save As: Saves the current tab as a different file name, but does not change this tab to reference that new file. This is useful for saving different variations of the same file.

The top right section of the toolbar has some buttons that relate to executing code and switching typing contexts:

• L: Run the current tab locally on the current user's client.
• S: Run the current tab on the server.
• C :Run the current tab on all clients, including the current user.
• Server-side/Client-side: This button swaps out the built-in typings for the RAGE API. If it says Server-side, server-side IntelliSense will be available in the editor. If it says Client-side, client-side API typings will be available in the editor. This doesn't alter your code in any way other than swapping out the TypeScript definitions.

You can drag the editor around by clicking and holding the top toolbar where the buttons are. You can resize the editor by clicking and holding on the handle on the lower right of the screen.

The bottom right of the editor shows the status of the editor. It'll tell you when it's loading type definitions, or when it's in the middle of executing code.

Currently there is no way to view execution results or errors. This will change in the future!

Customization / Interoperability

Access Control

RAGE Editor has a built-in IP whitelist solution for controlling who can access the editor when in-game. This is great for most users, however, other users might want more flexibility and control over who can access what, and when. Since the editor uses rage-rpc under the hood to ask the server if a certain user can use the editor, this functionality can easily be overridden by any resource developer by simply re-registering the procedure on the server, making the calculation however you wish, and replying to the client if they can access the editor. You can also configure which features of the editor they are able to use. This is called every time a player presses the key bind to open the editor.

Here's an example:

const rpc = require('rage-rpc');

// Allow players with the name "micaww" to open the editor and execute code on all contexts
rpc.register('reditor:canPlayerUse', (_, { player }) => player.name === 'micaww');

// Allow players whose name starts with "Admin" to open the editor and execute on all contexts, but only allow other players to execute code locally
rpc.register('reditor:canPlayerUse', (_, { player }) => {
  if(player.name.startsWith("Admin")) return true;
  return {
    l: true,
    c: false,
    s: false
  };
});

You can either return a boolean or an object with the properties l, c, and s.

• If you return true, the player will be able to open the editor and execute on all contexts.
• If you return false, the player won't be able to open the editor at all. The key bind will do nothing.
• If you return an object, the editor will open, but you will need to specify which contexts they are allowed to execute on.
  • l: Local client
  • c: All clients
  • s: The server

This gives you unlimited control over which players can access the editor and what they are able to access.

Events

There are a few events that RAGE Editor exposes for you to hook into:

• reditor:shown (Client-side): The editor has been shown.
• reditor:hidden (Client-side): The editor has been hidden.

Here's an example usage to disable some custom chat.

// client-side

const chat = require('./my-juicy-package/customchat.js');

mp.events.add('reditor:shown', () => {
  chat.setActive(false);
});

mp.events.add('reditor:hidden', () => {
  chat.setActive(true);
});

Examples

Server-side Execution: https://streamable.com/c432b

Client-side Execution: https://streamable.com/oomuq

Add me on Discord micaww#3032, or message me here on the forums for any help.

Here is the GitHub if you would like to contribute or have an issue: https://github.com/micaww/rage-editor