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:
Michael Jackson
2019-01-23 21:27:58 -08:00
parent 6228f0de5c
commit bbb092d974
117 changed files with 109774 additions and 1773 deletions

View File

@ -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 }]

View File

@ -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)
};
}

View File

@ -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';

View File

@ -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';

View File

@ -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) {