fix(react-router): Update playground & pkg (#4628)

Co-authored-by: LekoArts <[email protected]>

Author: wobsoriano

packages/react-router/package.json

@@ -27,22 +27,27 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./ssr.server": {
       "types": "./dist/ssr/index.d.ts",
-      "default": "./dist/ssr/index.js"
+      "import": "./dist/ssr/index.mjs",
+      "require": "./dist/ssr/index.js"
     },
     "./api.server": {
       "types": "./dist/api/index.d.ts",
-      "default": "./dist/api/index.js"
+      "import": "./dist/api/index.mjs",
+      "require": "./dist/api/index.js"
     },
     "./errors": {
       "types": "./dist/errors.d.ts",
-      "default": "./dist/errors.js"
+      "import": "./dist/errors.mjs",
+      "require": "./dist/errors.js"
     }
   },
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -69,7 +74,8 @@
     "dev:publish": "pnpm dev -- --env.publish",
     "lint": "eslint src/",
     "lint:attw": "attw --pack .",
-    "lint:publint": "publint"
+    "lint:publint": "publint",
+    "publish:local": "pnpm dlx yalc push --replace --sig"
   },
   "dependencies": {
     "@clerk/backend": "workspace:*",
@@ -85,13 +91,13 @@
     "@types/node": "^18.19.33",
     "@types/react": "catalog:react",
     "@types/react-dom": "catalog:react",
-    "react-router-dom": "7.0.0-pre.6",
+    "react-router": "7.0.0-pre.6",
     "typescript": "catalog:repo"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "react-router": "^7.0.0-pre"
+    "react-router": "^7.0.0-pre.6"
   },
   "engines": {
     "node": ">=20.0.0"

packages/react-router/src/client/ClerkApp.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 
 import { assertPublishableKeyInSpaMode, inSpaMode } from '../utils';
 import { ClerkProvider } from './RemixClerkProvider';

packages/react-router/src/client/index.ts

@@ -1,4 +1,4 @@
 export * from './RemixClerkProvider';
 export { ClerkApp } from './ClerkApp';
-export { WithClerkState } from './types';
+export type { WithClerkState } from './types';
 export { SignIn, SignUp } from './uiComponents';

packages/react-router/src/client/useAwaitableNavigate.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { NavigateOptions } from 'react-router';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 type Resolve = (value?: unknown) => void;
 

packages/react-router/src/client/usePathnameWithoutSplatRouteParams.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 
 export const usePathnameWithoutSplatRouteParams = () => {
   const params = useParams();

packages/react-router/src/ssr/rootAuthLoader.ts

@@ -1,14 +1,18 @@
 import { decorateObjectWithResources } from '@clerk/backend/internal';
 
-/* TODO(v7): Fix this
-import type { defer } from '@remix-run/server-runtime';
-import { isDeferredData } from '@remix-run/server-runtime/dist/responses';
-*/
+// import type { defer } from '@remix-run/server-runtime';
+// import { isDeferredData } from '@remix-run/server-runtime/dist/responses';
 import { invalidRootLoaderCallbackReturn } from '../utils/errors';
 import { authenticateRequest } from './authenticateRequest';
 import { loadOptions } from './loadOptions';
 import type { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types';
-import { assertValidHandlerResult, injectRequestStateIntoResponse, isRedirect, isResponse } from './utils';
+import {
+  assertValidHandlerResult,
+  // injectRequestStateIntoDeferredData,
+  injectRequestStateIntoResponse,
+  isRedirect,
+  isResponse,
+} from './utils';
 
 interface RootAuthLoader {
   <Options extends RootAuthLoaderOptions, Callback extends RootAuthLoaderCallback<Options>>(
@@ -60,18 +64,15 @@ export const rootAuthLoader: RootAuthLoader = async (
   const handlerResult = await handler(args);
   assertValidHandlerResult(handlerResult, invalidRootLoaderCallbackReturn);
 
-  /* TODO(v7): Fix this
   // When using defer(), we need to inject the clerk auth state into its internal data object.
-  if (isDeferredData(handlerResult)) {
-    return injectRequestStateIntoDeferredData(
-      // This is necessary because the DeferredData type is not exported from remix.
-      // TODO(v7): This is probably incorrect now
-      handlerResult as unknown as ReturnType<any>,
-      requestState,
-      args.context,
-    );
-  }
-    */
+  // if (isDeferredData(handlerResult)) {
+  //   return injectRequestStateIntoDeferredData(
+  //     // This is necessary because the DeferredData type is not exported from remix.
+  //     handlerResult as unknown as ReturnType<typeof defer>,
+  //     requestState,
+  //     args.context,
+  //   );
+  // }
 
   if (isResponse(handlerResult)) {
     try {

packages/react-router/src/ssr/types.ts

@@ -8,7 +8,7 @@ import type {
   SignUpFallbackRedirectUrl,
   SignUpForceRedirectUrl,
 } from '@clerk/types';
-import type { LoaderFunction } from 'react-router-dom';
+import type { DataStrategyFunctionArgs, LoaderFunction } from 'react-router';
 
 export type GetAuthReturn = Promise<AuthObject>;
 
@@ -62,8 +62,7 @@ type ObjectLike = Record<string, unknown> | null;
  */
 export type RootAuthLoaderCallbackReturn = Promise<Response> | Response | Promise<ObjectLike> | ObjectLike;
 
-// TODO(v7): Fix this
-export type LoaderFunctionArgs = any;
+export type LoaderFunctionArgs = DataStrategyFunctionArgs;
 export type LoaderFunctionReturn = ReturnType<LoaderFunction>;
 
 export type LoaderFunctionArgsWithAuth<Options extends RootAuthLoaderOptions = any> = LoaderFunctionArgs & {

packages/react-router/src/ssr/utils.ts

@@ -1,10 +1,11 @@
 import { constants, debugRequestState } from '@clerk/backend/internal';
 import { isTruthy } from '@clerk/shared/underscore';
+// import type { AppLoadContext, defer } from '@remix-run/server-runtime';
 import cookie from 'cookie';
-import type { AppLoadContext } from 'react-router-dom';
-import { json } from 'react-router-dom';
+import type { AppLoadContext } from 'react-router';
 
-import { getEnvVariable } from '../utils/utils';
+// import { json } from 'react-router';
+import * as utils from '../utils/utils';
 import type { RequestStateWithRedirectUrls } from './types';
 
 export function isResponse(value: any): value is Response {
@@ -48,11 +49,12 @@ export const injectRequestStateIntoResponse = async (
     clone.headers.append(key, value);
   });
 
-  return json({ ...(data || {}), ...clerkState }, clone);
+  // return json({ ...(data || {}), ...clerkState }, clone);
+  return Response.json({ ...(data || {}), ...clerkState }, clone);
 };
 
 export function injectRequestStateIntoDeferredData(
-  data: ReturnType<typeof defer>,
+  data: ReturnType<any>,
   requestState: RequestStateWithRedirectUrls,
   context: AppLoadContext,
 ) {
@@ -65,7 +67,6 @@ export function injectRequestStateIntoDeferredData(
     data.init.headers = new Headers(data.init.headers);
 
     headers.forEach((value, key) => {
-      // @ts-expect-error -- We are ensuring headers is defined above
       data.init.headers.append(key, value);
     });
   }
@@ -95,10 +96,10 @@ export function getResponseClerkState(requestState: RequestStateWithRedirectUrls
     __signInFallbackRedirectUrl: requestState.signInFallbackRedirectUrl,
     __signUpFallbackRedirectUrl: requestState.signUpFallbackRedirectUrl,
     __clerk_debug: debugRequestState(requestState),
-    __clerkJSUrl: getEnvVariable('CLERK_JS', context),
-    __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION', context),
-    __telemetryDisabled: isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED', context)),
-    __telemetryDebug: isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG', context)),
+    __clerkJSUrl: utils.getEnvVariable('CLERK_JS', context),
+    __clerkJSVersion: utils.getEnvVariable('CLERK_JS_VERSION', context),
+    __telemetryDisabled: isTruthy(utils.getEnvVariable('CLERK_TELEMETRY_DISABLED', context)),
+    __telemetryDebug: isTruthy(utils.getEnvVariable('CLERK_TELEMETRY_DEBUG', context)),
   });
 
   return {

packages/react-router/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import type { AppLoadContext } from 'react-router-dom';
+import type { AppLoadContext } from 'react-router';
 
 import type { ClerkState } from '../client/types';
 import { invalidClerkStatePropError, noClerkStateError, publishableKeyMissingErrorInSpaMode } from './errors';

packages/react-router/tsconfig.json

@@ -4,8 +4,8 @@
     "baseUrl": ".",
     "lib": ["es6", "dom"],
     "jsx": "react",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
     "importHelpers": true,
     "declaration": true,
     "declarationMap": false,

packages/react-router/tsup.config.ts

@@ -10,14 +10,14 @@ export default defineConfig(overrideOptions => {
   const shouldPublish = !!overrideOptions.env?.publish;
 
   const options: Options = {
-    format: 'cjs',
+    format: ['cjs', 'esm'],
     outDir: './dist',
     entry: ['./src/**/*.{ts,tsx,js,jsx}'],
     bundle: false,
     clean: true,
     minify: false,
     sourcemap: true,
-    legacyOutput: true,
+    legacyOutput: false,
     define: {
       PACKAGE_NAME: `"${name}"`,
       PACKAGE_VERSION: `"${version}"`,

playground/react-router-node/.gitignore

@@ -2,7 +2,6 @@ node_modules
 
 /.cache
 /build
-/public/build
 .env
 
 .react-router/

playground/react-router-node/app/entry.server.tsx

@@ -1,4 +1,4 @@
-import { PassThrough } from 'stream';
+import { PassThrough } from 'node:stream';
 import type { EntryContext } from 'react-router';
 import { ServerRouter } from 'react-router';
 import isbot from 'isbot';

playground/react-router-node/app/root.tsx

@@ -1,18 +1,21 @@
-import { data, type LoaderFunctionArgs , MetaFunction } from 'react-router';
+// import { defer } from 'react-router';
+import type { MetaFunction } from 'react-router';
 import { Await, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from 'react-router';
 import { rootAuthLoader } from '@clerk/react-router/ssr.server';
 import { ClerkApp } from '@clerk/react-router';
 import { Suspense } from 'react';
+import { DataStrategyFunctionArgs } from 'react-router';
 
-export const loader = (args: LoaderFunctionArgs) => {
+export const loader = (args: DataStrategyFunctionArgs) => {
   return rootAuthLoader(
     args,
     async ({ request }) => {
       const { user } = request;
+      const data: Promise<{ foo: string }> = new Promise(r => r({ foo: 'bar' }))
 
       console.log('root User:', user);
 
-      return data({ user }, { headers: { 'x-clerk': '1' } })
+      return Response.json({ user, data }, { headers: { 'x-clerk': '1' } })
     },
     { loadUser: true },
   );
@@ -26,7 +29,7 @@ export function headers({
   parentHeaders: Headers;
 }) {
   console.log(loaderHeaders)
-  return loaderHeaders 
+  return loaderHeaders
 }
 
 export const meta: MetaFunction = () => {

playground/react-router-node/app/routes/_index.tsx

@@ -1,9 +1,9 @@
-import type { Route } from "./+types/_index";
+import type { LoaderFunction } from 'react-router';
 import { getAuth } from '@clerk/react-router/ssr.server';
-import { ClerkLoaded, SignedIn, useUser } from '@clerk/react-router';
+import { ClerkLoaded, SignedIn, useUser, UserButton } from '@clerk/react-router';
 import { Link } from 'react-router';
 
-export async function loader(args: Route.LoaderArgs) {
+export async function loader(args: LoaderFunction) {
   return getAuth(args)
 }
 
@@ -39,7 +39,7 @@ export default function Index() {
           </li>
           <li>
             SignedIn:
-            <SignedIn>Signed In!</SignedIn>
+            <SignedIn><p>You're signed in!</p><UserButton /></SignedIn>
           </li>
         </ul>
       </div>