open-index/open-npm huggingface dataset:
npm package: @reboost/create-app
Description: Create Reboost enabled app
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/create-app?style=flat-square)](https://www.npmjs.com/package/@reboost/create-app)
[![license](https://img.shields.io/npm/l/@reboost/create-app?style=flat-square)](/LICENSE)

# Create App
Easily create Reboost enabled apps.

## Usage
```shell
npm init @reboost/app
```

## Available templates
- Electron
- Lit
- Malina.js
- Preact
- React
- React TypeScript
- Solid
- Svelte
- Vanilla
- Vue

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-babel
Description: Babel plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-babel?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-babel)
[![license](https://img.shields.io/npm/l/@reboost/plugin-babel?style=flat-square)](/LICENSE)

# Babel Plugin
Adds support for transforming JavaScript or TypeScript with Babel.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-babel
```
Install `@babel/core`, if not already installed
```shell
npm i @babel/core
```
Import it from the package
```js
const { start } = require('reboost');
const BabelPlugin = require('@reboost/plugin-babel');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const BabelPlugin = require('@reboost/plugin-babel');

start({
  plugins: [
    BabelPlugin({
      // Options
    })
  ]
})
```

## Options
Supports all [Babel options](https://babeljs.io/docs/en/options).

## Example
### Speeding up the build by excluding node modules
You may not need babel transformations on `node_modules`
files. You can simply exclude them by using [`UsePlugin`](https://github.com/sarsamurmu/reboost/blob/primary/docs/built-in-plugins/use.md).
This will increase performance too.

```js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const BabelPlugin = require('@reboost/plugin-babel');

start({
  plugins: [
    UsePlugin({
      include: /.*/,
      exclude: /node_modules/,
      use: BabelPlugin()
    })
  ]
})
```

### Transforming new features
**NOTE:** While developing (not production) your app you should not transform
your JavaScript code to support extremely old browsers,
you should transform just the new features or proposals.

```js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const BabelPlugin = require('@reboost/plugin-babel');

start({
  plugins: [
    UsePlugin({
      include: /.*/,
      exclude: /node_modules/,
      use: BabelPlugin({
        plugins: [
          // Your babel plugin,
          // for example
          ['@babel/plugin-proposal-pipeline-operator', { proposal: 'smart' }]
        ]
      })
    })
  ]
})
```

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-litcss
Description: LitCSS plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-litcss?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-litcss)
[![license](https://img.shields.io/npm/l/@reboost/plugin-litcss?style=flat-square)](/LICENSE)

## LitCSS Plugin
Easily load stylesheets as LitCSS style modules.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-litcss
```
Install `lit` package, if not already installed
```shell
npm i lit
```
Import it from the package, also import built-in `UsePlugin`
```js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');
```
Add it to the plugins array
```js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');

start({
  plugins: [
    UsePlugin({
      include: '**/*.lit.css',
      use: LitCSSPlugin()
    })
  ]
});
```
### Require file in your code
```js
import style from './file.lit.css';
```

## Example
### Basic usage with `lit`
`reboost.js`
```js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');

start({
  // ...
  plugins: [
    UsePlugin({
      include: '**/*.lit.css',
      use: LitCSSPlugin()
    })
  ]
});
```
`styles.lit.css`
```css
.main {
  font-family: sans-serif;
  font-size: x-large;
  background-color: rgb(248, 33, 115);
  color: white;
  padding: 10px;
  display: inline-block;
}
```
`index.js`
```js
import { LitElement, customElement, html } from 'lit';

import style from './styles.lit.css';

@customElement('my-element')
export class MyElement extends LitElement {
  static get styles() {
    return [style];
  }

  render() {
    return html`
      <span class="main">Lit is here!</span>
    `
  }
}
```
npm package: @reboost/plugin-malinajs
Description: Malina.js plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-malinajs?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-malinajs)
[![license](https://img.shields.io/npm/l/@reboost/plugin-malinajs?style=flat-square)](/LICENSE)

# Malina.js Plugin
Adds support for Malina.js.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-malinajs
```
Install `malinajs` package, if not already installed
```shell
npm i malinajs
```
Import it from the package
```js
const { start } = require('reboost');
const MalinaJSPlugin = require('@reboost/plugin-malinajs');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const MalinaJSPlugin = require('@reboost/plugin-malinajs');

start({
  plugins: [
    MalinaJSPlugin({
      // Options
    })
  ]
})
```
### Require file in your code
```js
import Component from './file.xht';
```

## Options
#### `compilerOptions`
Type: `object`

Options to use when compiling components. Please refer to [official docs](https://malinajs.github.io/docs/#compile-options) for available options.

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-postcss
Description: PostCSS plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-postcss?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-postcss)
[![license](https://img.shields.io/npm/l/@reboost/plugin-postcss?style=flat-square)](/LICENSE)

# PostCSS Plugin
Adds support for transforming stylesheets with PostCSS. This plugin does not work with
PostCSS versions below 8, if you want to use PostCSS 7, please use the older version
of this plugin.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-postcss
```
Install `postcss` package, if not already installed.
```shell
npm i postcss
```
Import it from the package
```js
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
  plugins: [
    PostCSSPlugin({
      // Options
    })
  ]
})
```
Now it will transform all stylesheets with your PostCSS plugins.

## Config file
This plugin uses [`postcss-load-config`](https://github.com/postcss/postcss-load-config) to load PostCSS
configurations. Please read their [readme](https://github.com/postcss/postcss-load-config/blob/master/README.md)
to understand how configuration files are loaded.

## Options
#### `ctx`
Type: `object`

This plugin exposes context `ctx` to the config file, so that your config file can be dynamic.
Like so

`postcss.config.js`
```js
module.exports = ({ file, options, env }) => {
  parser: file.extname === '.sss' ? 'sugarss' : undefined
  // More configurations
}
```

You can set `ctx` to an `object` to pass the data to the `options` object in
your `postcss.config.js`, like so

`reboost.js`
```js
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
  plugins: [
    PostCSSPlugin({
      ctx: {
        usePreset: true
      }
    })
  ]
})
```
`postcss.config.js`
```js
module.exports = ({ file, options, env }) => {
  plugins: {
    // `usePreset` is now available in `options` object
    'postcss-preset-env': options.usePreset ? {} : false
  }
}
```

#### `path`
Type: `string`

The path to search for any of the configuration files. Configurations can be loaded from
- [`package.json`](https://github.com/postcss/postcss-load-config/blob/master/README.md#packagejson)
- [`.postcssrc`](https://github.com/postcss/postcss-load-config/blob/master/README.md#postcssrc)
- [`.postcssrc.js` or `postcss.config.js`](https://github.com/postcss/postcss-load-config/blob/master/README.md#postcssrcjs-or-postcssconfigjs)

Using this option you can specify
another directory that should be searched for the config file, like when you store
your config files in different directories.
**The value should be a path to a DIRECTORY (where the config file is stored), not a path to a FILE**.
npm package: @reboost/plugin-prefresh
Description: Prefresh plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-prefresh?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-prefresh)
[![license](https://img.shields.io/npm/l/@reboost/plugin-prefresh?style=flat-square)](/LICENSE)

# Prefresh Plugin
Enables support for hot reloading Preact components, so that you can develop your app *faster*.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-prefresh
```
Import it from the package
```js
const { start } = require('reboost');
const PrefreshPlugin = require('@reboost/plugin-prefresh');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const PrefreshPlugin = require('@reboost/plugin-prefresh');

start({
  plugins: [
    PrefreshPlugin({
      // Options
    })
  ]
})
```

## Options
#### `excludeNodeModules`
Type: `boolean`\
Default: `true`

Excludes all files which match `/node_modules/`. Disabling it will decrease performance.

## Minimal setup needed
If you want this plugin to work, please part up your components and renderers to different
files.

#### This won't work
`index.jsx`
```js
import { h, render } from 'preact';

const App = () => {
  return (
    <div>Hi there!</div>
  )
}

render(<App />, document.querySelector('#app'));
```
#### This works
`index.jsx`
```js
import { h, render } from 'preact';
import { App } from './App';

render(<App />, document.querySelector('#app'));
```
`App.jsx`
```js
import { h } from 'preact';

export const App = () => {
  return (
    <div>Hi there!</div>
  )
}
```

Also [see this](https://github.com/JoviDeCroock/prefresh/#recognition).

## Example
### Improving performance by excluding unrelated files
By default, it runs the transformation on all files. You can run the transformation
only on the files which need it by using `UsePlugin`.
```js
const {
  start,
  builtInPlugins: {
    UsePlugin
  }
} = require('reboost');
const PrefreshPlugin = require('@reboost/plugin-prefresh');

start({
  // Other options
  plugins: [
    // Other plugins
    UsePlugin({
      include: /\.[jt]sx?$/, // Selects only the files with .js, .ts, .jsx or .tsx extension
      use: PrefreshPlugin()
    })
  ]
  // ...
})
```

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-react-refresh
Description: React Fast Refresh plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-react-refresh?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-react-refresh)
[![license](https://img.shields.io/npm/l/@reboost/plugin-react-refresh?style=flat-square)](/LICENSE)

# React Refresh Plugin
Enables support for React Fast Refresh, so that you can develop your app *faster*.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-react-refresh
```
Import it from the package
```js
const { start } = require('reboost');
const ReactRefreshPlugin = require('@reboost/plugin-react-refresh');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const ReactRefreshPlugin = require('@reboost/plugin-react-refresh');

start({
  plugins: [
    ReactRefreshPlugin({
      // Options
    })
  ]
})
```

## Options
#### `excludeNodeModules`
Type: `boolean`\
Default: `true`

Excludes all files which match `/node_modules/`. Disabling it will decrease performance.

## Minimal setup needed
If you want this plugin to work, please part up your components and renderers to different
files.

#### This won't work
`index.jsx`
```js
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>Hi there!</div>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'));
```
#### This works
`index.jsx`
```js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.querySelector('#app'));
```
`App.jsx`
```js
import * as React from 'react';

export const App = () => {
  return (
    <div>Hi there!</div>
  )
}
```

## Example
### Improving performance by excluding unrelated files
By default, it runs the transformation on all files. You can run the transformation
only on the files which need it by using `UsePlugin`.
```js
const {
  start,
  builtInPlugins: {
    UsePlugin
  }
} = require('reboost');
const ReactRefreshPlugin = require('@reboost/plugin-react-refresh');

start({
  // Other options
  plugins: [
    // Other plugins
    UsePlugin({
      include: /\.[jt]sx?$/, // Selects only the files with .js, .ts, .jsx or .tsx extension
      use: ReactRefreshPlugin()
    })
  ]
  // ...
})
```

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-sass
Description: Sass/SCSS plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-sass?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-sass)
[![license](https://img.shields.io/npm/l/@reboost/plugin-sass?style=flat-square)](/LICENSE)

# Sass Plugin
Transform Sass/SCSS files to CSS on the fly.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-sass
```
Install `node-sass` or `sass` (whichever you like), if not installed
```shell
npm i node-sass
```
or
```shell
npm i sass
```
Import it from the package
```js
const { start } = require('reboost');
const SassPlugin = require('@reboost/plugin-sass');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const SassPlugin = require('@reboost/plugin-sass');

start({
  plugins: [
    SassPlugin({
      // Options
    })
  ]
})
```
### Require file in your code
```js
import './styles.scss';
```

## Options
#### `sassOptions`
Type: `Sass.Options | object`

Options to use when rendering Sass/SCSS files. You can read about all Sass options
in `node-sass`'s [npm package](https://www.npmjs.com/package/node-sass#options) page.

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-typescript
Description: TypeScript plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-typescript?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-typescript)
[![license](https://img.shields.io/npm/l/@reboost/plugin-typescript?style=flat-square)](/LICENSE)

# TypeScript Plugin
Transpile TypeScript files using the official TypeScript compiler. So that you can
try out new TypeScript features without waiting.

**NOTE**: It does not checks for types. You have to do handle that by yourself. If you are
using the CLI then you can use command `tsc --noEmit` (or `tsc --noEmit --watch`).

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-typescript
```
Install `typescript` package, if not already installed
```shell
npm i typescript
```
Import it from the package
```js
const { start } = require('reboost');
const TypeScriptPlugin = require('@reboost/plugin-typescript');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const TypeScriptPlugin = require('@reboost/plugin-typescript');

start({
  plugins: [
    TypeScriptPlugin({
      // Options
    })
  ]
})
```

## Options
#### `tsconfig`
Type: `string`\
Default: `./tsconfig.json`

Path to the `tsconfig` file.

#### `compatibleTypes`
Type: `string[]`\
Default: `['ts']`

The file types that would be compiled by the plugin. Ex. If you set it to `['js', 'ts']`,
the plugin will also compile JavaScript files.

# License
Licensed under the [MIT License](/LICENSE).
npm package: @reboost/plugin-vue
Description: Vue plugin for Reboost
Author: Sarsa Murmu
Latest version: 0.21.0

[![npm](https://img.shields.io/npm/v/@reboost/plugin-vue?style=flat-square)](https://www.npmjs.com/package/@reboost/plugin-vue)
[![license](https://img.shields.io/npm/l/@reboost/plugin-vue?style=flat-square)](/LICENSE)

# Vue Plugin
Adds support for `.vue` files, using [Vue 3 SFC compiler](https://www.npmjs.com/package/@vue/compiler-sfc).
Also enables Hot Reloading for Vue Components.

## Usage
### Setup
Install it using `npm`
```shell
npm i -D @reboost/plugin-vue
```
Import it from the package
```js
const { start } = require('reboost');
const VuePlugin = require('@reboost/plugin-vue');
```
Add it to the plugins array
```js
const { start } = require('reboost');
const VuePlugin = require('@reboost/plugin-vue');

start({
  plugins: [
    VuePlugin()
  ]
})
```
### Require file in your code
```js
import Component from './file.vue';
```

## Options
#### `compiler`
Type: `object`

Compiler to use when compiling SFCs. You may need it if you want to use a different version
of the SFC compiler than the one which comes with this package. First, install the version of the compiler
you want to use then pass it to the options. Like so
```js
const { start } = require('reboost');
const VuePlugin = require('@reboost/plugin-vue');

start({
  plugins: [
    VuePlugin({
      // Install the version of the compiler you want
      // then pass it to the plugin
      compiler: require('@vue/compiler-sfc')
    })
  ]
})
```

# Why Vue 2 is not supported
Vue 2 uses the [`with` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)
in its code, but the `with` statement is forbidden in ES modules and strict mode. And because Reboost uses native
ES modules, `with` statements will give an error. That's why Vue 2 is not supported.

# License
Licensed under the [MIT License](/LICENSE).