Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[example] update EmotionCacheProvider to work with GlobalStyles #37962

Merged
merged 4 commits into from
Jul 18, 2023
Merged

[example] update EmotionCacheProvider to work with GlobalStyles #37962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8542273
update CacheProvider
siriwatknp Jul 14, 2023
f7f9b8e
update Material UI and Joy UI
siriwatknp Jul 15, 2023
8b964a1
Merge branch 'master' of https://github.com/mui/material-ui into fix/…
siriwatknp Jul 15, 2023
c574228
Apply suggestions from code review
siriwatknp Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 48 additions & 22 deletions examples/joy-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,25 @@ export type NextAppDirEmotionCacheProviderProps = {
children: React.ReactNode;
};

// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
const { options, CacheProvider = DefaultCacheProvider, children } = props;

const [{ cache, flush }] = React.useState(() => {
// eslint-disable-next-line @typescript-eslint/no-shadow
const [registry] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted: string[] = [];
let inserted: { name: string; isGlobal: boolean }[] = [];
cache.insert = (...args) => {
const serialized = args[1];
const [selector, serialized] = args;
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
inserted.push({
name: serialized.name,
isGlobal: !selector,
});
}
return prevInsert(...args);
};
// eslint-disable-next-line @typescript-eslint/no-shadow
const flush = () => {
const prevInserted = inserted;
inserted = [];
Expand All @@ -44,26 +45,51 @@ export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionC
});

useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
const inserted = registry.flush();
if (inserted.length === 0) {
return null;
}
let styles = '';
// eslint-disable-next-line no-restricted-syntax
for (const name of names) {
styles += cache.inserted[name];
}
let dataEmotionAttribute = registry.cache.key;

const globals: {
name: string;
style: string;
}[] = [];

inserted.forEach(({ name, isGlobal }) => {
const style = registry.cache.inserted[name];

if (typeof style !== 'boolean') {
if (isGlobal) {
globals.push({ name, style });
} else {
styles += style;
dataEmotionAttribute += ` ${name}`;
}
}
});

return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(' ')}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
<React.Fragment>
{globals.map(({ name, style }) => (
<style
key={name}
data-emotion={`${registry.cache.key}-global ${name}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style }}
/>
))}
{styles && (
<style
data-emotion={dataEmotionAttribute}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: styles }}
/>
)}
</React.Fragment>
);
});

return <CacheProvider value={cache}>{children}</CacheProvider>;
return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
}
70 changes: 48 additions & 22 deletions examples/material-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,25 @@ export type NextAppDirEmotionCacheProviderProps = {
children: React.ReactNode;
};

// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
const { options, CacheProvider = DefaultCacheProvider, children } = props;

const [{ cache, flush }] = React.useState(() => {
// eslint-disable-next-line @typescript-eslint/no-shadow
const [registry] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted: string[] = [];
let inserted: { name: string; isGlobal: boolean }[] = [];
cache.insert = (...args) => {
const serialized = args[1];
const [selector, serialized] = args;
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
inserted.push({
name: serialized.name,
isGlobal: !selector,
});
}
return prevInsert(...args);
};
// eslint-disable-next-line @typescript-eslint/no-shadow
const flush = () => {
const prevInserted = inserted;
inserted = [];
Expand All @@ -44,26 +45,51 @@ export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionC
});

useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
const inserted = registry.flush();
if (inserted.length === 0) {
return null;
}
let styles = '';
// eslint-disable-next-line no-restricted-syntax
for (const name of names) {
styles += cache.inserted[name];
}
let dataEmotionAttribute = registry.cache.key;

const globals: {
name: string;
style: string;
}[] = [];

inserted.forEach(({ name, isGlobal }) => {
const style = registry.cache.inserted[name];

if (typeof style !== 'boolean') {
if (isGlobal) {
globals.push({ name, style });
} else {
styles += style;
dataEmotionAttribute += ` ${name}`;
}
}
});

return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(' ')}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
<React.Fragment>
{globals.map(({ name, style }) => (
<style
key={name}
data-emotion={`${registry.cache.key}-global ${name}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style }}
/>
))}
{styles && (
<style
data-emotion={dataEmotionAttribute}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: styles }}
/>
)}
</React.Fragment>
);
});

return <CacheProvider value={cache}>{children}</CacheProvider>;
return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
}