https://github.com/senselogic/reactor
Functional component preprocessor for React, Preact and Solid.
https://github.com/senselogic/reactor
Last synced: 3 months ago
JSON representation
Functional component preprocessor for React, Preact and Solid.
- Host: GitHub
- URL: https://github.com/senselogic/reactor
- Owner: SenseLogic
- License: other
- Created: 2022-09-04T17:55:21.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-05T08:52:35.000Z (over 2 years ago)
- Last Synced: 2025-04-02T23:35:41.784Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 349 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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 (
{$count} / {$doubleCount}
);
}
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}
Framework count : {frameworkCount}.
{/if}
{#if frameworkCount == 1}
{frameworkCount} framework.
{:else}
{frameworkCount} frameworks.
{/if}
{#if frameworkCount == 0}
No framework.
{:else}
{#if frameworkCount == 1}
One framework.
{:else}
{#if frameworkCount == 2}
Two frameworks.
{:else}
Many frameworks.
{/if}
{/if}
{/if}
{#if frameworkCount == 0}
No framework.
{:else if frameworkCount == 1}
One framework.
{:else if frameworkCount == 2}
Two frameworks.
{:else}
Many frameworks.
{/if}
-
{index + 1} : {name}
{#for {name, url}, index of frameworkArray}
{/for}
>
);
}
```
## 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 ([email protected]).
## License
This project is licensed under the GNU Lesser General Public License version 3.
See the [LICENSE.md](LICENSE.md) file for details.