improvements: @shared alias, webview isSpecificPageOpen, fix useClien…

…tApi in docs, added more methods to webview docs (#2)

docs/api/client/api/api.md

@@ -23,9 +23,9 @@ export function useMyCoolAPI() {
 ```
 
 2. Create a global declaration for your API.
-
++++ Without arguments
 ```ts
-import { useApi } from '@Client/api/index.js';
+import { useClientApi } from '@Client/api/index.js';
 
 export function useMyCoolAPI() {
     function logPlayerName(player: alt.Player) {
@@ -45,21 +45,58 @@ declare global {
 }
 
 // Really important to execute the return of your function
-useApi().register('my-cool-api', useMyCoolAPI());
+useClientApi().register('my-cool-api', useMyCoolAPI());
+```
++++ With arguments
+```ts
+import { useClientApi } from '@Client/api/index.js';
+
+export function useMyCoolAPI(player: alt.Player) {
+    function logPlayerName() {
+        console.log(player.name);
+    }
+
+    return {
+        logPlayerName,
+    };
+}
+
+// Declare global to TypeScript recognizes the typings
+declare global {
+    export interface ClientPlugin {
+        ['my-cool-api']: typeof useMyCoolAPI;
+    }
+}
+
+// Don't execute a composable here, because it will be executed later.
+useClientApi().register('my-cool-api', useMyCoolAPI);
 ```
++++
 
 3. Done
 
 ## How to Get an API
 
 This is all that's necessary to start working with other plugin APIs
 
++++ Without arguments
 ```ts
-import { useApi } from '@Client/api/index.js';
+import { useClientApi } from '@Client/api/index.js';
 
-const myCoolAPI = useApi().get('my-cool-api');
+const myCoolAPI = useClientApi().get('my-cool-api');
 
 function someFunction(somePlayer: alt.Player) {
     myCoolAPI.logPlayerName(somePlayer);
 }
 ```
++++ With arguments
+```ts
+import { useClientApi } from '@Client/api/index.js';
+
+const useMyCoolAPI = useClientApi().get('my-cool-api');
+
+function someFunction(somePlayer: alt.Player) {
+    useMyCoolAPI(somePlayer).logPlayerName();
+}
+```
++++

docs/api/client/webview/webview.md

@@ -16,4 +16,33 @@ useWebview().focus();
 
 // Unfocus webview, and hide cursor
 useWebview().unfocus();
+
+// Check if any page is open
+useWebview().isAnyPageOpen();
+
+// Check if specific page is open
+useWebview().isSpecificPageOpen('Example');
+
+// Hide all pages
+useWebview().hideAll(['Example']);
+
+// Hide all pages by type: "persistent" | "overlay" | "page"
+useWebview().hideAllByType(type);
+
+// Set up event listener
+useWebview().on('someWebviewToClientEvent', (...args) => {
+    console.log('Some event triggered', ...args);
+})
+
+// Remove event listener
+useWebview().off('someWebviewToClientEvent');
+
+// Emit event in webview
+useWebview().emit('someClientToWebviewEmit', ...args);
+
+// Show cursor
+useWebview().showCursor(true);
+
+// Hide cursor
+useWebview().showCursor(false);
 ```

docs/api/server/controllers/blip.md

@@ -12,7 +12,7 @@ A global blip can be seen by all players.
 
 ```ts
 import { useRebar } from '@Server/index.js';
-import { BlipColor } from '../../../main/shared/types/blip.js';
+import { BlipColor } from '@Shared/types/blip.js';
 
 const Rebar = useRebar();
 
@@ -38,7 +38,7 @@ A local blip can only been seen by a single player.
 
 ```ts
 import { useRebar } from '@Server/index.js';
-import { BlipColor } from '../../../main/shared/types/blip.js';
+import { BlipColor } from '@Shared/types/blip.js';
 
 const Rebar = useRebar();
 

docs/api/server/controllers/marker.md

@@ -8,7 +8,7 @@ A global marker can be seen by all players.
 
 ```ts
 import { useRebar } from '@Server/index.js';
-import { MarkerType } from '../../shared/types/marker.js'; // Import may vary
+import { MarkerType } from '@Shared/types/marker.js';
 
 const Rebar = useRebar();
 
@@ -40,7 +40,7 @@ A local marker can only be seen by a single player.
 
 ```ts
 import { useRebar } from '@Server/index.js';
-import { MarkerType } from '../../shared/types/marker.js'; // Import may vary
+import { MarkerType } from '@Shared/types/marker.js';
 
 const Rebar = useRebar();
 

docs/api/server/player/player-world.md

@@ -6,9 +6,9 @@ Often used for `drunk effects`, `changing weather`, `changing time`, or `fading
 
 ```ts
 import { useRebar } from '@Server/index.js';
-import { TimecycleTypes } from '../../shared/data/timecycleTypes.js';
-import { ScreenEffects } from '../../shared/data/screenEffects.js';
-import { Weathers } from '../../shared/data/weathers.js';
+import { TimecycleTypes } from '@Shared/data/timecycleTypes.js';
+import { ScreenEffects } from '@Shared/data/screenEffects.js';
+import { Weathers } from '@Shared/data/weathers.js';
 
 const Rebar = useRebar();
 

docs/api/shared/utility.md

@@ -9,7 +9,7 @@ Your import path may vary depending on where you're importing from.
 ## Import
 
 ```ts
-import * as Utility from '../../../main/shared/utility/index.js';
+import * as Utility from '@Shared/utility/index.js';
 ```
 
 ## Usage

docs/plugins/create.md

@@ -20,7 +20,7 @@ Ensure that you create an `index.ts` file as an entry point for your client code
 // client/index.ts
 import * as alt from 'alt-client';
 import '../translate/index.js';
-import { useTranslate } from '../../../main/shared/translate.js';
+import { useTranslate } from '@Shared/translate.js';
 
 const { t } = useTranslate('en');
 
@@ -37,7 +37,7 @@ Ensure that you create an `index.ts` file as an entry point for your server code
 // server/index.ts
 import * as alt from 'alt-server';
 import '../translate/index.js';
-import { useTranslate } from '../../../main/shared/translate.js';
+import { useTranslate } from '@Shared/translate.js';
 
 const { t } = useTranslate('en');
 
@@ -69,7 +69,7 @@ Translations can be used on `client-side`, `server-side`, or `webview` as long a
 // translate/index.ts
 
 // It is recommended to use relative paths for translation imports
-import { useTranslate } from '../../../main/shared/translate.js';
+import { useTranslate } from '@Shared/translate.js';
 const { setBulk } = useTranslate();
 
 setBulk({
@@ -102,3 +102,41 @@ console.log(`Hello from webview`);
     </div>
 </template>
 ```
+
+## Extending built-in interfaces
+
+Imagine, you want to add a new attribute to already existing document, like Vehicle.
+
+To not rewrite Rebar's interface, you can use this approach:
+
+```ts /plugins/my-awesome-plugin/server/index.ts
+import '@Shared/types/vehicle.js';
+
+// Your code here.
+
+declare module '@Shared/types/vehicle.js' {
+    export interface Vehicle {
+        mileage: number;
+        plateNumber: string;
+    }
+}
+```
+
+This approach will allow you to use defined keys everywhere.
+
+After that, in any plugin, you'll be able to use:
+
+```ts /plugins/my-new-plugin/server/index.ts
+import * as alt from 'alt-server';
+import { useRebar } from '@Server/index.js';
+
+const Rebar = useRebar();
+
+const vehicleDocument = getOrCreateVehicleDocument(); // Your own implementation
+
+const vehicle = alt.Vehicle(alt.hash(vehicleDocument.model), 0, 0, 0, 0, 0, 0);
+const boundVehicle = Rebar.document.vehicle.useVehicleBinder(vehicle).bind(vehicleDocument)
+
+vehicleWrapper.getField('mileage'); // You will see type hint there, that you're able to use 'mileage' and 'plateNumber'.
+vehicleWrapper.set('mileage', 1000); // Also here
+```

scripts/pathResolver.js

@@ -9,6 +9,7 @@ function updatePaths(path) {
     let file = fs.readFileSync(path, 'utf-8');
     file = file.replace(/\@Server/gm, `${relativePath}main/server`);
     file = file.replace(/\@Client/gm, `${relativePath}main/client`);
+    file = file.replace(/\@Shared/gm, `${relativePath}main/shared`);
     fs.writeFileSync(path, file);
 }
 

src/main/client/controllers/blip.ts

@@ -1,6 +1,6 @@
 import * as alt from 'alt-client';
-import { Events } from '../../shared/events/index.js';
-import { Blip } from '../../shared/types/blip.js';
+import { Events } from '@Shared/events/index.js';
+import { Blip } from '@Shared/types/blip.js';
 
 const blips: { [key: string]: alt.PointBlip } = {};
 

src/main/client/controllers/interaction.ts

@@ -1,5 +1,5 @@
 import * as alt from 'alt-client';
-import { Events } from '../../shared/events/index.js';
+import { Events } from '@Shared/events/index.js';
 
 type InteractionCallback = (uid: string, pos: alt.Vector3) => void;
 

src/main/client/controllers/marker.ts

@@ -1,8 +1,8 @@
 import * as alt from 'alt-client';
 import * as ScreenMarker from '../screen/marker.js';
-import { Events } from '../../shared/events/index.js';
-import { Marker } from '../../shared/types/marker.js';
-import { distance2d } from '../../shared/utility/vector.js';
+import { Events } from '@Shared/events/index.js';
+import { Marker } from '@Shared/types/marker.js';
+import { distance2d } from '@Shared/utility/vector.js';
 
 const MAX_DISTANCE = 50;
 const markers: Marker[] = [];

src/main/client/controllers/object.ts

@@ -1,7 +1,7 @@
 import * as alt from 'alt-client';
-import { Events } from '../../shared/events/index.js';
-import { iObject } from '../../shared/types/object.js';
-import { distance2d } from '../../shared/utility/vector.js';
+import { Events } from '@Shared/events/index.js';
+import { iObject } from '@Shared/types/object.js';
+import { distance2d } from '@Shared/utility/vector.js';
 
 const MAX_DISTANCE = 50;
 const objects: iObject[] = [];

src/main/client/controllers/textlabel.ts

@@ -1,8 +1,8 @@
 import * as alt from 'alt-client';
 import * as ScreenText from '../screen/textlabel.js';
-import { Events } from '../../shared/events/index.js';
-import { TextLabel } from '../../shared/types/textLabel.js';
-import { distance2d } from '../../shared/utility/vector.js';
+import { Events } from '@Shared/events/index.js';
+import { TextLabel } from '@Shared/types/textLabel.js';
+import { distance2d } from '@Shared/utility/vector.js';
 
 const MAX_DISTANCE = 25;
 const labels: TextLabel[] = [];

src/main/client/menus/native/index.ts

@@ -2,7 +2,7 @@ import * as alt from 'alt-client';
 import * as native from 'natives';
 import * as page from './page.js';
 import { drawTextAbsolute } from '../../utility/text/index.js';
-import { Color, Invoke, NativeMenu, Selection, TextInput } from '../../../shared/types/nativeMenu.js';
+import { Color, Invoke, NativeMenu, Selection, TextInput } from '@Shared/types/nativeMenu.js';
 
 // Menu Display
 let interval: number;

src/main/client/menus/native/page.ts

@@ -1,7 +1,7 @@
 import * as alt from 'alt-client';
 import * as native from 'natives';
 
-import { Color, Invoke, NativeMenu, Selection, TextInput } from '../../../shared/types/nativeMenu.js';
+import { Color, Invoke, NativeMenu, Selection, TextInput } from '@Shared/types/nativeMenu.js';
 import { getInput } from './input.js';
 import { useInstructionalButtons } from '../../screen/instructionalButtons.js';
 

src/main/client/screen/credits.ts

@@ -2,8 +2,8 @@ import * as alt from 'alt-client';
 import * as native from 'natives';
 
 import { requestScaleForm, Scaleform } from './scaleform.js';
-import { Credit, CreditAlignment } from '../../shared/types/credits.js';
-import { Events } from '../../shared/events/index.js';
+import { Credit, CreditAlignment } from '@Shared/types/credits.js';
+import { Events } from '@Shared/events/index.js';
 
 let scaleform: Scaleform;
 let interval: number;

src/main/client/screen/missionText.ts

@@ -1,6 +1,6 @@
 import * as alt from 'alt-client';
 import * as native from 'natives';
-import { Events } from '../../shared/events/index.js';
+import { Events } from '@Shared/events/index.js';
 
 let timeoutId: number;
 

src/main/client/screen/shard.ts

@@ -1,7 +1,7 @@
 import * as alt from 'alt-client';
 import { Scaleform, requestScaleForm } from './scaleform.js';
-import { Shard } from '../../shared/types/shard.js';
-import { Events } from '../../shared/events/index.js';
+import { Shard } from '@Shared/types/shard.js';
+import { Events } from '@Shared/events/index.js';
 
 let scaleform: Scaleform;
 let interval: number;

src/main/client/screen/spinner.ts

@@ -1,7 +1,7 @@
 import * as alt from 'alt-client';
 import * as native from 'natives';
-import { Spinner } from '../../shared/types/spinner.js';
-import { Events } from '../../shared/events/index.js';
+import { Spinner } from '@Shared/types/spinner.js';
+import { Events } from '@Shared/events/index.js';
 
 let timeout: number;
 

src/main/client/system/native.ts

@@ -1,6 +1,6 @@
 import * as alt from 'alt-client';
 import * as native from 'natives';
-import { Events } from '../../shared/events/index.js';
+import { Events } from '@Shared/events/index.js';
 
 function invoke(nativeName: string, ...args: any[]) {
     native[nativeName](...args);

src/main/client/system/notification.ts

@@ -1,5 +1,5 @@
 import * as alt from 'alt-client';
-import { Events } from '../../shared/events/index.js';
+import { Events } from '@Shared/events/index.js';
 import { createNotification } from '../screen/notification.js';
 
 type NotificationCallback = (message: string) => void;

src/main/client/virtualEntities/marker.ts

@@ -1,5 +1,5 @@
 import * as alt from 'alt-client';
-import { Marker } from '../../shared/types/marker.js';
+import { Marker } from '@Shared/types/marker.js';
 import * as ScreenMarker from '../screen/marker.js';
 
 const GroupType = 'marker';

src/main/client/virtualEntities/textlabel.ts

@@ -1,5 +1,5 @@
 import * as alt from 'alt-client';
-import { TextLabel } from '../../shared/types/textLabel.js';
+import { TextLabel } from '@Shared/types/textLabel.js';
 import * as ScreenText from '../screen/textlabel.js';
 
 const GroupType = 'textlabel';