Can this be used in a single spa application?

I’m having issues using tss-react in a single spa environment. In my root app, I am able to get the UMD version of MUI and emotion (not been able to find an umd/systemjs version of this package or create one successfully):

        "@mui/material": "https://unpkg.com/@mui/material@5.4.3/umd/material-ui.production.min.js",
        "@emotion/react": "https://cdn.jsdelivr.net/npm/@emotion/react@11.8.2/dist/emotion-react.umd.min.js",
        "@emotion/styled": "https://cdn.jsdelivr.net/npm/@emotion/styled@11.8.1/dist/emotion-styled.umd.min.js",

And they are being externalised by webpack in the sub app I am trying to use tss-react, In this app I have created a cache as the docs showed:

export const muiCache = createCache({
    'key': 'mui',
    'prepend': true,
  });

// region Component

const Theme: FunctionComponent<IThemeProps> = ({
  children,

  style
}) => {
  // handlers

  const theme = React.useMemo(() => {
    switch (style) {
      case Themes.Default:
      default:
        return DefaultTheme;
    }
  }, [style]);

  // render

  return (
    <CacheProvider value={muiCache}>
      <MuiThemeProvider theme={theme}>
        {children}
      </MuiThemeProvider>
    </CacheProvider>
  );
};

But MUI css always takes precedence over tss-react created styles and cannot seem to get it to work. Is there a way to get this to work?

[tristan-cunningham]

@liztownd @garronej Documentation may need to change if you have made it

Your solution causes single spa inspector dev tool to not work, infinite loading. This seems like it will happen if you use single spa layout engine.

To fix this, don’t create a new array with custom props added (applicationsWithProps in your example). Add the props to the route constructor like so:

const routes = constructRoutes(microfrontendLayout, {
  props: {
    createCache: createCache,
    CacheProvider: CacheProvider
  },
  loaders: {
  }
});

And then in your layout html file add the props to the application like this:

<application name="@your-app" props="createCache,CacheProvider"></application>

[liztownd]

@garronej & @kennyist – I WIN! Lol.

In the root-config file when registering the sub applications I passed an instance of the createCache & CacheProvider from @emotion, then picked them up from the props rather than importing them in each sub-app (I had several apps all importing their own theme object and assigning classNames). Voila, I now have one muiCache, and the styles are appearing in order, pre-prending the tss styles, each with their own prefix depending on the sub-app they originated from.

in root-config:

import { registerApplication, start } from "single-spa";
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });

const applicationsWithProps = applications.map((application) => {
  return {
    ...application,
    customProps: { createCache: createCache, CacheProvider: CacheProvider },
  };
});

applicationsWithProps.forEach(registerApplication);

layoutEngine.activate();
start();

inside cache provider in every sub app:

import { ReactChild } from "react";
import type { CacheProvider } from "@emotion/react";
import type createCache from "@emotion/cache";

export type Props = {
  CacheProvider: typeof CacheProvider;
  createCache: typeof createCache;
  children?: ReactChild;
};

export function Theme(props: Props) {

  const { CacheProvider, createCache, children } = props;

  const muiCache = createCache({
    "key": "mui", // to test in each sub app I assigned a different "key", they should all show up in one cache
    "prepend": false
  });

  return <CacheProvider value={muiCache}>{children}</CacheProvider>;

};