📖 Scenario

Developer X wants to create an extension that shows beautiful charts for developer productivity tracking. The extension needs the Recharts library, but it's not included in the base application bundle.

🚀 Developer X's Journey

Step 1: 🔍 Check Available Libraries

Developer X first checks what's available in the platform:

# Option A: CLI Command
$ myapp-cli libs list
Available libraries:
  ✅ react (built-in)
  ✅ shadcn-ui (built-in)
  ❌ recharts (not installed)
  ❌ d3 (not installed)
  ❌ plotly (not installed)

# Option B: API Function (inside extension)
const availableLibs = await window.__TAURI__.invoke('get_available_libraries');
console.log(availableLibs);
// { react: true, shadcn: true, recharts: false }

Step 2: 📦 Request Library Installation

Developer X needs Recharts, so they request it:

# Option A: CLI Command (Recommended)
$ myapp-cli libs install recharts
🔍 Checking recharts availability...
📦 Library: recharts@2.8.0 (Size: 2.1MB)
📋 Dependencies: react, react-dom
🔒 Source: <https://unpkg.com/recharts@2.8.0>
❓ Install recharts for visualization features? (y/n): y
⬇️  Downloading...  [████████████████] 100%
✅ recharts installed successfully!
🎯 Available in extensions as: window.Recharts

# Option B: API Function (Programmatic)
const result = await window.__TAURI__.invoke('request_library', {
  name: 'recharts',
  version: '2.8.0',
  reason: 'Data visualization for productivity extension'
});
// Shows user consent dialog automatically

Step 3: ✅ Verify Installation

# CLI Verification
$ myapp-cli libs list
Available libraries:
  ✅ react (built-in)
  ✅ shadcn-ui (built-in)
  ✅ recharts (installed) - 2.1MB

# Or programmatically
const isAvailable = await window.__TAURI__.invoke('check_library', { name: 'recharts' });
console.log('Recharts ready:', isAvailable);

Step 4: 🛠️ Write Extension Code

Now Developer X can write their extension:

// extension/src/lib.rs
pub struct ProductivityChartExtension {
    data: Vec<ProductivityData>,
}

impl UIExtension for ProductivityChartExtension {
    fn render(&self, context: &RenderContext) -> Result<VirtualNode, RenderError> {
        // Create chart using Recharts components
        let chart = VirtualNode {
            id: "productivity-chart".to_string(),
            component_type: ComponentType::External {
                library: "recharts".to_string(),
                component: "LineChart".to_string(),
            },
            props: {
                let mut props = HashMap::new();
                props.insert("data".to_string(), json!(self.data));
                props.insert("width".to_string(), json!(800));
                props.insert("height".to_string(), json!(400));
                props
            },
            children: vec![
            // ... Child virtual nodes
						]
        Ok(chart)
    }
}

Step 5: 🚀 Test Extension

# Load extension for testing
$ myapp-cli ext load ./productivity-extension
🔍 Analyzing extension dependencies...
✅ All dependencies satisfied:
   - recharts ✅ (already installed)
   - react ✅ (built-in)
🎯 Extension loaded successfully!

# Test in development mode
$ myapp-cli ext dev ./productivity-extension
🚀 Development server started on port 3001
🔄 Hot reload enabled

⚙️ What Happens Internally

When Developer X runs myapp-cli libs install recharts, here's what happens behind the scenes: