186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use single quotes :P

Browse Source
This commit is contained in:
Michael Jackson
2018-12-17 09:38:05 -08:00
parent ada37035cd
commit 19b2e5574b
93 changed files with 792 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
modules/client/MainPage.js
View File

@ -1,8 +1,8 @@
const React = require("react");
const PropTypes = require("prop-types");
const React = require('react');
const PropTypes = require('prop-types');
const createHTML = require("./utils/createHTML");
const x = require("./utils/execScript");
const createHTML = require('./utils/createHTML');
const x = require('./utils/execScript');
function MainPage({ title, description, scripts, styles, data, content }) {
return (
@ -17,19 +17,23 @@ function MainPage({ title, description, scripts, styles, data, content }) {
/>
<meta name="timestamp" content={new Date().toISOString()} />
<link rel="shortcut icon" href="/favicon.ico" />
{styles.map(s => <link key={s} rel="stylesheet" href={s} />)}
{styles.map(s => (
<link key={s} rel="stylesheet" href={s} />
))}
{x(
"window.Promise || document.write('\\x3Cscript src=\"/_polyfills/es6-promise.min.js\">\\x3C/script>\\x3Cscript>ES6Promise.polyfill()\\x3C/script>')"
'window.Promise || document.write(\'\\x3Cscript src="/_polyfills/es6-promise.min.js">\\x3C/script>\\x3Cscript>ES6Promise.polyfill()\\x3C/script>\')'
)}
{x(
"window.fetch || document.write('\\x3Cscript src=\"/_polyfills/fetch.min.js\">\\x3C/script>')"
'window.fetch || document.write(\'\\x3Cscript src="/_polyfills/fetch.min.js">\\x3C/script>\')'
)}
{x(`window.__DATA__ = ${JSON.stringify(data)}`)}
<title>{title}</title>
</head>
<body>
<div id="root" dangerouslySetInnerHTML={content} />
{scripts.map(s => <script key={s} src={s} />)}
{scripts.map(s => (
<script key={s} src={s} />
))}
</body>
</html>
);
@ -49,12 +53,12 @@ MainPage.propTypes = {
};
MainPage.defaultProps = {
title: "UNPKG",
description: "The CDN for everything on npm",
title: 'UNPKG',
description: 'The CDN for everything on npm',
scripts: [],
styles: [],
data: {},
content: createHTML("")
content: createHTML('')
};
module.exports = MainPage;

10
modules/client/autoIndex.js
View File

@ -1,10 +1,10 @@
require("./autoIndex.css");
require('./autoIndex.css');
const React = require("react");
const ReactDOM = require("react-dom");
const React = require('react');
const ReactDOM = require('react-dom');
const App = require("./autoIndex/App");
const App = require('./autoIndex/App');
const props = window.__DATA__ || {};
ReactDOM.hydrate(<App {...props} />, document.getElementById("root"));
ReactDOM.hydrate(<App {...props} />, document.getElementById('root'));

16
modules/client/autoIndex/App.js
View File

@ -1,8 +1,8 @@
require("./App.css");
require('./App.css');
const React = require("react");
const React = require('react');
const DirectoryListing = require("./DirectoryListing");
const DirectoryListing = require('./DirectoryListing');
class App extends React.Component {
static defaultProps = {
@ -11,8 +11,8 @@ class App extends React.Component {
handleChange = event => {
window.location.href = window.location.href.replace(
"@" + this.props.packageVersion,
"@" + event.target.value
'@' + this.props.packageVersion,
'@' + event.target.value
);
};
@ -26,7 +26,7 @@ class App extends React.Component {
</h1>
<div className="app-version-selector">
Version:{" "}
Version:{' '}
<select
id="version"
defaultValue={this.props.packageVersion}
@ -59,8 +59,8 @@ class App extends React.Component {
}
}
if (process.env.NODE_ENV === "development") {
const PropTypes = require("prop-types");
if (process.env.NODE_ENV === 'development') {
const PropTypes = require('prop-types');
const entryType = PropTypes.object;

32
modules/client/autoIndex/DirectoryListing.js
View File

@ -1,20 +1,20 @@
require("./DirectoryListing.css");
require('./DirectoryListing.css');
const React = require("react");
const formatBytes = require("pretty-bytes");
const sortBy = require("sort-by");
const React = require('react');
const formatBytes = require('pretty-bytes');
const sortBy = require('sort-by');
function getDirname(name) {
return (
name
.split("/")
.split('/')
.slice(0, -1)
.join("/") || "."
.join('/') || '.'
);
}
function getMatchingEntries(entry, entries) {
const dirname = entry.name || ".";
const dirname = entry.name || '.';
return Object.keys(entries)
.filter(name => entry.name !== name && getDirname(name) === dirname)
@ -28,7 +28,7 @@ function getRelativeName(base, name) {
function DirectoryListing({ filename, entry, entries }) {
const rows = [];
if (filename !== "/") {
if (filename !== '/') {
rows.push(
<tr key="..">
<td>
@ -46,11 +46,11 @@ function DirectoryListing({ filename, entry, entries }) {
const matchingEntries = getMatchingEntries(entry, entries);
matchingEntries
.filter(({ type }) => type === "directory")
.sort(sortBy("name"))
.filter(({ type }) => type === 'directory')
.sort(sortBy('name'))
.forEach(({ name }) => {
const relName = getRelativeName(entry.name, name);
const href = relName + "/";
const href = relName + '/';
rows.push(
<tr key={name}>
@ -67,8 +67,8 @@ function DirectoryListing({ filename, entry, entries }) {
});
matchingEntries
.filter(({ type }) => type === "file")
.sort(sortBy("name"))
.filter(({ type }) => type === 'file')
.sort(sortBy('name'))
.forEach(({ name, size, contentType, lastModified }) => {
const relName = getRelativeName(entry.name, name);
@ -100,7 +100,7 @@ function DirectoryListing({ filename, entry, entries }) {
<tbody>
{rows.map((row, index) =>
React.cloneElement(row, {
className: index % 2 ? "odd" : "even"
className: index % 2 ? 'odd' : 'even'
})
)}
</tbody>
@ -109,8 +109,8 @@ function DirectoryListing({ filename, entry, entries }) {
);
}
if (process.env.NODE_ENV === "development") {
const PropTypes = require("prop-types");
if (process.env.NODE_ENV === 'development') {
const PropTypes = require('prop-types');
const entryType = PropTypes.shape({
name: PropTypes.string.isRequired

10
modules/client/main.js
View File

@ -1,8 +1,8 @@
require("./main.css");
require('./main.css');
const React = require("react");
const ReactDOM = require("react-dom");
const React = require('react');
const ReactDOM = require('react-dom');
const App = require("./main/App");
const App = require('./main/App');
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById('root'));

8
modules/client/main/About.js
View File

@ -1,9 +1,9 @@
require("./About.css");
require('./About.css');
const React = require("react");
const React = require('react');
const h = require("../utils/createHTML");
const markup = require("./About.md");
const h = require('../utils/createHTML');
const markup = require('./About.md');
function About() {
return <div className="wrapper" dangerouslySetInnerHTML={h(markup)} />;

6
modules/client/main/App.js
View File

@ -1,7 +1,7 @@
const React = require("react");
const { HashRouter } = require("react-router-dom");
const React = require('react');
const { HashRouter } = require('react-router-dom');
const Layout = require("./Layout");
const Layout = require('./Layout');
function App() {
return (

8
modules/client/main/Home.js
View File

@ -1,9 +1,9 @@
require("./Home.css");
require('./Home.css');
const React = require("react");
const React = require('react');
const h = require("../utils/createHTML");
const markup = require("./Home.md");
const h = require('../utils/createHTML');
const markup = require('./Home.md');
function Home() {
return <div className="wrapper" dangerouslySetInnerHTML={h(markup)} />;

28
modules/client/main/Layout.js
View File

@ -1,14 +1,14 @@
require("./Layout.css");
require('./Layout.css');
const React = require("react");
const PropTypes = require("prop-types");
const { Switch, Route, Link, withRouter } = require("react-router-dom");
const { Motion, spring } = require("react-motion");
const React = require('react');
const PropTypes = require('prop-types');
const { Switch, Route, Link, withRouter } = require('react-router-dom');
const { Motion, spring } = require('react-motion');
const WindowSize = require("./WindowSize");
const About = require("./About");
const Stats = require("./Stats");
const Home = require("./Home");
const WindowSize = require('./WindowSize');
const About = require('./About');
const Stats = require('./Stats');
const Home = require('./Home');
class Layout extends React.Component {
static propTypes = {
@ -26,18 +26,18 @@ class Layout extends React.Component {
adjustUnderline = (useSpring = false) => {
let itemIndex;
switch (this.props.location.pathname) {
case "/stats":
case '/stats':
itemIndex = 1;
break;
case "/about":
case '/about':
itemIndex = 2;
break;
case "/":
case '/':
default:
itemIndex = 0;
}
const itemNodes = this.listNode.querySelectorAll("li");
const itemNodes = this.listNode.querySelectorAll('li');
const currentNode = itemNodes[itemIndex];
this.setState({
@ -50,7 +50,7 @@ class Layout extends React.Component {
componentDidMount() {
this.adjustUnderline();
fetch("/api/stats?period=last-month")
fetch('/api/stats?period=last-month')
.then(res => res.json())
.then(stats => this.setState({ stats }));

100
modules/client/main/Stats.js
View File

@ -1,14 +1,14 @@
require("./Stats.css");
require('./Stats.css');
const React = require("react");
const PropTypes = require("prop-types");
const formatBytes = require("pretty-bytes");
const formatDate = require("date-fns/format");
const parseDate = require("date-fns/parse");
const { continents, countries } = require("countries-list");
const React = require('react');
const PropTypes = require('prop-types');
const formatBytes = require('pretty-bytes');
const formatDate = require('date-fns/format');
const parseDate = require('date-fns/parse');
const { continents, countries } = require('countries-list');
const formatNumber = require("../utils/formatNumber");
const formatPercent = require("../utils/formatPercent");
const formatNumber = require('../utils/formatNumber');
const formatPercent = require('../utils/formatPercent');
function getCountriesByContinent(continent) {
return Object.keys(countries).filter(
@ -68,15 +68,15 @@ class Stats extends React.Component {
</a>
</td>
<td>
{formatNumber(requests)} ({formatPercent(
requests / totals.requests.all
)}%)
{formatNumber(requests)} (
{formatPercent(requests / totals.requests.all)}
%)
</td>
{bandwidth ? (
<td>
{formatBytes(bandwidth)} ({formatPercent(
bandwidth / totals.bandwidth.all
)}%)
{formatBytes(bandwidth)} (
{formatPercent(bandwidth / totals.bandwidth.all)}
%)
</td>
) : (
<td>-</td>
@ -120,16 +120,16 @@ class Stats extends React.Component {
</td>
<td>
<strong>
{formatNumber(continentData.requests)} ({formatPercent(
continentData.requests / totals.requests.all
)}%)
{formatNumber(continentData.requests)} (
{formatPercent(continentData.requests / totals.requests.all)}
%)
</strong>
</td>
<td>
<strong>
{formatBytes(continentData.bandwidth)} ({formatPercent(
continentData.bandwidth / totals.bandwidth.all
)}%)
{formatBytes(continentData.bandwidth)} (
{formatPercent(continentData.bandwidth / totals.bandwidth.all)}
%)
</strong>
</td>
</tr>
@ -148,14 +148,14 @@ class Stats extends React.Component {
<tr key={continent + country} className="country-row">
<td className="country-name">{countries[country].name}</td>
<td>
{formatNumber(countryRequests)} ({formatPercent(
countryRequests / totals.requests.all
)}%)
{formatNumber(countryRequests)} (
{formatPercent(countryRequests / totals.requests.all)}
%)
</td>
<td>
{formatBytes(countryBandwidth)} ({formatPercent(
countryBandwidth / totals.bandwidth.all
)}%)
{formatBytes(countryBandwidth)} (
{formatPercent(countryBandwidth / totals.bandwidth.all)}
%)
</td>
</tr>
);
@ -176,9 +176,9 @@ class Stats extends React.Component {
<tr key={protocol}>
<td>{protocol}</td>
<td>
{formatNumber(requests)} ({formatPercent(
requests / sumValues(totals.requests.protocol)
)}%)
{formatNumber(requests)} (
{formatPercent(requests / sumValues(totals.requests.protocol))}
%)
</td>
</tr>
);
@ -187,29 +187,29 @@ class Stats extends React.Component {
return (
<div className="wrapper">
<p>
From <strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> unpkg served{" "}
From <strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> unpkg served{' '}
<strong>{formatNumber(totals.requests.all)}</strong> requests and a
total of <strong>{formatBytes(totals.bandwidth.all)}</strong> of data
to <strong>{formatNumber(totals.uniques.all)}</strong> unique
visitors,{" "}
visitors,{' '}
<strong>
{formatPercent(totals.requests.cached / totals.requests.all, 0)}%
</strong>{" "}
</strong>{' '}
of which were served from the cache.
</p>
<h3>Packages</h3>
<p>
The table below shows the most popular packages served by unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong>. Only the top{" "}
The table below shows the most popular packages served by unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong>. Only the top{' '}
{Object.keys(totals.requests.package).length} packages are shown.
</p>
<p className="table-filter">
Include only packages that received at least{" "}
Include only packages that received at least{' '}
<select
value={this.state.minPackageRequests}
onChange={event =>
@ -224,11 +224,11 @@ class Stats extends React.Component {
<option value="100000">100,000</option>
<option value="1000000">1,000,000</option>
<option value="10000000">10,000,000</option>
</select>{" "}
</select>{' '}
requests.
</p>
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>
@ -248,13 +248,13 @@ class Stats extends React.Component {
<h3>Regions</h3>
<p>
The table below breaks down requests to unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> by geographic region.
The table below breaks down requests to unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> by geographic region.
</p>
<p className="table-filter">
Include only countries that made at least{" "}
Include only countries that made at least{' '}
<select
value={this.state.minCountryRequests}
onChange={event =>
@ -268,14 +268,14 @@ class Stats extends React.Component {
<option value="1000000">1,000,000</option>
<option value="10000000">10,000,000</option>
<option value="100000000">100,000,000</option>
</select>{" "}
</select>{' '}
requests.
</p>
<table
cellSpacing="0"
cellPadding="0"
style={{ width: "100%" }}
style={{ width: '100%' }}
className="regions-table"
>
<thead>
@ -297,12 +297,12 @@ class Stats extends React.Component {
<h3>Protocols</h3>
<p>
The table below breaks down requests to unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> by HTTP protocol.
The table below breaks down requests to unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> by HTTP protocol.
</p>
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>

10
modules/client/main/WindowSize.js
View File

@ -1,10 +1,10 @@
const React = require("react");
const PropTypes = require("prop-types");
const React = require('react');
const PropTypes = require('prop-types');
const addEvent = require("../utils/addEvent");
const removeEvent = require("../utils/removeEvent");
const addEvent = require('../utils/addEvent');
const removeEvent = require('../utils/removeEvent');
const resizeEvent = "resize";
const resizeEvent = 'resize';
class WindowSize extends React.Component {
static propTypes = {

2
modules/client/utils/addEvent.js
View File

@ -2,7 +2,7 @@ function addEvent(node, type, handler) {
if (node.addEventListener) {
node.addEventListener(type, handler, false);
} else if (node.attachEvent) {
node.attachEvent("on" + type, handler);
node.attachEvent('on' + type, handler);
}
}

4
modules/client/utils/execScript.js
View File

@ -1,6 +1,6 @@
const React = require("react");
const React = require('react');
const h = require("./createHTML");
const h = require('./createHTML');
function execScript(code) {
return <script dangerouslySetInnerHTML={h(code)} />;

6
modules/client/utils/formatNumber.js
View File

@ -1,12 +1,12 @@
function formatNumber(n) {
const digits = String(n).split("");
const digits = String(n).split('');
const groups = [];
while (digits.length) {
groups.unshift(digits.splice(-3).join(""));
groups.unshift(digits.splice(-3).join(''));
}
return groups.join(",");
return groups.join(',');
}
module.exports = formatNumber;

2
modules/client/utils/parseNumber.js
View File

@ -1,5 +1,5 @@
function parseNumber(s) {
return parseInt(s.replace(/,/g, ""), 10) || 0;
return parseInt(s.replace(/,/g, ''), 10) || 0;
}
module.exports = parseNumber;

2
modules/client/utils/removeEvent.js
View File

@ -2,7 +2,7 @@ function removeEvent(node, type, handler) {
if (node.removeEventListener) {
node.removeEventListener(type, handler, false);
} else if (node.detachEvent) {
node.detachEvent("on" + type, handler);
node.detachEvent('on' + type, handler);
}
}