https://github.com/aidenybai/reaict

Optimize React with AI
https://github.com/aidenybai/reaict

automatic javascript optimize performance react web

Last synced: 12 days ago
JSON representation

Optimize React with AI

• Host: GitHub
• URL: https://github.com/aidenybai/reaict
• Owner: aidenybai
• License: mit
• Created: 2023-09-16T20:53:14.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-14T23:55:15.000Z (12 months ago)
• Last Synced: 2024-10-20T01:11:21.484Z (24 days ago)
• Topics: automatic, javascript, optimize, performance, react, web
• Language: TypeScript
• Homepage:
• Size: 69.3 KB
• Stars: 133
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# re`ai`ct

### Automatically optimize React components with AI

Reaict is a Next.js / Vite / Webpack plugin that automatically analyses your React components and optimizes them for performance during build time. It uses OpenAI's `gpt-3.5-turbo` model to generate the optimized code.

Ideally this can improve your app's render performance. If you want to improve reconcilliation, run `npx million@latest` in your app to install [Million.js](https://million.dev)

## Installation

```bash

npm install reaict-js

```

## Usage

### Next.js

```js

// next.config.js

const withReaict = require('reaict-js');

module.exports = withReaict(

  {

    // your next.js config

  },

  { apiKey: 'YOUR_OPENAI_KEY' },

);

```

### Create React App

```js

const withReaict = require('reaict-js');

module.exports = {

  webpack: {

    plugins: { add: [withReaict.webpack({ auto: true })] },

  },

};

```

### Vite

```js

// vite.config.js

import { defineConfig } from 'vite';

import withReaict from 'reaict-js';

export default defineConfig({

  plugins: [withReaict.vite({ apiKey: 'YOUR_OPENAI_KEY' })],

});

```

### Webpack

```js

const withReaict = require('reaict-js');

module.exports = {

  plugins: [withReaict.webpack({ apiKey: 'YOUR_OPENAI_KEY' })],

};

```

## Notes

so much that can be done:

- prompt optimization

- support class / arrow func components

- pre-eval functions

- github action instead of every run

- cache functions across runs

- component validation (perf profiling + screenshot)

- optimizing on threshold (don't memo everything)

- integration w/ v0?

- user hints (e.g. put a function // optimize!)

- integration w/ million.js

- package analysis and auto refactor

- automatic error handing