From 0f5c584104b27a941104e08dc608d610272b6ec2 Mon Sep 17 00:00:00 2001 From: MICHAEL JACKSON Date: Sat, 25 Mar 2017 23:53:54 -0700 Subject: [PATCH] Rewrite frontend using create-react-app --- .eslintrc | 26 - .gitignore | 21 +- Procfile | 2 +- Procfile.local | 2 +- README.md | 12 +- .../client/components => client}/About.js | 0 .../client/components => client}/About.md | 6 +- client/App.js | 20 + client/App.test.js | 8 + {modules/client => client}/CloudflareLogo.png | Bin {modules/client => client}/CountryUtils.js | 0 {modules/client => client}/DOMUtils.js | 0 {modules/client => client}/HerokuLogo.png | Bin {modules/client/components => client}/Home.js | 0 {modules/client/components => client}/Home.md | 0 .../client/components => client}/Layout.js | 22 +- .../components => client}/NumberTextInput.js | 2 +- {modules/client => client}/NumberUtils.js | 0 .../client => client}/ReactTrainingLogo.png | Bin .../client/components => client}/Stats.js | 17 +- client/WindowSize.js | 32 + modules/client/styles.css => client/index.css | 0 client/index.js | 9 + config/env.js | 38 + config/jest/cssTransform.js | 14 + config/jest/fileTransform.js | 12 + config/paths.js | 80 + config/polyfills.js | 16 + config/webpack.config.dev.js | 217 + config/webpack.config.prod.js | 251 + modules/.babelrc | 10 - modules/PackageBlacklist.js | 4 - modules/client/.eslintrc | 5 - modules/client/components/Router.js | 51 - modules/client/components/Window.js | 26 - modules/client/history.js | 5 - modules/client/home.js | 10 - modules/register.js | 3 - modules/server/AssetsUtils.js | 147 - modules/server/CloudflareStats.json | 17443 --------------- modules/server/MainController.js | 47 - modules/server/ServerConfig.js | 18 - modules/server/components/HomePage.js | 48 - modules/server/index.js | 136 - package.json | 143 +- public/es6-promise.min.js | 1 - public/fetch.min.js | 1 - public/index.html | 24 + scripts/build.js | 160 + scripts/start.js | 318 + scripts/test.js | 21 + server.js | 12 + .../Cloudflare.js => server/cloudflare.js | 14 +- server/dev-data.json | 17445 ++++++++++++++++ server/index.js | 111 + .../server/StatsUtils.js => server/logging.js | 4 +- server/package-blacklist.json | 6 + tools/build.js | 16 - webpack.config.js | 48 - yarn.lock | 2335 ++- 60 files changed, 20489 insertions(+), 18930 deletions(-) delete mode 100644 .eslintrc rename {modules/client/components => client}/About.js (100%) rename {modules/client/components => client}/About.md (92%) create mode 100644 client/App.js create mode 100644 client/App.test.js rename {modules/client => client}/CloudflareLogo.png (100%) rename {modules/client => client}/CountryUtils.js (100%) rename {modules/client => client}/DOMUtils.js (100%) rename {modules/client => client}/HerokuLogo.png (100%) rename {modules/client/components => client}/Home.js (100%) rename {modules/client/components => client}/Home.md (100%) rename {modules/client/components => client}/Layout.js (82%) rename {modules/client/components => client}/NumberTextInput.js (94%) rename {modules/client => client}/NumberUtils.js (100%) rename {modules/client => client}/ReactTrainingLogo.png (100%) rename {modules/client/components => client}/Stats.js (93%) create mode 100644 client/WindowSize.js rename modules/client/styles.css => client/index.css (100%) create mode 100644 client/index.js create mode 100644 config/env.js create mode 100644 config/jest/cssTransform.js create mode 100644 config/jest/fileTransform.js create mode 100644 config/paths.js create mode 100644 config/polyfills.js create mode 100644 config/webpack.config.dev.js create mode 100644 config/webpack.config.prod.js delete mode 100644 modules/.babelrc delete mode 100644 modules/PackageBlacklist.js delete mode 100644 modules/client/.eslintrc delete mode 100644 modules/client/components/Router.js delete mode 100644 modules/client/components/Window.js delete mode 100644 modules/client/history.js delete mode 100644 modules/client/home.js delete mode 100644 modules/register.js delete mode 100644 modules/server/AssetsUtils.js delete mode 100644 modules/server/CloudflareStats.json delete mode 100644 modules/server/MainController.js delete mode 100644 modules/server/ServerConfig.js delete mode 100644 modules/server/components/HomePage.js delete mode 100644 modules/server/index.js delete mode 100644 public/es6-promise.min.js delete mode 100644 public/fetch.min.js create mode 100644 public/index.html create mode 100644 scripts/build.js create mode 100644 scripts/start.js create mode 100644 scripts/test.js create mode 100644 server.js rename modules/server/Cloudflare.js => server/cloudflare.js (84%) create mode 100644 server/dev-data.json create mode 100644 server/index.js rename modules/server/StatsUtils.js => server/logging.js (91%) create mode 100644 server/package-blacklist.json delete mode 100644 tools/build.js delete mode 100644 webpack.config.js diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 2e92947..0000000 --- a/.eslintrc +++ /dev/null @@ -1,26 +0,0 @@ -{ - "parser": "babel-eslint", - "plugins": [ - "import", - "react" - ], - "env": { - "es6": true, - "node": true - }, - "extends": [ - "eslint:recommended", - "plugin:import/errors", - "plugin:react/recommended" - ], - "settings": { - "import/resolver": "webpack" - }, - "rules": { - "array-bracket-spacing": [ 2, "always" ], - "eqeqeq": [ 2, "smart" ], - "prefer-arrow-callback": 2, - "react/no-danger": 0, - "semi": [ 2, "never" ] - } -} diff --git a/.gitignore b/.gitignore index 172119f..927d17b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,18 @@ -stats.json -public/__assets__ -lib +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env +npm-debug.log* +yarn-debug.log* +yarn-error.log* + diff --git a/Procfile b/Procfile index f706190..489b270 100644 --- a/Procfile +++ b/Procfile @@ -1 +1 @@ -web: node lib/server +web: node server.js diff --git a/Procfile.local b/Procfile.local index e3fa3bb..6a589de 100644 --- a/Procfile.local +++ b/Procfile.local @@ -1 +1 @@ -web: NODE_ENV=development node -r ./modules/register.js modules/server +web: NODE_ENV=development node server.js diff --git a/README.md b/README.md index 4b22b08..68879e5 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,11 @@ -The website for [unpkg](https://unpkg.com), built using [web-starter](https://github.com/mjackson/web-starter). +# unpkg -If you're interested in learning how the server works or you'd like to open an issue, you probably want [unpkg/npm-http-server](https://github.com/unpkg/npm-http-server) +[unpkg](https://unpkg.com) is a fast, global CDN for everything on [npm](https://www.npmjs.com/). + +The project is maintained by [React Training](https://reacttraining.com) with sponsorship from [Cloudflare](https://cloudflare.com) and [Heroku](https://heroku.com). + +## Development + +The website was built using [create-react-app](https://github.com/facebookincubator/create-react-app). This is the app you see when you run `yarn start`. However, none of the package links will work. + +To start the backend, use `yarn run serve`. This will start the backend so the website (which is really just a static HTML file) can serve as a proxy for package requests. diff --git a/modules/client/components/About.js b/client/About.js similarity index 100% rename from modules/client/components/About.js rename to client/About.js diff --git a/modules/client/components/About.md b/client/About.md similarity index 92% rename from modules/client/components/About.md rename to client/About.md index f0119cc..78c70fd 100644 --- a/modules/client/components/About.md +++ b/client/About.md @@ -2,7 +2,7 @@ unpkg is an [open source](https://github.com/mjackson/unpkg) project built by me
@@ -14,10 +14,10 @@ The fast, global infrastructure that powers unpkg is generously donated by [Clou
diff --git a/client/App.js b/client/App.js new file mode 100644 index 0000000..8a92172 --- /dev/null +++ b/client/App.js @@ -0,0 +1,20 @@ +import React from 'react' +import { HashRouter as Router, Switch, Route } from 'react-router-dom' +import Layout from './Layout' +import About from './About' +import Stats from './Stats' +import Home from './Home' + +const App = () => ( + + + + + + + + + +) + +export default App diff --git a/client/App.test.js b/client/App.test.js new file mode 100644 index 0000000..b84af98 --- /dev/null +++ b/client/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); +}); diff --git a/modules/client/CloudflareLogo.png b/client/CloudflareLogo.png similarity index 100% rename from modules/client/CloudflareLogo.png rename to client/CloudflareLogo.png diff --git a/modules/client/CountryUtils.js b/client/CountryUtils.js similarity index 100% rename from modules/client/CountryUtils.js rename to client/CountryUtils.js diff --git a/modules/client/DOMUtils.js b/client/DOMUtils.js similarity index 100% rename from modules/client/DOMUtils.js rename to client/DOMUtils.js diff --git a/modules/client/HerokuLogo.png b/client/HerokuLogo.png similarity index 100% rename from modules/client/HerokuLogo.png rename to client/HerokuLogo.png diff --git a/modules/client/components/Home.js b/client/Home.js similarity index 100% rename from modules/client/components/Home.js rename to client/Home.js diff --git a/modules/client/components/Home.md b/client/Home.md similarity index 100% rename from modules/client/components/Home.md rename to client/Home.md diff --git a/modules/client/components/Layout.js b/client/Layout.js similarity index 82% rename from modules/client/components/Layout.js rename to client/Layout.js index a25506c..e815ef4 100644 --- a/modules/client/components/Layout.js +++ b/client/Layout.js @@ -1,7 +1,8 @@ import React, { PropTypes } from 'react' -import { Motion, spring } from 'react-motion' import { findDOMNode } from 'react-dom' -import Window from './Window' +import { Motion, spring } from 'react-motion' +import { withRouter, Link } from 'react-router-dom' +import WindowSize from './WindowSize' class Layout extends React.Component { static propTypes = { @@ -39,15 +40,16 @@ class Layout extends React.Component { }) } - componentDidMount = () => + componentDidMount() { this.adjustUnderline() + } - componentDidUpdate = (prevProps) => { + componentDidUpdate(prevProps) { if (prevProps.location.pathname !== this.props.location.pathname) this.adjustUnderline(true) } - render = () => { + render() { const { underlineLeft, underlineWidth, useSpring } = this.state const style = { @@ -57,14 +59,14 @@ class Layout extends React.Component { return (
- +

unpkg