From e53e4cf6a9286cdd632b18514fbb0d44cae3d817 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:25:08 -0800 Subject: [PATCH 01/29] wip --- packages/clerk-js/package.json | 1 + packages/clerk-js/rspack.config.js | 4 ++ packages/clerk-js/sandbox/app.js | 31 +++++++++++ packages/clerk-js/sandbox/index.html | 80 ++++++++++++++++++++++++++++ 4 files changed, 116 insertions(+) create mode 100644 packages/clerk-js/sandbox/app.js create mode 100644 packages/clerk-js/sandbox/index.html diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 20ebe697cce..5d7e981d7b6 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -39,6 +39,7 @@ "clean": "rimraf ./dist", "dev": "rspack serve --config rspack.config.js", "dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"", + "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4000", "lint": "eslint src/", "lint:attw": "attw --pack .", "lint:publint": "publint || true", diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js index d703ee12ac4..c1a4c23ce4a 100644 --- a/packages/clerk-js/rspack.config.js +++ b/packages/clerk-js/rspack.config.js @@ -430,6 +430,10 @@ const devConfig = ({ mode, env }) => { hot: true, liveReload: false, client: { webSocketURL: `auto://${devUrl.host}/ws` }, + static: './sandbox', + historyApiFallback: { + index: '/index.html', + }, }, }; }; diff --git a/packages/clerk-js/sandbox/app.js b/packages/clerk-js/sandbox/app.js new file mode 100644 index 00000000000..e210606f459 --- /dev/null +++ b/packages/clerk-js/sandbox/app.js @@ -0,0 +1,31 @@ +const app = document.getElementById('app'); + +const routes = { + '/': () => {}, + '/sign-in': () => { + window.Clerk.mountSignIn(app, {}); + }, + '/sign-up': () => { + window.Clerk.mountSignUp(app, {}); + }, + '/create-organization': () => { + window.Clerk.mountCreateOrganization(app, {}); + }, + '/user-button': () => { + window.Clerk.mountUserButton(app, {}); + }, +}; + +function addCurrentRouteIndicator(currentRoute) { + const link = document.querySelector(`a[href="${currentRoute}"]`); + link.classList.remove('text-gray-300', 'hover:bg-gray-700', 'hover:text-white'); + link.classList.add('bg-gray-900', 'text-white'); +} + +(async () => { + const route = window.location.pathname; + const renderCurrentRoute = routes[route]; + addCurrentRouteIndicator(route); + await window.Clerk.load(); + renderCurrentRoute(); +})(); diff --git a/packages/clerk-js/sandbox/index.html b/packages/clerk-js/sandbox/index.html new file mode 100644 index 00000000000..8a1a6028d7c --- /dev/null +++ b/packages/clerk-js/sandbox/index.html @@ -0,0 +1,80 @@ + + + + clerk-js Sandbox + + + + + +
+
+
+ + + + + From a5d7e4c72e8f3bcfa12922889a8d54b955d85c8a Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Fri, 15 Nov 2024 13:43:50 -0800 Subject: [PATCH 02/29] feat(clerk-js): Add JSDoc --- packages/clerk-js/sandbox/app.js | 78 ++++++++++++++++++++++++---- packages/clerk-js/sandbox/index.html | 16 ++++-- 2 files changed, 79 insertions(+), 15 deletions(-) diff --git a/packages/clerk-js/sandbox/app.js b/packages/clerk-js/sandbox/app.js index e210606f459..43456df7430 100644 --- a/packages/clerk-js/sandbox/app.js +++ b/packages/clerk-js/sandbox/app.js @@ -1,31 +1,87 @@ -const app = document.getElementById('app'); +//@ts-check + +/** @typedef {import('@clerk/clerk-js').Clerk} Clerk */ + +/** + * @typedef {object} CustomWindowObject + * @property {Clerk} [Clerk] + */ + +/** + * @typedef {Window & CustomWindowObject} CustomWindow + */ + +/** @type {CustomWindow} */ +const windowWithClerk = window; + +const Clerk = /** @type {Clerk} **/ (windowWithClerk.Clerk); +if (!Clerk) { + throw new Error(`clerk-js is not loaded!`); +} + +const app = /** @type {HTMLDivElement} **/ (document.getElementById('app')); + +/** + * @param {HTMLDivElement} element + */ +function mountIndex(element) { + const user = Clerk.user; + element.innerHTML = `
${JSON.stringify({ user }, null, 2)}
`; +} + +/** @typedef {keyof typeof routes} Route */ const routes = { - '/': () => {}, + '/': () => { + mountIndex(app); + }, '/sign-in': () => { - window.Clerk.mountSignIn(app, {}); + Clerk.mountSignIn(app, {}); }, '/sign-up': () => { - window.Clerk.mountSignUp(app, {}); + Clerk.mountSignUp(app, {}); + }, + '/user-button': () => { + Clerk.mountUserButton(app, {}); + }, + '/user-profile': () => { + Clerk.mountUserProfile(app, {}); }, '/create-organization': () => { - window.Clerk.mountCreateOrganization(app, {}); + Clerk.mountCreateOrganization(app, {}); }, - '/user-button': () => { - window.Clerk.mountUserButton(app, {}); + '/organization-list': () => { + Clerk.mountOrganizationList(app, {}); + }, + '/organization-profile': () => { + Clerk.mountOrganizationProfile(app, {}); + }, + '/organization-switcher': () => { + Clerk.mountOrganizationSwitcher(app, {}); + }, + '/waitlist': () => { + Clerk.mountWaitlist(app, {}); }, }; +/** + * @param {string} currentRoute + */ function addCurrentRouteIndicator(currentRoute) { const link = document.querySelector(`a[href="${currentRoute}"]`); + if (!link) { + return; + } link.classList.remove('text-gray-300', 'hover:bg-gray-700', 'hover:text-white'); link.classList.add('bg-gray-900', 'text-white'); } (async () => { const route = window.location.pathname; - const renderCurrentRoute = routes[route]; - addCurrentRouteIndicator(route); - await window.Clerk.load(); - renderCurrentRoute(); + if (route in routes) { + const renderCurrentRoute = routes[route]; + addCurrentRouteIndicator(route); + await Clerk.load(); + renderCurrentRoute(); + } })(); diff --git a/packages/clerk-js/sandbox/index.html b/packages/clerk-js/sandbox/index.html index 8a1a6028d7c..53f6c379f85 100644 --- a/packages/clerk-js/sandbox/index.html +++ b/packages/clerk-js/sandbox/index.html @@ -10,7 +10,12 @@
-
+
+ / -
-
+
+
+ -