openpanel/packages/devtools-ui/CHANGELOG.md
Stefan Pejcic 09f9f9502d packages
2024-11-07 19:03:37 +01:00

26 KiB

@refinedev/devtools-ui

1.1.28

Patch Changes

  • #6154 261021c2710e2163e93d79b09ebb1e9a10db372f Thanks @BatuhanW! - feat: Onboarding page of the DevTools improved.

    • Loading animation added.
    • Client-side form validation added.
    • Error handling improved.
  • #6185 603c73eb7d376fc2357a577f5921f844a8f444e4 Thanks @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

  • Updated dependencies [603c73eb7d376fc2357a577f5921f844a8f444e4]:

    • @refinedev/devtools-shared@1.1.12

1.1.27

Patch Changes

  • #6098 8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a Thanks @aliemir! - refactor(devtools): updated flow for login callbacks

    Previously, when the login flow had an error, the Devtools UI was displaying it in the secondary window, which was not user-friendly and lead to multiple clients to connect unnecessarily. This change updates the flow to display the error message in the main Devtools window.

  • #6098 8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a Thanks @aliemir! - chore(devtools-ui): fix slider image loader

    In the welcome page of the Devtools UI, feature slider was re-mounting every image at transition, causing polluted network tab in the browser even though the images were cached and loaded already. This change fixes the issue by loading the images only once and reusing them on transition.

  • #6098 8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a Thanks @aliemir! - refactor(devtools): updated auth flow

    Previously, a proxy in the Devtools Server was used as an auth server to handle sign-ins in the localhost (Devtools Server). This change updates the flow and moves the authentication flow to https://auth.refine.dev to handle sign-ins and sign-outs. Now the Devtools Server is only responsible for the connection between the auth server and the user interface while also managing the user's session.

  • Updated dependencies [8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a, 8bc2c1c6790d1e098ce0d98e01f608e3310f7b4a]:

    • @refinedev/devtools-shared@1.1.11

1.1.25

Patch Changes

  • #6059 ad42665ad9ccb07f6090da353377d016b67acdd0 Thanks @aliemir! - fix(devtools-server): missing header check on auth requests

    Devtools was failing to determine the auth status and always end up redirecting to the login page regardless of the actual auth status. This was due to the missing check on the auth request that was causing all valid responses treated as unauthenticated.

    Resolves #6047

1.1.24

Patch Changes

1.1.23

Patch Changes

1.1.22

Patch Changes

  • #5928 db9756e7908 Thanks @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.

  • Updated dependencies [db9756e7908]:

    • @refinedev/devtools-shared@1.1.7

1.1.21

Patch Changes

  • #5875 1c9a95f22ab Thanks @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 1c9a95f22ab Thanks @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.

  • #5875 1c9a95f22ab Thanks @aliemir! - refactor: replace react-json-view with react-json-view-lite

    Replaced outdated react-json-view package with react-json-view-lite for both performance and dependency resolution reasons.

  • #5881 ba719f6ea26 Thanks @aliemir! - fix: declaration files in node10, node16 and nodenext module resolutions

  • Updated dependencies [1c9a95f22ab, 1c9a95f22ab, ba719f6ea26]:

    • @refinedev/devtools-shared@1.1.6

1.1.20

Patch Changes

  • #5823 aedc6a2961c Thanks @aliemir! - fix: broken lodash imports in ESM builds

    Fixed lodash imports in ESM builds which requires lodash-es imports to use .js extension to work properly unless the bundler is configured to handle non-fully-specified imports.

    Resolves #5822

1.1.19

Patch Changes

  • #5765 0c197d82393 Thanks @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 56ed144a0f5 Thanks @alicanerdurmaz! - chore: TypeScript upgraded to v5.x.x. #5752

  • Updated dependencies [0c197d82393, 56ed144a0f5]:

    • @refinedev/devtools-shared@1.1.5

1.1.18

Patch Changes

1.1.17

Patch Changes

  • Updated dependencies [546df06482]:
    • @refinedev/devtools-shared@1.1.3

1.1.16

Patch Changes

1.1.15

Patch Changes

1.1.14

Patch Changes

1.1.13

Patch Changes

1.1.12

Patch Changes

  • #5167 be899901d0e Thanks @aliemir! - 🎃 halloween update: devtools panel is temporarily welcoming a group of ghosts 👻, don't worry they are harmless. 👻

1.1.11

Patch Changes

  • #5167 be899901d0e Thanks @aliemir! - 🎃 halloween update: devtools panel is temporarily welcoming a group of ghosts 👻, don't worry they are harmless. 👻

1.1.10

Patch Changes

1.1.9

Patch Changes

1.1.8

Patch Changes

1.1.7

Patch Changes

1.1.6

Patch Changes

  • #5022 80513a4e42f Thanks @BatuhanW! - chore: update README.md

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.
  • #5020 20f5b6128d4 Thanks @aliemir! - Fixed the issue with the layout not being scrollable when content is overflowing.

  • Updated dependencies [80513a4e42f]:

    • @refinedev/devtools-shared@1.1.2

1.1.5

Patch Changes

  • #5022 80513a4e42f Thanks @BatuhanW! - chore: update README.md

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.
  • #5020 20f5b6128d4 Thanks @aliemir! - Fixed the issue with the layout not being scrollable when content is overflowing.

  • Updated dependencies [80513a4e42f]:

    • @refinedev/devtools-shared@1.1.1

1.1.4

Patch Changes

  • #5008 c8499114e55 Thanks @aliemir! - Fixing the version of @refinedev/devtools-shared dependency to avoid breaking projects in mismatching releases.

  • #5008 c8499114e55 Thanks @aliemir! - fix: filtering monitor from DOM selector

    feat: persistently store monitor filter in local storage From now on, the monitor filter will be stored in local storage and will be restored on page load.

  • #5008 c8499114e55 Thanks @aliemir! - replaced the base64 encoded png with a remote CDN url

  • #5008 c8499114e55 Thanks @aliemir! - feat: added feature slide show to login and onboarding page

1.1.3

Patch Changes

  • #5008 c8499114e55 Thanks @aliemir! - Fixing the version of @refinedev/devtools-shared dependency to avoid breaking projects in mismatching releases.

  • #5008 c8499114e55 Thanks @aliemir! - fix: filtering monitor from DOM selector

    feat: persistently store monitor filter in local storage From now on, the monitor filter will be stored in local storage and will be restored on page load.

  • #5008 c8499114e55 Thanks @aliemir! - replaced the base64 encoded png with a remote CDN url

  • #5008 c8499114e55 Thanks @aliemir! - feat: added feature slide show to login and onboarding page

1.1.2

Patch Changes

1.1.1

Patch Changes

refine devtools

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

  • #4960 d8e464fa2c4 Thanks @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.

    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.

    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:

    {
        "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 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. 🚀

Patch Changes

  • Updated dependencies [d8e464fa2c4]:
    • @refinedev/devtools-shared@1.0.0