Add Support to load Async Svelte component

.gitignore

@@ -7,3 +7,5 @@ pnpm-lock.yaml
 .idea
 .DS_Store
 .svelte-kit
+dist/*
+.svelte-kit/*

.svelte-kit/__package__/components/Route/Route.d.ts

@@ -1,4 +1,30 @@
 import type { Component, Snippet } from "svelte";
+export type AsyncComponent = () => Promise<{
+    default: Component<any, Record<string, unknown>>;
+}>;
+/**
+ * Receives a dynamic import to load  a component asynchronously
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * const AboutRoute = dynamic(import("./routes/About.svelte"));
+ * </script>
+ *
+ * <Router>
+ *   <Route path="/about" component={AboutRoute} />
+ * </Router>
+ * ```
+ * @param p an instance of Promise
+ * @returns an instance of an AsyncComponent
+ */
+export declare function dynamic(p: Promise<unknown>): AsyncComponent;
+/**
+ * From Svelte 5 on, components are functions, so this is guard function
+ * that guarantees it's an dynamic component rather than a regular one.
+ * @param fn component
+ * @returns
+ */
+export declare function isAsync(fn: Function | undefined): fn is AsyncComponent;
 export type RouteProps = {
     path?: string;
     component?: Component<any, Record<string, any>>;

.svelte-kit/__package__/components/Route/Route.js

@@ -1 +1,33 @@
-export {};
+/**
+ * Receives a dynamic import to load  a component asynchronously
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * const AboutRoute = dynamic(import("./routes/About.svelte"));
+ * </script>
+ *
+ * <Router>
+ *   <Route path="/about" component={AboutRoute} />
+ * </Router>
+ * ```
+ * @param p an instance of Promise
+ * @returns an instance of an AsyncComponent
+ */
+export function dynamic(p) {
+    const loader = function loaderComponent() {
+        return p;
+    };
+    loader.prototype.name = "dynComponent";
+    return loader;
+}
+/**
+ * From Svelte 5 on, components are functions, so this is guard function
+ * that guarantees it's an dynamic component rather than a regular one.
+ * @param fn component
+ * @returns
+ */
+export function isAsync(fn) {
+    if (!fn)
+        return false;
+    return "name" in fn.prototype && fn.prototype.name === "dynComponent";
+}

.svelte-kit/__package__/components/Route/Route.svelte

@@ -2,12 +2,11 @@
   import { onMount, onDestroy } from "svelte";
   import { useRouter } from "../../lib/contexts.js";
   import { canUseDOM } from "../../lib/utils.js";
-  import type { RouteProps, RouteParams } from "./Route.js";
+  import { type RouteProps, type RouteParams, isAsync } from "./Route.js";
 
   let { path = "", component, children, ...rest }: RouteProps = $props();
 
   let routeParams = $state<RouteParams>({});
-  let routeProps = $state({});
 
   const { registerRoute, unregisterRoute, activeRoute } = useRouter();
 
@@ -18,6 +17,8 @@
     default: path === "",
   };
 
+  const PropComponent = isAsync(component) ? component() : component;
+
   $effect.pre(() => {
     if ($activeRoute && $activeRoute.route === route) {
       routeParams = $activeRoute.params;
@@ -33,13 +34,17 @@
   onDestroy(() => {
     unregisterRoute(route);
   });
-
-  let PropComponent = component;
 </script>
 
 {#if $activeRoute && $activeRoute.route === route}
-  {#if PropComponent}
+  {#if PropComponent && PropComponent instanceof Function}
     <PropComponent {...routeParams} {...rest} />
+  {:else if PropComponent && PropComponent instanceof Promise}
+    {#await PropComponent then C}
+      <C.default {...routeParams} />
+    {:catch error}
+      <p>{error.message}</p>
+    {/await}
   {:else}
     {@render children?.(routeParams)}
   {/if}

.svelte-kit/__package__/components/Route/Route.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RouteProps } from "./Route.js";
+import { type RouteProps } from "./Route.js";
 declare const Route: import("svelte").Component<RouteProps, {}, "">;
 type Route = ReturnType<typeof Route>;
 export default Route;

.svelte-kit/__package__/index.d.ts

@@ -4,4 +4,5 @@ export { default as Router } from "./components/Router/Router.svelte";
 export { link, links } from "./lib/actions.js";
 export { useHistory, useLocation, useRouter } from "./lib/contexts.js";
 export { navigate, listen } from "./lib/history.js";
+export { dynamic } from "./components/Route/Route";
 //# sourceMappingURL=index.d.ts.map

.svelte-kit/__package__/index.js

@@ -4,3 +4,4 @@ export { default as Router } from "./components/Router/Router.svelte";
 export { link, links } from "./lib/actions.js";
 export { useHistory, useLocation, useRouter } from "./lib/contexts.js";
 export { navigate, listen } from "./lib/history.js";
+export { dynamic } from "./components/Route/Route";