Loader status: ${loaders.status}
\n${JSON.stringify(data)}\n `;\n }\n}\n```\n\nRoute components can also implement lifecycle hooks. These are especially useful\nnow that Miura reuses matching route component instances across param/query\nchanges:\n\n```ts\nclass UserProfile extends MiuraElement {\n onRouteEnter(context: RouteRenderContext) {\n // Mounted for the route.\n }\n\n onRouteUpdate(context: RouteRenderContext, previous: RouteContext | null) {\n // Same instance reused for another matching route context.\n }\n\n onRouteLeave(context: RouteContext) {\n // About to be removed from its route zone or outlet.\n }\n}\n```\n\nUse these hooks for transitions, focus, scroll restoration, analytics, or\nroute-scoped cleanup. `routeContext` is assigned on every routed component, even\nwhen the class only declares it at the TypeScript level.\n\n## 🏊♂️ Data Lake Architecture\n\nThe Data Lake is configured declaratively and automatically loaded on startup.\n\n```typescript\nclass MyApp extends MiuraFramework {\n // Initial data lake data\n static dataLake = {\n 'app:settings': { theme: 'light', locale: 'en' },\n 'user:preferences': { notifications: true, sound: false },\n 'cache:api': { ttl: 300000 }, // 5 minutes\n 'session:data': { ttl: 3600000 } // 1 hour\n };\n \n async connectedCallback() {\n await super.connectedCallback();\n \n // Data is automatically loaded from static dataLake\n const settings = this.data.get('app:settings');\n \n // Subscribe to changes\n this.data.subscribe('user:preferences', (prefs) => {\n console.log('Preferences updated:', prefs);\n });\n }\n}\n```\n\n## 📦 Dynamic Component Loading\n\nComponents are loaded on-demand using dynamic imports.\n\n```typescript\nclass MyApp extends MiuraFramework {\n // Component definitions with dynamic imports\n static components = {\n 'my-header': async () => import('./components/my-header.js'),\n 'my-content': async () => import('./components/my-content.js'),\n 'my-dashboard': async () => import('./components/my-dashboard.js'),\n 'my-profile': async () => import('./components/my-profile.js')\n };\n \n // Components are automatically registered when the framework initializes\n // They're loaded only when needed (lazy loading)\n}\n```\n\n## 🔌 Plugin System\n\nPlugins are defined declaratively and automatically installed with full lifecycle events.\n\n```typescript\nclass MyApp extends MiuraFramework {\n static plugins = [\n {\n name: 'analytics',\n version: '1.0.0',\n install(framework) {\n const offRegistered = framework.eventBus.on('component:registered', (event) => {\n analytics.track('component_registered', event.data);\n });\n \n const offReady = framework.eventBus.on('framework:ready', () => {\n analytics.track('app_ready');\n });\n \n // Set up analytics tracking\n framework.data.set('plugin:analytics:cleanup', () => {\n offRegistered();\n offReady();\n });\n },\n uninstall(framework) {\n framework.data.get('plugin:analytics:cleanup')?.();\n }\n },\n {\n name: 'error-tracking',\n version: '1.0.0',\n dependencies: ['analytics'],\n install(framework) {\n const offError = framework.eventBus.on('framework:error', (event) => {\n errorTracker.captureException(event.data.error);\n });\n framework.data.set('plugin:error-tracking:cleanup', offError);\n },\n uninstall(framework) {\n framework.data.get('plugin:error-tracking:cleanup')?.();\n }\n }\n ];\n}\n```\n\n## 🛣️ Router Configuration\n\nRouter configuration is declarative and now powered by the built-in MiuraRouter. Define paths, zones, guards, and loaders directly on the static `router` property and the framework will lazy-load components, invoke guards, hydrate data, and mount elements into DOM zones for you.\n\n```typescript\nclass MyApp extends MiuraFramework {\n static router = [\n {\n path: '/',\n component: 'my-home',\n renderZone: '#main-content'\n },\n {\n path: '/dashboard',\n component: 'my-dashboard',\n renderZone: '#main-content',\n meta: { \n requiresAuth: true,\n title: ({ data }) => `Dashboard (${data.stats?.total ?? 0})`\n },\n guards: [async ({ data }) => data.user?.isAdmin || '/login'],\n loaders: [\n async () => ({ stats: await fetchStats() }),\n {\n key: 'announcements',\n optional: true,\n load: async () => fetchAnnouncements()\n }\n ]\n },\n {\n path: '/profile/:id',\n component: 'my-profile',\n renderZone: '#main-content',\n meta: { \n requiresAuth: true,\n title: 'User Profile'\n }\n },\n {\n path: '/settings',\n component: 'my-settings',\n renderZone: '#main-content',\n meta: { \n requiresAuth: true,\n requiresAdmin: true\n }\n }\n ];\n}\n```\n\n`meta.title` is applied automatically by `MiuraFramework`, and named loaders are exposed under `routeContext.data.