mount-operations

name: mount-operations description: Framework mount development workflows for React, Vue, Angular, Svelte, and other frameworks. Use when creating framework-specific mount kits, integrating 3Lens with frameworks, or debugging mount kit issues.

Mount Operations

Mount operations cover framework-specific integration patterns for 3Lens, enabling framework developers to integrate 3Lens into their applications.

When to Use

Creating a mount kit for a new framework
Integrating 3Lens into a React/Vue/Angular/Svelte app
Debugging mount kit issues
Understanding framework integration patterns

Framework Mount Kits

React Mount Kit

// packages/mounts/react/src/index.ts
import { createLensContext } from './provider';

export { createLensContext, useLens } from './provider';

// Usage in React app
import { LensProvider, useLens } from '@3lens/mount-react';

function App() {
  return (
    <LensProvider>
      <MyComponent />
    </LensProvider>
  );
}

function MyComponent() {
  const lens = useLens();
  // Use lens client
}

Vue Mount Kit

// packages/mounts/vue/src/index.ts
import { useThreeLens, provideThreeLens } from './composables';

export { useThreeLens, provideThreeLens };

// Usage in Vue app
import { provideThreeLens, useThreeLens } from '@3lens/mount-vue';

export default {
  setup() {
    provideThreeLens();
    const lens = useThreeLens();
    // Use lens client
  }
};

Angular Mount Kit

// packages/mounts/angular/src/index.ts
import { LensService } from './lens.service';
import { LensComponent } from './lens.component';

export { LensService, LensComponent };

// Usage in Angular app
import { LensService } from '@3lens/mount-angular';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private lens: LensService) {}
}

Svelte Mount Kit

// packages/mounts/svelte/src/index.ts
import { lensStore } from './store';
import { useLens } from './actions';

export { lensStore, useLens };

// Usage in Svelte app
import { lensStore, useLens } from '@3lens/mount-svelte';

useLens();
$lensStore.client.query(/* ... */);

Commands

Scaffold a Mount Kit

# Create a new mount kit
3lens scaffold mount react
3lens scaffold mount vue
3lens scaffold mount angular
3lens scaffold mount svelte

Generates:

Package structure
Framework-specific provider/context
Hooks/composables/components
Type definitions
README with examples

Agent Use Cases

New framework: "Create a mount kit for Solid.js"
Integration: "How do I use 3Lens in my React app?"
Debugging: "My mount kit isn't working, help debug"
Best practices: "What's the best way to integrate 3Lens?"

Mount Kit Requirements

Every mount kit MUST:

Only depend on UI Core and Runtime
- Never import from kernel directly
- Use public client API only
Provide Framework-Specific APIs
- React: Hooks (useLens)
- Vue: Composables (useThreeLens)
- Angular: Services (LensService)
- Svelte: Stores (lensStore)
Integrate with UI Core
- Use @3lens/ui-web components
- Support overlay/dock/panel modes

Support Live and Offline Modes

const data = client.isLive 
  ? await client.queryLive(query, params)
  : await client.queryTrace(query, params);

Handle Errors Gracefully

try {
  const lens = createLens();
} catch (error) {
  if (error.code === 'CSP_BLOCKED') {
    // Handle CSP blocking
  }
}

Integration Patterns

Provider Pattern (React/Angular)

// Create provider/context at app root
<LensProvider>
  <App />
</LensProvider>

// Use hook/service in components
const lens = useLens();

Composition Pattern (Vue)

// Provide at app root
provideThreeLens();

// Use composable in components
const lens = useThreeLens();

Store Pattern (Svelte)

// Initialize store
useLens();

// Use store in components
$lensStore.client.query(/* ... */);