entityseven/rage-framework-example
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Danya H 2025-01-26 22:30:10 +00:00
parent 037a7af2da
commit 5419805b68
21 changed files with 208 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.yaml
View File

@ -4,4 +4,4 @@ singleQuote: true
jsxSingleQuote: false jsxSingleQuote: false
semi: false semi: false
arrowParens: avoid arrowParens: avoid
endOfLine: auto endOfLine: auto

15
apps/browser/.prettierrc.yaml
View File

@ -5,10 +5,13 @@ jsxSingleQuote: false
semi: false semi: false
arrowParens: avoid arrowParens: avoid
endOfLine: auto endOfLine: auto
overrides:
- files: "*.{css,sass,scss}"
options:
tabWidth: 2
plugins: plugins:
- prettier-plugin-tailwindcss - prettier-plugin-svelte
parser: typescript overrides:
- files: '*.{css,sass,scss}'
options:
tabWidth: 2
parser: scss
- files: '*.svelte'
options:
parser: 'svelte'

4
apps/browser/README.md
View File

@ -14,8 +14,8 @@ Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also pow
**Why use this over SvelteKit?** **Why use this over SvelteKit?**
- It brings its own routing solution which might not be preferable for some users. - It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. - It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

18
apps/browser/index.html
View File

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte 5 Demo</title> <title>Svelte 5 Demo</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

100
apps/browser/package.json
View File

@ -1,53 +1,53 @@
{ {
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint --c .eslintrc.yaml src", "lint": "eslint --c .eslintrc.yaml src",
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
}, },
"dependencies": { "dependencies": {
"@rage-fw/shared": "workspace:^", "@entityseven/rage-fw-browser": "0.2.0",
"@entityseven/rage-fw-rpc": "0.2.5" "@rage-fw/shared": "workspace:^"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
"@tsconfig/svelte": "^5.0.4", "@tsconfig/svelte": "^5.0.4",
"@types/node": "^22.5.0", "@types/node": "^22.5.0",
"@typescript-eslint/eslint-plugin": "^8.2.0", "@typescript-eslint/eslint-plugin": "^8.2.0",
"@typescript-eslint/parser": "^8.2.0", "@typescript-eslint/parser": "^8.2.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "^9.3.0", "eslint": "^9.3.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1", "eslint-plugin-prettier": "^5.2.1",
"globals": "^15.9.0", "globals": "^15.9.0",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.6", "prettier-plugin-svelte": "^3.3.3",
"svelte": "5.1.3", "svelte": "5.1.3",
"svelte-check": "^3.8.5", "svelte-check": "^3.8.5",
"tslib": "^2.6.3", "tslib": "^2.6.3",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.2.0", "typescript-eslint": "^8.2.0",
"vite": "^5.4.1" "vite": "^5.4.1"
}, },
"name": "src-web", "name": "src-web",
"private": true, "private": true,
"homepage": ".", "homepage": ".",
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
]
},
"trustedDependencies": [
"svelte-preprocess"
] ]
},
"trustedDependencies": [
"svelte-preprocess"
]
} }

22
apps/browser/src/app.svelte
View File

@ -1,20 +1,24 @@
<script lang="ts"> <script lang="ts">
import { fw } from '@entityseven/rage-fw-browser'
import type { RageFW_ICustomBrowserEvent } from '@entityseven/rage-fw-shared-types'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { events } from '@rage-fw/shared'
import { rpc } from '@/lib'
let data = $state<string>('') let data =
$state<ReturnType<RageFW_ICustomBrowserEvent['customBrowserEvent']>>()
onMount(() => { onMount(() => {
rpc.register(events.browser.customBrowserEvent, (args: string) => { try {
data = data + ' | ' + args fw.event.register('customBrowserEvent', async greeting => {
return 'response from cef' data += greeting
}) return 'from cef'
rpc.callClient(events.client.cefReady, ['hello from cef']) })
} catch (e) {
console.error(e)
}
}) })
</script> </script>
<div style="width: '100%';color: 'white';text-align: 'center'"> <div style="width: '100%';color: 'white';text-align: 'center'">
<h1>Hello World!</h1> <h1>Hello World!</h1>
<h2>{data}</h2> <h2>{data}</h2>
</div> </div>

5
apps/browser/src/lib/index.ts
View File

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

57
apps/browser/tsconfig.json
View File

@ -1,32 +1,33 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2020", "target": "ES2020",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"], "lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
/* Linting */ /* Linting */
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"types": [ "types": [
"../../node_modules/@ragempcommunity/types-cef", "../../node_modules/@ragempcommunity/types-cef",
], "../shared/declarations/rage-fw-shared-types/"
"paths": { ],
"@": ["./src"], "paths": {
"@/*": ["./src/*"], "@": ["./src"],
} "@/*": ["./src/*"]
}, }
"include": ["src"], },
"references": [{ "path": "./tsconfig.node.json" }] "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
} }

19
apps/browser/tsconfig.node.json
View File

@ -1,12 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
// "noEmit": true, "module": "ESNext",
"module": "ESNext", "moduleResolution": "bundler",
"moduleResolution": "bundler", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo" },
}, "include": ["vite.config.ts"]
"include": ["vite.config.ts"]
} }

24
apps/client/package.json
View File

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

31
apps/client/src/index.ts
View File

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

5
apps/client/src/lib/index.ts
View File

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

18
apps/client/tsconfig.json
View File

@ -1,11 +1,11 @@
{ {
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"resolveJsonModule": true, "resolveJsonModule": true,
"baseUrl": "./src", "baseUrl": "./src",
"types": [ "types": [
"../../node_modules/@ragempcommunity/types-client", "../../node_modules/@ragempcommunity/types-client",
"../shared/declarations/rage-fw-shared-types/" "../shared/declarations/rage-fw-shared-types/"
] ]
} }
} }

24
apps/server/package.json
View File

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

32
apps/server/src/index.ts
View File

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

5
apps/server/src/lib/index.ts
View File

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

20
apps/server/tsconfig.json
View File

@ -1,12 +1,12 @@
{ {
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"lib": ["DOM", "ESNext"], "lib": ["DOM", "ESNext"],
"resolveJsonModule": true, "resolveJsonModule": true,
"baseUrl": "./src", "baseUrl": "./src",
"types": [ "types": [
"../../node_modules/@ragempcommunity/types-server", "../../node_modules/@ragempcommunity/types-server",
"../shared/declarations/rage-fw-shared-types/" "../shared/declarations/rage-fw-shared-types/"
] ]
} }
} }

11
apps/shared/declarations/rage-fw-shared-types/index.d.ts vendored Normal file
View File

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

12
apps/shared/index.ts
View File

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

8
apps/shared/package.json
View File

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

1
package.json
View File

@ -18,6 +18,7 @@
"@ragempcommunity/types-client": "^2.1.8", "@ragempcommunity/types-client": "^2.1.8",
"@ragempcommunity/types-server": "^2.1.8", "@ragempcommunity/types-server": "^2.1.8",
"@ragempcommunity/types-cef": "^2.1.8", "@ragempcommunity/types-cef": "^2.1.8",
"@entityseven/rage-fw-shared-types": "0.2.0",
"esbuild": "^0.21.5", "esbuild": "^0.21.5",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"prettier": "^3.3.2" "prettier": "^3.3.2"