https://github.com/trambarhq/relaks-transform-memo

Babel plugin for automatic memoization of Relaks components
https://github.com/trambarhq/relaks-transform-memo

Last synced: 2 days ago
JSON representation

Babel plugin for automatic memoization of Relaks components

• Host: GitHub
• URL: https://github.com/trambarhq/relaks-transform-memo
• Owner: trambarhq
• License: mit
• Created: 2020-03-02T22:31:47.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-19T03:06:07.000Z (over 2 years ago)
• Last Synced: 2024-08-09T05:38:32.057Z (5 months ago)
• Language: JavaScript
• Size: 4.24 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Relaks-transform-memo

=====================

This [Babel](https://babeljs.io/) plugin simplifies development of [Relaks](https://github.com/trambarhq/relaks) application by automatically memoizing asynchronous components.

Before:

```javascript

import { useProgress } from 'relaks';

export async function Widget(props) {

  const [ show ] = useProgress();

  /*...*/

}

```

After:

```javascript

import Relaks, { useProgress } from 'relaks';

export const Widget = Relaks.memo(async function Widget(props) {

  const [ show ] = useProgress();

  /*...*/

});

```

Usage

-----

This plugin is bundled with Relaks. There is no need to install it separately. In your Babel config, simply add it to the list of plugins:

```javascript

          plugins: [

            '@babel/transform-runtime',

            '@babel/proposal-nullish-coalescing-operator',

            '@babel/proposal-optional-chaining',

            /* ... */

            'relaks/transform-memo',

          ]

```

Anonymous function

------------------

This plugin will also add names to components created through calls to `Relaks.memo()`, `Relaks.use()`, `React.memo()`, and `React.forwardRef()`.

Before:

```javascript

import Relaks from 'relaks';

const Widget = React.forwardRef((props, ref) => {

  return 
;

});

```


After:

```javascript

import Relaks from 'relaks';

const Widget = React.forwardRef(function Widget(props, ref) {

  return 
;

});

```


Custom higher-order components

----------------------------------

You can instruct the plugin to add names to your own [higher-order components](https://reactjs.org/docs/higher-order-components.html) by setting the `otherHOCs` option:

```javascript

          plugins: [

            /* ... */

            [ 'relaks/transform-memo', { otherHOCs: [ 'Tooltip.create' ] } ],

          ]

```

Before:

```javascript

import React from 'react';

export const Hello = Tooltip.create('hello.svg', (props) => {

  return 
Hello world
;

});

```


After:

```javascript

import React from 'react';

export const Hello = Tooltip.create('hello.svg', function Hello(props) {

  return React.createElement("div", null, "Hello world");

});

```