Skip to content

Commit feaa05b

Browse files
author
Ives van Hoorne
committed
Add IE dynamic polyfills
1 parent f5f95d4 commit feaa05b

File tree

6 files changed

+130
-94
lines changed

6 files changed

+130
-94
lines changed

‎config/webpack.common.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ module.exports = {
5151
},
5252
{
5353
test: /\.js$/,
54-
include: paths.src,
54+
include: [paths.src, /@emmetio/],
5555
exclude: [
5656
/eslint\.4\.1\.0\.min\.js$/,
5757
/typescriptServices\.js$/,

‎src/app/index.js‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
55
import { ThemeProvider } from 'styled-components';
66
import { ConnectedRouter } from 'react-router-redux';
77
import registerServiceWorker from 'common/registerServiceWorker';
8+
import requirePolyfills from 'common/load-dynamic-polyfills';
89
import 'normalize.css';
910
import notificationActions from 'app/store/notifications/actions';
1011

@@ -65,44 +66,46 @@ if (process.env.NODE_ENV === 'production') {
6566
}
6667
}
6768

68-
const rootEl = document.getElementById('root');
69+
requirePolyfills().then(() => {
70+
const rootEl = document.getElementById('root');
6971

70-
const store = createStore(history);
72+
const store = createStore(history);
7173

72-
const showNotification = (message, type) =>
73-
store.dispatch(notificationActions.addNotification(message, type));
74+
const showNotification = (message, type) =>
75+
store.dispatch(notificationActions.addNotification(message, type));
7476

75-
registerServiceWorker('/service-worker.js', showNotification);
77+
registerServiceWorker('/service-worker.js', showNotification);
7678

77-
const renderApp = RootComponent => {
78-
try {
79-
render(
80-
<AppContainer>
81-
<ThemeProvider theme={theme}>
82-
<Provider store={store}>
83-
<ConnectedRouter history={history}>
84-
<RootComponent store={store} />
85-
</ConnectedRouter>
86-
</Provider>
87-
</ThemeProvider>
88-
</AppContainer>,
89-
rootEl
90-
);
91-
} catch (e) {
92-
logError(e);
93-
}
94-
};
79+
const renderApp = RootComponent => {
80+
try {
81+
render(
82+
<AppContainer>
83+
<ThemeProvider theme={theme}>
84+
<Provider store={store}>
85+
<ConnectedRouter history={history}>
86+
<RootComponent store={store} />
87+
</ConnectedRouter>
88+
</Provider>
89+
</ThemeProvider>
90+
</AppContainer>,
91+
rootEl
92+
);
93+
} catch (e) {
94+
logError(e);
95+
}
96+
};
9597

96-
renderApp(App);
98+
renderApp(App);
9799

98-
if (module.hot) {
99-
module.hot.accept('./pages/index', () => {
100-
const NextApp = require('./pages/index').default; // eslint-disable-line global-require
101-
renderApp(NextApp);
102-
});
100+
if (module.hot) {
101+
module.hot.accept('./pages/index', () => {
102+
const NextApp = require('./pages/index').default; // eslint-disable-line global-require
103+
renderApp(NextApp);
104+
});
103105

104-
module.hot.accept('../common/theme', () => {
105-
const NextApp = require('./pages/index').default; // eslint-disable-line global-require
106-
renderApp(NextApp);
107-
});
108-
}
106+
module.hot.accept('../common/theme', () => {
107+
const NextApp = require('./pages/index').default; // eslint-disable-line global-require
108+
renderApp(NextApp);
109+
});
110+
}
111+
});

‎src/common/load-dynamic-polyfills.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
function detectIE() {
2+
const ua = window.navigator.userAgent;
3+
4+
const msie = ua.indexOf('MSIE ');
5+
if (msie > 0) {
6+
// IE 10 or older => return version number
7+
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
8+
}
9+
10+
const trident = ua.indexOf('Trident/');
11+
if (trident > 0) {
12+
// IE 11 => return version number
13+
const rv = ua.indexOf('rv:');
14+
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
15+
}
16+
17+
// other browser
18+
return false;
19+
}
20+
21+
export default function requirePolyfills() {
22+
if (detectIE()) {
23+
return import('babel-polyfill');
24+
}
25+
26+
return Promise.resolve();
27+
}

‎src/embed/index.js‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
import React from 'react';
22
import { render } from 'react-dom';
33
import { ThemeProvider } from 'styled-components';
4+
import requirePolyfills from 'common/load-dynamic-polyfills';
45
import 'normalize.css';
56

67
import theme from '../common/theme';
78
import '../common/global.css';
89

910
import App from './App';
1011

11-
function renderApp(Component) {
12-
render(
13-
<ThemeProvider theme={theme}>
14-
<Component />
15-
</ThemeProvider>,
16-
document.getElementById('root')
17-
);
18-
}
12+
requirePolyfills().then(() => {
13+
function renderApp(Component) {
14+
render(
15+
<ThemeProvider theme={theme}>
16+
<Component />
17+
</ThemeProvider>,
18+
document.getElementById('root')
19+
);
20+
}
1921

20-
if (module.hot) {
21-
module.hot.accept('./App', () => {
22-
const NextApp = require('./App').default; // eslint-disable-line global-require
23-
renderApp(NextApp);
24-
});
25-
}
22+
if (module.hot) {
23+
module.hot.accept('./App', () => {
24+
const NextApp = require('./App').default; // eslint-disable-line global-require
25+
renderApp(NextApp);
26+
});
27+
}
2628

27-
renderApp(App);
29+
renderApp(App);
30+
});

‎src/sandbox/eval/transpilers/babel/babel-worker.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@ self.addEventListener('message', async event => {
3232
const { code, path, config } = event.data;
3333

3434
if (
35-
flatten(config.plugins).includes('transform-vue-jsx') &&
36-
!Object.keys(Babel.availablePlugins).includes('transform-vue-jsx')
35+
flatten(config.plugins).indexOf('transform-vue-jsx') > -1 &&
36+
!Object.keys(Babel.availablePlugins).indexOf('transform-vue-js > -1x')
3737
) {
3838
const vuePlugin = await import('babel-plugin-transform-vue-jsx');
3939
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
4040
}
4141

4242
if (
43-
flatten(config.plugins).includes('jsx-pragmatic') &&
44-
!Object.keys(Babel.availablePlugins).includes('jsx-pragmatic')
43+
flatten(config.plugins).indexOf('jsx-pragmatic') > -1 &&
44+
!Object.keys(Babel.availablePlugins).indexOf('jsx-pragmati > -1c')
4545
) {
4646
const pragmaticPlugin = await import('babel-plugin-jsx-pragmatic');
4747
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);

‎src/sandbox/index.js‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,57 @@ import { camelizeKeys } from 'humps';
22
import { dispatch, isStandalone } from 'codesandbox-api';
33

44
import registerServiceWorker from 'common/registerServiceWorker';
5+
import requirePolyfills from 'common/load-dynamic-polyfills';
56
import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
67

78
import host from './utils/host';
89

910
import setupHistoryListeners from './url-listeners';
1011
import compile from './compile';
1112

12-
registerServiceWorker('/sandbox-service-worker.js');
13+
requirePolyfills().then(() => {
14+
registerServiceWorker('/sandbox-service-worker.js');
1315

14-
function sendReady() {
15-
dispatch('Ready!');
16-
}
16+
function sendReady() {
17+
dispatch('Ready!');
18+
}
1719

18-
window.addEventListener('message', async message => {
19-
if (message.data.type === 'compile') {
20-
compile(message.data);
21-
} else if (message.data.type === 'urlback') {
22-
history.back();
23-
} else if (message.data.type === 'urlforward') {
24-
history.forward();
20+
window.addEventListener('message', async message => {
21+
if (message.data.type === 'compile') {
22+
compile(message.data);
23+
} else if (message.data.type === 'urlback') {
24+
history.back();
25+
} else if (message.data.type === 'urlforward') {
26+
history.forward();
27+
}
28+
});
29+
30+
sendReady();
31+
setupHistoryListeners();
32+
33+
if (isStandalone) {
34+
// We need to fetch the sandbox ourselves...
35+
const id = document.location.host.match(/(.*)\.codesandbox/)[1];
36+
window
37+
.fetch(`${host}/api/v1/sandboxes/${id}`)
38+
.then(res => res.json())
39+
.then(res => camelizeKeys(res))
40+
.then(x => {
41+
const mainModule = findMainModule(x.data.modules, x.data.template);
42+
43+
const data = {
44+
sandboxId: id,
45+
modules: x.data.modules,
46+
directories: x.data.directories,
47+
module: mainModule,
48+
changedModule: mainModule,
49+
externalResources: x.data.externalResources,
50+
dependencies: x.data.npmDependencies,
51+
hasActions: false,
52+
template: x.data.template,
53+
};
54+
55+
compile(data);
56+
});
2557
}
2658
});
27-
28-
sendReady();
29-
setupHistoryListeners();
30-
31-
if (isStandalone) {
32-
// We need to fetch the sandbox ourselves...
33-
const id = document.location.host.match(/(.*)\.codesandbox/)[1];
34-
window
35-
.fetch(`${host}/api/v1/sandboxes/${id}`)
36-
.then(res => res.json())
37-
.then(res => camelizeKeys(res))
38-
.then(x => {
39-
const mainModule = findMainModule(x.data.modules, x.data.template);
40-
41-
const data = {
42-
sandboxId: id,
43-
modules: x.data.modules,
44-
directories: x.data.directories,
45-
module: mainModule,
46-
changedModule: mainModule,
47-
externalResources: x.data.externalResources,
48-
dependencies: x.data.npmDependencies,
49-
hasActions: false,
50-
template: x.data.template,
51-
};
52-
53-
compile(data);
54-
});
55-
}

0 commit comments

Comments
 (0)