Upgrade to Core 2

[wobsoriano]

This PR upgrades the package to Clerk Core 2 with refreshed UI components and removes the @clerk/clerk-js dependency in favor of hot loading the clerk-js script which greatly reduces app bundle size. It follows the SDK development guide for Clerk.

It introduces a breaking change by removing the separate Clerk headless import and passing it as an option instead. Also, instead of the initializeClerkClient hook that is imported inside hook.client.ts, this introduces a <ClerkProvider> component to be used in the root layout and accepts the same props as the <ClerkProvider> React component :

<script lang="ts">
	import type { LayoutData } from './$types';
	import ClerkProvider from 'clerk-sveltekit/client/ClerkProvider.svelte'
	import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public'
	export let data: LayoutData
</script>
<!-- ... -->
<ClerkProvider {...data} publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
    <slot />
</ClerkProvider>

The example above provides initial auth object support in SSR, which can't be done with the initializeClerkClient function inside a client hook file.

Furthermore, it exports a useClerkContext() function that returns the ff. stores to access various Clerk resources:

• clerk - clerk instance
• isLoaded - clerk is loaded
• client - client handling most Clerk operations
• session - access to the current user's Session object
• user - access the current User data
• organization - access the active organization

<script>
	import { useClerkContext } from 'clerk-sveltekit/client'
	const { user, organization } = useClerkContext()
	$: console.log('User: ', $user?.fullName)
	$: console.log('Organization: ', $organization?.name)
</script>

For server, authenticateRequest is implemented, and the Auth object is injected to locals.auth:

In hooks.server.ts:

import { withClerkHandler } from 'clerk-sveltekit/server'

export const handle = withClerkHandler()

import { redirect } from '@sveltejs/kit';
import { clerkClient } from 'clerk-sveltekit/server';

export const load = ({ locals }) => {
	if (!locals.auth.userId) {
		return redirect(307, '/sign-in');
	}

	const user = await clerkClient.users.getUser(userId);

	return {
		user: JSON.parse(JSON.stringify(user))
	};
};

This is another breaking change since we're removing the protectedRoutes option and let userland handle it.

Fixes

• https://github.com/markjaquith/clerk-sveltekit/issues/45
• https://github.com/markjaquith/clerk-sveltekit/issues/46
• https://github.com/markjaquith/clerk-sveltekit/issues/47
• https://github.com/markjaquith/clerk-sveltekit/issues/48 (<Protect /> component)
• https://github.com/markjaquith/clerk-sveltekit/issues/49
• https://github.com/markjaquith/clerk-sveltekit/issues/55
• https://github.com/markjaquith/clerk-sveltekit/issues/58
• https://github.com/markjaquith/clerk-sveltekit/issues/59
• https://github.com/markjaquith/clerk-sveltekit/issues/61
• https://github.com/markjaquith/clerk-sveltekit/issues/66
• https://github.com/markjaquith/clerk-sveltekit/issues/67
• https://github.com/markjaquith/clerk-sveltekit/issues/68
• https://github.com/markjaquith/clerk-sveltekit/issues/69

@markjaquith I think you're actively working on this as well so feel free to ignore this. Let me know if you like this idea then I'll continue updating! Thanks :)