From 573482f424522f00dc265ca4ce79d9deda97f8fa Mon Sep 17 00:00:00 2001 From: Danya H Date: Mon, 28 Oct 2024 10:52:55 +0000 Subject: [PATCH] feat pure rpc example svelte --- apps/browser/.eslintrc.cjs | 18 --------- apps/browser/.gitignore | 24 ++++++++++++ apps/browser/.prettierrc.yaml | 14 +++++++ apps/browser/README.md | 47 ++++++++++++++++++++++++ apps/browser/eslint.config.js | 55 ++++++++++++++++++++++++++++ apps/browser/index.html | 5 +-- apps/browser/package.json | 61 +++++++++++++++++++++---------- apps/browser/public/vite.svg | 1 - apps/browser/src/App.tsx | 24 ------------ apps/browser/src/app.svelte | 20 ++++++++++ apps/browser/src/assets/react.svg | 1 - apps/browser/src/index.css | 3 -- apps/browser/src/main.ts | 6 +++ apps/browser/src/main.tsx | 10 ----- apps/browser/src/vite-env.d.ts | 3 +- apps/browser/svelte.config.js | 8 ++++ apps/browser/tsconfig.json | 1 - apps/browser/tsconfig.node.json | 5 ++- apps/browser/vite.config.ts | 9 +++-- apps/client/package.json | 2 +- apps/server/package.json | 2 +- 21 files changed, 229 insertions(+), 90 deletions(-) delete mode 100644 apps/browser/.eslintrc.cjs create mode 100644 apps/browser/.gitignore create mode 100644 apps/browser/.prettierrc.yaml create mode 100644 apps/browser/README.md create mode 100644 apps/browser/eslint.config.js delete mode 100644 apps/browser/public/vite.svg delete mode 100644 apps/browser/src/App.tsx create mode 100644 apps/browser/src/app.svelte delete mode 100644 apps/browser/src/assets/react.svg delete mode 100644 apps/browser/src/index.css create mode 100644 apps/browser/src/main.ts delete mode 100644 apps/browser/src/main.tsx create mode 100644 apps/browser/svelte.config.js diff --git a/apps/browser/.eslintrc.cjs b/apps/browser/.eslintrc.cjs deleted file mode 100644 index d6c9537..0000000 --- a/apps/browser/.eslintrc.cjs +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -} diff --git a/apps/browser/.gitignore b/apps/browser/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/apps/browser/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/browser/.prettierrc.yaml b/apps/browser/.prettierrc.yaml new file mode 100644 index 0000000..4c88663 --- /dev/null +++ b/apps/browser/.prettierrc.yaml @@ -0,0 +1,14 @@ +tabWidth: 4 +printWidth: 80 +singleQuote: true +jsxSingleQuote: false +semi: false +arrowParens: avoid +endOfLine: auto +overrides: + - files: "*.{css,sass,scss}" + options: + tabWidth: 2 +plugins: + - prettier-plugin-tailwindcss +parser: typescript \ No newline at end of file diff --git a/apps/browser/README.md b/apps/browser/README.md new file mode 100644 index 0000000..e6cd94f --- /dev/null +++ b/apps/browser/README.md @@ -0,0 +1,47 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. + +## Technical considerations + +**Why use this over SvelteKit?** + +- 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. + +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. + +Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. + +**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** + +Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. + +**Why include `.vscode/extensions.json`?** + +Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. + +**Why enable `allowJs` in the TS template?** + +While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. + +**Why is HMR not preserving my local component state?** + +HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). + +If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. + +```ts +// store.ts +// An extremely simple external store +import { writable } from 'svelte/store' +export default writable(0) +``` diff --git a/apps/browser/eslint.config.js b/apps/browser/eslint.config.js new file mode 100644 index 0000000..8b4e969 --- /dev/null +++ b/apps/browser/eslint.config.js @@ -0,0 +1,55 @@ +import globals from 'globals' +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' +import tslint from 'typescript-eslint' + +export default [ + eslintPluginPrettierRecommended, + ...tslint.configs.recommended, + { + name: 'config', + languageOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + globals: { + alt: true, + ...globals.browser, + ...globals.node, + }, + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + }, + }, + ignores: [ + 'node_modules', + 'dist', + '.eslintrc.mjs', + '*.config.*', + '*.yaml', + '*.json', + '**/*.d.ts', + ], + // plugins: ['prettier', '@typescript-eslint'], + rules: { + 'no-console': 'off', + 'no-empty': 'off', + 'no-nested-ternary': 'off', + 'no-underscore-dangle': 'off', + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': [ + 'warn', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + caughtErrorsIgnorePattern: '^_', + }, + ], + '@typescript-eslint/ban-ts-comment': 'off', + 'consistent-return': 'off', + quotes: 'off', + 'import/prefer-default-export': 'off', + 'import/no-dynamic-require': 'off', + }, + }, +] diff --git a/apps/browser/index.html b/apps/browser/index.html index e4b78ea..7731d88 100644 --- a/apps/browser/index.html +++ b/apps/browser/index.html @@ -2,12 +2,11 @@ - - Vite + React + TS + Svelte 5 Demo
- + diff --git a/apps/browser/package.json b/apps/browser/package.json index fd0dcbb..1c9104b 100644 --- a/apps/browser/package.json +++ b/apps/browser/package.json @@ -1,32 +1,53 @@ { - "name": "rage-fw-example-browser", - "description": "Browser side of Rage-FW example", "scripts": { "dev": "vite", "build": "tsc && vite build", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" + "preview": "vite preview", + "lint": "eslint --c .eslintrc.yaml src", + "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" }, "dependencies": { "@rage-fw/shared": "workspace:^", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "rage-fw-rpc": "file:../../../rage-framework/rpc" + "rage-fw-rpc": "latest" }, "devDependencies": { - "@types/react": "^18.2.66", - "@types/react-dom": "^18.2.22", - "@typescript-eslint/eslint-plugin": "^7.2.0", - "@typescript-eslint/parser": "^7.2.0", - "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.57.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.6", - "typescript": "^5.6.3", - "vite": "^5.4.10" + "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", + "@tsconfig/svelte": "^5.0.4", + "@types/node": "^22.5.0", + "@typescript-eslint/eslint-plugin": "^8.2.0", + "@typescript-eslint/parser": "^8.2.0", + "autoprefixer": "^10.4.20", + "eslint": "^9.3.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", + "globals": "^15.9.0", + "prettier": "^3.3.3", + "prettier-plugin-svelte": "^3.2.6", + "svelte": "5.1.3", + "svelte-check": "^3.8.5", + "tslib": "^2.6.3", + "typescript": "^5.5.3", + "typescript-eslint": "^8.2.0", + "vite": "^5.4.1" }, + "name": "src-web", + "private": true, + "homepage": ".", + "version": "0.0.0", "type": "module", - "license": "CC BY-ND", - "author": "Entity Seven Group", - "version": "0.1.0" + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "trustedDependencies": [ + "svelte-preprocess" + ] } diff --git a/apps/browser/public/vite.svg b/apps/browser/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/apps/browser/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/browser/src/App.tsx b/apps/browser/src/App.tsx deleted file mode 100644 index 6e5ff21..0000000 --- a/apps/browser/src/App.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useEffect, useState } from 'react' -import { events } from '@rage-fw/shared' -import { rpc } from '@/lib' - -function App() { - const [data, setData] = useState('') - - 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 ( -
-

Hello World!

-

{data}

-
- ) -} - -export default App diff --git a/apps/browser/src/app.svelte b/apps/browser/src/app.svelte new file mode 100644 index 0000000..d6bbc5f --- /dev/null +++ b/apps/browser/src/app.svelte @@ -0,0 +1,20 @@ + + +
+

Hello World!

+

{data}

+
\ No newline at end of file diff --git a/apps/browser/src/assets/react.svg b/apps/browser/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/apps/browser/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/browser/src/index.css b/apps/browser/src/index.css deleted file mode 100644 index 293d3b1..0000000 --- a/apps/browser/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/apps/browser/src/main.ts b/apps/browser/src/main.ts new file mode 100644 index 0000000..afe0d51 --- /dev/null +++ b/apps/browser/src/main.ts @@ -0,0 +1,6 @@ +import { mount } from 'svelte' +import App from './app.svelte' + +const app = mount(App, { target: document.getElementById('root')! }) + +export default app diff --git a/apps/browser/src/main.tsx b/apps/browser/src/main.tsx deleted file mode 100644 index 964aeb4..0000000 --- a/apps/browser/src/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' - -ReactDOM.createRoot(document.getElementById('root')!).render( - - - , -) diff --git a/apps/browser/src/vite-env.d.ts b/apps/browser/src/vite-env.d.ts index 0928eac..39c50e1 100644 --- a/apps/browser/src/vite-env.d.ts +++ b/apps/browser/src/vite-env.d.ts @@ -1,2 +1,3 @@ +/// /// -/// +/// diff --git a/apps/browser/svelte.config.js b/apps/browser/svelte.config.js new file mode 100644 index 0000000..e0c05c7 --- /dev/null +++ b/apps/browser/svelte.config.js @@ -0,0 +1,8 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +const config = { + preprocess: vitePreprocess(), + kit: {}, +} + +export default config diff --git a/apps/browser/tsconfig.json b/apps/browser/tsconfig.json index 57cca6b..7440fb6 100644 --- a/apps/browser/tsconfig.json +++ b/apps/browser/tsconfig.json @@ -21,7 +21,6 @@ "noFallthroughCasesInSwitch": true, "types": [ "../../node_modules/@ragempcommunity/types-cef", - "../shared/declarations/rage-fw-shared-types/" ], "paths": { "@": ["./src"], diff --git a/apps/browser/tsconfig.node.json b/apps/browser/tsconfig.node.json index 97ede7e..fcc4585 100644 --- a/apps/browser/tsconfig.node.json +++ b/apps/browser/tsconfig.node.json @@ -2,10 +2,11 @@ "compilerOptions": { "composite": true, "skipLibCheck": true, + "strict": true, +// "noEmit": true, "module": "ESNext", "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "strict": true + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo" }, "include": ["vite.config.ts"] } diff --git a/apps/browser/vite.config.ts b/apps/browser/vite.config.ts index c3c3f0a..cdcf08d 100644 --- a/apps/browser/vite.config.ts +++ b/apps/browser/vite.config.ts @@ -1,17 +1,18 @@ import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { svelte } from '@sveltejs/vite-plugin-svelte' +import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [svelte()], build: { outDir: '../../server/client_packages/cef', emptyOutDir: true, }, resolve: { alias: { - '@': './src', - '@/*': './src/*', + '@': path.resolve(__dirname, './src/'), + '@/*': path.resolve(__dirname, './src/*'), }, }, }) diff --git a/apps/client/package.json b/apps/client/package.json index 3df349f..e10d305 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -6,7 +6,7 @@ }, "dependencies": { "@rage-fw/shared": "workspace:^", - "rage-fw-rpc": "file:../../../rage-framework/rpc" + "rage-fw-rpc": "latest" }, "license": "CC BY-ND", "author": "Entity Seven Group", diff --git a/apps/server/package.json b/apps/server/package.json index 89cd32b..d862f1b 100644 --- a/apps/server/package.json +++ b/apps/server/package.json @@ -6,7 +6,7 @@ }, "dependencies": { "@rage-fw/shared": "workspace:^", - "rage-fw-rpc": "file:../../../rage-framework/rpc" + "rage-fw-rpc": "latest" }, "license": "CC BY-ND", "author": "Entity Seven Group",