@linagora/linid-im-front-corelib 0.0.6 → 0.0.8

package/docs/components-plugin-zones.md

@@ -1,168 +0,0 @@
-# LinidZoneRenderer Component 🔌
-
-The **LinidZoneRenderer** component is a core feature of `linid-im-front-corelib`.  
-It allows the host application to **dynamically render remote Vue components (plugins)** inside predefined “zones” of the UI.
-
-This component works together with the **Linid Zone Store**, which manages plugin registration and provides reactive updates.
-
----
-
-## 🎯 Purpose
-
-LinidZoneRenderer provides:
-
-- **Dynamic rendering:** Components are loaded asynchronously only when needed.
-- **Reactive updates:** New plugins registered to a zone appear automatically.
-- **Extensibility:** New features can be added via plugins without modifying the host app.
-- **Standardization:** All plugins follow the `LinidZoneEntry` interface.
-
----
-
-## 🧱 How to Use the Component
-
-### Basic Usage
-
-```vue
-<template>
-  <LinidZoneRenderer zone="user-details" />
-</template>
-```
-
-* `zone` (string): Identifier of the zone where components should be rendered.
-* The component automatically fetches all registered plugins for this zone from the store and renders them asynchronously.
-
-### Props
-
-| Prop       | Type          | Description                                        |
-| ---------- | ------------- | -------------------------------------------------- |
-| `zone`     | string        | The name of the zone to render                     |
-
-### Default Slot - Fallback Component
-
-The `LinidZoneRenderer` component provides a **default slot** that is displayed when no components are registered in the specified zone **after loading is complete**.
-
-#### Purpose
-
-The default slot allows you to:
-- Display a custom message when a zone is empty
-- Render a placeholder component
-- Show alternative content for zones without plugins
-
-#### Behavior
-
-The slot is rendered **only when**:
-1. ✅ The loading process is complete
-2. ✅ No components are registered in the zone
-
-**Important:** The slot will **not** be displayed during the initial loading phase to avoid flickering.
-
----
-
-#### Usage
-
-##### Default Fallback (No Custom Slot)
-
-If you don't provide a custom slot, the component displays a default message:
-
-```vue
-<template>
-  <LinidZoneRenderer zone="sidebar" />
-</template>
-```
-
-**Rendered when zone is empty:**
-```html
-<div>No components to render in this zone.</div>
-```
-
----
-
-##### Custom Fallback Component
-
-You can provide your own fallback content using the default slot:
-
-```vue
-<template>
-  <LinidZoneRenderer zone="user-actions">
-    <template #default>
-      <div>
-        <p>No actions available for this user.</p>
-      </div>
-    </template>
-  </LinidZoneRenderer>
-</template>
-```
-
----
-
-## ⚡ Adding a Plugin with the Store
-
-Plugins must be registered in the **Linid Zone Store** before they can be rendered.
-
-```ts
-import { useLinidZoneStore } from '@linagora/linid-im-front-corelib';
-
-const linidZoneStore = useLinidZoneStore();
-
-linidZoneStore.register("user-details", {
-  plugin: "@/remote/UserCard",
-  props: { userId: 42 },
-});
-```
-
-* `plugin`: Path or identifier of the remote component to load.
-* `props`: Optional props passed to the plugin component.
-
-> Once registered, the `LinidZoneRenderer` component will automatically render this plugin in the specified zone.
-
----
-
-## 🧩 How It Works
-
-1. The component retrieves all entries for the given `zone` from the **Linid Zone Store**.
-2. Each entry is wrapped as an **async component** retrieved from its remote module using the `loadAsyncComponent(entry.plugin)` method.
-3. All plugins in the zone are rendered sequentially with:
-
-```vue
-<component :is="entry.component" v-bind="entry.props" />
-```
-
-* This allows multiple plugins to coexist in a single zone.
-* The component reacts automatically to changes in the store.
-
----
-
-## 🔧 Plugin Types
-
-Plugins must implement the `LinidZoneEntry` interface:
-
-```ts
-export interface LinidZoneEntry {
-  /** Path to the remote module */
-  plugin: string;
-
-  /** Props forwarded to the plugin component */
-  props?: Record<string, unknown>;
-}
-```
-
-* Props are automatically forwarded to the dynamically loaded component.
-* Components are wrapped in `loadAsyncComponent` for asynchronous loading.
-
----
-
-## ✅ Advantages
-
-* **Decoupled architecture:** Plugins are independent of the host.
-* **Lazy loading:** Only load components when needed.
-* **Reactive:** Supports runtime addition/removal of plugins.
-* **Standardized interface:** All plugins conform to `LinidZoneEntry`.
-* **Framework-friendly:** Works natively with Vue 3, Pinia, and Module Federation.
-
----
-
-## 📌 Notes
-
-* Multiple plugins can be registered for the same zone; they are rendered in registration order.
-* Failed imports are handled automatically; you can provide a `fallback` component.
-* Designed for scalable front-end applications using Module Federation.

package/docs/helpers.md

@@ -1,188 +0,0 @@
-# Helper Functions
-
-This document describes utility functions provided by `linid-im-front-corelib` to simplify common tasks.
-
----
-
-## `loadAsyncComponent`
-
-Loads a remote Vue component from a Module Federation remote using the enhanced runtime.
-
-This helper wraps Vue's `defineAsyncComponent` and Module Federation's `loadRemote` to provide a simple way to load federated components asynchronously.
-
-### Import
-
-```typescript
-import { loadAsyncComponent } from '@linagora/linid-im-front-corelib';
-```
-
-### Parameters
-
-| Parameter | Type     | Description                                                                                                          |
-| --------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| `plugin`  | `string` | The Module Federation remote identifier in the format `remoteName/modulePath`.<br/>Example: `'myRemote/MyComponent'` |
-
-### Returns
-
-Returns a Vue async component that can be used in templates or rendered programmatically.
-
-### Behavior
-
-1. **Lazy loading:** The component is only loaded when it's actually rendered
-2. **Error handling:** Throws an error if the remote module doesn't export a default component
-3. **Type safety:** Expects the remote module to follow the `RemoteComponentModule` structure
-
----
-
-## Usage Examples
-
-### Basic Usage
-
-```vue
-<template>
-  <component :is="remoteComponent" />
-</template>
-
-<script setup lang="ts">
-import { loadAsyncComponent } from '@linagora/linid-im-front-corelib';
-
-const remoteComponent = loadAsyncComponent('myRemote/HeaderWidget');
-</script>
-```
-
----
-
-### Dynamic Component Loading
-
-```vue
-<template>
-  <component
-    v-for="plugin in plugins"
-    :key="plugin"
-    :is="loadAsyncComponent(plugin)"
-  />
-</template>
-
-<script setup lang="ts">
-import { loadAsyncComponent } from '@linagora/linid-im-front-corelib';
-
-const plugins = ['remote1/ComponentA', 'remote2/ComponentB'];
-</script>
-```
-
----
-
-### In LinidZoneRenderer Context
-
-The `loadAsyncComponent` function is used internally by `LinidZoneRenderer`:
-
-```typescript
-// Internal usage in LinidZoneRenderer
-const components = entries.map((entry) => ({
-  ...entry,
-  component: loadAsyncComponent(entry.plugin),
-}));
-```
-
----
-
-## Error Handling
-
-### Module Not Found
-
-If the remote module cannot be loaded:
-
-```typescript
-const component = loadAsyncComponent('invalidRemote/Component');
-// Throws: Error loading remote module
-```
-
-### Missing Default Export
-
-If the module doesn't export a default component:
-
-```typescript
-// Remote module exports: export { MyComponent }
-const component = loadAsyncComponent('myRemote/MyComponent');
-// Throws: Failed to load component from myRemote/MyComponent
-```
-
-**Solution:** Ensure your remote module exports a default component:
-
-```vue
-<!-- ✅ Correct - remote module (.vue file) -->
-<template>
-  <div>My Component</div>
-</template>
-
-<script setup lang="ts">
-// Default export automatic with <script setup>
-// Nothing special to do!
-</script>
-```
-
-**Alternative with Options API:**
-
-```vue
-<!-- ✅ Correct - remote module (.vue file) -->
-<template>
-  <div>My Component</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'MyComponent',
-  // ...
-});
-</script>
-```
-
-**❌ Wrong - TypeScript/JavaScript file (not .vue):**
-
-```typescript
-// In a .ts file (not .vue)
-// ❌ Named export only - doesn't work with loadAsyncComponent
-export const MyComponent = defineComponent({
-  // ...
-});
-
-// ✅ Correct - default export
-export default defineComponent({
-  name: 'MyComponent',
-  // ...
-});
-```
-
----
-
-## TypeScript Support
-
-### Remote Module Structure
-
-The function expects remotes to follow this structure:
-
-```typescript
-/**
- * Module structure for a Vue component exposed via Module Federation.
- */
-interface RemoteComponentModule {
-  /**
-   * The default exported Vue component.
-   */
-  default: Component;
-}
-```
-
-### Type Inference
-
-The returned component is fully typed as a Vue `Component`:
-
-```typescript
-import type { Component } from 'vue';
-
-const myComponent: Component = loadAsyncComponent('remote/Component');
-```
-
----