@wealthfolio/addon-dev-tools 3.5.1 → 3.6.1

package/README.md

@@ -8,37 +8,41 @@ Development tools for Wealthfolio addons including hot reload server and CLI.
 npm install -g @wealthfolio/addon-dev-tools
 ```
 
+> **Deprecation note:** the CLI command is now `wealthfolio-addon`. The old
+> `wealthfolio` alias still works but will be removed in a future release — the
+> `wealthfolio` name is reserved for the upcoming native Wealthfolio CLI.
+
 ## CLI Commands
 
 ### Create New Addon
 
 ```bash
-wealthfolio create my-awesome-addon
+wealthfolio-addon create my-awesome-addon
 ```
 
 ### Start Development Server
 
 ```bash
 # In your addon directory
-wealthfolio dev
+wealthfolio-addon dev
 ```
 
 ### Build Addon
 
 ```bash
-wealthfolio build
+wealthfolio-addon build
 ```
 
 ### Package for Distribution
 
 ```bash
-wealthfolio package
+wealthfolio-addon package
 ```
 
 ### Test Setup
 
 ```bash
-wealthfolio test
+wealthfolio-addon test
 ```
 
 ## Development Server
@@ -66,7 +70,7 @@ Add to your addon's `package.json`:
 ```json
 {
   "scripts": {
-    "dev:server": "wealthfolio dev"
+    "dev:server": "wealthfolio-addon dev"
   },
   "devDependencies": {
     "@wealthfolio/addon-dev-tools": "^1.0.0"

package/cli.js

@@ -271,7 +271,7 @@ async function installAddon(zipPath) {
 }
 
 // CLI Setup
-program.name("wealthfolio").description("Wealthfolio Addon Development CLI").version("1.0.0");
+program.name("wealthfolio-addon").description("Wealthfolio Addon Development CLI").version("1.0.0");
 
 program
   .command("create <name>")

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@wealthfolio/addon-dev-tools",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "description": "Development tools for Wealthfolio addons - hot reload server and CLI",
   "main": "index.js",
   "bin": {
+    "wealthfolio-addon": "cli.js",
     "wealthfolio": "cli.js"
   },
   "keywords": [

package/templates/addon.tsx.template

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 import type { AddonContext } from '@wealthfolio/addon-sdk';
 import { Card, CardContent, Icons } from '@wealthfolio/ui';
 
@@ -18,28 +18,34 @@ function AddonExample({ ctx }: { ctx: AddonContext }) {
 }
 
 export default function enable(ctx: AddonContext) {
+  let root: Root | null = null;
+
   // Add a sidebar item
   const sidebarItem = ctx.sidebar.addItem({
     id: '{{addonId}}',
     label: '{{addonName}}',
-    icon: <Icons.Blocks className="h-5 w-5" />,
+    icon: 'blocks',
     route: '/addon/{{addonId}}',
     order: 100,
   });
 
   // Add a route
-  const Wrapper = () => <AddonExample ctx={ctx} />;
   ctx.router.add({
     path: '/addon/{{addonId}}',
-    component: React.lazy(() => Promise.resolve({ default: Wrapper })),
+    render: ({ root: routeRoot }) => {
+      root ??= createRoot(routeRoot);
+      root.render(<AddonExample ctx={ctx} />);
+    },
   });
 
   // Cleanup on disable
   ctx.onDisable(() => {
     try {
       sidebarItem.remove();
+      root?.unmount();
+      root = null;
     } catch (err) {
-      ctx.api.logger.error('Failed to remove sidebar item:', err);
+      ctx.api.logger.error(`Failed to remove sidebar item: ${String(err)}`);
     }
   });
 }

package/templates/manifest.json.template

@@ -5,13 +5,24 @@
   "description": "{{description}}",
   "author": "{{author}}",
   "main": "dist/addon.js",
-  "sdkVersion": "1.0.0",
+  "sdkVersion": "3.6.0",
+  "minWealthfolioVersion": "3.6.0",
   "enabled": true,
+  "hostDependencies": {
+    "@tanstack/react-query": "^5.90.0",
+    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/ui": "^3.6.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.7.0"
+  },
   "permissions": [
     {
       "category": "ui",
-      "functions": ["sidebar.addItem"],
-      "purpose": "Add navigation items to the sidebar"
+      "functions": ["sidebar.addItem", "router.add"],
+      "purpose": "Add navigation items and pages"
     }
   ],
   "keywords": ["wealthfolio", "addon"],

package/templates/package.json.template

@@ -11,25 +11,36 @@
     "dev": "vite build --watch",
     "dev:server": "wealthfolio dev",
     "clean": "rm -rf dist",
-    "package": "mkdir -p dist && zip -r dist/$npm_package_name-$npm_package_version.zip manifest.json dist/ assets/ README.md",
+    "package": "mkdir -p dist && find dist -name '*.map' -delete && zip -r dist/$npm_package_name-$npm_package_version.zip manifest.json dist/ assets/ README.md -x '*.map'",
     "bundle": "pnpm clean && pnpm build && pnpm package",
     "lint": "tsc --noEmit",
     "type-check": "tsc --noEmit"
   },
-  "dependencies": {
-    "@wealthfolio/addon-sdk": "^2.0.0",
-    "@wealthfolio/ui": "^2.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.90.0",
+    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/ui": "^3.6.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.90.20",
     "@tailwindcss/vite": "^4.1.13",
-    "@wealthfolio/addon-dev-tools": "^2.0.0",
+    "@wealthfolio/addon-dev-tools": "^3.6.0",
+    "@wealthfolio/addon-sdk": "^3.6.0",
+    "@wealthfolio/ui": "^3.6.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^19.1.1",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.2",
-    "rollup-plugin-external-globals": "^0.13.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.7.0",
     "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2",
     "vite": "^7.1.5"

package/templates/vite.config.ts.template

@@ -1,7 +1,29 @@
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
-import externalGlobals from 'rollup-plugin-external-globals';
+
+const hostProvidedDependencies = [
+  '@tanstack/react-query',
+  '@wealthfolio/addon-sdk',
+  '@wealthfolio/addon-sdk/goal-progress',
+  '@wealthfolio/addon-sdk/host-api',
+  '@wealthfolio/addon-sdk/host-dependencies',
+  '@wealthfolio/addon-sdk/manifest',
+  '@wealthfolio/addon-sdk/permissions',
+  '@wealthfolio/addon-sdk/query-keys',
+  '@wealthfolio/addon-sdk/types',
+  '@wealthfolio/addon-sdk/utils',
+  '@wealthfolio/ui',
+  '@wealthfolio/ui/chart',
+  'date-fns',
+  'lucide-react',
+  'react',
+  'react-dom',
+  'react-dom/client',
+  'react/jsx-dev-runtime',
+  'react/jsx-runtime',
+  'recharts',
+];
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
@@ -14,24 +36,12 @@ export default defineConfig({
       fileName: () => 'addon.js',
       formats: ['es'],
     },
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-      plugins: [
-        externalGlobals({
-          react: 'React',
-          'react-dom': 'ReactDOM'
-        })
-      ],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
     outDir: 'dist',
-    minify: false,
+    minify: true,
     sourcemap: false,
+    rollupOptions: {
+      external: hostProvidedDependencies,
+    },
     watch: {
       // Watch mode options for better hot reloading
       include: ['src/**'],