@ea-lab/test-react-lib-a

Le défi

Dans un composant de l'application qui utilise <Root> de @ea-lab/test-react-lib-a et <ComposantB> de @ea-lab/test-react-lib-b :

import Root from "@ea-lab/test-react-lib-a/dist/engine/Root";
import ComposantB from "@ea-lab/test-react-lib-b/dist/component/ComposantB";

//...
const App = () => {
    return <div>
        <Root><ComposantB/></Root>
    </div>;
}

... on veut que <ComposantB/> récupère la valeur du contexte React ContextA telle que définie dans <Root> :

const Root = (props: RootProps | any) => {
    return <ContextAProvider value={{abc: "test root 123"}}>
        <ComposantA/>
        <h1>Children de Root:</h1>
        {props?.children ?? "enfants non défini"}
        <div>(fin du children)</div>
    </ContextAProvider>
};

<ComposantA> récupère bien la valeur de <ContextAProvider>, mais pas le composant injecté dans props.children (<ComposantB> dans l'exemple plus haut).

---

Une piste probable est que les imports ne pointent pas sur le même objet de contexte ContextA depuis ComposantA et ComposantB :

Implémentation dans ComposantA (de test-react-lib-a) :

import ContextA from "../engine/ContextA";

Implémentation dans ComposantB (de test-react-lib-b) :

import ContextA from "@ea-lab/test-react-lib-a/dist/engine/ContextA.js";

---

Infos montage application hôte

test-react-lib-b dépend de test-react-lib-a (voir leurs package.json respectifs.)

L'application hôte dépend des deux paquets lib-a et lib-b.

Build

Pour construire le dist, il faut faire npm run rollup. Le dossier dist généré n'est pas hyper propre, mais ça avait l'air de marcher un minimum.

Si besoin d'expérimenter, je peux donner des droits d'écriture sur les dépôts. Et il faut que je donne accès sur le scope npm ea-lab pour pouvoir pousser dessus. Ou alors, crée une branche et change le name de package.json et toutes les références de @ea-lab/<nom-lib> pour pointer sur un scope à toi.