@matthesketh/utopia-router 0.7.2 → 0.7.3

package/dist/index.cjs

@@ -439,6 +439,9 @@ async function preloadRoute() {
   }
 }
 function createRouterView() {
+  return { render: () => createRouterViewNode() };
+}
+function createRouterViewNode() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;

package/dist/index.d.cts

@@ -204,7 +204,8 @@ declare function destroy(): void;
  */
 declare function preloadRoute(): Promise<void>;
 /**
- * Creates a DOM node that renders the current route's component.
+ * Creates a UtopiaJS-compatible component that renders the current route's
+ * component. Can be used as `<RouterView />` in .utopia templates.
  *
  * When the route changes:
  * 1. The new component is lazily loaded (old content stays visible)
@@ -212,15 +213,17 @@ declare function preloadRoute(): Promise<void>;
  * 3. If the route has a layout, the page is wrapped in the layout
  * 4. If loading fails and an error component exists, it is shown instead
  *
- * @returns A container DOM node that manages route component lifecycle
+ * @returns A component definition compatible with UtopiaJS's component system
  *
  * @example
  * ```ts
- * const view = createRouterView();
- * document.getElementById('app')!.appendChild(view);
+ * import { createRouterView as RouterView } from '@matthesketh/utopia-router';
+ * // In template: <RouterView />
  * ```
  */
-declare function createRouterView(): Node;
+declare function createRouterView(): {
+    render: () => Node;
+};
 /**
  * Creates an anchor element that performs client-side navigation when clicked.
  *

package/dist/index.d.ts

@@ -204,7 +204,8 @@ declare function destroy(): void;
  */
 declare function preloadRoute(): Promise<void>;
 /**
- * Creates a DOM node that renders the current route's component.
+ * Creates a UtopiaJS-compatible component that renders the current route's
+ * component. Can be used as `<RouterView />` in .utopia templates.
  *
  * When the route changes:
  * 1. The new component is lazily loaded (old content stays visible)
@@ -212,15 +213,17 @@ declare function preloadRoute(): Promise<void>;
  * 3. If the route has a layout, the page is wrapped in the layout
  * 4. If loading fails and an error component exists, it is shown instead
  *
- * @returns A container DOM node that manages route component lifecycle
+ * @returns A component definition compatible with UtopiaJS's component system
  *
  * @example
  * ```ts
- * const view = createRouterView();
- * document.getElementById('app')!.appendChild(view);
+ * import { createRouterView as RouterView } from '@matthesketh/utopia-router';
+ * // In template: <RouterView />
  * ```
  */
-declare function createRouterView(): Node;
+declare function createRouterView(): {
+    render: () => Node;
+};
 /**
  * Creates an anchor element that performs client-side navigation when clicked.
  *

package/dist/index.js

@@ -394,6 +394,9 @@ async function preloadRoute() {
   }
 }
 function createRouterView() {
+  return { render: () => createRouterViewNode() };
+}
+function createRouterViewNode() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",