Skip to content

Commit 7f6b36f

Browse files
KatoakDRKatoakDR
committed
feat: update elastic/emotion ui version
1 parent 722e7ef commit 7f6b36f

File tree

5 files changed

+53
-204
lines changed

5 files changed

+53
-204
lines changed

‎electron/renderer/lib/theme.ts

-12
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,3 @@ export interface Theme {
106106
name: string;
107107
publicPath: string;
108108
}
109-
110-
// This is supplied to the app as JSON by Webpack - see next.config.js
111-
export interface ThemeConfig {
112-
availableThemes: Array<Theme>;
113-
copyConfig: Array<{
114-
from: string;
115-
to: string;
116-
}>;
117-
}
118-
119-
// The config is generated during the build and made available in a JSON string.
120-
export const themeConfig: ThemeConfig = JSON.parse(process.env.THEME_CONFIG!);

‎electron/renderer/pages/_document.tsx

+1-32
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,8 @@
22
// https://github.com/elastic/next-eui-starter/blob/master/src/pages/_document.tsx
33

44
import { Head, Html, Main, NextScript } from 'next/document';
5-
import { useMemo } from 'react';
65
import type { LinkHTMLAttributes, ReactElement } from 'react';
76
import type React from 'react';
8-
import type { Theme } from '../lib/theme.js';
9-
import { getThemeName, themeConfig } from '../lib/theme.js';
10-
11-
function createThemeLink(theme: Theme): ReactElement {
12-
let disabledProps = {};
13-
14-
if (theme.id !== getThemeName()) {
15-
disabledProps = {
16-
'disabled': true,
17-
'aria-disabled': true,
18-
};
19-
}
20-
21-
return (
22-
<link
23-
rel="stylesheet"
24-
href={`/${theme.publicPath}`}
25-
data-name="eui-theme"
26-
data-theme-name={theme.name}
27-
data-theme={theme.id}
28-
key={theme.id}
29-
{...disabledProps}
30-
/>
31-
);
32-
}
337

348
/**
359
* Nextjs wants you to import CSS stylesheets in the `pages/_app.tsx` file.
@@ -41,7 +15,7 @@ function createThemeLink(theme: Theme): ReactElement {
4115
* the `<link>` element in the `Head` element directly.
4216
* So instead we use functions.
4317
*/
44-
function createStyleLink(
18+
function _createStyleLink(
4519
props: LinkHTMLAttributes<HTMLLinkElement>
4620
): ReactElement {
4721
return <link rel="stylesheet" {...props} />;
@@ -55,10 +29,6 @@ function createStyleLink(
5529
* @see https://nextjs.org/docs/advanced-features/custom-document
5630
*/
5731
const Document: React.FC = () => {
58-
const euiThemeLinks = useMemo(() => {
59-
return themeConfig.availableThemes.map((theme) => createThemeLink(theme));
60-
}, []);
61-
6232
// const yourCustomStyleLink = useMemo(() => {
6333
// return createStyleLink({ href: '/your/custom.min.css' });
6434
// }, []);
@@ -67,7 +37,6 @@ const Document: React.FC = () => {
6737
<Html lang="en">
6838
<Head>
6939
<meta name="eui-styles" />
70-
{euiThemeLinks}
7140
<meta name="eui-styles-utility" />
7241
{/* {yourCustomStyleLink} */}
7342
<meta

‎next.config.js

-108
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,14 @@
44
* Config based on https://github.com/elastic/next-eui-starter
55
*/
66

7-
import crypto from 'node:crypto';
8-
import fs from 'node:fs';
9-
import path from 'node:path';
10-
import { fileURLToPath } from 'node:url';
117
import { withSentryConfig } from '@sentry/nextjs';
12-
import CopyWebpackPlugin from 'copy-webpack-plugin';
138
import dotenv from 'dotenv';
14-
import { glob } from 'glob';
15-
import capitalize from 'lodash-es/capitalize.js';
169
import webpack from 'webpack';
1710

18-
const __filename = fileURLToPath(import.meta.url);
19-
const __dirname = path.dirname(__filename);
20-
2111
dotenv.config();
2212

2313
const pathPrefix = '';
2414

25-
const themeConfig = buildThemeConfig();
26-
2715
const { EnvironmentPlugin, IgnorePlugin } = webpack;
2816

2917
/**
@@ -106,7 +94,6 @@ const nextConfig = {
10694
*/
10795
env: {
10896
PATH_PREFIX: pathPrefix,
109-
THEME_CONFIG: JSON.stringify(themeConfig),
11097
},
11198

11299
/**
@@ -201,11 +188,6 @@ const nextConfig = {
201188
VERCEL_ENV: '',
202189
}),
203190

204-
// Copy @elastic/eui theme files
205-
new CopyWebpackPlugin({
206-
patterns: buildElasticThemeFileCopyPatterns(),
207-
}),
208-
209191
// Moment ships with a large number of locales. Exclude them, leaving
210192
// just the default English locale. If you need other locales, see:
211193
// https://create-react-app.dev/docs/troubleshooting/#momentjs-locales-are-missing
@@ -318,93 +300,3 @@ export default withSentryConfig(nextConfig, {
318300
deleteSourcemapsAfterUpload: true,
319301
},
320302
});
321-
322-
/**
323-
* Find all EUI themes and construct a theme configuration object.
324-
*
325-
* The `copyConfig` key is used to configure CopyWebpackPlugin, which
326-
* copies the default EUI themes into the `public` directory, injecting a
327-
* hash into the filename so that when EUI is updated, new copies of the
328-
* themes will be fetched.
329-
*
330-
* The `availableThemes` key is used in the app to includes the themes in
331-
* the app's `<head>` element, and for theme switching.
332-
*/
333-
function buildThemeConfig() {
334-
const themeFiles = glob.sync(
335-
path.join(
336-
__dirname,
337-
'node_modules',
338-
'@elastic',
339-
'eui',
340-
'dist',
341-
'eui_theme_*.min.css'
342-
),
343-
{
344-
// Only / characters are used by this glob implementation.
345-
// Since Windows uses \ as a path separator then we enable this option
346-
// in order for us to use glob patterns created from `path.join`.
347-
// https://github.com/isaacs/node-glob#windows
348-
windowsPathsNoEscape: true,
349-
}
350-
);
351-
352-
/** @type {import('./electron/renderer/lib/theme').ThemeConfig} */
353-
const themeConfig = {
354-
availableThemes: [],
355-
copyConfig: [],
356-
};
357-
358-
for (const themeFile of themeFiles) {
359-
const basename = path.basename(themeFile, '.min.css');
360-
const themeId = basename.replace(/^eui_theme_/, '');
361-
const themeName = capitalize(themeId).replace(/_/g, ' ');
362-
const publicPath = `themes/${basename}.${hashFile(themeFile)}.min.css`;
363-
364-
const toPath = path.join(
365-
__dirname,
366-
'electron',
367-
'renderer',
368-
`public`,
369-
`themes`,
370-
`${basename}.${hashFile(themeFile)}.min.css`
371-
);
372-
373-
themeConfig.availableThemes.push({
374-
id: themeId,
375-
name: themeName,
376-
publicPath,
377-
});
378-
379-
themeConfig.copyConfig.push({
380-
from: themeFile,
381-
to: toPath,
382-
});
383-
}
384-
385-
return themeConfig;
386-
}
387-
388-
/**
389-
* @returns {import('copy-webpack-plugin').ObjectPattern[]}
390-
*/
391-
function buildElasticThemeFileCopyPatterns() {
392-
return themeConfig.copyConfig;
393-
}
394-
395-
/**
396-
* Given a file, calculate a hash and return the first portion. The number
397-
* of characters is truncated to match how Webpack generates hashes.
398-
*
399-
* @param {string} filePath the absolute path to the file to hash.
400-
* @return {string}
401-
*/
402-
function hashFile(filePath) {
403-
const hash = crypto.createHash(`sha256`);
404-
const fileData = fs.readFileSync(filePath);
405-
hash.update(fileData);
406-
const fullHash = hash.digest(`hex`);
407-
408-
// Use a hash length that matches what Webpack does
409-
return fullHash.substring(0, 20);
410-
}

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@
6666
"sentry:sourcemaps": "./scripts/sentry-sourcemaps.sh"
6767
},
6868
"dependencies": {
69-
"@elastic/eui": "^95.12.0",
70-
"@emotion/cache": "^11.13.1",
71-
"@emotion/css": "^11.13.0",
72-
"@emotion/react": "^11.13.3",
69+
"@elastic/eui": "^98.1.0",
70+
"@emotion/cache": "^11.14.0",
71+
"@emotion/css": "^11.13.5",
72+
"@emotion/react": "^11.14.0",
7373
"@react-spring/web": "^9.7.4",
7474
"@sentry/electron": "^5.8.0",
7575
"@sentry/nextjs": "^8.45.0",

0 commit comments

Comments
 (0)