UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
b516d02253
openpanel/packages/nextjs-router/CHANGELOG.md
Stefan Pejcic 8595a9f4e5 back
2024-05-08 19:58:53 +02:00

34 KiB
Raw Blame History

@refinedev/nextjs-router

5.5.5

Patch Changes

5.5.4

Patch Changes

5.5.3

Patch Changes

5.5.2

Patch Changes

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

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.

5.5.1

Patch Changes

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

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.

5.5.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

5.4.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

5.3.2

Patch Changes

  • #4466 a398c19b023 Thanks @aliemir! - Fixed the unhandled nullable pathname issue returning from usePathname hook for the appDir router.

5.3.1

Patch Changes

  • #4466 a398c19b023 Thanks @aliemir! - Fixed the unhandled nullable pathname issue returning from usePathname hook for the appDir router.

5.3.0

Minor Changes

  • #4313 28fe67047a0 Thanks @abdellah711! - feat: dynamic window title for NextJS pages directory

    This feature enables users to generate document titles for each page in NextJS pages directory. To activate it, users need to include the DocumentTitleHandler component within the <Refine> component. By default, the DocumentTitleHandler will generate titles using the generateDefaultDocumentTitle exported from @refinedev/core.

    The DocumentTitleHandler component accepts an optional prop called handler, which is a callback function. This function is triggered whenever the pathname changes and receives an object with the following parameters:

    {
    resource, // 'posts'
        action, // 'create'
        params, // {id: 1}
        pathname, // '/posts/create'
        autoGeneratedTitle; // 'Create new Post | refine'
}

    The handler callback should return the new title based on the provided parameters.

    To update the title in a child component, the user can use the useDocumentTitle hook. It accepts either a string representing the new title or an object with the property i18nKey if the app supports multiple languages.

    useDocumentTitle({ i18nKey: "documentTitle.default" });

    Note that this hook doesn't support SSR, and it will generate the titles in the client-side only.

5.2.0

Minor Changes

  • #4313 28fe67047a0 Thanks @abdellah711! - feat: dynamic window title for NextJS pages directory

    This feature enables users to generate document titles for each page in NextJS pages directory. To activate it, users need to include the DocumentTitleHandler component within the <Refine> component. By default, the DocumentTitleHandler will generate titles using the generateDefaultDocumentTitle exported from @refinedev/core.

    The DocumentTitleHandler component accepts an optional prop called handler, which is a callback function. This function is triggered whenever the pathname changes and receives an object with the following parameters:

    {
    resource, // 'posts'
        action, // 'create'
        params, // {id: 1}
        pathname, // '/posts/create'
        autoGeneratedTitle; // 'Create new Post | refine'
}

    The handler callback should return the new title based on the provided parameters.

    To update the title in a child component, the user can use the useDocumentTitle hook. It accepts either a string representing the new title or an object with the property i18nKey if the app supports multiple languages.

    useDocumentTitle({ i18nKey: "documentTitle.default" });

    Note that this hook doesn't support SSR, and it will generate the titles in the client-side only.

5.1.6

Patch Changes

5.1.5

Patch Changes

5.1.4

Patch Changes

  • #3987 d7d68e3ff68 Thanks @aliemir! - Add isReady check to parse method for /pages to wait until the correct values are returned from the router.

5.1.3

Patch Changes

  • #3987 d7d68e3ff68 Thanks @aliemir! - Add isReady check to parse method for /pages to wait until the correct values are returned from the router.

5.1.2

Patch Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! We're releasing a new way to connect your router to refine.

    The legacy routerProvider and its exports are now deprecated but accessible at @refinedev/nextjs-router/legacy-app and @refinedev/nextjs-router/legacy-pages.

    The new routerBindings are smaller and more flexible than the previos one.

    New routerBindings export

    New routerBindings contains following properties;

    • go: Which returns a function to handle the navigation in next. It accepts a config object and navigates to the given path. Uses useRouter hook under the hood.
    • back: Which returns a function to handle the navigation in next. It navigates back to the previous page. Uses useRouter hook under the hood.
    • parse: Which returns a function to parse the given path and returns the resource, id, action and additional params. Uses useRouter for /pages dir and usePathname and useSearchParams for /app dir.
    • Link: A component that accepts to prop and renders a link to the given path. Uses Link component from next/link under the hood.

    Complemetary Components

    • RefineRoutes - A component that renders the routes for the resources when the actions are defined as components. This can be used to achieve the legacy behavior of routerProvider prop. RefineRoutes component accepts a render function as a child and passes JSX.Element if there's a match for the given path, undefined is passed otherwise. You can use this in [[...refine]] route to render the matching action component for a resource. We're encouraging our users to use file based routing instead of [[...refine]] route which provides more flexibility and a better development experience with its performance benefits.

    • NavigateToResource - A component that navigates to the first list action of the resources array of <Refine>. Optionally, you can pass a resource prop to navigate to list action of the resource. This can be placed at the index route of your app to redirect to the first resource.

    • UnsavedChangesNotifier - This component handles the prompt when the user tries to leave the page with unsaved changes. It can be placed under the Refine component.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! AuthProvider is renamed to LegacyAuthProvider with refine@4. Components and functions are updated to support LegacyAuthProvider.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! parseTableParams helper is added to let users parse the query params in SSR methods to persist syncWithLocation feature in tables.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Moving to the @refinedev scope 🎉🎉

    Moved to the @refinedev scope and updated our packages to use the new scope. From now on, all packages will be published under the @refinedev scope with their new names.

    Now, we're also removing the refine prefix from all packages. So, the @pankod/refine-core package is now @refinedev/core, @pankod/refine-antd is now @refinedev/antd, and so on.

Patch Changes

4.5.0

Minor Changes

4.4.0

Minor Changes

4.3.0

Minor Changes

4.2.0

Minor Changes

4.1.0

Minor Changes

  • #3140 102bfbf3283 Thanks @aliemir! - - Bumped Next.js to 13

    • Added support for experimental appDir option in next.config.js to allow for the latest Next.js features.

    pages directory

    Current support for pages directory has not changed and will continue to work as before. It will be supported as long as Next.js continues to support and prompts it as the stable way of working with Next.js.

    appDir option

    appDir option is a new experimental feature in Next.js that introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the current pages directory support.

    To use appDir option, you need to add it to your next.config.js file.

    // next.config.js
module.exports = {
    /* ... */
    experimental: {
        appDir: true,
    },
};

    Using appDir with refine

    We've needed to make some changes to the @pankod/refine-nextjs-router to make it work with the current structure of the app directory feature. To make sure these do not break the current support for pages directory, we've added a new exports at the sub path @pankod/refine-nextjs-router/app that can be used with the appDir option.

    Note

    To make optional catch-all routes to work with the app directory, you need to define them as directories unlike the option of defining them as files with pages directory.

    You need to use NextRouteComponent from @pankod/refine-nextjs-router/app instead of NextRouteComponent from @pankod/refine-nextjs-router when using appDir option.

    Inside your layout file, you need to bind params to routerProvider to make sure @pankod/refine-nextjs-router can work properly with the new structure.

    // app/[[...refine]]/layout.tsx
"use client";

import routerProvider from "@pankod/refine-nextjs-router/app";

const Layout = ({ children, params }) => {
    return (
        <Refine
            routerProvider={routerProvider.apply({ params })}
            /* ... */
        >
            {children}
        </Refine>
    );
};

    Warning

    Please note that, unlike the routerProvider from the @pankod/refine-nextjs-router, routerProvider from @pankod/refine-nextjs-router/app is a function and you need to bind params to make it work properly.

    // app/[[...refine]]/page.tsx

"use client";

import { NextRouteComponent } from "@pankod/refine-nextjs-router/app";

export default NextRouteComponent;

    Warning

    You need to add "use client"; directive to both layout.tsx and page.tsx inside app/[[...refine]] directory.

    Warning

    checkAuthentication does not work with appDir. We're aiming to release a substitute for it using middleware but for now its not included in this release.

4.0.0

Major Changes

  • #3140 102bfbf3283 Thanks @aliemir! - - Bumped Next.js to 13

    • Added support for experimental appDir option in next.config.js to allow for the latest Next.js features.

    pages directory

    Current support for pages directory has not changed and will continue to work as before. It will be supported as long as Next.js continues to support and prompts it as the stable way of working with Next.js.

    appDir option

    appDir option is a new experimental feature in Next.js that introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the current pages directory support.

    To use appDir option, you need to add it to your next.config.js file.

    // next.config.js
module.exports = {
    /* ... */
    experimental: {
        appDir: true,
    },
};

    Using appDir with refine

    We've needed to make some changes to the @pankod/refine-nextjs-router to make it work with the current structure of the app directory feature. To make sure these do not break the current support for pages directory, we've added a new exports at the sub path @pankod/refine-nextjs-router/app that can be used with the appDir option.

    Note

    To make optional catch-all routes to work with the app directory, you need to define them as directories unlike the option of defining them as files with pages directory.

    You need to use NextRouteComponent from @pankod/refine-nextjs-router/app instead of NextRouteComponent from @pankod/refine-nextjs-router when using appDir option.

    Inside your layout file, you need to bind params to routerProvider to make sure @pankod/refine-nextjs-router can work properly with the new structure.

    // app/[[...refine]]/layout.tsx
"use client";

import routerProvider from "@pankod/refine-nextjs-router/app";

const Layout = ({ children, params }) => {
    return (
        <Refine
            routerProvider={routerProvider.apply({ params })}
            /* ... */
        >
            {children}
        </Refine>
    );
};

    Warning

    Please note that, unlike the routerProvider from the @pankod/refine-nextjs-router, routerProvider from @pankod/refine-nextjs-router/app is a function and you need to bind params to make it work properly.

    // app/[[...refine]]/page.tsx

"use client";

import { NextRouteComponent } from "@pankod/refine-nextjs-router/app";

export default NextRouteComponent;

    Warning

    You need to add "use client"; directive to both layout.tsx and page.tsx inside app/[[...refine]] directory.

    Warning

    checkAuthentication does not work with appDir. We're aiming to release a substitute for it using middleware but for now its not included in this release.

3.38.0

Minor Changes

  • Added handleRefineParams helper function to handle catch-all refine params.

  • Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root [[...refine]].tsx and handle all params for the app.

  • Added ability to manage the initial route of refine by binding initialRoute variable to NextRouteComponent component.

3.37.0

Minor Changes

  • Added handleRefineParams helper function to handle catch-all refine params.

  • Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root [[...refine]].tsx and handle all params for the app.

  • Added ability to manage the initial route of refine by binding initialRoute variable to NextRouteComponent component.

3.36.0

Minor Changes

  • #2486 ee4d0d112a Thanks @aliemir! - Added handleRefineParams helper function to handle catch-all refine params.

  • #2486 ee4d0d112a Thanks @aliemir! - Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root [[...refine]].tsx and handle all params for the app.

  • #2486 ee4d0d112a Thanks @aliemir! - Added ability to manage the initial route of refine by binding initialRoute variable to NextRouteComponent component.

3.35.0

Minor Changes

  • Add initialData support to DashboardPage for @pankod/refine-nextjs-router.

3.34.0

Minor Changes

3.33.0

Minor Changes

  • Update type declaration generation with tsc instead of tsup for better navigation throughout projects source code.

3.32.0

Minor Changes

  • #2440 0150dcd070 Thanks @aliemir! - Update type declaration generation with tsc instead of tsup for better navigation throughout projects source code.

3.31.3

Patch Changes

  • Fixed default login page is <LoginPage>.

  • 🎉 Added AuthPage component to the refine app. This page is used to login, register, forgot password and update password. Login page is default page and old LoginPage component is deprecated.

    New Auth Hooks

    📌 Added useRegister hook. This hook is used to register new user. useRegister falls into register function of AuthProvider.

    📌 Added useForgotPassword hook. This hook is used to forgot password. useForgotPassword falls into forgotPassword function of AuthProvider.

    📌 Added useUpdatePassword hook. This hook is used to update password. useUpdatePassword falls into updatePassword function of AuthProvider.

    - <LoginPage>
+ <AuthPage>

    New AuthPage props:

    interface IAuthPageProps extends IAuthCommonProps {
    type?: "login" | "register" | "forgotPassword" | "updatePassword";
}

interface IAuthCommonProps {
    submitButton?: React.ReactNode;
    registerLink?: React.ReactNode;
    loginLink?: React.ReactNode;
    forgotPasswordLink?: React.ReactNode;
    updatePasswordLink?: React.ReactNode;
    backLink?: React.ReactNode;
    providers?: IProvider[];
}

interface IProvider {
    name: string;
    icon?: React.ReactNode;
    label?: string;
}

3.31.2

Patch Changes

3.31.1

Patch Changes

  • #2299 a02cb9e8ef Thanks @biskuvit! - 🎉 Added AuthPage to the refine app. This page is used to login, register, forgot password and update password. Login page is default page and old LoginPage component is deprecated.

    New Auth Hooks

    📌 Added useRegister hook. This hook is used to register new user. useRegister falls into register function of AuthProvider.

    📌 Added useForgotPassword hook. This hook is used to forgot password. useForgotPassword falls into forgotPassword function of AuthProvider.

    📌 Added useUpdatePassword hook. This hook is used to update password. useUpdatePassword falls into updatePassword function of AuthProvider.

    - <LoginPage>
+ <AuthPage>

    New AuthPage props:

    interface IAuthPageProps extends IAuthCommonProps {
    type?: "login" | "register" | "forgotPassword" | "updatePassword";
}

interface IAuthCommonProps {
    registerLink?: React.ReactNode;
    loginLink?: React.ReactNode;
    forgotPasswordLink?: React.ReactNode;
    updatePasswordLink?: React.ReactNode;
    backLink?: React.ReactNode;
    providers?: IProvider[];
}

interface IProvider {
    name: string;
    icon?: React.ReactNode;
    label?: string;
}

    Add AuthPage as a default page to Routers

    📌 Added AuthPage to the refine-nextjs-router. Default page is AuthPage.

    📌 Added AuthPage to the refine-react-location. Default page is AuthPage.

    📌 Added AuthPage to the refine-react-router-v6. Default page is AuthPage.

    📌 Added AuthPage to the refine-remix-router. Default page is AuthPage.

3.31.0

Minor Changes

  • Add React@18 support 🚀

3.30.0

Minor Changes

3.29.0

Minor Changes

  • Pass the full resource to the accessControlProvider can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.

    const App: React.FC = () => {
    <Refine
        // other providers and props
        accessControlProvider={{
            can: async ({ resource, action, params }) => {
                if (resource === "posts" && action === "edit") {
                    return Promise.resolve({
                        can: false,
                        reason: "Unauthorized",
                    });
                }

                // or you can access directly *resource object
                // const resourceName = params?.resource?.name;
                // const anyUsefulOption = params?.resource?.options?.yourUsefulOption;
                // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") {
                //     return Promise.resolve({
                //         can: false,
                //         reason: "Unauthorized",
                //     });
                // }

                return Promise.resolve({ can: true });
            },
        }}
    />;
};

3.28.0

Minor Changes

  • e78b181b12 Thanks @omeraplak! - Pass the full resource to the accessControlProvider can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.

    const App: React.FC = () => {
    <Refine
        // other providers and props
        accessControlProvider={{
            can: async ({ resource, action, params }) => {
                if (resource === "posts" && action === "edit") {
                    return Promise.resolve({
                        can: false,
                        reason: "Unauthorized",
                    });
                }

                // or you can access directly *resource object
                // const resourceName = params?.resource?.name;
                // const anyUsefulOption = params?.resource?.options?.yourUsefulOption;
                // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") {
                //     return Promise.resolve({
                //         can: false,
                //         reason: "Unauthorized",
                //     });
                // }

                return Promise.resolve({ can: true });
            },
        }}
    />;
};

3.27.0

Minor Changes

  • All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

3.26.0

Minor Changes

  • #2217 b4aae00f77 Thanks @omeraplak! - All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

3.25.6

Patch Changes

  • Created a wrapper <Link> component for handling href and to props. When using to the wrapper will pass it to the href prop.

  • Updated dependencies []:

    • @pankod/refine-core@3.36.0

3.25.5

Patch Changes

  • #2061 0237725cf3 Thanks @salihozdemir! - Created a wrapper <Link> component for handling href and to props. When using to the wrapper will pass it to the href prop.

  • Updated dependencies [ecde34a9b3, 635cfe9fdb]:

    • @pankod/refine-core@3.35.0

3.25.4

Patch Changes

  • Add legacyBehavior: false to <Link/> component to migrate to the new Next.js Link behavior. next.js#36436

  • Updated dependencies []:

    • @pankod/refine-core@3.34.0

3.25.3

Patch Changes

3.25.2

Patch Changes

  • We've updated Next.js version to 12.1.6

3.25.1

Patch Changes

3.22.2

Patch Changes

  • #1873 2deb19babf Thanks @aliemir! - Removed dummy default values from internal contexts. Updated contexts:

    • Auth
    • Access Control
    • Notification
    • Translation (i18n)
    • unsavedWarn

    BREAKING: useGetLocale hook now can return undefined instead of a fallback value of en in cases of i18nProvider being undefined.

  • Updated dependencies [2deb19babf]:

    • @pankod/refine-core@3.23.2