Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Introducing adapters for other frameworks #644

Draft
wants to merge 15 commits into
base: v2/release
Choose a base branch
from
Draft

feat: Introducing adapters for other frameworks #644

wants to merge 15 commits into from

Conversation

franky47
Copy link
Member

@franky47 franky47 commented Sep 20, 2024 •
edited
Loading

Tasks

  • Add docs on adapters
  • Add docs on how to create adapters (for external contributions)
  • Add/update docs on testing showcasing the NuqsTestingAdapter
  • Update migration docs
  • Expose adapters API for users to create their own (marked as unstable in v2, stabilised after gathering feedback)

idea: Should the React adapter provide initial search params on the server for custom SSR implementations? -> Not on this version, can be an improvement later.

Breaking changes

nuqs now requires wrapping your app with a NuqsAdapter (see below), which is a context provider connecting your framework APIs to the hooks' internals.

The startTransition option no longer automatically sets shallow: false.

The Options type is no longer generic.

The "use client" directive was not included in the client import (import {} from 'nuqs'). It has now been added, meaning that server-side code needs to import from nuqs/server to avoid errors like:

Error: Attempted to call withDefault() from the server but withDefault is on
the client. It's not possible to invoke a client function from the server, it can
only be rendered as a Component or passed to props of a Client
Component.

Adapters

You'll need to wrap your application in a NuqsAdapter, as such:

Next.js, app router:

// src/app/layout.tsx
import { NuqsAdapter } from 'nuqs/adapters/next/app'
import { type ReactNode } from 'react'

export default function RootLayout({
  children
}: {
  children: ReactNode
}) {
  return (
    <html>
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  )
}

Next.js, pages router:

// src/pages/_app.tsx
import type { AppProps } from 'next/app'
import { NuqsAdapter } from 'nuqs/adapters/next/pages'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NuqsAdapter>
      <Component {...pageProps} />
    </NuqsAdapter>
  )
}

The main reason for adapters is to open up nuqs to other React frameworks:

Vanilla React (eg: with Vite):

import { NuqsAdapter } from 'nuqs/adapters/react'

createRoot(document.getElementById('root')!).render(
  <NuqsAdapter>
    <App />
  </NuqsAdapter>
)

Remix:

// app/root.tsx
import { NuqsAdapter } from 'nuqs/adapters/remix'

// ...

export default function App() {
  return (
    <NuqsAdapter>
      <Outlet />
    </NuqsAdapter>
  )
}

React Router:

Todo: add docs

Closes #603, #620.

@vercel Vercel
Copy link

vercel bot commented Sep 20, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuqs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 5, 2024 7:31pm

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Sep 20, 2024 •
edited
Loading

Open in Stackblitz

pnpm add https://pkg.pr.new/nuqs@644

commit: 5ba0204

@franky47 franky47 mentioned this pull request Sep 24, 2024
Open
@franky47 franky47 mentioned this pull request Sep 24, 2024
Open
@franky47 franky47 added this to the v2 milestone Sep 27, 2024
@franky47
feat: Introducing adapters for other frameworks
58b4c69 
BREAKING CHANGE: nuqs now requires wrapping your app
with a NuqsAdapter, which is a context provider connecting
your framework APIs to the hooks' internals.

BREAKING CHANGE: The `startTransition` option no longer
automatically sets `shallow: false`. The `Options` type
is no longer generic.

BREAKING CHANGE: The "use client" directive was not included
in the client import (`import {} from 'nuqs'`). It has now been added,
meaning that server-side code needs to import from `nuqs/server`
to avoid errors like:
```
Error: Attempted to call withDefault() from the server but withDefault is on
the client. It's not possible to invoke a client function from the server, it can
only be rendered as a Component or passed to props of a Client
Component.
```

Closes #603, #620.
@franky47
feat: Add vanilla React adapter sandbox
1fe44e9 
Showcasing two adapters: plain client-side React (no framework)
and unit testing with Vitest.
@franky47
doc: Add nuqs adapter
9025731
@franky47
feat: Provide specialised adapters for both Next.js routers
a1e23fa 
The unified adapter is still available, in case it gets mounted in a component
that needs to be router-agnostic (can be mounted in either router).
Using the specialised adapters shaves around 400B off shared chunks.
@franky47
chore: Remove unused internals test
bd534cf 
We're no longer using internals in the v2 branch.
@franky47
doc: Add adapters in v2 migration docs
d96f350
@franky47
feat: Add Remix adapter
c46479b
@franky47
chore: Move adapter to Remix root (wrapping Outlet)
1cc5e9b
@franky47
doc: Wording
2a398cd
@franky47 franky47 mentioned this pull request Oct 3, 2024
Open
10 tasks
@franky47 franky47 marked this pull request as ready for review October 7, 2024 21:32
@franky47 franky47 marked this pull request as draft October 8, 2024 08:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v2
Development

Successfully merging this pull request may close these issues.
1 participant
@franky47