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

[Emotion] Use default cache for consumers who do not pass a cache to EuiProvider #6126

Merged
merged 7 commits into from
Aug 15, 2022
Merged

[Emotion] Use default cache for consumers who do not pass a cache to EuiProvider #6126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a416301
[REVERT ME] Local cache testing
cee-chen Aug 11, 2022
96684e3
Create default cache if consumers do not provide a cache to EuiProvider
cee-chen Aug 11, 2022
08acb4c
Update tests
cee-chen Aug 11, 2022
a04a508
Changelog
cee-chen Aug 11, 2022
6320248
List @emotion/cache as a peerDependency
cee-chen Aug 12, 2022
64dc9d7
Revert "[REVERT ME] Local cache testing"
cee-chen Aug 12, 2022
45ab870
add breaking changelog
cee-chen Aug 12, 2022
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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@
"peerDependencies": {
"@elastic/datemath": "^5.0.2",
"@emotion/react": "11.x",
"@emotion/cache": "11.x",
"@types/react": "^16.9 || ^17.0",
"@types/react-dom": "^16.9 || ^17.0",
"moment": "^2.13.0",
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/guidelines/getting_started/getting_started.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const GettingStarted = {
<EuiSpacer />
<EuiCodeBlock language="bash" isCopyable fontSize="m">
{
'yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types'
'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types'
}
</EuiCodeBlock>
<EuiSpacer />
Expand Down
33 changes: 27 additions & 6 deletions src/components/provider/cache/__snapshots__/cache_provider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiProvider adds CacheProvider from Emotion when configured with a cache 1`] = `
exports[`EuiProvider customizes CacheProvider when configured with a cache 1`] = `
<ContextProvider
value={
Object {
Expand Down Expand Up @@ -28,10 +28,31 @@ exports[`EuiProvider adds CacheProvider from Emotion when configured with a cach
</ContextProvider>
`;

exports[`EuiProvider does not add CacheProvider from Emotion when configured without a cache 1`] = `
<Fragment>
exports[`EuiProvider provides a default cache from Emotion when configured without a cache 1`] = `
<ContextProvider
value={
Object {
"compat": true,
"insert": [Function],
"inserted": Object {},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_insertTag": [Function],
"before": null,
"container": <head />,
"ctr": 0,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [],
},
}
}
>
<div />
</Fragment>
</ContextProvider>
`;

exports[`EuiProvider renders a Fragment when no children are provided 1`] = `<Fragment />`;
14 changes: 6 additions & 8 deletions src/components/provider/cache/cache_provider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,27 @@ describe('EuiProvider', () => {
const cache = createCache({
key: 'testing',
});
it('adds CacheProvider from Emotion when configured with a cache', () => {

it('customizes CacheProvider when configured with a cache', () => {
const component = shallow(
<EuiCacheProvider cache={cache}>
<div />
</EuiCacheProvider>
);

expect(component).toMatchSnapshot();
expect(component.prop('value').key).toEqual('testing');
});

it('does not add CacheProvider from Emotion when configured without a cache', () => {
it('provides a default cache from Emotion when configured without a cache', () => {
const component = shallow(
<EuiCacheProvider>
<div />
</EuiCacheProvider>
);

expect(component).toMatchSnapshot();
});

it('renders a Fragment when no children are provided', () => {
const component = shallow(<EuiCacheProvider cache={cache} />);

expect(component).toMatchSnapshot();
expect(component.prop('value').key).toEqual('css');
expect(component.prop('value').compat).toEqual(true);
});
});
19 changes: 9 additions & 10 deletions src/components/provider/cache/cache_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,19 @@
*/

import React, { PropsWithChildren } from 'react';
import { EmotionCache } from '@emotion/cache';
import createCache, { EmotionCache } from '@emotion/cache';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized that we have @emotion/cache as a devDep. We'll need to move it to dependencies.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since @emotion/react is listed as a peerDependency, does it also make sense to make @emotion/cache a peerDependency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

6320248

import { CacheProvider } from '@emotion/react';

const defaultCache = createCache({ key: 'css' });
defaultCache.compat = true;

export interface EuiCacheProviderProps {
cache?: false | EmotionCache;
cache?: EmotionCache;
}

export const EuiCacheProvider = ({
cache,
cache = defaultCache,
children,
}: PropsWithChildren<EuiCacheProviderProps>) => {
return children && cache ? (
<CacheProvider value={cache}>{children}</CacheProvider>
) : (
<>{children}</>
);
};
}: PropsWithChildren<EuiCacheProviderProps>) => (
<CacheProvider value={cache}>{children}</CacheProvider>
);
7 changes: 7 additions & 0 deletions upcoming_changelogs/6126.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
**Bug fixes**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change in peerDependencies technically makes this a breaking change 😿

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woops, right! 🤦


- Fixed `:first-child/:nth-child` console warnings for consumers not passing in a `cache` to `EuiProvider`

**Breaking changes**

- `@emotion/cache` is now a required peer dependency, alongside `@emotion/react`
2 changes: 1 addition & 1 deletion wiki/consuming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ yarn add @elastic/eui
Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project.

```bash
yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types
yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types
```

## Requirements and dependencies
Expand Down