Skip to content

Commit 03de81d

Browse files
committed
Docs: Clarify Stage.mount() and Stage.unmount() lifecycle (#64)
1 parent fce5937 commit 03de81d

1 file changed

Lines changed: 21 additions & 9 deletions

File tree

docs/api/API_REFERENCE.md

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -834,27 +834,39 @@ class Stage extends EventEmitter {
834834
getState(): string
835835

836836
// Component Management
837-
mount(id: string, component: unknown): void
838-
unmount(id: string): void
839-
getComponent(id: string): unknown
837+
mount(element: HTMLElement, id?: string): Promise<void>
838+
unmount(): Promise<void>
839+
getMountedComponent(): MountedComponent | null
840840

841841
// Events
842842
on(event: string, handler: (...args: unknown[]) => void): this
843843
}
844844
```
845845

846-
**Example**:
846+
**Methods**:
847+
848+
#### `mount(element: HTMLElement, id?: string): Promise<void>`
849+
Mounts an HTML element (component) onto the Stage for rendering and observation. If a component is already mounted, it will be unmounted first. The `id` is optional and defaults to 'component'. This method handles the rendering based on the configured `isolation` mode (iframe, shadow-dom, or none).
850+
847851
```typescript
848852
const stage = new Stage({ title: 'My Tests', darkMode: false });
853+
await stage.initialize(document.getElementById('stage-container')!);
849854

850-
stage.mount('my-component', myComponent);
855+
const myComponentElement = document.createElement('div');
856+
myComponentElement.textContent = 'Hello from my component!';
851857

852-
await stage.start();
858+
await stage.mount(myComponentElement, 'my-component-id');
853859

854-
const component = stage.getComponent('my-component');
855-
const result = await component.doSomething();
860+
const mounted = stage.getMountedComponent();
861+
console.log('Mounted component ID:', mounted?.id);
862+
```
863+
864+
#### `unmount(): Promise<void>`
865+
Unmounts the currently active component from the Stage and clears its container. This method ensures that the DOM is cleaned up and resources are released.
856866

857-
await stage.stop();
867+
```typescript
868+
await stage.unmount();
869+
console.log('Component unmounted. Has mounted component:', stage.hasMountedComponent());
858870
```
859871

860872
### Laboratory

0 commit comments

Comments
 (0)