open-index/open-npm huggingface dataset:
npm package: @marvinh/instant-ssr-babel
Description: This babel plugin is intended to be used in conjunction with [instant-ssr](https://github.com/marvinhagemeister/instant-ssr). It
Author: Marvin Hagemeister
Latest version: 0.0.2

# JSX Babel Plugin For `instant-ssr`

This babel plugin is intended to be used in conjunction with [instant-ssr](https://github.com/marvinhagemeister/instant-ssr). It

## Usage

Install the package from the npm registry:

```bash
# with npm
npm install --save-dev @marvinh/instant-ssr-babel
# with yarn
yarn add -D @marvinh/instant-ssr-babel
```

and add it to your `.babelrc`

```bash
{
  "plugins": ["@marvinh/instant-ssr-babel"]
}
```

## What it does

It turns this:

```jsx
function Foo(props) {
  return (
    <div>
      {props.name}
      <Bar />
    </div>
  );
}

function Bar(props) {
  return <span>{props.hello}</span>;
}

const foo = <Foo name="bob" />;
```

into this:

```jsx
import { html, hssr } from "@marvinh/instant-ssr";

function Foo(props) {
  return html`<div>${props.name}${hssr(Bar, {})}</div>`;
}

function Bar(props) {
  return html`<span>${props.hello}</span>`;
}

const foo = hssr(Foo, {
  name: "bob",
});
```

## License

`MIT`, see the [license file](./LICENSE.md).