diff --git a/client/webpack-hot-middleware-client.js b/client/webpack-hot-middleware-client.js index f97c5853..ac8a7fc0 100644 --- a/client/webpack-hot-middleware-client.js +++ b/client/webpack-hot-middleware-client.js @@ -30,7 +30,16 @@ export default () => { return } - const { err } = Router.components[route] || {} + const { err, Component } = Router.components[route] || {} + + if (!Component) { + // This only happens when we create a new page without a default export. + // If you removed a default export from a exising viewing page, this has no effect. + console.log(`Hard reloading due to no default component in page: ${route}`) + window.location.reload() + return + } + if (err) { // reload to recover from runtime errors Router.reload(route) diff --git a/examples/layout-component/components/layout.js b/examples/layout-component/components/layout.js index 2194b583..d96a8434 100644 --- a/examples/layout-component/components/layout.js +++ b/examples/layout-component/components/layout.js @@ -19,7 +19,7 @@ export default ({ children, title = 'This is the default title' }) => ( { children } ) diff --git a/examples/with-scoped-stylesheets-and-postcss/.babelrc b/examples/with-ant-design/.babelrc similarity index 57% rename from examples/with-scoped-stylesheets-and-postcss/.babelrc rename to examples/with-ant-design/.babelrc index be365edb..d3c9e3f8 100644 --- a/examples/with-scoped-stylesheets-and-postcss/.babelrc +++ b/examples/with-ant-design/.babelrc @@ -3,8 +3,8 @@ "next/babel" ], "plugins": [ - ["wrap-in-js", { - "extensions": ["css$"] + ["import", { + "libraryName": "antd" }] ] } diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md new file mode 100644 index 00000000..efa5cf4a --- /dev/null +++ b/examples/with-ant-design/README.md @@ -0,0 +1,29 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-ant-design) + +# Ant Design example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-ant-design +cd with-ant-design +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework. diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json new file mode 100644 index 00000000..a97c8497 --- /dev/null +++ b/examples/with-ant-design/package.json @@ -0,0 +1,18 @@ +{ + "name": "with-ant-design", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "antd": "^2.10.2", + "babel-plugin-import": "^1.1.1", + "next": "latest", + "react": "^15.5.4", + "react-dom": "^15.5.4" + }, + "author": "", + "license": "ISC" +} diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js new file mode 100644 index 00000000..83320a26 --- /dev/null +++ b/examples/with-ant-design/pages/index.js @@ -0,0 +1,74 @@ +import Head from 'next/head' +import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, LocaleProvider } from 'antd' +import enUS from 'antd/lib/locale-provider/en_US' + +const FormItem = Form.Item +const Option = Select.Option + +export default () => ( + +
+ + + +
+ + + Link + + + + + + + + + + + + + + + + + + + + + +
+
+ +) diff --git a/examples/with-antd-mobile/.babelrc b/examples/with-antd-mobile/.babelrc new file mode 100644 index 00000000..3a6db05f --- /dev/null +++ b/examples/with-antd-mobile/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + [ + "import", + { + "libraryName": "antd-mobile" + } + ] + ] +} diff --git a/examples/with-antd-mobile/README.md b/examples/with-antd-mobile/README.md new file mode 100644 index 00000000..a92fa248 --- /dev/null +++ b/examples/with-antd-mobile/README.md @@ -0,0 +1,28 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui) +# Ant Design Mobile example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-antd-mobile +cd with-antd-mobile +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framwork) with Next.js. diff --git a/examples/with-antd-mobile/components/Layout.js b/examples/with-antd-mobile/components/Layout.js new file mode 100644 index 00000000..b1777f62 --- /dev/null +++ b/examples/with-antd-mobile/components/Layout.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react' +import { LocaleProvider } from 'antd-mobile' +import enUS from 'antd-mobile/lib/locale-provider/en_US' + +export default class Layout extends Component { + render () { + const { language, children } = this.props + const locale = language.substr(0, 2) === 'en' ? enUS : undefined + + return ( + + {children} + + ) + } +} diff --git a/examples/with-antd-mobile/components/MenuBar.js b/examples/with-antd-mobile/components/MenuBar.js new file mode 100644 index 00000000..e62cbff6 --- /dev/null +++ b/examples/with-antd-mobile/components/MenuBar.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import Router from 'next/router' +import { TabBar, Icon } from 'antd-mobile' + +export default class MenuBar extends Component { + render () { + const { + pathname, + children + } = this.props + + return ( + + {tabBarData.map(({ title, icon, selectedIcon, link, dot, component: Component }) => ( + } + selectedIcon={} + selected={pathname === link} + onPress={() => Router.push(link)} + > + {children} + + ))} + + ) + } +} + +const tabBarData = [ + { + title: 'Home', + icon: 'koubei-o', + selectedIcon: 'koubei', + link: '/home' + }, + { + title: 'Trick', + icon: 'check-circle-o', + selectedIcon: 'check-circle', + link: '/trick' + } +] diff --git a/examples/with-antd-mobile/next.config.js b/examples/with-antd-mobile/next.config.js new file mode 100644 index 00000000..1b7e78dc --- /dev/null +++ b/examples/with-antd-mobile/next.config.js @@ -0,0 +1,54 @@ +const path = require('path') +const fs = require('fs') +const requireHacker = require('require-hacker') + +function setupRequireHacker () { + requireHacker.resolver((filename, module) => { + if (filename.endsWith('/style/css')) { + return requireHacker.resolve(`${filename}.web.js`, module) + } + }) + + requireHacker.hook('js', filename => { + if ( + filename.endsWith('.web.js') || + !filename.includes('/node_modules/') || + ['antd-mobile', 'rc-swipeout', 'rmc-picker'].every(p => !filename.includes(p)) + ) return + + const webjs = filename.replace(/\.js$/, '.web.js') + if (!fs.existsSync(webjs)) return + + return fs.readFileSync(webjs, { encoding: 'utf8' }) + }) + + requireHacker.hook('css', () => '') + + requireHacker.hook('svg', filename => { + return requireHacker.to_javascript_module_source(fs.readFileSync(filename, { encoding: 'utf8' })) + }) +} + +setupRequireHacker() + +function moduleDir (m) { + return path.dirname(require.resolve(`${m}/package.json`)) +} + +module.exports = { + webpack: (config, { dev }) => { + config.resolve.extensions = ['.web.js', '.js', '.json'] + + config.module.rules.push( + { + test: /\.(svg)$/i, + loader: 'svg-sprite-loader', + include: [ + moduleDir('antd-mobile') + ] + } + ) + + return config + } +} diff --git a/examples/with-antd-mobile/package.json b/examples/with-antd-mobile/package.json new file mode 100644 index 00000000..e6174c81 --- /dev/null +++ b/examples/with-antd-mobile/package.json @@ -0,0 +1,16 @@ +{ + "dependencies": { + "antd-mobile": "^1.1.2", + "babel-plugin-import": "^1.1.1", + "next": "latest", + "react": "^15.5.4", + "react-dom": "^15.5.4", + "require-hacker": "^3.0.0", + "svg-sprite-loader": "~0.3.0" + }, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + } +} diff --git a/examples/with-antd-mobile/pages/_document.js b/examples/with-antd-mobile/pages/_document.js new file mode 100644 index 00000000..2c4e9b36 --- /dev/null +++ b/examples/with-antd-mobile/pages/_document.js @@ -0,0 +1,18 @@ +import Document, { Head, Main, NextScript } from 'next/document' + +export default class extends Document { + render () { + return ( + + +