# babel-plugin-jsxo

> JSX only files

Latest version **0.0.3** (published 2019-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-jsxo
pnpm add babel-plugin-jsxo
yarn add babel-plugin-jsxo
bun add babel-plugin-jsxo
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-04-03 |
| First published | 2019-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | siddharthkp |
| Maintainers | siddharthkp |
| Keywords | jsxo, jsx only, babel |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-jsxo
- npm.io page: https://npm.io/package/babel-plugin-jsxo

## Dependencies (2)

- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0
- [lodash.capitalize](https://npm.io/package/lodash.capitalize.md) ^4.2.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2019-04-03
- 0.0.2 — 2019-03-28
- 0.0.1 — 2019-03-28

## README

<p align="center">
  <img src="/logo.png" />
  <br/><br/>
  <b>Babel plugin that lets you create files with JSX only</b>
  <br/><br/>
  <img src="https://img.shields.io/badge/experimental-AF-red.svg"/> <a href="https://travis-ci.org/siddharthkp/jsxo"><img src="https://travis-ci.org/siddharthkp/jsxo.svg?branch=master&maxAge=3600"/></a> <img src="https://sid.studio/dx-badge.svg"/>
</p>

&nbsp;

Babel plugin that lets you write files with _JSX only_ and converts them into components at compile time.

Sometimes I need the power of components but miss the simplicity of writing HTML files. (especially for presentation components).

This is a _let the bots do the work_ solution.

&nbsp;

You can create a file called `about.js` and put only the JSX you need, feels like HTML ❤️

```js
<div>Hi, My name is Sid</div>
```

This will be transpiled to:

```js
import React from 'react'

function About(props) {
  return <div>Hi, my name is Sid</div>
}

export default About
```

That component name is picked up from the file name.

&nbsp;

#### Supports props:

  ```js
  <div>Hi my name is {props.name}</div>
  ```

#### Supports local variables:

  ```js
  const name = "Sid";

  <div>Hi my name is {name}</div>
  ```


#### Supports imports:

  ```js
  import Input from './input';

  <form>
    <label for="name">Name</label>
    <Input id="name"/>
  </form>
  ```

#### Can be imported into other files

  `my-input.js`
  ```js
  <input type="text" {...props} />
  ```

  `form.js`
  ```js
  import Input from './my-input';

  <form>
    <label for="name">Name</label>
    <Input id="name"/>
  </form>
  ```

&nbsp;

### Usage

Step 1. Install dependency

```
npm install babel-plugin-jsxo --dev

yarn add babel-plugin-jsxo --dev
```

Step 2. Drop it in your `babel` config as a plugin

```js
{
  "presets": ["@babel/preset-react"],
  "plugins": ["jsxo"]
}
```

&nbsp;

#### Usage with create-react-app

It might be possible to write a [babel macro](https://github.com/kentcdodds/babel-plugin-macros) for this, I'm not sure 🤷

&nbsp;

### like it?

:star: this repo

&nbsp;

### license

MIT © [siddharthkp](https://github.com/siddharthkp)

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