@wealthfolio/addon-dev-tools 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthfolio/addon-dev-tools",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "description": "Development tools for Wealthfolio addons - hot reload server and CLI",
   "main": "index.js",
   "bin": {

package/templates/addon.tsx.template

@@ -1,6 +1,12 @@
-import { createRoot, type Root } from 'react-dom/client';
-import type { AddonContext } from '@wealthfolio/addon-sdk';
-import { Card, CardContent, Icons } from '@wealthfolio/ui';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AddonContext, AddonEnableFunction } from '@wealthfolio/addon-sdk';
+import { Card, CardContent } from '@wealthfolio/ui';
+
+// The host owns a single React root per addon and mounts the route `component`
+// itself (`createElement(Component, { location })`) with no access to the addon
+// context. Capture it at enable time so the route wrapper can hand it down.
+// (Do NOT call createRoot yourself — the host manages the lifecycle.)
+let addonCtx: AddonContext | undefined;
 
 function AddonExample({ ctx }: { ctx: AddonContext }) {
   return (
@@ -17,35 +23,31 @@ function AddonExample({ ctx }: { ctx: AddonContext }) {
   );
 }
 
-export default function enable(ctx: AddonContext) {
-  let root: Root | null = null;
+// Route component. The sidebar entry + route are declared in manifest.json
+// (`contributes.routes` + `contributes.links`), so the host renders navigation
+// without booting the addon; this component only runs when the route is first
+// visited. The QueryClientProvider shares one cache across route navigations.
+const AddonRoute = () => (
+  <QueryClientProvider client={addonCtx!.api.query.getClient() as QueryClient}>
+    <AddonExample ctx={addonCtx!} />
+  </QueryClientProvider>
+);
 
-  // Add a sidebar item
-  const sidebarItem = ctx.sidebar.addItem({
-    id: '{{addonId}}',
-    label: '{{addonName}}',
-    icon: 'blocks',
-    route: '/addon/{{addonId}}',
-    order: 100,
-  });
+const enable: AddonEnableFunction = (ctx) => {
+  addonCtx = ctx;
 
-  // Add a route
+  // The route `id` MUST match `contributes.routes[].id` in manifest.json.
+  // The host derives this root path from the manifest addon id.
   ctx.router.add({
-    path: '/addon/{{addonId}}',
-    render: ({ root: routeRoot }) => {
-      root ??= createRoot(routeRoot);
-      root.render(<AddonExample ctx={ctx} />);
-    },
+    id: '{{addonId}}',
+    path: '/addons/{{addonId}}',
+    component: AddonRoute,
   });
 
-  // Cleanup on disable
+  // The host owns the React root, so there is nothing to unmount here.
   ctx.onDisable(() => {
-    try {
-      sidebarItem.remove();
-      root?.unmount();
-      root = null;
-    } catch (err) {
-      ctx.api.logger.error(`Failed to remove sidebar item: ${String(err)}`);
-    }
+    addonCtx = undefined;
   });
-}
+};
+
+export default enable;

package/templates/manifest.json.template

@@ -5,12 +5,26 @@
   "description": "{{description}}",
   "author": "{{author}}",
   "main": "dist/addon.js",
-  "sdkVersion": "3.6.0",
-  "minWealthfolioVersion": "3.6.0",
+  "sdkVersion": "3.6.2",
+  "minWealthfolioVersion": "3.6.2",
   "enabled": true,
+  "contributes": {
+    "routes": [{ "id": "{{addonId}}" }],
+    "links": {
+      "sidebar": [
+        {
+          "id": "{{addonId}}",
+          "route": "{{addonId}}",
+          "label": "{{addonName}}",
+          "icon": "squares-four",
+          "order": 100
+        }
+      ]
+    }
+  },
   "hostDependencies": {
     "@tanstack/react-query": "^5.90.0",
-    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/addon-sdk": "^3.6.2",
     "@wealthfolio/ui": "^3.6.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.561.0",
@@ -18,13 +32,7 @@
     "react-dom": "^19.2.0",
     "recharts": "^3.7.0"
   },
-  "permissions": [
-    {
-      "category": "ui",
-      "functions": ["sidebar.addItem", "router.add"],
-      "purpose": "Add navigation items and pages"
-    }
-  ],
+  "permissions": [],
   "keywords": ["wealthfolio", "addon"],
   "license": "MIT"
 }

package/templates/package.json.template

@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.90.0",
-    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/addon-sdk": "^3.6.2",
     "@wealthfolio/ui": "^3.6.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.561.0",
@@ -30,7 +30,7 @@
     "@tanstack/react-query": "^5.90.20",
     "@tailwindcss/vite": "^4.1.13",
     "@wealthfolio/addon-dev-tools": "^3.6.0",
-    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/addon-sdk": "^3.6.2",
     "@wealthfolio/ui": "^3.6.0",
     "@types/node": "^20.0.0",
     "@types/react": "^19.2.13",