# external-jsx-loader

> A webpack loader to be used with standalone JSX files, in order to separate the component's logic from its template.

Latest version **1.1.0** (published 2016-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install external-jsx-loader
pnpm add external-jsx-loader
yarn add external-jsx-loader
bun add external-jsx-loader
```

## 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 | 1.1.0 |
| Published | 2016-05-04 |
| First published | 2016-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Ionuț Botizan |
| Maintainers | ionut.botizan |
| Keywords | external, jsx, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/external-jsx-loader
- Repository: https://github.com/ionut-botizan/external-jsx-loader
- Homepage: https://github.com/ionut-botizan/external-jsx-loader#readme
- Issues: https://github.com/ionut-botizan/external-jsx-loader/issues
- npm.io page: https://npm.io/package/external-jsx-loader

## Dependencies (1)

- [babylon](https://npm.io/package/babylon.md) ^6.7.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2016-05-04
- 1.0.0 — 2016-04-27

## README

# external-jsx-loader
A webpack loader to be used with standalone JSX files, in order to separate the component's logic from its template.

---

## Install
```
npm install --save-dev external-jsx-loader
```
or (same thing, but shorter):
```
npm i -D external-jsx-loader
```

---

## Usage
1. Create your component same as before (Eg. `my-component.js`)
2. Move the code (including the JSX tags) from the `render()` method to a new file (Eg. `my-component.jsx`)
3. In your component's definition file, require the JSX file (Eg. `const view = require('./my-component.jsx');`)
4. In the `render()` method, `return view(this);`
5. Configure webpack to use the `external-jsx` loader for the template files, based on the file extension you chose for your templates

*(See the sample "Hello World!" app in the `demo` folder)*

---

## Webpack config
The easiest way is to configure it as a pre-loader:
```js
{
	module: {
		preLoaders: [
			{test: /\.jsx$/, loader: 'external-jsx' /*...*/}
		],

		loaders: [
			{test: /\.jsx?$/, loader: 'babel' /*...*/}
		]
	}
}
```
But you can configure it as a loader too:
```js
{
	module: {
		loaders: [
			{test: /\.jsx$/, loader: 'babel!external-jsx' /*...*/},
			{test: /\.js$/,  loader: 'babel' /*...*/}
		]
	}
}
```
Either way, you have to make sure the loader is executed **before** the `babel` loader. (And yes, the `babel` loader will still have to be executed on the template files)

---

## Example
**File:** *my-component.js*
```js
const React = require('react');
const view  = require('./my-component.jsx'); // require the template

class MyComponent extends React.Component {
	constructor(props) {
		super(props);

		this.state  = {who: 'World'};
		this.greet  = this.greet.bind(this);
		this.update = this.update.bind(this);
	}

	greet(evt) {
		alert(`Hello ${this.state.who}`);
	}

	update(evt) {
		this.setState({who: evt.target.value});
	}

	render() {
		return view(this); // render the template passing `this` as the context
	}
}

module.exports = MyComponent;
```

**File:** *my-component.jsx*
```jsx
<div>
	<h1>Hello!</h1>

	<input value={this.state.who} onChange={this.update} type="text" />
	<button onClick={this.greet}>Say hi!</button>
</div>
```

---

You can also `require` and use components in your template file or even have javascript code, just like before:
```jsx
const AnotherComponent = require('./path/to/another-component.js');

<AnotherComponent>
	{/*if*/ (this.state.on) ? (
		<span className="lights-on">ON</span>
	)/*else*/ : (
		<span className="lights-off">OFF</span>
	)/*endif*/}
</AnotherComponent>
```
*(the code you might have had in the `render()` method should be moved here if you really can't find a better place for it)*

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