upd deps

- rpc generics
- some internal types to expose from rpc

.gitignore

@@ -1,8 +1,8 @@
 # Editor
-.vscode
-.idea
+.vscode/
+.idea/
 
-.git
+.git/
 
 # Server Files
 server/bin
@@ -17,4 +17,9 @@ server/ragemp-server.exe
 
 # Development
 node_modules
-pnpm-lock.yaml
+pnpm-lock.yaml
+
+# Build
+build/
+dist/
+out/

apps/browser/package.json

@@ -1,10 +1,6 @@
 {
-  "name": "rage-fw-example-cef",
-  "version": "0.0.0",
-  "type": "module",
-  "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "description": "CEF side of rage-fw example",
+  "name": "rage-fw-example-browser",
+  "description": "Browser side of Rage-FW example",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -12,9 +8,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@entityseven/rage-fw-rpc": "0.2.5",
+    "@rage-fw/shared": "workspace:^",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rage-fw-cef": "latest"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
@@ -25,7 +22,11 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
-  }
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  },
+  "type": "module",
+  "license": "CC BY-ND",
+  "author": "Entity Seven Group",
+  "version": "0.1.0"
 }

apps/browser/src/App.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+import { events } from '@rage-fw/shared'
+import { rpc } from '@/lib'
+
+function App() {
+    const [data, setData] = useState<string>('')
+
+    useEffect(() => {
+        rpc.register(events.browser.customBrowserEvent, (args: string) => {
+            setData(prev => prev + ' | ' + args)
+            return 'response from cef'
+        })
+        rpc.callClient(events.client.cefReady, ['hello from cef'])
+    }, [])
+
+    return (
+        <div style={{ width: '100%', color: 'white', textAlign: 'center' }}>
+            <h1>Hello World!</h1>
+            <h2>{data}</h2>
+        </div>
+    )
+}
+
+export default App

apps/browser/src/lib/index.ts

@@ -0,0 +1,5 @@
+import { Rpc } from '@entityseven/rage-fw-rpc'
+
+export const rpc = new Rpc({
+    debugLogs: true,
+})

apps/browser/tsconfig.json

@@ -22,7 +22,11 @@
     "types": [
       "../../node_modules/@ragempcommunity/types-cef",
       "../shared/declarations/rage-fw-shared-types/"
-    ]
+    ],
+    "paths": {
+      "@": ["./src"],
+      "@/*": ["./src/*"],
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

apps/browser/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        outDir: '../../server/client_packages/cef',
+        emptyOutDir: true,
+    },
+    resolve: {
+        alias: {
+            '@': './src',
+            '@/*': './src/*',
+        },
+    },
+})

apps/cef/src/App.tsx

@@ -1,22 +0,0 @@
-import { fw } from 'rage-fw-cef'
-import { useEffect, useState } from 'react'
-
-function App() {
-    const [data, setData] = useState('')
-
-    useEffect(() => {
-        fw.event.register('customCefEvent', async ([test]) => {
-            setData(p => p + ' ' + test)
-            return 'from cef'
-        })
-    }, [])
-
-    return (
-        <div style={{ width: '100%', color: 'white', textAlign: 'center' }}>
-            <h1>Hello World!</h1>
-            <h2>{data}</h2>
-        </div>
-    )
-}
-
-export default App

apps/cef/vite.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    outDir: '../../server/client_packages/cef',
-    emptyOutDir: true
-  }
-})

apps/client/package.json

@@ -1,13 +1,14 @@
 {
   "name": "rage-fw-example-client",
-  "version": "0.1.0",
-  "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "description": "Client side of rage-fw example",
+  "description": "Client side of Rage-FW example",
   "scripts": {
     "build": "esbuild src/index.ts --bundle --platform=node --outfile=../../server/client_packages/index.js --format=esm"
   },
   "dependencies": {
-    "rage-fw-client": "latest"
-  }
+    "@entityseven/rage-fw-rpc": "0.2.5",
+    "@rage-fw/shared": "workspace:^"
+  },
+  "license": "CC BY-ND",
+  "author": "Entity Seven Group",
+  "version": "0.1.0"
 }

apps/client/src/index.ts

@@ -1,14 +1,22 @@
-import { fw } from 'rage-fw-client'
+import { events } from '@rage-fw/shared'
+import { rpc } from './lib'
 
-fw.player.browser = mp.browsers.new('package://cef/index.html')
+rpc.browser = mp.browsers.new('package://cef/index.html')
 
-fw.event.register('cefReady', async () => {
-    fw.system.log.info('cefReady')
-
-    const responseCef = await fw.player.triggerBrowser('customCefEvent', [
-        'from client',
-    ])
-    fw.system.log.info(responseCef)
-
-    await fw.player.triggerServer('customServerEvent', ['from client'])
+rpc.register(events.client.cefReady, async (args: string) => {
+    mp.console.logInfo(args)
+    const res = (await rpc.callServer(events.server.customServerEvent, [
+        'hello from client',
+    ])) as string
+    mp.console.logInfo(res)
+    return 'response from client'
+})
+
+rpc.register(events.client.cefReady, async (args: string) => {
+    mp.console.logInfo(args)
+    const res = (await rpc.callBrowser(events.browser.customBrowserEvent, [
+        'hello from client',
+    ])) as string
+    mp.console.logInfo(res)
+    return 'response from client'
 })

apps/client/src/lib/index.ts

@@ -0,0 +1,5 @@
+import { Rpc } from '@entityseven/rage-fw-rpc'
+
+export const rpc = new Rpc({
+    debugLogs: true,
+})

apps/server/package.json

@@ -1,13 +1,14 @@
 {
   "name": "rage-fw-example-server",
-  "version": "0.1.0",
-  "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "description": "Server side of rage-fw example",
+  "description": "Server side of Rage-FW example",
   "scripts": {
     "build": "esbuild src/index.ts --bundle --platform=node --target=node10.4 --outfile=../../server/packages/server/index.js"
   },
   "dependencies": {
-    "rage-fw-server": "latest"
-  }
+    "@entityseven/rage-fw-rpc": "0.2.5",
+    "@rage-fw/shared": "workspace:^"
+  },
+  "license": "CC BY-ND",
+  "author": "Entity Seven Group",
+  "version": "0.1.0"
 }

apps/server/src/index.ts

@@ -1,18 +1,20 @@
-import { fw } from 'rage-fw-server'
+import { events } from '@rage-fw/shared'
+import { rpc } from './lib'
 
-fw.event.register('playerJoin', async ([player]) => {
-    fw.system.log.info(`Connected: ${player.socialClub}`)
+rpc.register('playerJoin', async (player: PlayerMp) => {
+    console.log(`[Server] ${player.socialClub} connected`)
 })
 
-fw.event.register('customServerEvent', async ([player, msg]) => {
-    fw.system.log.info(player.socialClub + ' ' + msg)
-
-    const resFromCef = await fw.player.triggerBrowser(
-        player,
-        'customCefEvent',
-        ['from server'],
-    )
-    fw.system.log.info(player.socialClub + ' ' + resFromCef)
-
-    return 'from server'
-})
+rpc.register(
+    events.server.customServerEvent,
+    async (player: PlayerMp, args: string) => {
+        console.log(args)
+        const res = await rpc.callClient(
+            player,
+            events.client.customClientEvent,
+            ['hello from server'],
+        )
+        console.log(res)
+        return 'response from server'
+    },
+)

apps/server/src/lib/index.ts

@@ -0,0 +1,5 @@
+import { Rpc } from '@entityseven/rage-fw-rpc'
+
+export const rpc = new Rpc({
+    debugLogs: true,
+})

apps/server/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
     "resolveJsonModule": true,
     "baseUrl": "./src",
     "types": [

apps/shared/declarations/rage-fw-shared-types/index.d.ts

@@ -1,11 +0,0 @@
-declare module 'rage-fw-shared-types' {
-    export interface RageFW_ICustomClientEvent {}
-
-    export interface RageFW_ICustomServerEvent {
-        customServerEvent(greetings: string): string
-    }
-
-    export interface RageFW_ICustomCefEvent {
-        customCefEvent(greetings: string): string
-    }
-}

apps/shared/index.ts

@@ -0,0 +1,12 @@
+export const events = {
+    server: {
+        customServerEvent: 'customServerEvent',
+    },
+    client: {
+        cefReady: 'cefReady',
+        customClientEvent: 'customClientEvent',
+    },
+    browser: {
+        customBrowserEvent: 'customBrowserEvent',
+    },
+}

apps/shared/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@rage-fw/shared",
+  "description": "Shared data for Rage-FW example",
+  "version": "0.1.0",
+  "main": "index.ts"
+}

package.json

@@ -1,24 +1,30 @@
 {
   "name": "framework-example",
-  "version": "0.1.0",
-  "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "description": "This project is example of RAGE FW usage.",
+  "description": "This project is an example of RAGE FW usage",
+  "workspaces": [
+    "apps/*"
+  ],
   "scripts": {
     "server:update": "cd server && rage-win64.exe",
-
+    "server:run": "cd server && ragemp-server.exe",
+    "i:client": "cd apps/client && pnpm i",
+    "i:server": "cd apps/server && pnpm i",
+    "i:browser": "cd apps/browser && pnpm i",
     "build:client": "cd apps/client && pnpm build",
     "build:server": "cd apps/server && pnpm build",
-    "build:cef": "cd apps/cef && pnpm build",
-    "build:all": "pnpm build:client && pnpm build:server && pnpm build:cef"
+    "build:browser": "cd apps/cef && pnpm build",
+    "build:all": "pnpm build:client && pnpm build:server && pnpm build:browser",
+    "build": "pnpm build:all"
   },
   "devDependencies": {
     "@ragempcommunity/types-client": "^2.1.8",
     "@ragempcommunity/types-server": "^2.1.8",
     "@ragempcommunity/types-cef": "^2.1.8",
-    "rage-fw-shared-types": "latest",
     "esbuild": "^0.21.5",
     "typescript": "^5.4.5",
     "prettier": "^3.3.2"
-  }
+  },
+  "license": "MIT",
+  "author": "Entity Seven Group",
+  "version": "0.1.0"
 }

pnpm-workspace.yaml

@@ -1,5 +1,2 @@
 packages:
-  - "apps/cef"
-  - "apps/client"
-  - "apps/server"
-  - "apps/shared"
+  - "apps/*"