facebook / facebook/docusaurus

Feature: introduce hook for dynamic client side imports

Aperta
#10,804 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
feature
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Description

There exist many libraries that depend on accessing `window`, so they can't be top-level imported and instead
- `` must be used (https://docusaurus.io/docs/advanced/ssg#browseronly)
- `useEffect` can be used to load the lib and then set it...

### Has this been requested on Canny?

_No response_

### Motivation

Since this is a common usecase, it could be streamlined as a hook and be document s.t. new users can directly use it

### API design

Introduce a new hook in the client api and document it here: https://docusaurus.io/docs/docusaurus-core.

The hook would look something like this:

```tsx
import React from 'react';

const cachedLibs = new Map();
export const useClientLib = (dynamicImport: () => Promise, moduleName?: string): T | null => {
const [Lib, setLib] = React.useState(moduleName ? cachedLibs.get(moduleName) : null);
React.useEffect(() => {
if (Lib) {
return;
}
dynamicImport().then((Lib) => {
setLib(Lib);
if (moduleName) {
cachedLibs.set(moduleName, Lib);
}
});
}, []);
return Lib || null;
};
```

And can then easily be used like this:

```tsx
import React from 'react';
import type { default as ClientLib } from 'some-lib';
const SomeComponent = () => {
const Lib = useClientLib(() => import('some-lib'), 'some-lib');
if (!Lib) {
return

Loading...
;
}
return ;
};
```

### Have you tried building it?

I add this hook to all my docusaurus pages which needs `some-lib-using-window` - if there is interest to include this in dpcusaurus, i'm happy to put together a PR.

What i"ve not tried is to use it with relative imports (as you do here for the css (which should be fine to import directly?) https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx#L63 , anyway, the rest of the `importDocSearchModalIfNeeded` should work with the new hook...)

### Self-service

- [X] I'd be willing to contribute this feature to Docusaurus myself.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.