# babel-plugin-jsx-k-model

> JSX k-model transform

Latest version **2.0.1-alpha.0** (published 2022-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-jsx-k-model
pnpm add babel-plugin-jsx-k-model
yarn add babel-plugin-jsx-k-model
bun add babel-plugin-jsx-k-model
```

## 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.0.1-alpha.0 |
| Published | 2022-07-13 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 34.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | NKDuy |
| Maintainers | nkduy |
| Keywords | kdu, jsx, k-model |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-jsx-k-model
- Repository: https://github.com/khanhduy1407/babel-plugin-jsx-k-model
- Homepage: https://github.com/khanhduy1407/babel-plugin-jsx-k-model#readme
- Issues: https://github.com/khanhduy1407/babel-plugin-jsx-k-model/issues
- npm.io page: https://npm.io/package/babel-plugin-jsx-k-model

## Dependencies (3)

- [svg-tags](https://npm.io/package/svg-tags.md) ^1.0.0
- [html-tags](https://npm.io/package/html-tags.md) ^2.0.0
- [babel-plugin-syntax-jsx](https://npm.io/package/babel-plugin-syntax-jsx.md) ^6.18.0

## Recent versions

- 2.0.1-alpha.0 (latest) — 2022-07-13

## README

## JSX k-model for Kdu JSX

This babel plugin adds some syntactic sugar to JSX.

### Usage:

```bash
npm i babel-plugin-jsx-k-model -D
```

Then add `jsx-k-model` to your `.babelrc` file under `plugins`

example .babelrc:
```json
{
  "presets": ["es2015"],
  "plugins": ["jsx-k-model", "transform-kdu-jsx"]
}
```

code:
```js
Kdu.component('hello-world', {
  data: () => ({
    text: 'Hello World!'
  }),
  render () {
    return (
      <div>
        <input type="text" k-model={this.text} />
        {this.text}
      </div>
    )
  }
})
```

Behaviour is similar to kdu template's [k-model](https://kdujs-v2.web.app/v2/api/#k-model).

---
_Source: https://npm.io/package/babel-plugin-jsx-k-model · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._