2023-03-01 18:52:48 +08:00
|
|
|
import fs from 'fs';
|
2023-07-20 19:27:33 +08:00
|
|
|
import path from 'path';
|
2023-07-28 16:17:43 +08:00
|
|
|
import { createHash } from 'crypto';
|
|
|
|
|
import type { IApi, IRoute } from 'dumi';
|
|
|
|
|
import ReactTechStack from 'dumi/dist/techStacks/react';
|
2023-07-20 19:27:33 +08:00
|
|
|
import chalk from 'chalk';
|
2022-11-09 12:28:04 +08:00
|
|
|
import sylvanas from 'sylvanas';
|
2023-08-11 19:37:53 +08:00
|
|
|
import createEmotionServer from '@emotion/server/create-instance';
|
2023-05-27 20:46:28 +08:00
|
|
|
import localPackage from '../../package.json';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
2023-08-11 19:37:53 +08:00
|
|
|
function extractEmotionStyle(html: string) {
|
|
|
|
|
// copy from emotion ssr
|
|
|
|
|
// https://github.com/vercel/next.js/blob/deprecated-main/examples/with-emotion-vanilla/pages/_document.js
|
|
|
|
|
const styles = global.__ANTD_STYLE_CACHE_MANAGER_FOR_SSR__.getCacheList().map((cache) => {
|
|
|
|
|
const result = createEmotionServer(cache).extractCritical(html);
|
|
|
|
|
if (!result.css) return null;
|
|
|
|
|
|
|
|
|
|
const { css, ids } = result;
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
key: cache.key,
|
|
|
|
|
css,
|
|
|
|
|
ids,
|
|
|
|
|
tag: `<style data-emotion="${cache.key} ${result.ids.join(' ')}">${result.css}</style>`,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
return styles.filter(Boolean);
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
export const getHash = (str: string, length = 8) =>
|
|
|
|
|
createHash('md5').update(str).digest('hex').slice(0, length);
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
/**
|
|
|
|
|
* extends dumi internal tech stack, for customize previewer props
|
|
|
|
|
*/
|
|
|
|
|
class AntdReactTechStack extends ReactTechStack {
|
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
|
|
|
generatePreviewerProps(...[props, opts]: any) {
|
|
|
|
|
if (opts.type === 'external') {
|
|
|
|
|
// try to find md file with the same name as the demo tsx file
|
|
|
|
|
const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1];
|
|
|
|
|
const mdPath = opts.fileAbsPath!.replace(/\.\w+$/, '.md');
|
|
|
|
|
const md = fs.existsSync(mdPath) ? fs.readFileSync(mdPath, 'utf-8') : '';
|
|
|
|
|
|
|
|
|
|
const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
|
|
|
|
|
const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
|
|
|
|
|
|
2023-10-07 09:45:27 +08:00
|
|
|
props.pkgDependencyList = {
|
|
|
|
|
...localPackage.devDependencies,
|
|
|
|
|
...localPackage.dependencies,
|
|
|
|
|
};
|
2022-11-09 12:28:04 +08:00
|
|
|
props.jsx = sylvanas.parseText(code);
|
|
|
|
|
|
|
|
|
|
if (md) {
|
|
|
|
|
// extract description & css style from md file
|
|
|
|
|
const description = md.match(
|
|
|
|
|
new RegExp(`(?:^|\\n)## ${locale}([^]+?)(\\n## [a-z]|\\n\`\`\`|\\n<style>|$)`),
|
|
|
|
|
)?.[1];
|
2023-01-06 12:36:43 +08:00
|
|
|
const style = md.match(/\r?\n(?:```css|<style>)\r?\n([^]+?)\r?\n(?:```|<\/style>)/)?.[1];
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
|
props.description ??= description?.trim();
|
|
|
|
|
props.style ??= style;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return props;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
const resolve = (p: string): string => require.resolve(p);
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
|
const RoutesPlugin = (api: IApi) => {
|
2023-07-27 16:22:53 +08:00
|
|
|
// const ssrCssFileName = `ssr-${Date.now()}.css`;
|
2022-11-09 12:28:04 +08:00
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
const writeCSSFile = (key: string, hashKey: string, cssString: string) => {
|
2023-07-27 16:22:53 +08:00
|
|
|
const fileName = `style-${key}.${getHash(hashKey)}.css`;
|
2023-07-20 19:27:33 +08:00
|
|
|
|
|
|
|
|
const filePath = path.join(api.paths.absOutputPath, fileName);
|
|
|
|
|
|
|
|
|
|
if (!fs.existsSync(filePath)) {
|
|
|
|
|
api.logger.event(chalk.grey(`write to: ${filePath}`));
|
|
|
|
|
fs.writeFileSync(filePath, cssString, 'utf8');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return fileName;
|
|
|
|
|
};
|
|
|
|
|
|
2023-07-27 16:22:53 +08:00
|
|
|
const addLinkStyle = (html: string, cssFile: string, prepend = false) => {
|
2023-07-20 19:27:33 +08:00
|
|
|
const prefix = api.userConfig.publicPath || api.config.publicPath;
|
2023-07-27 16:22:53 +08:00
|
|
|
|
|
|
|
|
if (prepend) {
|
|
|
|
|
return html.replace('<head>', `<head><link rel="stylesheet" href="${prefix + cssFile}">`);
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
return html.replace('</head>', `<link rel="stylesheet" href="${prefix + cssFile}"></head>`);
|
|
|
|
|
};
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
api.registerTechStack(() => new AntdReactTechStack());
|
|
|
|
|
|
2022-11-18 13:10:45 +08:00
|
|
|
api.modifyRoutes((routes) => {
|
2022-11-09 12:28:04 +08:00
|
|
|
// TODO: append extra routes, such as home, changelog, form-v3
|
|
|
|
|
|
|
|
|
|
const extraRoutesList: IRoute[] = [
|
|
|
|
|
{
|
|
|
|
|
id: 'changelog-cn',
|
|
|
|
|
path: 'changelog-cn',
|
|
|
|
|
absPath: '/changelog-cn',
|
|
|
|
|
parentId: 'DocLayout',
|
|
|
|
|
file: resolve('../../CHANGELOG.zh-CN.md'),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'changelog',
|
|
|
|
|
path: 'changelog',
|
|
|
|
|
absPath: '/changelog',
|
|
|
|
|
parentId: 'DocLayout',
|
|
|
|
|
file: resolve('../../CHANGELOG.en-US.md'),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
2022-11-18 13:10:45 +08:00
|
|
|
extraRoutesList.forEach((itemRoute) => {
|
2022-11-09 12:28:04 +08:00
|
|
|
routes[itemRoute.path] = itemRoute;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return routes;
|
|
|
|
|
});
|
|
|
|
|
|
2022-11-18 13:10:45 +08:00
|
|
|
api.modifyExportHTMLFiles((files) =>
|
2022-11-09 12:28:04 +08:00
|
|
|
files
|
|
|
|
|
// exclude dynamic route path, to avoid deploy failed by `:id` directory
|
2022-11-18 13:10:45 +08:00
|
|
|
.filter((f) => !f.path.includes(':'))
|
|
|
|
|
.map((file) => {
|
2023-07-20 19:27:33 +08:00
|
|
|
let globalStyles = '';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
2023-07-28 11:17:29 +08:00
|
|
|
// Debug for file content: uncomment this if need check raw out
|
|
|
|
|
// const tmpFileName = `_${file.path.replace(/\//g, '-')}`;
|
|
|
|
|
// const tmpFilePath = path.join(api.paths.absOutputPath, tmpFileName);
|
|
|
|
|
// fs.writeFileSync(tmpFilePath, file.content, 'utf8');
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
// extract all emotion style tags from body
|
2023-08-01 10:53:55 +08:00
|
|
|
file.content = file.content.replace(
|
|
|
|
|
/<style (data-emotion|data-sandpack)[\S\s]+?<\/style>/g,
|
|
|
|
|
(s) => {
|
|
|
|
|
globalStyles += s;
|
2022-12-01 16:10:53 +08:00
|
|
|
|
2023-08-01 10:53:55 +08:00
|
|
|
return '';
|
|
|
|
|
},
|
|
|
|
|
);
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
|
// insert emotion style tags to head
|
2023-07-20 19:27:33 +08:00
|
|
|
file.content = file.content.replace('</head>', `${globalStyles}</head>`);
|
|
|
|
|
|
|
|
|
|
// 1. 提取 antd-style 样式
|
2023-08-11 19:37:53 +08:00
|
|
|
const styles = extractEmotionStyle(file.content);
|
2023-07-20 19:27:33 +08:00
|
|
|
|
|
|
|
|
// 2. 提取每个样式到独立 css 文件
|
|
|
|
|
styles.forEach((result) => {
|
|
|
|
|
api.logger.event(
|
2023-10-13 18:18:07 +08:00
|
|
|
`${chalk.yellow(file.path)} include ${chalk.blue`[${result!.key}]`} ${chalk.yellow(
|
|
|
|
|
result!.ids.length,
|
2023-07-20 19:27:33 +08:00
|
|
|
)} styles`,
|
|
|
|
|
);
|
|
|
|
|
|
2023-10-13 18:18:07 +08:00
|
|
|
const cssFile = writeCSSFile(result!.key, result!.ids.join(''), result!.css);
|
2023-07-20 19:27:33 +08:00
|
|
|
|
|
|
|
|
file.content = addLinkStyle(file.content, cssFile);
|
|
|
|
|
});
|
2022-11-09 12:28:04 +08:00
|
|
|
|
2023-07-27 16:22:53 +08:00
|
|
|
// Insert antd style to head
|
2023-11-10 16:16:36 +08:00
|
|
|
const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
|
2023-07-27 16:22:53 +08:00
|
|
|
const matchList = file.content.match(matchRegex) || [];
|
|
|
|
|
|
|
|
|
|
let antdStyle = '';
|
|
|
|
|
|
|
|
|
|
matchList.forEach((text) => {
|
|
|
|
|
file.content = file.content.replace(text, '');
|
2023-08-01 10:53:55 +08:00
|
|
|
antdStyle += text.replace(matchRegex, '$1');
|
2023-07-27 16:22:53 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const cssFile = writeCSSFile('antd', antdStyle, antdStyle);
|
|
|
|
|
file.content = addLinkStyle(file.content, cssFile, true);
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
return file;
|
|
|
|
|
}),
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// add ssr css file to html
|
2022-11-18 13:10:45 +08:00
|
|
|
api.modifyConfig((memo) => {
|
2022-11-09 12:28:04 +08:00
|
|
|
memo.styles ??= [];
|
2023-07-27 16:22:53 +08:00
|
|
|
// memo.styles.push(`/${ssrCssFileName}`);
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
|
return memo;
|
|
|
|
|
});
|
|
|
|
|
|
2023-07-27 16:22:53 +08:00
|
|
|
// zombieJ: Unique CSS file is large, we move to build css for each page.
|
|
|
|
|
// See the `modifyExportHTMLFiles` above.
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
// generate ssr css file
|
2023-07-27 16:22:53 +08:00
|
|
|
// 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');
|
|
|
|
|
// });
|
2022-11-09 12:28:04 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default RoutesPlugin;
|
