# lazy-mt

> Lazy load DOM in a flattened structure

Latest version **0.0.26** (published 2021-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install lazy-mt
pnpm add lazy-mt
yarn add lazy-mt
bun add lazy-mt
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.26 |
| Published | 2021-10-06 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-elements, custom-element, lazy-load |

## Links

- npm: https://www.npmjs.com/package/lazy-mt
- Repository: https://github.com/bahrus/lazy-mt
- Homepage: https://github.com/bahrus/lazy-mt#readme
- Issues: https://github.com/bahrus/lazy-mt/issues
- npm.io page: https://npm.io/package/lazy-mt

## Dependencies (2)

- [trans-render](https://npm.io/package/trans-render.md) 0.0.418
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.443

## Recent versions

- 0.0.26 (latest) — 2021-10-06
- 0.0.25 — 2021-10-06
- 0.0.24 — 2021-09-29
- 0.0.23 — 2021-09-29
- 0.0.22 — 2021-09-18
- 0.0.21 — 2021-08-28
- 0.0.20 — 2021-08-24
- 0.0.19 — 2021-07-19
- 0.0.18 — 2021-07-19
- 0.0.17 — 2021-07-17
- 0.0.16 — 2021-07-17
- 0.0.15 — 2021-07-17
- 0.0.14 — 2021-07-11
- 0.0.13 — 2021-07-11
- 0.0.12 — 2021-07-10
- … 12 more at https://npm.io/package/lazy-mt/versions

## README

<a href="https://nodei.co/npm/lazy-mt/"><img src="https://nodei.co/npm/lazy-mt.png"></a>

<img src="https://badgen.net/bundlephobia/minzip/lazy-mt">

# lazy-mt

lazy-mt ("lazy mount") is an alternative to [laissez-dom](https://github.com/bahrus/laissez-dom).  Like laissez-dom, it is assumed that some taxing content should only be added to the live DOM-tree when it becomes necessary -- namely when it becomes visible.  And optionally it should go to sleep (become disabled) when it rolls out of view.  Unlike laissez-dom, the "mt" DOM content (hee haw haw) tucked inside the template is expected to be sandwiched between two instances of lazy-mt:

```html
<lazy-mt enter mount></lazy-mt>
    <template>
        <w-butte-trail></w-butte-trail>
        <boddenburg-butte></boddenburg-butte>
        <reflection-lake-trail></reflection-lake-trail>
        <eklutna-lakeside-trail></eklutna-lakeside-trail>
        <twin-peaks-trail></twin-peaks-trail>
        <eska-falls></eska-falls>
    </template>
<lazy-mt exit mount></lazy-mt>
```

When either the enter or exit instance becomes visible, the template is cloned between the two tags (and the template is discarded).

Attribute "mount" is required in order to start watching for visibility.

When both lazy-mt tags leave the viewport, lazy-mt can set any elements to disabled, if attribute/property toggle-disabled/toggleDisabled is set/true.  So what you will see is:


```html
<lazy-mt enter mount toggle-disabled></lazy-mt>
<w-butte-trail disabled></w-butte-trail>
<boddenburg-butte disabled></boddenburg-butte>
<reflection-lake-trail disabled></reflection-lake-trail>
<eklutna-lakeside-trail disabled></eklutna-lakeside-trail>
<twin-peaks-trail disabled></twin-peaks-trail>
<eska-falls disabled></eska-falls>
<lazy-mt exit mount toggle-disabled></lazy-mt>
```

when either of the lazy-mt's lose visibility.

If attribute/property min-mem/minMem is set/true, then rather than discarding the template, it is held in memory, and the inner contents is deleted when  both "bookends" lose visibility.  This allows the inner content to be restored when it comes back in view (but state may be lost with this approach, so a strategy must be developed to restore state in this scenario).

---
_Source: https://npm.io/package/lazy-mt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._