How to return the state derived from $derived in Svelte 5?

[rxliuli]

For example, the useRoute function here was originally expected to return a large object, but it seems to have lost its reactivity. I tried creating a large object to return, or replacing the function with a getter property, but neither worked correctly... I wonder if it's possible to maintain the expected function interface when using rune.

export function useRoute(): {
  path: () => string
  search: () => URLSearchParams | undefined
  matched: () => Route | undefined
} {
  const path = $derived(router.path)
  const search = $derived.by(() => {
    const s = router.path.split('?')[1]
    return new URLSearchParams(s)
  })
  const matched = $derived.by(() => {
    const [path] = router.path.split('?')
    const route = router.routes.find((it) => it.path === path)
    if (!route) {
      return
    }
    return route
  })
  return {
    path: () => path,
    search: () => search,
    matched: () => matched,
  }
}

---

I found a strange but effective method, mainly with two problems

1. The use of $effect here feels very strange...
2. Can $derived(useRoute()) be changed to useRoute() while still maintaining reactivity?

interface Route {
  path: string
  search?: URLSearchParams
  matched?: RouteConfig
}

export function useRoute(): Route {
  const getRoute = () => {
    const [path, search] = router.path.split('?')
    return {
      path: router.path,
      search: search ? new URLSearchParams(search) : undefined,
      matched: router.routes.find((it) => it.path === path),
    }
  }
  let r = $state(getRoute())
  $effect(() => {
    Object.assign(r, getRoute())
  })
  return r
}

const route = $derived(useRoute())

---

It seems that it can be written this way, but I want to know why $state can be returned in the function while $derived cannot?

export function useRoute(): Route {
  const [path, search] = router.path.split('?')
  return {
    path: router.path,
    search: search ? new URLSearchParams(search) : undefined,
    matched: router.routes.find((it) => it.path === path),
  }
}

const route = $derived(useRoute())

---

The best method found so far seems to be placing a reactive value in the get, so that the places where it is referenced will also remain reactive.

export function useRoute(): Route {
  const state = $derived.by(() => {
    const [path, search] = router.path.split('?')
    return {
      path: router.path,
      search: search ? new URLSearchParams(search) : undefined,
      matched: router.routes.find((it) => it.path === path),
    }
  })
  return {
    get path() {
      return state.path
    },
    get search() {
      return state.search
    },
    get matched() {
      return state.matched
    },
  }
}

[brunnerh]

This works as expected if the router is a reactive object, e.g.

export const router = $state({
	path: '/path/to/somewhere?q=wah',
	routes: [
		{ path: '/path/to/somewhere' },
		{ path: '/path/to/elsewhere' },
	],
});

You can check whether the values actually update inside the function using $inspect.
E.g. before the return:

$inspect(path, search.toString(), matched)

[rxliuli]

Okay, I finally checked the code of sveltekit and found that it returns reactive data using class instances. Anyway, it's good to have a solution. I will look into how to convert regular objects into class instances later to simplify the code.

sveltekit related code: https://github.com/sveltejs/kit/blob/3bab7e3eea4dda6ec485d671803709b70852f28b/packages/kit/src/runtime/client/state.svelte.js#L31-L40

export function useRoute(): Route {
  const [path, search] = $derived(router.path.split('?'))
  return new (class {
    path = $derived(path)
    search = $derived(search ? new URLSearchParams(search) : undefined)
    matched = $derived(router.routes.find((it) => it.path === path))
  })()
}

[brunnerh]

You don't need classes.

If you already have derived values, you can also return a plain object with getters.

const [path, searchString] = $derived(router.path.split('?'));
const search = $derived(searchString ? new URLSearchParams(searchString) : undefined);

return {
  get path() { return path },
  get search() { return search },
  // ...
};

Classes are more or a less a shorthand for this, but utilizing prototypes.
Also, using new class { ... } should trigger a warning because of its performance implications; it is not something you are meant to do (at least for large numbers of instances, hence the warning).

And if you don't care about caching the values, you don't need $derived either.

export function useRoute() {
	const parts = () => {
		const [path, searchString] = router.path.split('?');
		return { path, searchString };
	};

	return {
		get path() { return parts().path },
		get search() {
			const { searchString } = parts();
			return searchString ? new URLSearchParams(searchString) : undefined;
		},
		get matched() {
			const { path } = parts();
			return router.routes.find((it) => it.path === path);
		},
	}
}

[rxliuli]

const [path, searchString] = $derived(router.path.split('?'));
const search = $derived(searchString ? new URLSearchParams(searchString) : undefined);

return {
  get path() { return path },
  get search() { return search },
  // ...
};

These two approaches both work, but the key point seems to be that you must reference mutable state within getter functions, which is subtle. I'd say this is quite different from Vue. In Vue, once you declare a reactive object (non-primitive) using reactive/ref, you can pass it around in methods (or generally called hooks) and it maintains reactivity wherever it's referenced. In Svelte, it seems you need to manually wrap it with getters when returning, and when passing reactive state to functions, you need to wrap it as a function. Also, the class example in the official documentation reminds me of MobX...

[rxliuli]

Well, the final result...

export function useRoute(): Route {
  return computed(() => {
    const [path, search] = router.path.split('?')
    return {
      path: router.path,
      search: search ? new URLSearchParams(search) : undefined,
      matched: router.routes.find((it) => it.path === path),
    }
  })
}

export function computed<T extends object>(t: () => T): Readonly<T> {
  const v = $derived(t())
  return new Proxy(
    {},
    {
      get: (_, p) => v[p as keyof T],
      getOwnPropertyDescriptor(_target, prop) {
        return Object.getOwnPropertyDescriptor(v, prop)
      },
      ownKeys(_target) {
        return Reflect.ownKeys(v)
      },
    },
  ) as T
}

[brunnerh]

In Svelte, the variables themselves are reactive and if you want a reactive object to pass around, you have to wrap the variable. Probably would not do it this way, but that is one way to do it.