GitBook: [#13] No subject

garronej · Jul 10, 2022 · ccb5457 · ccb5457
1 parent 4be6a71
commit ccb5457
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/publish-a-module-that-uses-tss.md b/publish-a-module-that-uses-tss.md
@@ -4,17 +4,27 @@ 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. &#x20;
+
+Then, it wont be necessary to give specific SSR instructions. &#x20;
+
+[Follow the advancement](https://github.com/mui/material-ui/pull/32067). &#x20;
+
+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`
 
 ```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:&#x20;
 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: &#x20;
+
+```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 <StyledEngineProvider injectFirst/>
+render(
+    <CacheProvider value={muiCache}>
+        {/* ...your app...*/}
+    </CacheProvider>,
+    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:&#x20;
 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
@@ -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 %}