mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

docs: antd component export by page level (#43762)

Browse Source 
* chore: init for clean

* docs: comment

* chore: ping

* fix: lint

* chore: clean up
This commit is contained in:
二货爱吃白萝卜 2023-07-27 16:22:53 +08:00 committed by GitHub
parent 6ff18d1786
commit 7c1d913f49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -4,10 +4,12 @@ import {
logicalPropertiesLinter,
parentSelectorLinter,
StyleProvider,
extractStyle,
} from '@ant-design/cssinjs';
import { App, theme as antdTheme } from 'antd';
import type { DirectionType } from 'antd/es/config-provider';
import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
import { useServerInsertedHTML } from 'umi';
import React, { useCallback, useEffect, useMemo } from 'react';
import useLayoutState from '../../hooks/useLayoutState';
import SiteThemeProvider from '../SiteThemeProvider';
@ -22,10 +24,10 @@ type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
const RESPONSIVE_MOBILE = 768;
const styleCache = createCache();
if (typeof global !== 'undefined') {
(global as any).styleCache = styleCache;
}
// const styleCache = createCache();
// if (typeof global !== 'undefined') {
// (global as any).styleCache = styleCache;
// }
const getAlgorithm = (themes: ThemeName[] = []) =>
themes.map((theme) => {
@ -107,6 +109,13 @@ const GlobalLayout: React.FC = () => {
[isMobile, direction, updateSiteConfig, theme],
);
const [styleCache] = React.useState(() => createCache());
useServerInsertedHTML(() => {
const styleText = extractStyle(styleCache, true);
return <style data-type="antd-cssinjs" dangerouslySetInnerHTML={{ __html: styleText }} />;
});
const demoPage = pathname.startsWith('/~demos');
// ============================ Render ============================

50
.dumi/theme/plugin.ts
View File

@ -1,4 +1,3 @@
import { extractStyle } from '@ant-design/cssinjs';
import type { IApi, IRoute } from 'dumi';
import ReactTechStack from 'dumi/dist/techStacks/react';
import fs from 'fs';
@ -50,10 +49,10 @@ class AntdReactTechStack extends ReactTechStack {
const resolve = (p: string): string => require.resolve(p);
const RoutesPlugin = (api: IApi) => {
const ssrCssFileName = `ssr-${Date.now()}.css`;
// const ssrCssFileName = `ssr-${Date.now()}.css`;
const writeCSSFile = (key: string, hashKey: string, cssString: string) => {
const fileName = `emotion-${key}.${getHash(hashKey)}.css`;
const fileName = `style-${key}.${getHash(hashKey)}.css`;
const filePath = path.join(api.paths.absOutputPath, fileName);
@ -65,8 +64,13 @@ const RoutesPlugin = (api: IApi) => {
return fileName;
};
const addLinkStyle = (html: string, cssFile: string) => {
const addLinkStyle = (html: string, cssFile: string, prepend = false) => {
const prefix = api.userConfig.publicPath || api.config.publicPath;
if (prepend) {
return html.replace('<head>', `<head><link rel="stylesheet" href="${prefix + cssFile}">`);
}
return html.replace('</head>', `<link rel="stylesheet" href="${prefix + cssFile}"></head>`);
};
@ -132,6 +136,20 @@ const RoutesPlugin = (api: IApi) => {
file.content = addLinkStyle(file.content, cssFile);
});
// Insert antd style to head
const matchRegex = /<style data-type="antd-cssinjs">(.*)<\/style>/;
const matchList = file.content.match(matchRegex) || [];
let antdStyle = '';
matchList.forEach((text) => {
file.content = file.content.replace(text, '');
antdStyle = text.replace(matchRegex, '$1');
});
const cssFile = writeCSSFile('antd', antdStyle, antdStyle);
file.content = addLinkStyle(file.content, cssFile, true);
return file;
}),
);
@ -139,22 +157,24 @@ const RoutesPlugin = (api: IApi) => {
// add ssr css file to html
api.modifyConfig((memo) => {
memo.styles ??= [];
memo.styles.push(`/${ssrCssFileName}`);
// memo.styles.push(`/${ssrCssFileName}`);
return memo;
});
// generate ssr css file
api.onBuildHtmlComplete(() => {
// FIXME: This should not be empty @peachScript
const styleCache = (global as any)?.styleCache;
const styleText = styleCache ? extractStyle(styleCache) : '';
const styleTextWithoutStyleTag = styleText
.replace(/<style\s[^>]*>/g, '')
.replace(/<\/style>/g, '');
// zombieJ: Unique CSS file is large, we move to build css for each page.
// See the `modifyExportHTMLFiles` above.
fs.writeFileSync(`./_site/${ssrCssFileName}`, styleTextWithoutStyleTag, 'utf8');
});
// generate ssr css file
// api.onBuildHtmlComplete(() => {
// const styleCache = (global as any)?.styleCache;
// const styleText = styleCache ? extractStyle(styleCache) : '';
// const styleTextWithoutStyleTag = styleText
// .replace(/<style\s[^>]*>/g, '')
// .replace(/<\/style>/g, '');
// fs.writeFileSync(`./_site/${ssrCssFileName}`, styleTextWithoutStyleTag, 'utf8');
// });
api.modifyHTML(($) => {
$('head meta[name="viewport"]').attr('content', 'width=device-width');

1
CHANGELOG.en-US.md
View File

@ -15,7 +15,6 @@ timeline: true
---
## 5.7.3
`2023-07-24`