Merge pull request #33 from wobsoriano/update-provided-value

Bump clerk-js version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-clerk",
   "version": "0.3.5",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "description": "",
   "author": "Robert Soriano <[email protected]>",
   "license": "MIT",
@@ -61,12 +61,12 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@clerk/clerk-js": "^5.2.1",
-    "@clerk/types": "^4.2.0",
+    "@clerk/clerk-js": "^5.2.4",
+    "@clerk/types": "^4.2.1",
     "@vueuse/core": "^10.9.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.16.3",
+    "@antfu/eslint-config": "^2.17.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.0.3",
@@ -83,6 +83,6 @@
     "vitepress": "1.0.2",
     "vitest": "^1.6.0",
     "vue": "^3.4.27",
-    "vue-tsc": "^2.0.16"
+    "vue-tsc": "^2.0.17"
   }
 }

playground/package.json

@@ -9,11 +9,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "h3-clerk": "^0.4.1",
+    "h3-clerk": "^0.4.3",
     "vue-clerk": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^18.19.31",
+    "@types/node": "^18.19.33",
     "nuxt": "^3.11.2"
   }
 }

src/composables/useAuth.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { createGetToken, createSignOut, toComputedRefs } from '../utils'
 import { invalidStateError, useAuthHasRequiresRoleOrPermission } from '../errors/messages'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type CheckAuthorizationSignedOut = undefined
 type CheckAuthorizationWithoutOrgOrUser = (params?: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => false
@@ -63,13 +63,13 @@ type UseAuthReturn =
   }
 
 export function useAuth(): ToComputedRefs<UseAuthReturn> {
-  const { clerk, derivedState } = useClerkProvide()
+  const { clerk, authCtx } = useClerkProvider()
 
   const getToken: GetToken = createGetToken(clerk)
   const signOut: SignOut = createSignOut(clerk)
 
   const result = computed<UseAuthReturn>(() => {
-    const { sessionId, userId, actor, orgId, orgRole, orgSlug, orgPermissions } = derivedState.value
+    const { sessionId, userId, actor, orgId, orgRole, orgSlug, orgPermissions } = authCtx.value
 
     const has = (params: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => {
       if (!params?.permission && !params?.role)

src/composables/useClerk.ts

@@ -1,14 +1,11 @@
-import type { LoadedClerk } from '@clerk/types'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
-export function useClerk(): LoadedClerk {
-  const { clerk } = useClerkProvide()
+export function useClerk() {
+  const { clerk } = useClerkProvider()
 
-  // The actual value is an instance of IsomorphicClerk, not Clerk
-  // we expose is as a Clerk instance
-  return clerk as unknown as LoadedClerk
+  return clerk
 }
 
 export {
-  useClerkProvide,
+  useClerkProvider,
 }

src/composables/useClerkProvider.ts

@@ -0,0 +1,19 @@
+import { inject } from 'vue'
+import type { VueClerkInjectionKey } from '../provideClerkToApp'
+
+export function useClerkProvider() {
+  const ctx = inject<VueClerkInjectionKey>('VUE_CLERK')
+
+  if (!ctx) {
+    throw new Error(
+      'This composable can only be used when the Vue Clerk plugin is installed. Learn more: https://vue-clerk.vercel.app/plugin',
+    )
+  }
+
+  return ctx
+}
+
+/**
+ * @deprecated use `useClerkProvider()` instead
+ */
+export const useClerkProvide = useClerkProvider

src/composables/useMountComponent.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { onMounted, ref, watchEffect } from 'vue'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 /**
  * @param root0
@@ -22,7 +22,7 @@ export function useMountComponent({
   unmountFn: (...args: any) => void
   props: Record<string, any>
 }) {
-  const { isClerkLoaded } = useClerkProvide()
+  const { isClerkLoaded } = useClerkProvider()
   const isMounted = ref(false)
 
   onMounted(() => {

src/composables/useOrganization.ts

@@ -2,7 +2,7 @@ import type { OrganizationResource } from '@clerk/types'
 import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseOrganizationReturn =
   | {
@@ -19,18 +19,16 @@ type UseOrganizationReturn =
   }
 
 export function useOrganization(): ToComputedRefs<UseOrganizationReturn> {
-  const { isClerkLoaded, derivedState } = useClerkProvide()
+  const { isClerkLoaded, organizationCtx } = useClerkProvider()
 
   const result = computed<UseOrganizationReturn>(() => {
-    const { organization } = derivedState.value
-
-    if (organization === undefined)
+    if (organizationCtx.value === undefined)
       return { isLoaded: false, organization: undefined }
 
-    if (organization === null)
+    if (organizationCtx.value === null)
       return { isLoaded: true, organization: null }
 
-    return { isLoaded: isClerkLoaded.value, organization }
+    return { isLoaded: isClerkLoaded.value, organization: organizationCtx.value }
   })
 
   return toComputedRefs(result)

src/composables/useSession.ts

@@ -2,26 +2,24 @@ import type { ActiveSessionResource } from '@clerk/types'
 import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseSessionReturn =
   | { isLoaded: false, isSignedIn: undefined, session: undefined }
   | { isLoaded: true, isSignedIn: false, session: null }
   | { isLoaded: true, isSignedIn: true, session: ActiveSessionResource }
 
 export function useSession(): ToComputedRefs<UseSessionReturn> {
-  const { derivedState } = useClerkProvide()
+  const { sessionCtx } = useClerkProvider()
 
   const result = computed<UseSessionReturn>(() => {
-    const { session } = derivedState.value
-
-    if (session === undefined)
+    if (sessionCtx.value === undefined)
       return { isLoaded: false, isSignedIn: undefined, session: undefined }
 
-    if (session === null)
+    if (sessionCtx.value === null)
       return { isLoaded: true, isSignedIn: false, session: null }
 
-    return { isLoaded: true, isSignedIn: true, session }
+    return { isLoaded: true, isSignedIn: true, session: sessionCtx.value }
   })
 
   return toComputedRefs(result)

src/composables/useSessionList.ts

@@ -3,22 +3,22 @@ import { computed } from 'vue'
 
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseSessionListReturn =
   | { isLoaded: false, sessions: undefined, setActive: undefined }
   | { isLoaded: true, sessions: SessionResource[], setActive: SetActive }
 
 export function useSessionList(): ToComputedRefs<UseSessionListReturn> {
-  const { clerk, state, isClerkLoaded } = useClerkProvide()
+  const { clerk, clientCtx } = useClerkProvider()
 
   const result = computed<UseSessionListReturn>(() => {
-    if (!isClerkLoaded.value || !state.client)
-      return { isLoaded: false, sessions: undefined, setSession: undefined, setActive: undefined }
+    if (!clientCtx.value)
+      return { isLoaded: false, sessions: undefined, setActive: undefined }
 
     return {
       isLoaded: true,
-      sessions: state.client.sessions,
+      sessions: clientCtx.value.sessions,
       setActive: clerk.setActive,
     }
   })

src/composables/useSignIn.ts

@@ -2,22 +2,22 @@ import type { SetActive, SignInResource } from '@clerk/types'
 import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseSignInReturn =
   | { isLoaded: false, signIn: undefined, setActive: undefined }
   | { isLoaded: true, signIn: SignInResource, setActive: SetActive }
 
 export function useSignIn(): ToComputedRefs<UseSignInReturn> {
-  const { clerk, isClerkLoaded } = useClerkProvide()
+  const { clerk, clientCtx } = useClerkProvider()
 
   const result = computed<UseSignInReturn>(() => {
-    if (!isClerkLoaded.value || !clerk.client)
+    if (!clientCtx.value)
       return { isLoaded: false, signIn: undefined, setActive: undefined }
 
     return {
       isLoaded: true,
-      signIn: clerk.client.signIn,
+      signIn: clientCtx.value.signIn,
       setActive: clerk.setActive,
     }
   })

src/composables/useSignUp.ts

@@ -2,22 +2,22 @@ import type { SetActive, SignUpResource } from '@clerk/types'
 import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseSignUpReturn =
   | { isLoaded: false, signUp: undefined, setActive: undefined }
   | { isLoaded: true, signUp: SignUpResource, setActive: SetActive }
 
 export function useSignUp(): ToComputedRefs<UseSignUpReturn> {
-  const { clerk, isClerkLoaded } = useClerkProvide()
+  const { clerk, clientCtx } = useClerkProvider()
 
   const result = computed<UseSignUpReturn>(() => {
-    if (!isClerkLoaded.value || !clerk.client)
+    if (!clientCtx.value)
       return { isLoaded: false, signUp: undefined, setActive: undefined }
 
     return {
       isLoaded: true,
-      signUp: clerk.client.signUp,
+      signUp: clientCtx.value.signUp,
       setActive: clerk.setActive,
     }
   })

src/composables/useUser.ts

@@ -2,26 +2,24 @@ import type { UserResource } from '@clerk/types'
 import { computed } from 'vue'
 import type { ToComputedRefs } from '../utils'
 import { toComputedRefs } from '../utils'
-import { useClerkProvide } from './useClerkProvide'
+import { useClerkProvider } from './useClerkProvider'
 
 type UseUserReturn =
   | { isLoaded: false, isSignedIn: undefined, user: undefined }
   | { isLoaded: true, isSignedIn: false, user: null }
   | { isLoaded: true, isSignedIn: true, user: UserResource }
 
 export function useUser(): ToComputedRefs<UseUserReturn> {
-  const { derivedState } = useClerkProvide()
+  const { userCtx } = useClerkProvider()
 
   const result = computed<UseUserReturn>(() => {
-    const { user } = derivedState.value
-
-    if (user === undefined)
+    if (userCtx.value === undefined)
       return { isLoaded: false, isSignedIn: undefined, user: undefined }
 
-    if (user === null)
+    if (userCtx.value === null)
       return { isLoaded: true, isSignedIn: false, user: null }
 
-    return { isLoaded: true, isSignedIn: true, user }
+    return { isLoaded: true, isSignedIn: true, user: userCtx.value }
   })
 
   return toComputedRefs(result)