sukkaw / forgetti-loader Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

TypeScript 98.94% JavaScript 1.06%

forgetti-loader's Introduction

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.

Installation

# 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

Webpack / Rspack

// 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: {}
              })
            }
          ]
        }
      ]
    ]
  }
};

Next.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.
});