fix: rename rune imports to avoid naming conflicts

Co-Authored-By: charis@supabase.io <charis@supabase.io>

examples/user-management/sveltekit-user-management/src/routes/+layout.svelte

@@ -2,12 +2,12 @@
 <script lang="ts">
 	import '../styles.css'
 	import { invalidate } from '$app/navigation'
-	import { props, effect } from '@sveltejs/kit/experimental/runes'
+	import { props as defineProps, effect as defineEffect } from '$app/experimental/runes'
 
-	const data = $props<{ supabase: any; session: any }>()
+	const data = $defineProps<{ supabase: any; session: any }>()
 	const { supabase, session } = data
 
-	$effect(() => {
+	$defineEffect(() => {
 		const { data: authData } = supabase.auth.onAuthStateChange((event, _session) => {
 			if (_session?.expires_at !== session?.expires_at) {
 				invalidate('supabase:auth')

examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte

@@ -3,18 +3,18 @@
 	import { enhance } from '$app/forms'
 	import type { SubmitFunction } from '@sveltejs/kit'
 	import Avatar from './Avatar.svelte'
-	import { props, state } from '@sveltejs/kit/experimental/runes'
+	import { props as defineProps, state as defineState } from '$app/experimental/runes'
 
-	const data = $props<{ session: any; supabase: any; profile: any }>()
-	const form = $props<any>()
+	const data = $defineProps<{ session: any; supabase: any; profile: any }>()
+	const form = $defineProps<any>()
 
 	const { session, supabase, profile } = data
 	let profileForm: HTMLFormElement | null = null
-	const loading = $state(false)
-	const fullName = $state(profile?.full_name ?? '')
-	const username = $state(profile?.username ?? '')
-	const website = $state(profile?.website ?? '')
-	const avatarUrl = $state(profile?.avatar_url ?? '')
+	const loading = $defineState(false)
+	const fullName = $defineState(profile?.full_name ?? '')
+	const username = $defineState(profile?.username ?? '')
+	const website = $defineState(profile?.website ?? '')
+	const avatarUrl = $defineState(profile?.avatar_url ?? '')
 
 	const handleSubmit = () => {
 		loading.set(true)

examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte

@@ -2,15 +2,15 @@
 <script lang="ts">
 	import type { SupabaseClient } from '@supabase/supabase-js'
 	import { createEventDispatcher } from 'svelte'
-	import { props, state, effect } from '@sveltejs/kit/experimental/runes'
+	import { props as defineProps, state as defineState, effect as defineEffect } from '$app/experimental/runes'
 
-	const size = $props<number>(10)
-	const urlProp = $props<string>('')
-	const supabase = $props<SupabaseClient>()
+	const size = $defineProps<number>(10)
+	const urlProp = $defineProps<string>('')
+	const supabase = $defineProps<SupabaseClient>()
 
-	const avatarUrl = $state<string | null>(null)
-	const uploading = $state(false)
-	const currentUrl = $state(urlProp)
+	const avatarUrl = $defineState<string | null>(null)
+	const uploading = $defineState(false)
+	const currentUrl = $defineState(urlProp)
 	let fileInput: HTMLInputElement | null = null
 
 	const dispatch = createEventDispatcher<{
@@ -18,12 +18,12 @@
 		upload: void;
 	}>()
 
-	$effect(() => {
+	$defineEffect(() => {
 		// Update currentUrl when urlProp changes
 		currentUrl.set(urlProp)
 	})
 
-	$effect(() => {
+	$defineEffect(() => {
 		// Dispatch urlChange event when currentUrl changes
 		dispatch('urlChange', currentUrl)
 	})
@@ -78,7 +78,7 @@
 		}
 	}
 
-	$effect(() => {
+	$defineEffect(() => {
 		if (currentUrl) downloadImage(currentUrl)
 	})
 </script>