chore(astro): Remove duplicate logic in interactive components#3664

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
wobsoriano merged 15 commits into from
Jul 5, 2024
Merged

chore(astro): Remove duplicate logic in interactive components #3664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
642a811
feat(astro): Introduce Astro SDK
panteliselef Jul 1, 2024
7b71c50
chore(astro): Cleanup
panteliselef Jul 1, 2024
ae97781
chore(astro): Drop deprecations
panteliselef Jul 1, 2024
1dcc371
chore(astro): Make hotloading the default
panteliselef Jul 1, 2024
8b049c6
chore(astro): Update REAMDE
panteliselef Jul 2, 2024
5f7ac94
chore(astro): Address PR comments
panteliselef Jul 2, 2024
fbce381
chore(astro): Add jsdoc and todo comments
panteliselef Jul 3, 2024
4dfc889
chore(astro): Add jsdoc and todo comments
panteliselef Jul 3, 2024
27594f0
chore(astro): remove duplicate logic in interactive components
wobsoriano Jul 3, 2024
1f2c104
chore(astro): fix merge conflicts
wobsoriano Jul 4, 2024
db74a37
chore(astro): add changeset
wobsoriano Jul 5, 2024
067c728
chore(astro): use data attributes for UI elements
wobsoriano Jul 5, 2024
3205f2c
chore(astro): update internal interactive wrapper component name
wobsoriano Jul 5, 2024
ba3d688
Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…
wobsoriano Jul 5, 2024
8e979eb
Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…
panteliselef Jul 5, 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/metal-weeks-dress.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@clerk/astro": patch
---

Introduce a shared component for interactive components that handles UI mounting
40 changes: 40 additions & 0 deletions packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
[key: string]: unknown
component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: component,
id: `clerk-${component}-${safeId}`,
props,
});
</script>
37 changes: 2 additions & 35 deletions packages/astro/src/astro-components/interactive/OrganizationList.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "organization-list",
id: `clerk-organization-list-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />
37 changes: 2 additions & 35 deletions packages/astro/src/astro-components/interactive/OrganizationProfile.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "organization-profile",
id: `clerk-organization-profile-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
37 changes: 2 additions & 35 deletions packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "organization-switcher",
id: `clerk-organization-switcher-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />
40 changes: 3 additions & 37 deletions packages/astro/src/astro-components/interactive/SignIn.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const a = new Map();
a.set(id, props);
window.__astro_clerk_component_props.set(category, a);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};


setOrCreatePropMap({
category: "sign-in",
id: `clerk-sign-in-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />
39 changes: 3 additions & 36 deletions packages/astro/src/astro-components/interactive/SignUp.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const a = new Map();
a.set(id, props);
window.__astro_clerk_component_props.set(category, a);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "sign-up",
id: `clerk-sign-up-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />
35 changes: 3 additions & 32 deletions packages/astro/src/astro-components/interactive/UserButton.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "user-button",
id: `clerk-user-button-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />
35 changes: 3 additions & 32 deletions packages/astro/src/astro-components/interactive/UserProfile.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
// TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
/**
* Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
* The above is handled by `mountAllClerkAstroJSComponents`.
*/
const setOrCreatePropMap = ({ category, id, props }) => {
if (!window.__astro_clerk_component_props) {
window.__astro_clerk_component_props = new Map();
}

if (!window.__astro_clerk_component_props.has(category)) {
const _ = new Map();
_.set(id, props);
window.__astro_clerk_component_props.set(category, _);
}

window.__astro_clerk_component_props.get(category)?.set(id, props);
};

setOrCreatePropMap({
category: "user-profile",
id: `clerk-user-profile-${safeId}`,
props,
});
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />
5 changes: 3 additions & 2 deletions packages/astro/src/client/mount-clerk-astro-js-components.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
} as const;

Object.entries(mountFns).forEach(([category, mountFn]) => {
const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
elementsOfCategory.forEach(el => {
const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
const clerkId = el.getAttribute('data-clerk-id');
const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
if (el) {
$clerk.get()?.[mountFn](el as HTMLDivElement, props);
}
Expand Down
, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down

, '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
chore(astro): Remove duplicate logic in interactive components#3664

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

wobsoriano
merged 15 commits into

from

Jul 5, 2024
 Merged


chore(astro): Remove duplicate logic in interactive components
#3664
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
642a811

feat(astro): Introduce Astro SDK


panteliselef Jul 1, 2024
7b71c50

chore(astro): Cleanup


panteliselef Jul 1, 2024
ae97781

chore(astro): Drop deprecations


panteliselef Jul 1, 2024
1dcc371

chore(astro): Make hotloading the default


panteliselef Jul 1, 2024
8b049c6

chore(astro): Update REAMDE


panteliselef Jul 2, 2024
5f7ac94

chore(astro): Address PR comments


panteliselef Jul 2, 2024
fbce381

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
4dfc889

chore(astro): Add jsdoc and todo comments


panteliselef Jul 3, 2024
27594f0

chore(astro): remove duplicate logic in interactive components


wobsoriano Jul 3, 2024
1f2c104

chore(astro): fix merge conflicts


wobsoriano Jul 4, 2024
db74a37

chore(astro): add changeset


wobsoriano Jul 5, 2024
067c728

chore(astro): use data attributes for UI elements


wobsoriano Jul 5, 2024
3205f2c

chore(astro): update internal interactive wrapper component name


wobsoriano Jul 5, 2024
ba3d688

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


wobsoriano Jul 5, 2024
8e979eb

Merge branch 'main' into rob/eco-16-remove-duplication-in-interactive…


panteliselef Jul 5, 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/metal-weeks-dress.md

View file


Open in desktop

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

Introduce a shared component for interactive components that handles UI mounting

40 changes: 40 additions & 0 deletions
packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
---
interface Props {
 [key: string]: unknown
 component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
}

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const { component, ...props } = Astro.props
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: component,
 id: `clerk-${component}-${safeId}`,
 props,
 });
</script>

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationList.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationListProps } from "@clerk/types";
type Props = OrganizationListProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-list-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-list",
 id: `clerk-organization-list-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationProfileProps } from "@clerk/types";
type Props = OrganizationProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-profile",
 id: `clerk-organization-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

37 changes: 2 additions & 35 deletions
packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,40 +2,7 @@
import type { OrganizationSwitcherProps } from "@clerk/types";
type Props = OrganizationSwitcherProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props,
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-organization-switcher-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "organization-switcher",
 id: `clerk-organization-switcher-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

40 changes: 3 additions & 37 deletions
packages/astro/src/astro-components/interactive/SignIn.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
---
import type { SignInProps } from "@clerk/types";
type Props = SignInProps;
type Props = SignInProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-in-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };


 setOrCreatePropMap({
 category: "sign-in",
 id: `clerk-sign-in-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

39 changes: 3 additions & 36 deletions
packages/astro/src/astro-components/interactive/SignUp.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,41 +1,8 @@
---
import type { SignUpProps } from "@clerk/types";
type Props = SignUpProps;
type Props = SignUpProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();

const props = {
 ...Astro.props
}
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-sign-up-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const a = new Map();
 a.set(id, props);
 window.__astro_clerk_component_props.set(category, a);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "sign-up",
 id: `clerk-sign-up-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserButton.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserButtonProps } from "@clerk/types";
type Props = UserButtonProps;
type Props = UserButtonProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-button-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-button",
 id: `clerk-user-button-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-button" />

35 changes: 3 additions & 32 deletions
packages/astro/src/astro-components/interactive/UserProfile.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
---
import type { UserProfileProps } from "@clerk/types";
type Props = UserProfileProps;
type Props = UserProfileProps

import { customAlphabet, urlAlphabet } from "nanoid";

const safeId = customAlphabet(urlAlphabet, 10)();
import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
---

<div id={`clerk-user-profile-${safeId}`}></div>

<script is:inline define:vars={{ props: Astro.props, safeId }}>
 // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
 /**
 * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
 * The above is handled by `mountAllClerkAstroJSComponents`.
 */
 const setOrCreatePropMap = ({ category, id, props }) => {
 if (!window.__astro_clerk_component_props) {
 window.__astro_clerk_component_props = new Map();
 }

 if (!window.__astro_clerk_component_props.has(category)) {
 const _ = new Map();
 _.set(id, props);
 window.__astro_clerk_component_props.set(category, _);
 }

 window.__astro_clerk_component_props.get(category)?.set(id, props);
 };

 setOrCreatePropMap({
 category: "user-profile",
 id: `clerk-user-profile-${safeId}`,
 props,
 });
</script>
<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

5 changes: 3 additions & 2 deletions
packages/astro/src/client/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
 } as const;

 Object.entries(mountFns).forEach(([category, mountFn]) => {
 const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
 const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
 elementsOfCategory.forEach(el => {
 const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
 const clerkId = el.getAttribute('data-clerk-id');
 const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
 if (el) {
 $clerk.get()?.[mountFn](el as HTMLDivElement, props);
 }
Expand Down