mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Provide a debug way of preact compatibility (#7670)

Browse Source 
* try preact

* Add start:preact to scripts

* fix webpack.config.js
This commit is contained in:
偏右 2017-09-20 14:57:48 +08:00 committed by GitHub
parent 8904b50720
commit 0ffccf8b0f
4 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -123,6 +123,8 @@
"mockdate": "^2.0.1", "mockdate": "^2.0.1",
"moment-timezone": "^0.5.5", "moment-timezone": "^0.5.5",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"preact": "^8.2.5",
"preact-compat": "^3.17.0",
"querystring": "^0.2.0", "querystring": "^0.2.0",
"rc-queue-anim": "^1.0.1", "rc-queue-anim": "^1.0.1",
"rc-scroll-anim": "^1.0.3", "rc-scroll-anim": "^1.0.3",
@ -160,7 +162,8 @@
"dist": "antd-tools run dist", "dist": "antd-tools run dist",
"compile": "antd-tools run compile", "compile": "antd-tools run compile",
"tsc": "tsc", "tsc": "tsc",
"start": "cross-env NODE_ENV=development node ./scripts/generateColorLess.js && bisheng start -c ./site/bisheng.config.js --no-livereload", "start": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js --no-livereload",
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js --no-livereload",
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js", "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js",
"deploy": "antd-tools run clean && npm run site && node ./scripts/generateColorLess.js && bisheng gh-pages --push-only", "deploy": "antd-tools run clean && npm run site && node ./scripts/generateColorLess.js && bisheng gh-pages --push-only",
"pub": "antd-tools run pub", "pub": "antd-tools run pub",

19
site/bisheng.config.js
View File

@ -2,6 +2,7 @@ const path = require('path');
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default; const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
const isDev = process.env.NODE_ENV === 'development'; const isDev = process.env.NODE_ENV === 'development';
const usePreact = process.env.REACT_ENV === 'preact';
module.exports = { module.exports = {
port: 8001, port: 8001,
@ -65,11 +66,21 @@ module.exports = {
config.externals = { config.externals = {
'react-router-dom': 'ReactRouterDOM', 'react-router-dom': 'ReactRouterDOM',
}; };
if (isDev) {
Object.assign(config.externals, { if (usePreact) {
config.resolve.alias = {
...config.resolve.alias,
react: 'preact-compat',
'react-dom': 'preact-compat',
'create-react-class': 'preact-compat/lib/create-react-class',
'react-router': 'react-router',
};
} else {
config.externals = {
...config.externals,
react: 'React', react: 'React',
'react-dom': 'ReactDOM', 'react-dom': 'ReactDOM',
}); };
} }
config.babel.plugins.push([ config.babel.plugins.push([
@ -84,7 +95,9 @@ module.exports = {
return config; return config;
}, },
htmlTemplateExtraData: { htmlTemplateExtraData: {
isDev, isDev,
usePreact,
}, },
}; };

12
site/theme/static/template.html
View File

@ -109,13 +109,15 @@
</head> </head>
<body> <body>
<div id="react-content"> <div id="react-content">
{% if isDev %}
<script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.js,react/15.6.1/react-dom.js"></script>
{% else %}
<script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.min.js,react/15.6.1/react-dom.min.js"></script>
{% endif %}
{{ content | safe }} {{ content | safe }}
</div> </div>
{% if not usePreact %}
{% if isDev %}
<script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.js,react/15.6.1/react-dom.js"></script>
{% else %}
<script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.min.js,react/15.6.1/react-dom.min.js"></script>
{% endif %}
{% endif %}
<script src="{{ root }}common.js"></script> <script src="{{ root }}common.js"></script>
<script src="{{ root }}index.js"></script> <script src="{{ root }}index.js"></script>
</body> </body>

12
site/theme/template/Content/MainContent.jsx
View File

@ -170,22 +170,20 @@ export default class MainContent extends React.Component {
} }
flattenMenu(menu) { flattenMenu(menu) {
if (menu.type === Menu.Item) { if (menu && menu.type && !menu.type.isSubMenu && !menu.type.isMenuItemGroup) {
return menu; return menu;
} }
if (Array.isArray(menu)) { if (Array.isArray(menu)) {
return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []); return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []);
} }
return this.flattenMenu((menu.props && menu.props.children) || menu.children);
return this.flattenMenu(menu.props.children);
} }
getFooterNav(menuItems, activeMenuItem) { getFooterNav(menuItems, activeMenuItem) {
const menuItemsList = this.flattenMenu(menuItems); const menuItemsList = this.flattenMenu(menuItems);
let activeMenuItemIndex = -1; let activeMenuItemIndex = -1;
menuItemsList.forEach((menuItem, i) => { menuItemsList.forEach((menuItem, i) => {
if (menuItem.key === activeMenuItem) { if (menuItem && menuItem.key === activeMenuItem) {
activeMenuItemIndex = i; activeMenuItemIndex = i;
} }
}); });
@ -236,12 +234,12 @@ export default class MainContent extends React.Component {
<section className="prev-next-nav"> <section className="prev-next-nav">
{ {
prev ? prev ?
React.cloneElement(prev.props.children, { className: 'prev-page' }) : React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) :
null null
} }
{ {
next ? next ?
React.cloneElement(next.props.children, { className: 'next-page' }) : React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) :
null null
} }
</section> </section>