fix(remix): Automatically infer path to where component is mounted

[octoper]

Description

This PR allows to automatically infer the path for where the component is mounted.

This functionality is already introduced for @clerk/nextjs (#2634)

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: d87a2f0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/remix	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[octoper]

!snapshot

[clerk-cookie]

Hey @octoper - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	1.0.1-snapshot.vc39d42e
@clerk/chrome-extension	1.0.1-snapshot.vc39d42e
@clerk/clerk-js	5.0.1-snapshot.vc39d42e
@clerk/clerk-expo	1.0.1-snapshot.vc39d42e
@clerk/fastify	1.0.1-snapshot.vc39d42e
gatsby-plugin-clerk	5.0.1-snapshot.vc39d42e
@clerk/localizations	2.0.1-snapshot.vc39d42e
@clerk/nextjs	5.0.1-snapshot.vc39d42e
@clerk/clerk-react	5.0.1-snapshot.vc39d42e
@clerk/remix	4.0.1-snapshot.vc39d42e
@clerk/clerk-sdk-node	5.0.1-snapshot.vc39d42e
@clerk/shared	2.0.1-snapshot.vc39d42e
@clerk/themes	2.0.1-snapshot.vc39d42e
@clerk/types	4.0.1-snapshot.vc39d42e

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/backend

npm i @clerk/backend@1.0.1-snapshot.vc39d42e --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.1-snapshot.vc39d42e --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.0.1-snapshot.vc39d42e --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.0.1-snapshot.vc39d42e --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.1-snapshot.vc39d42e --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.1-snapshot.vc39d42e --save-exact

@clerk/localizations

npm i @clerk/localizations@2.0.1-snapshot.vc39d42e --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.0.1-snapshot.vc39d42e --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.0.1-snapshot.vc39d42e --save-exact

@clerk/remix

npm i @clerk/remix@4.0.1-snapshot.vc39d42e --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.1-snapshot.vc39d42e --save-exact

@clerk/shared

npm i @clerk/shared@2.0.1-snapshot.vc39d42e --save-exact

@clerk/themes

npm i @clerk/themes@2.0.1-snapshot.vc39d42e --save-exact

@clerk/types

npm i @clerk/types@4.0.1-snapshot.vc39d42e --save-exact

[dimkl]

@octoper what does the path of useLocation() return for wildcard routes? We need to get part before the wildcard param and use that as path to the component.

[octoper]

@dimkl I have tested that and it resolves the full pathname as is in the browser so it seems there is no need to handle anything in that case.

Correction for my previous statement:
Talked with @dimkl async, and indeed I will have to apply some more updates to correctly handle wildcard routes

[desiprisg]

Can we add a couple of tests for this? Maybe turn it into a util.

[octoper]

I'm not sure we need to test something here as the test here is going to test if replace works correctly, the only thing we do here is we are removing a specific part of the pathname, and also remove slashes from the start and the end of the string only if they exist, also we don't have unit tests specifically for Remix right now, and this part is very specific to Remix to make it a general util. The only thing I see here we can extract in a util and test it is the part of removing slashes.