mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
packages
This commit is contained in:
Stefan Pejcic
11
packages/devtools-shared/.npmignore
Normal file
11
packages/devtools-shared/.npmignore
Normal file
@@ -0,0 +1,11 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
test
|
||||
jest.config.js
|
||||
**/*.spec.ts
|
||||
**/*.spec.tsx
|
||||
**/*.test.ts
|
||||
**/*.test.tsx
|
||||
tsup.config.ts
|
||||
tsconfig.test.json
|
||||
tsconfig.declarations.json
|
||||
206
packages/devtools-shared/CHANGELOG.md
Normal file
206
packages/devtools-shared/CHANGELOG.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# @refinedev/devtools-shared
|
||||
|
||||
## 1.1.12
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#6185](https://github.com/refinedev/refine/pull/6185) [`603c73eb7d376fc2357a577f5921f844a8f444e4`](https://github.com/refinedev/refine/commit/603c73eb7d376fc2357a577f5921f844a8f444e4) Thanks [@aliemir](https://github.com/aliemir)! - feat(devtools): ability to change the port of the devtools server
|
||||
|
||||
Now users can change the port of the devtools server by setting the `REFINE_DEVTOOLS_PORT` environment variable. Previously, the port was hardcoded to "5001" and could not be changed.
|
||||
|
||||
If you're using `@refinedev/cli`'s runner commands to start your development server, `REFINE_DEVTOOLS_PORT` will be propagated to your app with appropriate prefix. E.g. if you're using Vite, the environment variable will be `VITE_REFINE_DEVTOOLS_PORT` and it will be used by the `@refinedev/devtools`'s `<DevtoolsProvider />` component to connect to the devtools server.
|
||||
|
||||
- In Next.js apps, it will be prefixed with `NEXT_PUBLIC_`
|
||||
- In Craco and Create React App apps, it will be prefixed with `REACT_APP_`
|
||||
- In Remix apps and other custom setups, the environment variable will be used as is.
|
||||
|
||||
In some scenarios where the environment variables are not passed to the browser, you may need to manually set the Refine Devtools URL in the `<DevtoolsProvider />` component via the `url` prop. Remix apps do not automatically pass environment variables to the browser, so you will need to set the URL manually. If not set, the default URL will be used.
|
||||
|
||||
While the port can be changed, this feature also allows users to host the devtools server on a different machine or domain and provide the `<DevtoolsProvider />` with the custom domain URL. This such case will be useful if you're dockerizing your app and devtools server separately.
|
||||
|
||||
**Enterprise Edition**: Refine Devtools running on ports other than "5001" is only available in the Enterprise Edition. If you're using the Community Edition, Refine Devtools will not work if the port is changed.
|
||||
|
||||
[Resolves #5111](https://github.com/refinedev/refine/issues/5111)
|
||||
|
||||
## 1.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#6098](https://github.com/refinedev/refine/pull/6098) [`8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a`](https://github.com/refinedev/refine/commit/8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a) Thanks [@aliemir](https://github.com/aliemir)! - chore(devtools-shared): add login callback events
|
||||
|
||||
Added new events to handle login errors on the main devtools window rather than external windows. This change is accompanied by new event handlers in the `@refinedev/devtools-ui` and `@refinedev/devtools-server` packages.
|
||||
|
||||
- [#6098](https://github.com/refinedev/refine/pull/6098) [`8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a`](https://github.com/refinedev/refine/commit/8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a) Thanks [@aliemir](https://github.com/aliemir)! - chore(devtools): update devtools url fallback values
|
||||
|
||||
Updated fallback values for the Devtools URL and use single fallback value until its provided by the `@refinedev/devtools-server` when client is connected.
|
||||
|
||||
## 1.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`6bd14228760d3e1e205ea9248e427f9afa2ec046`](https://github.com/refinedev/refine/commit/6bd14228760d3e1e205ea9248e427f9afa2ec046) Thanks [@BatuhanW](https://github.com/BatuhanW)! - chore: prevent websocket closing errors in console
|
||||
|
||||
When `<DevtoolsProvider />` component is mounted in apps with React's strict mode, it will try to initialize the websocket connection twice and first one will be closed immediately before the connection is established. This PR will delay closing the websocket connection until it's established properly to prevent these errors from appearing in the console.
|
||||
|
||||
- [`6bd14228760d3e1e205ea9248e427f9afa2ec046`](https://github.com/refinedev/refine/commit/6bd14228760d3e1e205ea9248e427f9afa2ec046) Thanks [@BatuhanW](https://github.com/BatuhanW)! - refactor: use same port for ws and http servers
|
||||
|
||||
This PR merges WebSocket and Http server ports into one (5001) to simplify the configuration and avoid port conflicts. Previously the WebSocket server was running on port 5002 and the Http server on port 5001. Now both servers are running on port 5001.
|
||||
|
||||
- [`6bd14228760d3e1e205ea9248e427f9afa2ec046`](https://github.com/refinedev/refine/commit/6bd14228760d3e1e205ea9248e427f9afa2ec046) Thanks [@BatuhanW](https://github.com/BatuhanW)! - chore: added `type` qualifier to imports used as type only.
|
||||
|
||||
```diff
|
||||
- import { A } from "./example.ts";
|
||||
+ import type { A } from "./example.ts";
|
||||
```
|
||||
|
||||
## 1.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5945](https://github.com/refinedev/refine/pull/5945) [`bb89dc34bf6ef061d0bcdcf0cb3173fe7014ae5e`](https://github.com/refinedev/refine/commit/bb89dc34bf6ef061d0bcdcf0cb3173fe7014ae5e) Thanks [@aliemir](https://github.com/aliemir)! - chore: prevent websocket closing errors in console
|
||||
|
||||
When `<DevtoolsProvider />` component is mounted in apps with React's strict mode, it will try to initialize the websocket connection twice and first one will be closed immediately before the connection is established. This PR will delay closing the websocket connection until it's established properly to prevent these errors from appearing in the console.
|
||||
|
||||
- [#5945](https://github.com/refinedev/refine/pull/5945) [`6c22ece19f44ca2b99ad70543f9ee40b4b139863`](https://github.com/refinedev/refine/commit/6c22ece19f44ca2b99ad70543f9ee40b4b139863) Thanks [@aliemir](https://github.com/aliemir)! - refactor: use same port for ws and http servers
|
||||
|
||||
This PR merges WebSocket and Http server ports into one (5001) to simplify the configuration and avoid port conflicts. Previously the WebSocket server was running on port 5002 and the Http server on port 5001. Now both servers are running on port 5001.
|
||||
|
||||
- [#5945](https://github.com/refinedev/refine/pull/5945) [`90930b381d8d369c63bc59beedf69c391875166d`](https://github.com/refinedev/refine/commit/90930b381d8d369c63bc59beedf69c391875166d) Thanks [@aliemir](https://github.com/aliemir)! - chore: added `type` qualifier to imports used as type only.
|
||||
|
||||
```diff
|
||||
- import { A } from "./example.ts";
|
||||
+ import type { A } from "./example.ts";
|
||||
```
|
||||
|
||||
## 1.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5928](https://github.com/refinedev/refine/pull/5928) [`db9756e7908`](https://github.com/refinedev/refine/commit/db9756e79086ff80774ee75d570d610bf0d5d76d) Thanks [@aliemir](https://github.com/aliemir)! - fix: type errors on typescript <5
|
||||
|
||||
Due to the changes in #5881, typescript users below version 5 are facing type errors. This PR fixes the type errors by updating the file extensions required by the `d.mts` declaration files to provide a compatible declarations for both typescript 4 and 5 users.
|
||||
|
||||
## 1.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5875](https://github.com/refinedev/refine/pull/5875) [`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf) Thanks [@aliemir](https://github.com/aliemir)! - feat: update resource name accessing logic
|
||||
|
||||
Updated resource name displaying logic to use `resourceName` from activity records to make sure `resource` is correctly displayed with custom query keys.
|
||||
|
||||
- [#5875](https://github.com/refinedev/refine/pull/5875) [`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf) Thanks [@aliemir](https://github.com/aliemir)! - feat: add invalidate query button
|
||||
|
||||
Added `Invalidate Query` button to settled queries in the devtools panel to allow users to manually invalidate queries for debugging purposes.
|
||||
|
||||
- [#5881](https://github.com/refinedev/refine/pull/5881) [`ba719f6ea26`](https://github.com/refinedev/refine/commit/ba719f6ea264ee87226f42de900a754e81f1f22f) Thanks [@aliemir](https://github.com/aliemir)! - fix: declaration files in node10, node16 and nodenext module resolutions
|
||||
|
||||
## 1.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5765](https://github.com/refinedev/refine/pull/5765) [`0c197d82393`](https://github.com/refinedev/refine/commit/0c197d823939ae1fd4e0ee4b5a422322853b1e45) Thanks [@aliemir](https://github.com/aliemir)! - refactor: package bundles and package.json configuration for exports
|
||||
|
||||
Previously, Refine packages had exported ESM and CJS bundles with same `.js` extension and same types for both with `.d.ts` extensions. This was causing issues with bundlers and compilers to pick up the wrong files for the wrong environment. Now we're outputting ESM bundles with `.mjs` extension and CJS bundles with `.cjs` extension. Also types are now exported with both `.d.mts` and `.d.cts` extensions.
|
||||
|
||||
In older versions ESM and CJS outputs of some packages were using wrong imports/requires to dependencies causing errors in some environments. This will be fixed since now we're also enforcing the module type with extensions.
|
||||
|
||||
Above mentioned changes also supported with changes in `package.json` files of the packages to support the new extensions and types. All Refine packages now include `exports` fields in their configuration to make sure the correct bundle is picked up by the bundlers and compilers.
|
||||
|
||||
- [#5754](https://github.com/refinedev/refine/pull/5754) [`56ed144a0f5`](https://github.com/refinedev/refine/commit/56ed144a0f5af218fd9e6edbfd999ae433329927) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - chore: TypeScript upgraded to [v5.x.x](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html). #5752
|
||||
|
||||
## 1.1.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5695](https://github.com/refinedev/refine/pull/5695) [`79865affa1c`](https://github.com/refinedev/refine/commit/79865affa1c657e6b14ed34585caeec1f3d3da7f) Thanks [@BatuhanW](https://github.com/BatuhanW)! - chore: apply biome format and fix lint errors.
|
||||
|
||||
## 1.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5573](https://github.com/refinedev/refine/pull/5573) [`546df06482`](https://github.com/refinedev/refine/commit/546df06482807e59a7f2a735361a8e9169bb2563) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - chore: add "use client" directive to exported files to work with nextjs app router
|
||||
|
||||
## 1.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5022](https://github.com/refinedev/refine/pull/5022) [`80513a4e42f`](https://github.com/refinedev/refine/commit/80513a4e42f8dda39e01157643594a9e4c32001b) Thanks [@BatuhanW](https://github.com/BatuhanW)! - chore: update README.md
|
||||
|
||||
- fix grammar errors.
|
||||
- make all README.md files consistent.
|
||||
- add code example code snippets.
|
||||
|
||||
## 1.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5022](https://github.com/refinedev/refine/pull/5022) [`80513a4e42f`](https://github.com/refinedev/refine/commit/80513a4e42f8dda39e01157643594a9e4c32001b) Thanks [@BatuhanW](https://github.com/BatuhanW)! - chore: update README.md
|
||||
|
||||
- fix grammar errors.
|
||||
- make all README.md files consistent.
|
||||
- add code example code snippets.
|
||||
|
||||
|
||||
|
||||
## 1.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#4960](https://github.com/refinedev/refine/pull/4960) [`d8e464fa2c4`](https://github.com/refinedev/refine/commit/d8e464fa2c461d0fd60050cf18247758ecdc42e3) Thanks [@aliemir](https://github.com/aliemir)! - Initial beta release of refine devtools.🎉
|
||||
|
||||
We're releasing refine devtools in beta. refine devtools is designed to help you debug and develop your refine apps. It will be a collection of features including monitoring queries and mutations, testing out inferencer generated codes, adding and updating refine packages from the UI and more. 🤯
|
||||
|
||||
## Usage
|
||||
|
||||
Install the dependencies using your package manager.
|
||||
|
||||
```bash
|
||||
npm i @refinedev/devtools@next @refinedev/cli@next @refinedev/core@next
|
||||
```
|
||||
|
||||
Add `<DevtoolsProvider />` and `<DevtoolsPanel />` components to your app:
|
||||
|
||||
You'll need to wrap your app with `<DevtoolsProvider />` component and add `<DevtoolsPanel />` component to your app to access the devtools UI.
|
||||
|
||||
```tsx
|
||||
import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<DevtoolsProvider>
|
||||
<Refine
|
||||
// ...
|
||||
>
|
||||
{/* ... */}
|
||||
</Refine>
|
||||
<DevtoolsPanel />
|
||||
</DevtoolsProvider>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Then you're good to go 🙌, `<DevtoolsProvider />` will tell refine to connect to the devtools server and track your queries and mutations. `<DevtoolsPanel />` will render the devtools UI in your app.
|
||||
|
||||
note: Devtools only works in development mode and have no overhead on production builds. You don't need to do anything special to exclude DevTools from your bundle.
|
||||
|
||||
Devtools is integrated with `@refinedev/cli` and it will be started automatically in development mode if you have `@refinedev/devtools` installed.
|
||||
|
||||
If you want to start devtools manually or have a custom dev script, you can run `refine devtools` in your project directory or add the following scripts to your `package.json`:
|
||||
|
||||
```js
|
||||
{
|
||||
"scripts": {
|
||||
// If you have not customized the start script.
|
||||
"start": "refine dev", // The devtools server runs automatically; you don't need to do anything.
|
||||
|
||||
// If you have customized the start script.
|
||||
"start": "my-custom-dev-script & refine devtools" // Run the devtools server manually.
|
||||
|
||||
// other scripts
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you don't have `@refinedev/cli` installed already, you can follow the [installation guide](https://refine.dev/docs/packages/documentation/cli/#how-to-add-to-an-existing-project) to add it to your project.
|
||||
|
||||
These commands will start the devtools server. If you want to access the devtools UI outside of your app without depending on the `<DevtoolsPanel />` component, you can go to `http://localhost:5001` in your browser. 🚀
|
||||
21
packages/devtools-shared/LICENSE
Normal file
21
packages/devtools-shared/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Refine Dev Corporation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
37
packages/devtools-shared/README.md
Normal file
37
packages/devtools-shared/README.md
Normal file
@@ -0,0 +1,37 @@
|
||||
<div align="center" style="margin: 30px;">
|
||||
<a href="https://refine.dev">
|
||||
<img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
|
||||
</a>
|
||||
</div>
|
||||
<br/>
|
||||
<div align="center">refine is an open-source, headless React framework for developers building enterprise web applications.
|
||||
|
||||
It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
|
||||
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<sub>Created by <a href="https://refine.dev">refine</a></sub>
|
||||
</div>
|
||||
|
||||
## About
|
||||
|
||||
[refine](https://refine.dev/) is **headless by design**, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) for convenience.
|
||||
|
||||
refine has connectors for 15+ backend services, including REST API, [GraphQL](https://graphql.org/), and popular services like [Airtable](https://www.airtable.com/), [Strapi](https://strapi.io/), [Supabase](https://supabase.com/), [Firebase](https://firebase.google.com/), and [Directus](https://directus.io/)
|
||||
|
||||
[Refer to documentation for more info about refine→](https://refine.dev/docs/)
|
||||
[Step up to refine tutorials →](https://refine.dev/docs/tutorial/introduction/index/)
|
||||
|
||||
## Documentation
|
||||
|
||||
This package is an internal package and a part of the `@refinedev/devtools` package.
|
||||
|
||||
For more detailed information an usage, refer to the [refine devtools documentation](https://refine.dev/docs/packages/devtools)
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
npm install @refinedev/devtools
|
||||
```
|
||||
15
packages/devtools-shared/jest.config.js
Normal file
15
packages/devtools-shared/jest.config.js
Normal file
@@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
preset: "ts-jest",
|
||||
rootDir: "./",
|
||||
displayName: "react-hook-form",
|
||||
testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
|
||||
testEnvironment: "jsdom",
|
||||
transform: {
|
||||
"^.+\\.tsx?$": [
|
||||
"ts-jest",
|
||||
{
|
||||
tsconfig: "<rootDir>/tsconfig.test.json",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
71
packages/devtools-shared/package.json
Normal file
71
packages/devtools-shared/package.json
Normal file
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"name": "@refinedev/devtools-shared",
|
||||
"version": "1.1.12",
|
||||
"private": false,
|
||||
"description": "refine devtools offers a set of features from monitoring to quickly prototyping a UI.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/refinedev/refine.git",
|
||||
"directory": "packages/devtools"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "refine",
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.mts",
|
||||
"default": "./dist/index.mjs"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/index.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"main": "dist/index.cjs",
|
||||
"module": "dist/index.mjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"attw": "attw --pack .",
|
||||
"build": "tsup && node ../shared/generate-declarations.js",
|
||||
"dev": "tsup --watch",
|
||||
"prepare": "pnpm build",
|
||||
"publint": "publint --strict=true --level=suggestion",
|
||||
"test": "jest --passWithNoTests --runInBand",
|
||||
"types": "node ../shared/generate-declarations.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^4.10.1",
|
||||
"error-stack-parser": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@esbuild-plugins/node-resolve": "^0.1.4",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/node": "^18.16.2",
|
||||
"jest": "^29.3.1",
|
||||
"jest-environment-jsdom": "^29.3.1",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"ts-jest": "^29.1.2",
|
||||
"tslib": "^2.6.2",
|
||||
"tsup": "^6.7.0",
|
||||
"typescript": "^5.4.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"@types/react-dom": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
89
packages/devtools-shared/src/context.tsx
Normal file
89
packages/devtools-shared/src/context.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import { DevtoolsEvent } from "./event-types";
|
||||
import { send } from "./send";
|
||||
import { receive } from "./receive";
|
||||
|
||||
type DevtoolsContextValue = {
|
||||
__devtools: boolean;
|
||||
httpUrl: string;
|
||||
wsUrl: string;
|
||||
ws: WebSocket | null;
|
||||
};
|
||||
|
||||
export const DevToolsContext = React.createContext<DevtoolsContextValue>({
|
||||
__devtools: false,
|
||||
httpUrl: "http://localhost:5001",
|
||||
wsUrl: "ws://localhost:5001",
|
||||
ws: null,
|
||||
});
|
||||
|
||||
type Props = React.PropsWithChildren<{
|
||||
__devtools?: boolean;
|
||||
url?: string | [httpUrl: string, wsUrl: string];
|
||||
}>;
|
||||
|
||||
export const DevToolsContextProvider: React.FC<Props> = ({
|
||||
__devtools,
|
||||
url = ["http://localhost:5001", "ws://localhost:5001"],
|
||||
children,
|
||||
}) => {
|
||||
const httpUrl = Array.isArray(url) ? url[0] : url;
|
||||
const wsUrl = Array.isArray(url)
|
||||
? url[1]
|
||||
: url.replace(/http(s)?:\/\//, "ws$1://");
|
||||
|
||||
const [values, setValues] = React.useState<DevtoolsContextValue>({
|
||||
__devtools: __devtools ?? false,
|
||||
httpUrl,
|
||||
wsUrl,
|
||||
ws: null,
|
||||
});
|
||||
|
||||
const [ws, setWs] = React.useState<WebSocket | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
const wsInstance = new WebSocket(values.wsUrl);
|
||||
|
||||
wsInstance.addEventListener("open", () => {
|
||||
if (!values.__devtools) {
|
||||
timeout = setTimeout(() => {
|
||||
send(wsInstance, DevtoolsEvent.DEVTOOLS_INIT, {
|
||||
url: window.location.origin,
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
setWs(wsInstance);
|
||||
|
||||
return () => {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
|
||||
// In strict mode, the WebSocket instance might not be connected yet
|
||||
// so we need to wait for it to connect before closing it
|
||||
// otherwise it will log an unnecessary error in the console
|
||||
if (wsInstance.readyState === WebSocket.CONNECTING) {
|
||||
wsInstance.addEventListener("open", () => {
|
||||
wsInstance.close(1000, window.location.origin);
|
||||
});
|
||||
} else {
|
||||
wsInstance.close(1000, window.location.origin);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const contextValues = React.useMemo<DevtoolsContextValue>(
|
||||
() => ({
|
||||
...values,
|
||||
ws,
|
||||
}),
|
||||
[values, ws],
|
||||
);
|
||||
|
||||
return (
|
||||
<DevToolsContext.Provider value={contextValues}>
|
||||
{children}
|
||||
</DevToolsContext.Provider>
|
||||
);
|
||||
};
|
||||
85
packages/devtools-shared/src/event-types.ts
Normal file
85
packages/devtools-shared/src/event-types.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import type {
|
||||
Mutation,
|
||||
MutationKey,
|
||||
MutationStatus,
|
||||
QueryKey,
|
||||
QueryState,
|
||||
QueryStatus,
|
||||
} from "@tanstack/react-query";
|
||||
import type { TraceType } from "./trace";
|
||||
|
||||
export enum DevtoolsEvent {
|
||||
RELOAD = "devtools:reload",
|
||||
DEVTOOLS_INIT = "devtools:init",
|
||||
DEVTOOLS_ALREADY_CONNECTED = "devtools:already-connected",
|
||||
ACTIVITY = "devtools:send-activity",
|
||||
DEVTOOLS_ACTIVITY_UPDATE = "devtools:activity-update",
|
||||
DEVTOOLS_CONNECTED_APP = "devtools:connected-app",
|
||||
DEVTOOLS_DISCONNECTED_APP = "devtools:disconnected-app",
|
||||
DEVTOOLS_HIGHLIGHT_IN_MONITOR = "devtools:highlight-in-monitor",
|
||||
DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION = "devtools:highlight-in-monitor-action",
|
||||
DEVTOOLS_LOGIN_SUCCESS = "devtools:login-success",
|
||||
DEVTOOLS_DISPLAY_LOGIN_FAILURE = "devtools:display-login-failure",
|
||||
DEVTOOLS_LOGIN_FAILURE = "devtools:login-failure",
|
||||
DEVTOOLS_RELOAD_AFTER_LOGIN = "devtools:reload-after-login",
|
||||
DEVTOOLS_INVALIDATE_QUERY = "devtools:invalidate-query",
|
||||
DEVTOOLS_INVALIDATE_QUERY_ACTION = "devtools:invalidate-query-action",
|
||||
}
|
||||
|
||||
type Timestamps = {
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
};
|
||||
|
||||
type ActivityPayload =
|
||||
| {
|
||||
type: "mutation";
|
||||
identifier: string;
|
||||
key?: MutationKey;
|
||||
status?: MutationStatus;
|
||||
trace?: TraceType[];
|
||||
state: Mutation<any, any, any, any>["state"];
|
||||
variables?: Mutation<any, any, any, any>["state"]["variables"];
|
||||
hookName: string;
|
||||
resourcePath: string | null;
|
||||
resourceName?: string;
|
||||
legacyKey: boolean;
|
||||
}
|
||||
| {
|
||||
type: "query";
|
||||
identifier: string;
|
||||
key?: QueryKey;
|
||||
status?: QueryStatus;
|
||||
trace?: TraceType[];
|
||||
state: QueryState<any, any>;
|
||||
hookName: string;
|
||||
resourcePath: string | null;
|
||||
resourceName?: string;
|
||||
legacyKey: boolean;
|
||||
};
|
||||
|
||||
export type DevtoolsEventPayloads = {
|
||||
[DevtoolsEvent.RELOAD]: {};
|
||||
[DevtoolsEvent.DEVTOOLS_INIT]: { url: string };
|
||||
[DevtoolsEvent.DEVTOOLS_ALREADY_CONNECTED]: { url: string };
|
||||
[DevtoolsEvent.ACTIVITY]: ActivityPayload;
|
||||
[DevtoolsEvent.DEVTOOLS_ACTIVITY_UPDATE]: {
|
||||
updatedActivities: (ActivityPayload & Timestamps)[];
|
||||
};
|
||||
[DevtoolsEvent.DEVTOOLS_CONNECTED_APP]: { url: string | null };
|
||||
[DevtoolsEvent.DEVTOOLS_DISCONNECTED_APP]: {};
|
||||
[DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR]: { name: string };
|
||||
[DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION]: { name: string };
|
||||
[DevtoolsEvent.DEVTOOLS_LOGIN_SUCCESS]: {};
|
||||
[DevtoolsEvent.DEVTOOLS_LOGIN_FAILURE]: {
|
||||
error: string | null;
|
||||
code: string | null;
|
||||
};
|
||||
[DevtoolsEvent.DEVTOOLS_DISPLAY_LOGIN_FAILURE]: {
|
||||
error: string | null;
|
||||
code: string | null;
|
||||
};
|
||||
[DevtoolsEvent.DEVTOOLS_RELOAD_AFTER_LOGIN]: {};
|
||||
[DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY]: { queryKey: QueryKey };
|
||||
[DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY_ACTION]: { queryKey: QueryKey };
|
||||
};
|
||||
12
packages/devtools-shared/src/feed.ts
Normal file
12
packages/devtools-shared/src/feed.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export type FeedSection = {
|
||||
content: string;
|
||||
// frontmatter
|
||||
title: string;
|
||||
featured?: boolean;
|
||||
date: string;
|
||||
author: string;
|
||||
avatar: string;
|
||||
cover?: string;
|
||||
};
|
||||
|
||||
export type Feed = FeedSection[];
|
||||
14
packages/devtools-shared/src/index.ts
Normal file
14
packages/devtools-shared/src/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export { DevtoolsEvent, DevtoolsEventPayloads } from "./event-types.js";
|
||||
export { TraceType } from "./trace.js";
|
||||
export { Feed, FeedSection } from "./feed.js";
|
||||
export {
|
||||
PackageType,
|
||||
PackageLatestVersionType,
|
||||
AvailablePackageType,
|
||||
} from "./package.js";
|
||||
export { RefineHook, Scopes, hooksByScope, scopes } from "./scopes.js";
|
||||
|
||||
export { DevToolsContextProvider, DevToolsContext } from "./context.js";
|
||||
|
||||
export { send } from "./send.js";
|
||||
export { receive } from "./receive.js";
|
||||
19
packages/devtools-shared/src/package.ts
Normal file
19
packages/devtools-shared/src/package.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export type PackageType = {
|
||||
name: string;
|
||||
currentVersion: string;
|
||||
description?: string;
|
||||
changelog?: string;
|
||||
documentation?: string;
|
||||
};
|
||||
|
||||
export type PackageLatestVersionType = {
|
||||
name: string;
|
||||
latestVersion: string;
|
||||
};
|
||||
|
||||
export type AvailablePackageType = {
|
||||
name: string;
|
||||
description: string;
|
||||
install: string;
|
||||
usage: string;
|
||||
};
|
||||
22
packages/devtools-shared/src/receive.ts
Normal file
22
packages/devtools-shared/src/receive.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
// receive ws message by adding a listener to the ws object
|
||||
|
||||
import type { DevtoolsEvent, DevtoolsEventPayloads } from "./event-types";
|
||||
|
||||
export function receive<T extends DevtoolsEvent>(
|
||||
ws: WebSocket,
|
||||
event: T,
|
||||
callback: (payload: DevtoolsEventPayloads[T]) => void,
|
||||
) {
|
||||
const listener = (e: MessageEvent) => {
|
||||
const { event: receivedEvent, payload } = JSON.parse(e.data);
|
||||
if (event === receivedEvent) {
|
||||
callback(payload);
|
||||
}
|
||||
};
|
||||
|
||||
ws.addEventListener("message", listener);
|
||||
|
||||
return () => {
|
||||
ws.removeEventListener("message", listener);
|
||||
};
|
||||
}
|
||||
67
packages/devtools-shared/src/scopes.ts
Normal file
67
packages/devtools-shared/src/scopes.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
export type RefineHook =
|
||||
| "useCan"
|
||||
| "useLog"
|
||||
| "useLogList"
|
||||
| "useCreate"
|
||||
| "useCreateMany"
|
||||
| "useCustom"
|
||||
| "useCustomMutation"
|
||||
| "useDelete"
|
||||
| "useDeleteMany"
|
||||
| "useInfiniteList"
|
||||
| "useList"
|
||||
| "useMany"
|
||||
| "useOne"
|
||||
| "useUpdate"
|
||||
| "useUpdateMany"
|
||||
| "useForgotPassword"
|
||||
| "useGetIdentity"
|
||||
| "useIsAuthenticated"
|
||||
| "useLogin"
|
||||
| "useLogout"
|
||||
| "useOnError"
|
||||
| "usePermissions"
|
||||
| "useRegister"
|
||||
| "useUpdatePassword";
|
||||
|
||||
export type Scopes = "data" | "audit-log" | "access-control" | "auth";
|
||||
|
||||
export const scopes: Record<RefineHook, Scopes> = {
|
||||
useCan: "access-control",
|
||||
useLog: "audit-log",
|
||||
useLogList: "audit-log",
|
||||
useCreate: "data",
|
||||
useCreateMany: "data",
|
||||
useCustom: "data",
|
||||
useCustomMutation: "data",
|
||||
useDelete: "data",
|
||||
useDeleteMany: "data",
|
||||
useInfiniteList: "data",
|
||||
useList: "data",
|
||||
useMany: "data",
|
||||
useOne: "data",
|
||||
useUpdate: "data",
|
||||
useUpdateMany: "data",
|
||||
useForgotPassword: "auth",
|
||||
useGetIdentity: "auth",
|
||||
useIsAuthenticated: "auth",
|
||||
useLogin: "auth",
|
||||
useLogout: "auth",
|
||||
useOnError: "auth",
|
||||
usePermissions: "auth",
|
||||
useRegister: "auth",
|
||||
useUpdatePassword: "auth",
|
||||
};
|
||||
|
||||
export const hooksByScope = Object.entries(scopes).reduce(
|
||||
(acc, [hook, scope]) => {
|
||||
if (!acc[scope]) {
|
||||
acc[scope] = [];
|
||||
}
|
||||
|
||||
acc[scope].push(hook as RefineHook);
|
||||
|
||||
return acc;
|
||||
},
|
||||
{} as Record<Scopes, RefineHook[]>,
|
||||
);
|
||||
24
packages/devtools-shared/src/send.ts
Normal file
24
packages/devtools-shared/src/send.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import type { DevtoolsEvent, DevtoolsEventPayloads } from "./event-types";
|
||||
|
||||
export async function send<T extends DevtoolsEvent>(
|
||||
ws: WebSocket,
|
||||
event: T,
|
||||
payload: DevtoolsEventPayloads[T],
|
||||
) {
|
||||
// check if the socket is open
|
||||
// if not, wait for it to open
|
||||
if (ws.readyState !== ws.OPEN) {
|
||||
await new Promise<void>((resolve) => {
|
||||
const listener = () => {
|
||||
ws.send(JSON.stringify({ event, payload }));
|
||||
resolve();
|
||||
ws.removeEventListener("open", listener);
|
||||
};
|
||||
|
||||
ws.addEventListener("open", listener);
|
||||
});
|
||||
return;
|
||||
}
|
||||
ws.send(JSON.stringify({ event, payload }));
|
||||
return;
|
||||
}
|
||||
8
packages/devtools-shared/src/trace.ts
Normal file
8
packages/devtools-shared/src/trace.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export type TraceType = {
|
||||
file?: string;
|
||||
line?: number;
|
||||
column?: number;
|
||||
function?: string;
|
||||
isRefine: boolean;
|
||||
packageName?: string;
|
||||
};
|
||||
22
packages/devtools-shared/tsconfig.declarations.json
Normal file
22
packages/devtools-shared/tsconfig.declarations.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist",
|
||||
"test",
|
||||
"../test/**/*",
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"declarationDir": "dist",
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"noEmit": false,
|
||||
"declarationMap": true,
|
||||
"paths": {}
|
||||
}
|
||||
}
|
||||
13
packages/devtools-shared/tsconfig.json
Normal file
13
packages/devtools-shared/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"include": ["src", "types"],
|
||||
"extends": "../../tsconfig.build.json",
|
||||
"compilerOptions": {
|
||||
"types": ["node"],
|
||||
"rootDir": "./src",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@test/*": ["test/*"],
|
||||
"@test": ["test"]
|
||||
}
|
||||
}
|
||||
}
|
||||
8
packages/devtools-shared/tsconfig.test.json
Normal file
8
packages/devtools-shared/tsconfig.test.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"include": ["test", "src"],
|
||||
"compilerOptions": {
|
||||
"rootDir": ".",
|
||||
"types": ["node", "jest", "@testing-library/jest-dom"]
|
||||
}
|
||||
}
|
||||
32
packages/devtools-shared/tsup.config.ts
Normal file
32
packages/devtools-shared/tsup.config.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { defineConfig } from "tsup";
|
||||
import { NodeResolvePlugin } from "@esbuild-plugins/node-resolve";
|
||||
|
||||
export default defineConfig((options) => ({
|
||||
entry: ["src/index.ts"],
|
||||
splitting: false,
|
||||
sourcemap: true,
|
||||
clean: false,
|
||||
minify: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension: ({ format }) => ({ js: format === "cjs" ? ".cjs" : ".mjs" }),
|
||||
platform: "browser",
|
||||
esbuildPlugins: [
|
||||
NodeResolvePlugin({
|
||||
extensions: [".js", "ts", "tsx", "jsx"],
|
||||
onResolved: (resolved) => {
|
||||
if (resolved.includes("node_modules")) {
|
||||
return {
|
||||
external: true,
|
||||
};
|
||||
}
|
||||
return resolved;
|
||||
},
|
||||
}),
|
||||
],
|
||||
esbuildOptions(options) {
|
||||
options.banner = {
|
||||
js: '"use client"',
|
||||
};
|
||||
},
|
||||
onSuccess: options.watch ? "pnpm types" : undefined,
|
||||
}));
|
||||
Reference in New Issue
Block a user