Skip to content

Commit edaf30c

Browse files
committed
update documentation for babel plugin
1 parent e18e37a commit edaf30c

File tree

1 file changed

+25
-1
lines changed

1 file changed

+25
-1
lines changed

website/src/pages/docs/babel-plugin.mdx

+25-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,31 @@ On client side, the two code are completely compatible.
8181

8282
Please note that babel must not be configured [to strip comments](https://babeljs.io/docs/en/options#comments), since the chunk name is defined in a comment.
8383

84-
## Loadable detection
84+
## Loadable Configuration (beta)
85+
> available since 5.16.0
86+
87+
Sometimes you need to wrap loadable with your own custom logic. There are many use cases for it, from injecting telemetry to hiding external libraries behind facade.
88+
By default `loadable-components` are configured to transform dynamic imports used only inside loadable helpers, but can be configured to instrument any other function of your choice.
89+
```json
90+
{
91+
"plugins": ["@loadable/babel-plugin", {
92+
"signatures": [
93+
{ "name": "default", "from": "myLoadableWrapper" }
94+
{ "name": "myLoadableHelper", "from": "myLoadableWrapper" }
95+
]
96+
}]
97+
}
98+
```
99+
```tsx
100+
import {myLoadableHelper} from "myLoadableWrapper";
101+
const Loadable = myLoadableHelper(() => import("./MyComponent"));
102+
// will behave similar to
103+
import loadable from '@loadable/component'
104+
const OtherComponent = loadable(() => import('./OtherComponent'))
105+
```
106+
107+
## Loadable detection (deprecated)
108+
> Please dont use this feature and prefer Loadable Configuration instead
85109
86110
The detection of a loadable component is based on the keyword "loadable". It is an opinionated choice, it gives you flexibility but it could also be restrictive.
87111

0 commit comments

Comments
 (0)