From 19925038baac0da3f665f5cadf4623c2bd7c61ab Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Wed, 19 Jul 2023 23:52:21 +0800 Subject: [PATCH] fix(core): `css.ts` hmr (#3317) --- .github/labeler.yml | 2 +- apps/README.md | 2 +- apps/core/.webpack/config.ts | 45 ++++++++++++++++--- apps/core/package.json | 1 + .../src/components/page-detail-editor.tsx | 4 +- tests/affine-local/e2e/router.spec.ts | 2 + yarn.lock | 10 +++++ 7 files changed, 56 insertions(+), 10 deletions(-) diff --git a/.github/labeler.yml b/.github/labeler.yml index 731861dbf4..70e81a6727 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -53,7 +53,7 @@ rust: package:y-indexeddb: 'packages/y-indexeddb/**/*' -app:web: 'apps/web/**/*' +app:core: 'apps/core/**/*' app:electron: 'apps/electron/**/*' diff --git a/apps/README.md b/apps/README.md index 356f6f7e98..ef34e75ebf 100644 --- a/apps/README.md +++ b/apps/README.md @@ -20,6 +20,6 @@ Server using [Nest.js](https://nestjs.com/). Storybook using [Storybook](https://storybook.js.org/). -## web +## Core AFFiNE Core Application using [React.js](https://reactjs.org/). diff --git a/apps/core/.webpack/config.ts b/apps/core/.webpack/config.ts index 22b08fc63f..00e405eb0d 100644 --- a/apps/core/.webpack/config.ts +++ b/apps/core/.webpack/config.ts @@ -209,7 +209,9 @@ export const createConfiguration: ( { test: /\.css$/, use: [ - MiniCssExtractPlugin.loader, + buildFlags.mode === 'development' + ? 'style-loader' + : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { @@ -243,7 +245,12 @@ export const createConfiguration: ( ...(IN_CI ? [] : [new webpack.ProgressPlugin({ percentBy: 'entries' })]), ...(buildFlags.mode === 'development' ? [new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })] - : []), + : [ + new MiniCssExtractPlugin({ + filename: `[name].[contenthash:8].css`, + ignoreOrder: true, + }), + ]), new HTMLPlugin({ template: join(rootPath, '.webpack', 'template.html'), inject: 'body', @@ -252,10 +259,6 @@ export const createConfiguration: ( chunks: ['index', 'plugin'], filename: 'index.html', }), - new MiniCssExtractPlugin({ - filename: `[name].[chunkhash:8].css`, - ignoreOrder: true, - }), new VanillaExtractPlugin(), new webpack.DefinePlugin({ 'process.env': JSON.stringify({}), @@ -291,6 +294,36 @@ export const createConfiguration: ( ); } + if (buildFlags.mode === 'development') { + config.optimization = { + ...config.optimization, + minimize: false, + runtimeChunk: false, + splitChunks: { + maxInitialRequests: Infinity, + chunks: 'all', + cacheGroups: { + defaultVendors: { + test: `[\\/]node_modules[\\/](?!.*vanilla-extract)`, + priority: -10, + reuseExistingChunk: true, + }, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true, + }, + styles: { + name: 'styles', + type: 'css/mini-extract', + chunks: 'all', + enforce: true, + }, + }, + }, + }; + } + if ( process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_ORG && diff --git a/apps/core/package.json b/apps/core/package.json index 9207aca1c0..45ac234e1e 100644 --- a/apps/core/package.json +++ b/apps/core/package.json @@ -70,6 +70,7 @@ "express": "^4.18.2", "html-webpack-plugin": "^5.5.3", "raw-loader": "^4.0.2", + "style-loader": "^3.3.3", "swc-loader": "^0.2.3", "swc-plugin-coverage-instrument": "^0.0.19", "thread-loader": "^4.0.2", diff --git a/apps/core/src/components/page-detail-editor.tsx b/apps/core/src/components/page-detail-editor.tsx index 0665978c92..70935fe7db 100644 --- a/apps/core/src/components/page-detail-editor.tsx +++ b/apps/core/src/components/page-detail-editor.tsx @@ -24,7 +24,7 @@ import { pageSettingFamily } from '../atoms'; import { contentLayoutAtom } from '../atoms/layout'; import { fontStyleOptions, useAppSetting } from '../atoms/settings'; import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor'; -import { editor } from './page-detail-editor.css'; +import * as styles from './page-detail-editor.css'; import { pluginContainer } from './page-detail-editor.css'; export type PageDetailEditorProps = { @@ -72,7 +72,7 @@ const EditorWrapper = memo(function EditorWrapper({ return ( { await openHomePage(page); await waitEditorLoad(page); const currentUrl = page.url(); + // if doesn't wait for timeout, data won't be saved into indexedDB + await page.waitForTimeout(1000); await page.goto(new URL('/workspace/invalid/all', webUrl).toString()); await waitEditorLoad(page); expect(page.url()).toEqual(currentUrl); diff --git a/yarn.lock b/yarn.lock index 9afc62ab24..71913de8ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -241,6 +241,7 @@ __metadata: react-resizable-panels: ^0.0.53 react-router-dom: ^6.14.1 rxjs: ^7.8.1 + style-loader: ^3.3.3 swc-loader: ^0.2.3 swc-plugin-coverage-instrument: ^0.0.19 swr: ^2.1.5 @@ -30171,6 +30172,15 @@ __metadata: languageName: node linkType: hard +"style-loader@npm:^3.3.3": + version: 3.3.3 + resolution: "style-loader@npm:3.3.3" + peerDependencies: + webpack: ^5.0.0 + checksum: f59c953f56f6a935bd6a1dfa409f1128fed2b66b48ce4a7a75b85862a7156e5e90ab163878962762f528ec4d510903d828da645e143fbffd26f055dc1c094078 + languageName: node + linkType: hard + "stylehacks@npm:^6.0.0": version: 6.0.0 resolution: "stylehacks@npm:6.0.0"