From d92ca5f82ea2882b60b1bc942f93658f4520ab7d Mon Sep 17 00:00:00 2001 From: Pwntheon Date: Fri, 4 Aug 2023 13:58:48 +0200 Subject: [PATCH] Reexport strongly typed React and ReactDOM from the window object This gives access to the global React and ReactDOM objects in a strongly typed context. The lib file is only included in the build output if it's actually imported and used somewhere, so it shouldn't pollute people's files unless they actually need it. Unfortunately, i did not find a way to force vscode autoimport to use the local react.ts file instead of the package from node_modules. --- package-lock.json | 78 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/lib/react.ts | 10 ++++++ tsconfig.json | 4 ++- 4 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 src/lib/react.ts diff --git a/package-lock.json b/package-lock.json index f8443f9..18ba0f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "bitburner-typescript-template", "version": "2.0.0", "devDependencies": { + "@types/react": "^18.2.18", + "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^5.35.1", "@typescript-eslint/parser": "^5.35.1", "bitburner-filesync": "^1.1.5", @@ -110,6 +112,38 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", + "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", + "dev": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.35.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.35.1.tgz", @@ -630,6 +664,12 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "dev": true + }, "node_modules/date-fns": { "version": "2.29.3", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", @@ -2205,6 +2245,38 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "@types/react": { + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", + "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", + "dev": true + }, "@typescript-eslint/eslint-plugin": { "version": "5.35.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.35.1.tgz", @@ -2547,6 +2619,12 @@ "which": "^2.0.1" } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "dev": true + }, "date-fns": { "version": "2.29.3", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", diff --git a/package.json b/package.json index 0eee816..89a5f07 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ }, "author": "hydroflame, Hoekstraa, based on work by SlyCedix", "devDependencies": { + "@types/react": "^18.2.18", + "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^5.35.1", "@typescript-eslint/parser": "^5.35.1", "bitburner-filesync": "^1.1.5", diff --git a/src/lib/react.ts b/src/lib/react.ts new file mode 100644 index 0000000..2a721d1 --- /dev/null +++ b/src/lib/react.ts @@ -0,0 +1,10 @@ +import ReactNamespace from 'react/index'; +import ReactDomNamespace from 'react-dom'; + +const React = window.React as typeof ReactNamespace; +const ReactDOM = window.ReactDOM as typeof ReactDomNamespace; + +export default React; +export { + ReactDOM +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 982e8be..d640b4d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "include": ["NetscriptDefinitions.d.ts", "src/**/*"], + "exclude": ["src/lib/react.ts"], "compilerOptions": { "module": "esnext", "target": "esnext", @@ -15,7 +16,8 @@ "allowJs": true, "paths": { "/*": ["*"], - "@ns": ["../NetscriptDefinitions.d.ts"] + "@ns": ["../NetscriptDefinitions.d.ts"], + "@react": ["lib/react.ts"] } } }