forgetti-loader

A webpack loader, a rspack loader and a Next.js plugin that brings an auto-memoization compiler to solve your hook spaghetti. Powered by Forgetti which is inspired by React Forget.

What is Forgetti?

Forgetti is an auto-memoization Babel plugin made by Alexis H. Munsayac. It was inspired by React Forget and can be used for optimizing a hook-based flow like React hooks.

![React without memo](https://youtu.be/lGEMwh32soc "React without memo")

Installation

``bash

`npm`


npm i forgetti
npm i -D forgetti-loader
yarn

yarn add forgetti
yarn add -D forgetti-loader
pnpm

pnpm add forgetti
pnpm add -D forgetti-loader


Usage
$3

`js // webpack.config.js / rspack.config.js

// You can leverage your IDE's Intellisense (autocompletion, type check, etc.) with the helper function: const { defineForgettiLoaderOptions } = require('forgetti-loader');

module.exports = { module: { rules: [ rules: [ { test: /\.[mc]?jsx$/i, exclude: /node_modules/, use: [ // babel-loader, swc-loader, esbuild-loader, or anything you like to transpile JSX should go here. // If you are using rspack, the rspack's buiilt-in react transformation is sufficient. // { loader: 'swc-loader' }, // Now add forgetti-loader { loader: 'forgetti-loader', options: defineForgettiLoaderOptions({ // Forgetti options. See https://github.com/lxsmnsyc/forgetti/blob/main/docs/configuration.md for more details. preset: 'react', // preset: 'preact', // preset: {} }) } ] } ] ] } };`

`$3`

`js // next.config.js const withForgetti = require('forgetti-loader/next');

module.exports = withForgetti({ // Forgetti options. See https://github.com/lxsmnsyc/forgetti/blob/main/docs/configuration.md for more details. preset: 'react', // preset: 'preact', // preset: {} })({ // Your Next.js config goes here. });``

Author

forgetti-loader © Sukka, Released under the MIT License.

Authored and maintained by Sukka with help from contributors (list).

> Personal Website · Blog · GitHub @SukkaW · Telegram Channel @SukkaChannel · Twitter @isukkaw · Mastodon @sukka@acg.mn · Keybase @sukka

npm

npm i forgetti
npm i -D forgetti-loader

yarn

yarn add forgetti
yarn add -D forgetti-loader

pnpm

pnpm add forgetti
pnpm add -D forgetti-loader

Usage

$3

js
// webpack.config.js / rspack.config.js

// You can leverage your IDE's Intellisense (autocompletion, type check, etc.) with the helper function:
const { defineForgettiLoaderOptions } = require('forgetti-loader');

module.exports = {
  module: {
    rules: [
      rules: [
        {
          test: /\.[mc]?jsx$/i,
          exclude: /node_modules/,
          use: [
            // babel-loader, swc-loader, esbuild-loader, or anything you like to transpile JSX should go here.
            // If you are using rspack, the rspack's buiilt-in react transformation is sufficient.
            // { loader: 'swc-loader' },
            // Now add forgetti-loader
            {
              loader: 'forgetti-loader',
              options: defineForgettiLoaderOptions({
                // Forgetti options. See https://github.com/lxsmnsyc/forgetti/blob/main/docs/configuration.md for more details.
                preset: 'react',
                // preset: 'preact',
                // preset: {}
              })
            }
          ]
        }
      ]
    ]
  }
};

$3

js
// next.config.js
const withForgetti = require('forgetti-loader/next');

module.exports = withForgetti({
  // Forgetti options. See https://github.com/lxsmnsyc/forgetti/blob/main/docs/configuration.md for more details.
  preset: 'react',
  // preset: 'preact',
  // preset: {}
})({
  // Your Next.js config goes here.
});