# babel-plugin-react-templates

> Plugin for importing React Templates server side with Babel.

Latest version **2.0.1** (published 2016-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-react-templates
pnpm add babel-plugin-react-templates
yarn add babel-plugin-react-templates
bun add babel-plugin-react-templates
```

## 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 |
| Published | 2016-10-11 |
| First published | 2016-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Arbolista Development |
| Maintainers | arbolista |
| Keywords | babel-plugin, react, es6, server side rendering, react-templates |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-react-templates
- Repository: https://github.com/arbolista-dev/babel-plugin-react-templates
- Homepage: https://github.com/arbolista-dev/babel-plugin-react-templates#readme
- Issues: https://github.com/arbolista-dev/babel-plugin-react-templates/issues
- npm.io page: https://npm.io/package/babel-plugin-react-templates

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^0.14.0
- [lodash](https://npm.io/package/lodash.md) ^4.6.0
- [babylon](https://npm.io/package/babylon.md) ^6.3.0
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.3.17
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.5.2
- [react-templates](https://npm.io/package/react-templates.md) 0.5.x
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.3.13

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2016-10-11
- 2.0.0 — 2016-10-11
- 1.2.0 — 2016-08-08
- 1.1.0 — 2016-04-10
- 1.0.1 — 2016-04-01
- 1.0.0 — 2016-03-30

## README

# babel-plugin-react-templates

[![Build Status](https://travis-ci.org/arbolista-dev/babel-plugin-react-templates.svg?branch=master)](https://travis-ci.org/arbolista-dev/babel-plugin-react-templates)

Import your React Templates with Babel for server side rendering.

## Installation

```sh
$ npm install babel-plugin-react-templates
```

## Usage

### Options

Plugin options are passed to `reactTemplates.convertTemplateToReact`.

There is also an `ext` option for you to specify the extension you want to be compiled by React Templates (the default is `rt.html`).

### `.babelrc`

**.babelrc**

```json
{
  "presets": ["es2015"],
  "plugins": ["react-templates", {"targetVersion": "0.14.0", "ext": "template.html"}]
}
```

This plugin does requires Babel ES2015 preset.

## Examples

This Babel plugin requires you to import your template dependencies BEFORE your templates. For example,

```js
import template from './my_component.template.html';

class MyComponent extends React.Component{
  // ...
  render(){
    return template.call(this);
  }
  // ...
}

```

OR

```js
let template = require('./my_component.template.html');

class MyComponent extends React.Component{
  // ...
  render(){
    return template.call(this);
  }
  // ...
}

```

## Compilation

Currently, the plugin will take a template such as `my_component/my_component.template.html' and write the compiled template to `my_component/_my_component.template.js'. It then does the Babel transformations to import this file instead of the html file.

## Improvements Needed

Babel will not watch your `template.html` files - that is, if you make a change to your html template, `babel-node` will not recompile the template.

Two work arounds for this current:

1. In development and testing, run your scripts with `BABEL_DISABLE_CACHE=1`.
2. Force Babel to compile your changes by making a change to your component file (ie the file that requires the template).

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