# kdu-hot-reload-api

> hot reload api for *.kdu components

Latest version **2.3.0** (published 2022-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install kdu-hot-reload-api
pnpm add kdu-hot-reload-api
yarn add kdu-hot-reload-api
bun add kdu-hot-reload-api
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2022-12-13 |
| First published | 2022-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | NKDuy |
| Maintainers | nkduy |
| Keywords | kdu, hot, reload |

## Links

- npm: https://www.npmjs.com/package/kdu-hot-reload-api
- Repository: https://github.com/kdujs/kdu-hot-reload-api
- Homepage: https://github.com/kdujs/kdu-hot-reload-api#readme
- Issues: https://github.com/kdujs/kdu-hot-reload-api/issues
- npm.io page: https://npm.io/package/kdu-hot-reload-api

## Recent versions

- 2.3.0 (latest) — 2022-12-13
- 2.3.0-rc.0 — 2022-07-12

## README

# kdu-hot-reload-api

> Note: `kdu-hot-reload-api@2.x` only works with `kdu@2.x`

Hot reload API for Kdu components.

## Usage

You will only be using this if you are writing some build toolchain based on Kdu components. For normal application usage, just use `kdu-loader` or `kduify`.

``` js
// define a component as an options object
const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }
}

// assuming Webpack's HMR API.
// https://webpack.js.org/guides/hot-module-replacement/
if (module.hot) {
  const api = require('kdu-hot-reload-api')
  const Kdu = require('kdu')

  // make the API aware of the Kdu that you are using.
  // also checks compatibility.
  api.install(Kdu)

  // compatibility can be checked via api.compatible after installation
  if (!api.compatible) {
    throw new Error('kdu-hot-reload-api is not compatible with the version of Kdu you are using.')
  }

  // indicate this module can be hot-reloaded
  module.hot.accept()

  if (!module.hot.data) {
    // for each component option object to be hot-reloaded,
    // you need to create a record for it with a unique id.
    // do this once on startup.
    api.createRecord('very-unique-id', myComponentOptions)
  } else {
    // if a component has only its template or render function changed,
    // you can force a re-render for all its active instances without
    // destroying/re-creating them. This keeps all current app state intact.
    api.rerender('very-unique-id', myComponentOptions)

    // --- OR ---

    // if a component has non-template/render options changed,
    // it needs to be fully reloaded. This will destroy and re-create all its
    // active instances (and their children).
    api.reload('very-unique-id', myComponentOptions)
  }
}
```

## License

[MIT](http://opensource.org/licenses/MIT)

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