Skip to content

Commit 04eca60

Browse files
author
Ives van Hoorne
committed
Merge with master
2 parents 159bc64 + bf81049 commit 04eca60

File tree

48 files changed

+676
-393
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+676
-393
lines changed

‎.all-contributorsrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,8 @@
174174
"avatar_url": "https://avatars2.githubusercontent.com/u/2678610?v=4",
175175
"profile": "http://valentin-hervieu.fr",
176176
"contributions": [
177-
"code"
177+
"code",
178+
"bug"
178179
]
179180
},
180181
{

‎CONTRIBUTING.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ The CodeSandbox client is currently divided in to 5 parts.
1212

1313
This version of CodeSandbox is using the production server as source of truth, this is specified by the environment variable `LOCAL_SERVER`. It's not yet possible to sign in using this version, I haven't figured out how to handle this yet.
1414

15+
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
16+
1517
## Setting Up the project locally
1618

1719
To install the project you need to have `yarn` and `node`

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
1+
# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
22

33
An online code editor with a focus on React.
44

@@ -30,5 +30,5 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
3030
| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub>James Gillmore</sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub>Ade Viankakrisna Fadlil</sub>](https://musify.id)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub>Tushar Sonawane</sub>](https://twitter.com/tushkiz)<br />[💬](#question-Tushkiz "Answering Questions") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Documentation") [🤔](#ideas-Tushkiz "Ideas, Planning, & Feedback") |
3131
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
3232
| [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub>Johann Hubert Sonntagbauer</sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub>Joachim Seminck</sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub>Subramanya Chakravarthy</sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub>Robert (Robby) O'Connor</sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub>Bogdan Luca</sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub>Divjot Singh</sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub>Jason Nall</sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
33-
| [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub>Lionel</sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub>Philipp Brumm</sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub>Valentin Hervieu</sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub>Anenth</sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") |
33+
| [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub>Lionel</sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub>Philipp Brumm</sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub>Valentin Hervieu</sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub>Anenth</sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") |
3434
<!-- ALL-CONTRIBUTORS-LIST:END -->

‎config/env.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@ const getHost = () => {
1010
return 'http://localhost:3000';
1111
}
1212

13-
return process.env.NODE_ENV === 'development'
14-
? '*'
15-
: 'https://codesandbox.io';
13+
if (process.env.NODE_ENV === 'development') {
14+
return '*';
15+
}
16+
17+
if ('STAGING_BRANCH' in process.env) {
18+
return `http://${process.env.STAGING_BRANCH}.cs.lbogdan.tk`;
19+
}
20+
21+
return 'https://codesandbox.io';
1622
};
1723

1824
module.exports = Object.keys(process.env)
@@ -26,5 +32,6 @@ module.exports = Object.keys(process.env)
2632
'process.env.NODE_ENV': NODE_ENV,
2733
'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()),
2834
'process.env.LOCAL_SERVER': !!LOCAL_SERVER,
35+
'process.env.STAGING': 'STAGING_BRANCH' in process.env,
2936
}
3037
);

‎config/webpack.common.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ module.exports = {
3838
require.resolve('./polyfills'),
3939
path.join(paths.embedSrc, 'index.js'),
4040
],
41-
vendor: ['react', 'react-dom', 'styled-components'],
4241
},
4342
target: 'web',
4443
node: {
@@ -158,7 +157,7 @@ module.exports = {
158157
// Generates an `index.html` file with the <script> injected.
159158
new HtmlWebpackPlugin({
160159
inject: true,
161-
chunks: ['vendor', 'common', 'app'],
160+
chunks: ['common-sandbox', 'common', 'app'],
162161
filename: 'app.html',
163162
template: paths.appHtml,
164163
minify: __PROD__ && {
@@ -176,7 +175,7 @@ module.exports = {
176175
}),
177176
new HtmlWebpackPlugin({
178177
inject: true,
179-
chunks: ['vendor', 'common', 'sandbox'],
178+
chunks: ['common-sandbox', 'sandbox'],
180179
filename: 'frame.html',
181180
template: paths.sandboxHtml,
182181
minify: __PROD__ && {
@@ -194,7 +193,7 @@ module.exports = {
194193
}),
195194
new HtmlWebpackPlugin({
196195
inject: true,
197-
chunks: ['vendor', 'embed'],
196+
chunks: ['common-sandbox', 'common', 'embed'],
198197
filename: 'embed.html',
199198
template: path.join(paths.embedSrc, 'index.html'),
200199
minify: __PROD__ && {
@@ -257,14 +256,17 @@ module.exports = {
257256
},
258257
].filter(x => x)
259258
),
260-
// Try to dedupe duplicated modules, if any:
259+
// We first create a common chunk between embed and app, to share components
260+
// and dependencies.
261261
new webpack.optimize.CommonsChunkPlugin({
262262
name: 'common',
263-
chunks: ['app', 'sandbox'],
263+
chunks: ['app', 'embed'],
264264
}),
265+
// Then we find all commonalities between sandbox and common, because sandbox
266+
// is always loaded by embed and app.
265267
new webpack.optimize.CommonsChunkPlugin({
266-
name: 'vendor',
267-
minChunks: Infinity,
268+
name: 'common-sandbox',
269+
chunks: ['common', 'sandbox'],
268270
}),
269271
new webpack.optimize.CommonsChunkPlugin({
270272
async: true,

‎config/webpack.prod.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const merge = require('webpack-merge');
22
const webpack = require('webpack');
33
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
4+
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
45
const childProcess = require('child_process');
56
const commonConfig = require('./webpack.common');
67

@@ -23,26 +24,15 @@ module.exports = merge(commonConfig, {
2324
sourceMapFilename: '[file].map', // Default
2425
},
2526
plugins: [
27+
new webpack.optimize.ModuleConcatenationPlugin(),
2628
new webpack.DefinePlugin({ VERSION: JSON.stringify(VERSION) }),
2729
new webpack.LoaderOptionsPlugin({
2830
minimize: true,
2931
debug: false,
3032
}),
31-
new webpack.optimize.UglifyJsPlugin({
32-
compress: {
33-
warnings: false,
34-
// Disabled because of an issue with Uglify breaking seemingly valid code:
35-
// https://github.com/facebookincubator/create-react-app/issues/2376
36-
// Pending further investigation:
37-
// https://github.com/mishoo/UglifyJS2/issues/2011
38-
comparisons: false,
39-
},
40-
output: {
41-
comments: false,
42-
// Turned on because emoji and regex is not minified properly using default
43-
// https://github.com/facebookincubator/create-react-app/issues/2488
44-
ascii_only: true,
45-
},
33+
new UglifyJSPlugin({
34+
cache: true,
35+
parallel: true,
4636
sourceMap: true,
4737
}),
4838
// Generate a service worker script that will precache, and keep up to date,

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,10 @@
8080
"style-loader": "^0.18.2",
8181
"sw-precache-webpack-plugin": "^0.11.4",
8282
"typescript": "^2.4.2",
83+
"uglifyjs-webpack-plugin": "^1.0.1",
8384
"url-loader": "^0.5.9",
8485
"webpack": "^3.5.4",
86+
"webpack-bundle-analyzer": "^2.9.0",
8587
"webpack-dev-middleware": "^1.11.0",
8688
"webpack-dev-server": "^2.5.1",
8789
"webpack-merge": "^4.1.0",

‎src/app/components/sandbox/CodeEditor/CodeMirror.js

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -301,13 +301,19 @@ export default class CodeEditor extends React.Component<Props, State> {
301301

302302
if (kind) {
303303
if (kind[1] === 'css') {
304-
await System.import('codemirror/mode/css/css');
304+
await System.import(
305+
/* webpackChunkName: 'codemirror-css' */ 'codemirror/mode/css/css'
306+
);
305307
return 'css';
306308
} else if (kind[1] === 'html' || kind[1] === 'vue') {
307-
await System.import('codemirror/mode/htmlmixed/htmlmixed');
309+
await System.import(
310+
/* webpackChunkName: 'codemirror-html' */ 'codemirror/mode/htmlmixed/htmlmixed'
311+
);
308312
return 'htmlmixed';
309313
} else if (kind[1] === 'md') {
310-
await System.import('codemirror/mode/markdown/markdown');
314+
await System.import(
315+
/* webpackChunkName: 'codemirror-markdown' */ 'codemirror/mode/markdown/markdown'
316+
);
311317
return 'markdown';
312318
}
313319
}
@@ -370,8 +376,12 @@ export default class CodeEditor extends React.Component<Props, State> {
370376
};
371377

372378
if (preferences.autoCompleteEnabled) {
373-
const tern = await System.import('tern');
374-
const defs = await System.import('tern/defs/ecmascript.json');
379+
const tern = await System.import(
380+
/* webpackChunkName: 'codemirror-tern' */ 'tern'
381+
);
382+
const defs = await System.import(
383+
/* webpackChunkName: 'codemirror-tern-definitions' */ 'tern/defs/ecmascript.json'
384+
);
375385
window.tern = tern;
376386
this.server =
377387
this.server ||
@@ -427,15 +437,19 @@ export default class CodeEditor extends React.Component<Props, State> {
427437
}
428438

429439
if (preferences.vimMode) {
430-
await System.import('codemirror/keymap/vim');
440+
await System.import(
441+
/* webpackChunkName: 'codemirror-vim' */ 'codemirror/keymap/vim'
442+
);
431443
this.codemirror.setOption('keyMap', 'vim');
432444
} else {
433445
this.codemirror.setOption('keyMap', 'sublime');
434446
}
435447

436448
if (preferences.lintEnabled) {
437449
const initialized = 'eslint' in window;
438-
System.import('app/utils/codemirror/eslint-lint')
450+
System.import(
451+
/* webpackChunkName: 'codemirror-eslint' */ 'app/utils/codemirror/eslint-lint'
452+
)
439453
.then(initializer => !initialized && initializer.default())
440454
.then(() => {
441455
this.codemirror.setOption('lint', true);
@@ -459,7 +473,7 @@ export default class CodeEditor extends React.Component<Props, State> {
459473
const mode = await this.getMode(title);
460474
if (mode === 'jsx' || mode === 'typescript' || mode === 'css') {
461475
try {
462-
const prettify = await import('app/utils/codemirror/prettify');
476+
const prettify = await import(/* webpackChunkName: 'prettier' */ 'app/utils/codemirror/prettify');
463477
const newCode = await prettify.default(
464478
code,
465479
mode,

0 commit comments

Comments
 (0)