diff --git a/publish-a-module-that-uses-tss.md b/publish-a-module-that-uses-tss.md index 5499a0d..e62c98a 100644 --- a/publish-a-module-that-uses-tss.md +++ b/publish-a-module-that-uses-tss.md @@ -4,6 +4,16 @@ description: How to express you dependencies requirements # 📦 Publish a module that uses TSS +{% hint style="success" %} +Soon, it won't be mandatory to explicitly provide an emotion cache for TSS to play well with MUI. + +Then, it wont be necessary to give specific SSR instructions. + +[Follow the advancement](https://github.com/mui/material-ui/pull/32067). + +Update 6 jul 2022: [It's moving forward](https://github.com/mui/material-ui/pull/33383#issuecomment-1175541469)! +{% endhint %} + {% tabs %} {% tab title="Your module uses MUI" %} `package.json` @@ -11,10 +21,10 @@ description: How to express you dependencies requirements ```json "name": "YOUR_MODULE", "dependencies": { - "tss-react": "^4.0.0" + "tss-react": "^3.5.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.2 || 18.0.0" , + "react": "^16.8.0 || ^17.0.2", "@mui/material": "^5.0.1", "@emotion/react": "^11.4.1", }, @@ -32,7 +42,28 @@ Your users install your module like that: yarn add YOUR_MODULE @mui/material @emotion/react @emotion/styled ``` -Regarding SSR setup you can forward your user to the dedicated [MUI documentation](https://mui.com/material-ui/guides/server-rendering/). +You also need to tell your user to explicitly provide an emotion cache to MUI: + +```typescript +import { render } from "react-dom"; +import { CacheProvider } from "@emotion/react"; +import createCache from "@emotion/cache"; + +export const muiCache = createCache({ + "key": "mui", + "prepend": true +}); + +//NOTE: Don't use +render( + + {/* ...your app...*/} + , + document.getElementById("root") +); +``` + +Your users also need to follow [TSS's instructions to enable SSR](ssr/) (at least for now...). {% endtab %} {% tab title="Your module don't use MUI" %} @@ -41,10 +72,10 @@ Regarding SSR setup you can forward your user to the dedicated [MUI documentatio ```json "name": "YOUR_MODULE", "dependencies": { - "tss-react": "^4.0.0" + "tss-react": "^3.5.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.2 || ^18.0.0", + "react": "^16.8.0 || ^17.0.2", "@emotion/react": "^11.4.1", }, "devDependencies": { @@ -59,6 +90,7 @@ Your users install your module like that: yarn add YOUR_MODULE @emotion/react ``` -Regarding SSR setup you can forward your user to [the dedicated documentation](ssr/). +Your users also need to follow [TSS's instructions to enable SSR](ssr/). {% endtab %} {% endtabs %} + diff --git a/single-spa.md b/single-spa.md index a78d8d5..9b32aff 100644 --- a/single-spa.md +++ b/single-spa.md @@ -5,3 +5,7 @@ description: How to integrate with single-spa # 🔩 single-spa To integrate `tss-react` with [`single-spa`](https://single-spa.js.org/) please reproduce [this example](https://github.com/garronej/tss-react/issues/69#issuecomment-1112587437). + +{% hint style="info" %} +The example was for tss-react v3. Before implementing this solution try the naive way first. I haven't tried yet but it should work out of the box. +{% endhint %}