Load React + Emotion from CDN URLs, use globals
Remove @emotion/babel-preset-css-prop and import { jsx } from
@emotion/core directly instead so Rollup can preserve imports order when
bundling (instead of @emotion/core automatically inserting itself as the
first import).
This commit is contained in:
@ -1,8 +1,7 @@
|
||||
{
|
||||
"presets": [
|
||||
["@babel/preset-env", { "loose": true }],
|
||||
"@babel/preset-react",
|
||||
"@emotion/babel-preset-css-prop"
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-class-properties", { "loose": true }]
|
||||
|
||||
@ -15,7 +15,7 @@ export default function MainTemplate({
|
||||
favicon,
|
||||
data,
|
||||
content,
|
||||
entryPoints
|
||||
scripts
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
@ -36,22 +36,9 @@ export default function MainTemplate({
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" dangerouslySetInnerHTML={content} />
|
||||
{entryPoints.module &&
|
||||
x(`
|
||||
import('${entryPoints.module}');
|
||||
window.supportsDynamicImport = true;
|
||||
`)}
|
||||
{entryPoints.nomodule &&
|
||||
x(`
|
||||
if (!window.supportsDynamicImport) {
|
||||
var s = document.createElement('script');
|
||||
s.src = '/systemjs@2.0.0/dist/s.min.js';
|
||||
s.addEventListener('load', function() {
|
||||
System.import('${entryPoints.nomodule}');
|
||||
});
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
`)}
|
||||
{scripts.map(src => (
|
||||
<script key={src} src={src} />
|
||||
))}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
@ -61,7 +48,8 @@ MainTemplate.defaultProps = {
|
||||
title: 'UNPKG',
|
||||
description: 'The CDN for everything on npm',
|
||||
favicon: '/favicon.ico',
|
||||
content: createHTML('')
|
||||
content: createHTML(''),
|
||||
scripts: []
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
@ -75,9 +63,6 @@ if (process.env.NODE_ENV !== 'production') {
|
||||
favicon: PropTypes.string,
|
||||
data: PropTypes.any,
|
||||
content: htmlType,
|
||||
entryPoints: PropTypes.shape({
|
||||
module: PropTypes.string,
|
||||
nomodule: PropTypes.string
|
||||
}).isRequired
|
||||
scripts: PropTypes.arrayOf(PropTypes.string)
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/** @jsx jsx */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Global, css } from '@emotion/core';
|
||||
import { Global, css, jsx } from '@emotion/core';
|
||||
|
||||
import DirectoryListing from './DirectoryListing';
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/** @jsx jsx */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { jsx } from '@emotion/core';
|
||||
import formatBytes from 'pretty-bytes';
|
||||
import sortBy from 'sort-by';
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/** @jsx jsx */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Global, css } from '@emotion/core';
|
||||
import { Global, css, jsx } from '@emotion/core';
|
||||
import formatBytes from 'pretty-bytes';
|
||||
import formatDate from 'date-fns/format';
|
||||
import parseDate from 'date-fns/parse';
|
||||
@ -19,7 +20,7 @@ const globalStyles = css`
|
||||
Helvetica, Arial, sans-serif;
|
||||
line-height: 1.7;
|
||||
padding: 5px 20px;
|
||||
color: #000000;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
|
||||
Reference in New Issue
Block a user