47ng / 47ng/nuqs

Expo Router Adapter / CJS Support

Open
#837 32 comments 11 reactions 0 assignees View on GitHub
feature
Dominant language
TypeScript
Stars
10.8k
Forks
294
Avg merge
1d 16h
Merged PRs (30d)
21

Description

I have stubbed out an adapter that would work for Expo Router:
```ts
import { Array, Option, pipe, Record } from 'effect'
import { router, type UnknownOutputParams, useGlobalSearchParams, useSegments } from 'expo-router'
import {
type unstable_AdapterInterface,
unstable_createAdapterProvider,
} from 'nuqs/dist/adapters/custom'

export function useGlobalQueryParams() {
const params = useGlobalSearchParams()
const segments = useSegments()
const urlParams = segments
.filter((segment) => segment.startsWith('[') && segment.endsWith(']'))
.map((segment) => segment.slice(1, -1))

return Object.fromEntries(
Object.entries(params).filter(([key]) => !urlParams.includes(key)),
) as TParams
}

function useNuqsExpoRouterAdapter(): unstable_AdapterInterface {
const params = useGlobalQueryParams>()

const updateUrl = (searchParams: URLSearchParams) => {
const newParams = Object.entries(Object.fromEntries(searchParams))
const oldParams = pipe(params, Record.toEntries)

const paramsToRemove = pipe(
oldParams,
Array.filter(([oldKey]) =>
pipe(
newParams,
Array.findFirst(([newKey]) => oldKey === newKey),
Option.isNone,
),
),
Array.map(([key]) => [key, undefined]),
)

router.setParams({
...Object.fromEntries(paramsToRemove),
...Object.fromEntries(newParams),
})
}

return {
searchParams: new URLSearchParams(params),
updateUrl,
rateLimitFactor: 2,
getSearchParamsSnapshot: () => new URLSearchParams(params),
}
}

export const NuqsExpoAdapter = unstable_createAdapterProvider(useNuqsExpoRouterAdapter)

```

The problem I am running into is expo uses the metro bundler. Metro doesn't support ESM yet, so everything has to be CJS. Is there away we can add CJS support back to this package?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.