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

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

Merged
nikosdouvlis merged 3 commits into from
Apr 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebae761
fix(remix): Automatically infer path to where component is mounted
octoper Apr 3, 2024
c8c60ac
chore(repo): Add Changeset
octoper Apr 3, 2024
d87a2f0
fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…
octoper Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wicked-worms-draw.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.
19 changes: 11 additions & 8 deletions packages/remix/src/client/uiComponents.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
(props: UserProfileProps) => {
return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
const path = usePathnameWithoutSplatRouteParams();
return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
},
{ ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
const path = usePathnameWithoutSplatRouteParams();
return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
(props: OrganizationProfileProps) => {
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
const path = usePathnameWithoutSplatRouteParams();
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
},
{ ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
const { signInUrl } = useClerkRemixOptions();
return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
const path = usePathnameWithoutSplatRouteParams();
return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
const { signUpUrl } = useClerkRemixOptions();
return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
const path = usePathnameWithoutSplatRouteParams();
return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};
18 changes: 18 additions & 0 deletions packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
const params = useParams();
const { pathname } = useLocation();

// Get the splat route params
// Remix store splat route params in an object with a key of '*'
// If there are no splat route params, we fallback to an empty string
const splatRouteParam = params['*'] || '';

// Remove the splat route param from the pathname
// so we end up with the pathname where the components are mounted at
// eg /user/123/profile/security will return /user/123/profile as the path
const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();

@desiprisgdesiprisgApr 5, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@octoperoctoperApr 5, 2024

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


return `/${path}`;
};
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(remix): Automatically infer path to where component is mounted#3104

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

 Merged

nikosdouvlis
merged 3 commits into

from

Apr 15, 2024
 Merged


fix(remix): Automatically infer path to where component is mounted
#3104
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebae761

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


octoper Apr 3, 2024
c8c60ac

chore(repo): Add Changeset


octoper Apr 3, 2024
d87a2f0

fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…


octoper Apr 4, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/wicked-worms-draw.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/remix': patch
---

Automatically infer the path for where the component is mounted.

19 changes: 11 additions & 8 deletions
packages/remix/src/client/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,21 +15,23 @@ import type {
} from '@clerk/types';
import React from 'react';

import { useClerkRemixOptions } from './RemixOptionsContext';
import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';

// The assignment of UserProfile with BaseUserProfile props is used
// to support the CustomPage functionality (eg UserProfile.Page)
// Also the `typeof BaseUserProfile` is used to resolved the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
 (props: UserProfileProps) => {
 return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
 },
 { ...BaseUserProfile },
);

export const CreateOrganization = (props: CreateOrganizationProps) => {
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
};

// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
Expand All@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
 (props: OrganizationProfileProps) => {
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
 },
 { ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
 const { signInUrl } = useClerkRemixOptions();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
};

export const SignUp = (props: SignUpProps) => {
 const { signUpUrl } = useClerkRemixOptions();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 const path = usePathnameWithoutSplatRouteParams();
 return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
};

18 changes: 18 additions & 0 deletions
packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import { useLocation, useParams } from '@remix-run/react';

export const usePathnameWithoutSplatRouteParams = () => {
 const params = useParams();
 const { pathname } = useLocation();

 // Get the splat route params
 // Remix store splat route params in an object with a key of '*'
 // If there are no splat route params, we fallback to an empty string
 const splatRouteParam = params['*'] || '';

 // Remove the splat route param from the pathname
 // so we end up with the pathname where the components are mounted at
 // eg /user/123/profile/security will return /user/123/profile as the path
 const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
@desiprisgdesiprisgApr 5, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a couple of tests for this? Maybe turn it into a util.
@octoperoctoperApr 5, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 return `/${path}`;
};