facebook / facebook/docusaurus

Feature: introduce hook for dynamic client side imports

Abierto
#10,804 3 comentarios 0 reacciones 0 asignados Ver en GitHub
feature
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

### 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.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.