From 68a94cb013550d20cd071667792998c5fd9462a7 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 10 Dec 2024 14:37:22 -0800 Subject: [PATCH 1/5] chore(nuxt): Re-export components and composables --- packages/nuxt/package.json | 8 +++ packages/nuxt/src/module.ts | 63 ++---------------------- packages/nuxt/src/runtime/components.ts | 30 +++++++++++ packages/nuxt/src/runtime/composables.ts | 1 + 4 files changed, 44 insertions(+), 58 deletions(-) create mode 100644 packages/nuxt/src/runtime/components.ts create mode 100644 packages/nuxt/src/runtime/composables.ts diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index d1bafbef65..a994c61c62 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -33,6 +33,14 @@ "./server": { "types": "./dist/runtime/server/index.d.ts", "import": "./dist/runtime/server/index.js" + }, + "./components": { + "types": "./dist/runtime/components.d.ts", + "import": "./dist/runtime/components.js" + }, + "./composables": { + "types": "./dist/runtime/composables.d.ts", + "import": "./dist/runtime/composables.js" } }, "main": "./dist/module.js", diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts index ebcf22280d..9a2262f3cb 100644 --- a/packages/nuxt/src/module.ts +++ b/packages/nuxt/src/module.ts @@ -1,7 +1,7 @@ import type { LoadClerkJsScriptOptions } from '@clerk/shared/loadClerkJsScript'; import { - addComponent, - addImports, + addComponentsDir, + addImportsDir, addPlugin, addServerHandler, createResolver, @@ -91,62 +91,9 @@ export default defineNuxtModule({ }); } - // eslint-disable-next-line @typescript-eslint/consistent-type-imports - type VueClerkImports = Array; - - // Add auto-imports for Clerk components and composables - // More info https://nuxt.com/docs/guide/concepts/auto-imports - const components: VueClerkImports = [ - // Authentication Components - 'SignIn', - 'SignUp', - // Unstyled Components - 'SignInButton', - 'SignOutButton', - 'SignUpButton', - 'SignInWithMetamaskButton', - // User Components - 'UserButton', - 'UserProfile', - // Organization Components - 'CreateOrganization', - 'OrganizationProfile', - 'OrganizationSwitcher', - 'OrganizationList', - // Control Components - 'ClerkLoaded', - 'ClerkLoading', - 'Protect', - 'RedirectToSignIn', - 'RedirectToSignUp', - 'RedirectToUserProfile', - 'RedirectToOrganizationProfile', - 'RedirectToCreateOrganization', - 'SignedIn', - 'SignedOut', - ]; - const composables: VueClerkImports = [ - 'useAuth', - 'useClerk', - 'useSession', - 'useSessionList', - 'useSignIn', - 'useSignUp', - 'useUser', - 'useOrganization', - ]; - addImports( - composables.map(composable => ({ - name: composable, - from: '@clerk/vue', - })), - ); - components.forEach(component => { - void addComponent({ - name: component, - export: component, - filePath: '@clerk/vue', - }); + addImportsDir(resolver.resolve('./runtime/composables')); + void addComponentsDir({ + path: resolver.resolve('./runtime/components'), }); }, }); diff --git a/packages/nuxt/src/runtime/components.ts b/packages/nuxt/src/runtime/components.ts new file mode 100644 index 0000000000..12d0e860a8 --- /dev/null +++ b/packages/nuxt/src/runtime/components.ts @@ -0,0 +1,30 @@ +export { + // UI components + SignUp, + SignIn, + UserProfile, + UserButton, + OrganizationSwitcher, + OrganizationProfile, + CreateOrganization, + OrganizationList, + GoogleOneTap, + Waitlist, + // Control components + ClerkLoaded, + ClerkLoading, + SignedOut, + SignedIn, + Protect, + RedirectToSignIn, + RedirectToSignUp, + RedirectToUserProfile, + AuthenticateWithRedirectCallback, + RedirectToCreateOrganization, + RedirectToOrganizationProfile, + // Unstyled components + SignInButton, + SignUpButton, + SignOutButton, + SignInWithMetamaskButton, +} from '@clerk/vue'; diff --git a/packages/nuxt/src/runtime/composables.ts b/packages/nuxt/src/runtime/composables.ts new file mode 100644 index 0000000000..a99cfd4d84 --- /dev/null +++ b/packages/nuxt/src/runtime/composables.ts @@ -0,0 +1 @@ +export { useAuth, useUser, useSession, useClerk, useSignIn, useSignUp, useOrganization } from '@clerk/vue'; From ddc4606682f59096f4fa7add0c3663e26f1e4a29 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 10 Dec 2024 15:05:59 -0800 Subject: [PATCH 2/5] chore(nuxt): Update changeset --- .changeset/selfish-dingos-argue.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selfish-dingos-argue.md diff --git a/.changeset/selfish-dingos-argue.md b/.changeset/selfish-dingos-argue.md new file mode 100644 index 0000000000..203ccd9706 --- /dev/null +++ b/.changeset/selfish-dingos-argue.md @@ -0,0 +1,5 @@ +--- +"@clerk/nuxt": patch +--- + +Re-export Vue SDK components and composables From d966ae02e9f89ede5c0ea502c6fc6e9aaafc27b3 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 10 Dec 2024 16:20:32 -0800 Subject: [PATCH 3/5] chore(vue): Improve components and composables auto imports --- packages/nuxt/package.json | 8 ++++---- packages/nuxt/src/module.ts | 1 + .../src/runtime/{components.ts => components/index.ts} | 0 .../src/runtime/{composables.ts => composables/index.ts} | 0 packages/nuxt/tsup.config.ts | 8 +++++++- 5 files changed, 12 insertions(+), 5 deletions(-) rename packages/nuxt/src/runtime/{components.ts => components/index.ts} (100%) rename packages/nuxt/src/runtime/{composables.ts => composables/index.ts} (100%) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index a994c61c62..a7d7f397b7 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -35,12 +35,12 @@ "import": "./dist/runtime/server/index.js" }, "./components": { - "types": "./dist/runtime/components.d.ts", - "import": "./dist/runtime/components.js" + "types": "./dist/runtime/components/index.d.ts", + "import": "./dist/runtime/components/index.js" }, "./composables": { - "types": "./dist/runtime/composables.d.ts", - "import": "./dist/runtime/composables.js" + "types": "./dist/runtime/composables/index.d.ts", + "import": "./dist/runtime/composables/index.js" } }, "main": "./dist/module.js", diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts index 9a2262f3cb..bbb9405c11 100644 --- a/packages/nuxt/src/module.ts +++ b/packages/nuxt/src/module.ts @@ -91,6 +91,7 @@ export default defineNuxtModule({ }); } + // Add auto-imports for Clerk components and composables addImportsDir(resolver.resolve('./runtime/composables')); void addComponentsDir({ path: resolver.resolve('./runtime/components'), diff --git a/packages/nuxt/src/runtime/components.ts b/packages/nuxt/src/runtime/components/index.ts similarity index 100% rename from packages/nuxt/src/runtime/components.ts rename to packages/nuxt/src/runtime/components/index.ts diff --git a/packages/nuxt/src/runtime/composables.ts b/packages/nuxt/src/runtime/composables/index.ts similarity index 100% rename from packages/nuxt/src/runtime/composables.ts rename to packages/nuxt/src/runtime/composables/index.ts diff --git a/packages/nuxt/tsup.config.ts b/packages/nuxt/tsup.config.ts index 183ba0c4a1..bae9cdacb9 100644 --- a/packages/nuxt/tsup.config.ts +++ b/packages/nuxt/tsup.config.ts @@ -5,7 +5,13 @@ import { name, version } from './package.json'; export default defineConfig(() => { return { clean: true, - entry: ['./src/module.ts', './src/runtime/plugin.ts', './src/runtime/server/*.ts'], + entry: [ + './src/module.ts', + './src/runtime/plugin.ts', + './src/runtime/components/index.ts', + './src/runtime/composables/index.ts', + './src/runtime/server/*.ts', + ], format: ['esm'], // Make sure to not bundle the imports // or else the Nuxt module will not be able to resolve them From d84435df0bd64beadbf719de7e34fb0a184d1a66 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 10 Dec 2024 16:53:10 -0800 Subject: [PATCH 4/5] fix: Fix components auto import --- packages/nuxt/src/module.ts | 41 ++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts index bbb9405c11..bc606a1e4a 100644 --- a/packages/nuxt/src/module.ts +++ b/packages/nuxt/src/module.ts @@ -1,6 +1,6 @@ import type { LoadClerkJsScriptOptions } from '@clerk/shared/loadClerkJsScript'; import { - addComponentsDir, + addComponent, addImportsDir, addPlugin, addServerHandler, @@ -93,8 +93,43 @@ export default defineNuxtModule({ // Add auto-imports for Clerk components and composables addImportsDir(resolver.resolve('./runtime/composables')); - void addComponentsDir({ - path: resolver.resolve('./runtime/components'), + + // eslint-disable-next-line @typescript-eslint/consistent-type-imports + const components: Array = [ + // Authentication Components + 'SignIn', + 'SignUp', + // Unstyled Components + 'SignInButton', + 'SignOutButton', + 'SignUpButton', + 'SignInWithMetamaskButton', + // User Components + 'UserButton', + 'UserProfile', + // Organization Components + 'CreateOrganization', + 'OrganizationProfile', + 'OrganizationSwitcher', + 'OrganizationList', + // Control Components + 'ClerkLoaded', + 'ClerkLoading', + 'Protect', + 'RedirectToSignIn', + 'RedirectToSignUp', + 'RedirectToUserProfile', + 'RedirectToOrganizationProfile', + 'RedirectToCreateOrganization', + 'SignedIn', + 'SignedOut', + ]; + components.forEach(component => { + void addComponent({ + name: component, + export: component, + filePath: '@clerk/vue', + }); }); }, }); From 80da979779566e3d6afa2da4896ef126b0bd2ae6 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Wed, 11 Dec 2024 08:59:27 -0800 Subject: [PATCH 5/5] chore(nuxt): Update changeset --- .changeset/selfish-dingos-argue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/selfish-dingos-argue.md b/.changeset/selfish-dingos-argue.md index 203ccd9706..1af8bd3bd1 100644 --- a/.changeset/selfish-dingos-argue.md +++ b/.changeset/selfish-dingos-argue.md @@ -2,4 +2,4 @@ "@clerk/nuxt": patch --- -Re-export Vue SDK components and composables +Re-export Vue SDK components and composables to Nuxt SDK to support manual imports