# senselogic-reactor

> Functional component preprocessor for React, Preact and Solid.

Latest version **0.1.15** (published 2022-11-05) · LGPL-3.0-only license · 0 weekly downloads

## Install

```sh
npm install senselogic-reactor
pnpm add senselogic-reactor
yarn add senselogic-reactor
bun add senselogic-reactor
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.15 |
| Published | 2022-11-05 |
| First published | 2022-09-24 |
| Weekly downloads | 0 |
| License | LGPL-3.0-only |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eric Pelzer |
| Maintainers | senselogic |
| Keywords | react, preact, solid, preprocessor |

## Links

- npm: https://www.npmjs.com/package/senselogic-reactor
- Repository: https://github.com/senselogic/REACTOR
- Issues: https://github.com/senselogic/REACTOR/issues
- npm.io page: https://npm.io/package/senselogic-reactor

## 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

- 0.1.15 (latest) — 2022-11-05
- 0.1.14 — 2022-10-30
- 0.1.13 — 2022-10-16
- 0.1.12 — 2022-10-16
- 0.1.11 — 2022-09-26
- 0.1.10 — 2022-09-25
- 0.1.9 — 2022-09-25
- 0.1.8 — 2022-09-25
- 0.1.7 — 2022-09-24
- 0.1.6 — 2022-09-24
- 0.1.5 — 2022-09-24
- 0.1.4 — 2022-09-24
- 0.1.3 — 2022-09-24
- 0.1.2 — 2022-09-24
- 0.1.1 — 2022-09-24

## README

![](https://github.com/senselogic/REACTOR/blob/master/LOGO/reactor.png)

# Reactor

Functional component preprocessor for React, Preact and Solid.

## Features

Allows to use a Svelte-like syntax for :

*   state variable declarations, assignments and evaluations;
*   conditions and array iterations in JSX code.

## Loaders

*   Webpack
*   Vite

## Sample

```js
function Counter()
{
    let $count = 0;
    let $doubleCount := $count * 2;

    function increment()
    {
        $count = $count + 1;
        $count = $count + 1;
    }

    return (
        <button type="button" onClick={increment}>
            {$count} / {$doubleCount}
        </button>
        );
}

function FrameworkList()
{
    let frameworkArray = [
        { name: 'React', url: 'https://reactjs.org' },
        { name: 'Preact', url: 'https://preactjs.com' },
        { name: 'Solid', url: 'https://solidjs.com' },
        { name: 'Svelte', url: 'https://svelte.dev' }
        ];
    let frameworkCount = frameworkArray.length;

    return (
        <>
            {#if frameworkCount > 0}
                <p>Framework count : {frameworkCount}.</p>
            {/if}

            {#if frameworkCount == 1}
                <p>{frameworkCount} framework.</p>
            {:else}
                <p>{frameworkCount} frameworks.</p>
            {/if}

            {#if frameworkCount == 0}
                <p>No framework.</p>
            {:else}
                {#if frameworkCount == 1}
                    <p>One framework.</p>
                {:else}
                    {#if frameworkCount == 2}
                        <p>Two frameworks.</p>
                    {:else}
                        <p>Many frameworks.</p>
                    {/if}
                {/if}
            {/if}

            {#if frameworkCount == 0}
                <p>No framework.</p>
            {:else if frameworkCount == 1}
                <p>One framework.</p>
            {:else if frameworkCount == 2}
                <p>Two frameworks.</p>
            {:else}
                <p>Many frameworks.</p>
            {/if}

            <ul>
                {#for {name, url}, index of frameworkArray}
                    <li key={index}>
                        <a target="_blank" href={url}>
                            {index + 1} : {name}
                        </a>
                    </li>
                {/for}
            </ul>
        </>
        );
}
```

## Webpack loader

### Options

```js
{
    framework: 'react'    // or 'preact' or 'solid'
}
```

### Installation

**package.json**
```js
{
  "devDependencies": {
    "senselogic-reactor": "^0.1.15"
  },
}
```

### Configuration

**webpack.config.js**

```js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', { loader: 'senselogic-reactor', options: { framework: 'react' } }],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    static: path.resolve(__dirname, './dist'),
    hot: true,
  },
};
```

## Vite loader

### Options

```js
{
    framework: 'react'    // or 'preact' or 'solid'
    include: './src/**/*.jsx'
}
```

### Installation

**package.json**
```js
{
  "devDependencies": {
    "senselogic-reactor": "^0.1.15",
    "senselogic-reactor-vite": "^0.1.10"
  },
}
```

### Configuration

**vite.config.js**

```js
import { defineConfig } from 'vite';
import reactor from 'senselogic-reactor-vite';
import preact from '@preact/preset-vite';

export default defineConfig({
    plugins: [
        reactor( { framework: 'preact', include: './src/**/*.jsx' } ),
        preact()
        ]
    });
```

## Limitations

*   Reactor statements are translated without grammatical checking.
*   State variables must be declared before using them.
*   Computed values are only available for Preact and Solid.

## Version

0.1

## Author

Eric Pelzer (ecstatic.coder@gmail.com).

## License

This project is licensed under the GNU Lesser General Public License version 3.

See the [LICENSE.md](LICENSE.md) file for details.

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