Skip to content

Commit d1433b2

Browse files
CompuIvesCompuIves
authored
Upgrade babel from 7.3.4 to 7.8.1 (codesandbox#3318)
* Upgrade babel from 7.3.4 to 7.8.1 * Reset CircleCI cache * Fix some babel plugins * Create middle way for babel plugin exports * Separate chromatic to a different step * Let integrations know after a delay that we're done * Rename script of chromatic to visual regressions * Fix Vue templates
1 parent f778ba0 commit d1433b2

File tree

8 files changed

+102700
-33
lines changed

8 files changed

+102700
-33
lines changed

‎.circleci/config.yml‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ aliases:
2626

2727
- &restore_deps_cache
2828
keys:
29-
- v31-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
30-
- v31-dependency-cache-{{ .Branch }}
31-
- v31-dependency-cache
29+
- v32-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
30+
- v32-dependency-cache-{{ .Branch }}
31+
- v32-dependency-cache
3232

3333
- &save_deps_cache
34-
key: v31-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
34+
key: v32-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
3535
paths:
3636
- node_modules
3737
- packages/app/node_modules
@@ -51,51 +51,51 @@ aliases:
5151

5252
- &restore_standalone_deps_cache
5353
keys:
54-
- v31-standalone-dependency-cache-{{ .Branch }}-{{ checksum
54+
- v32-standalone-dependency-cache-{{ .Branch }}-{{ checksum
5555
"standalone-packages/codesandbox-browserfs/yarn.lock" }}
56-
- v31-standalone-dependency-cache-{{ .Branch }}
57-
- v31-standalone-dependency-cache
56+
- v32-standalone-dependency-cache-{{ .Branch }}
57+
- v32-standalone-dependency-cache
5858

5959
- &save_standalone_deps_cache
6060
key:
61-
v31-standalone-dependency-cache-{{ .Branch }}-{{ checksum
61+
v32-standalone-dependency-cache-{{ .Branch }}-{{ checksum
6262
"standalone-packages/codesandbox-browserfs/yarn.lock" }}
6363
paths:
6464
- standalone-packages/codesandbox-browserfs/node_modules
6565

6666
- &restore_prod_homepage_cache
67-
key: v31-prod-homepage-build-cache-master
67+
key: v32-prod-homepage-build-cache-master
6868

6969
- &restore_prod_result
7070
key:
71-
v31-prod-build-result-{{ .Environment.CIRCLE_BRANCH
71+
v32-prod-build-result-{{ .Environment.CIRCLE_BRANCH
7272
}}-{{.Environment.CIRCLE_SHA1 }}
7373

7474
- &save_prod_build_cache
7575
key:
76-
v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
76+
v32-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
7777
}}-{{.Environment.CIRCLE_SHA1 }}
7878
paths:
7979
- packages/app/node_modules/.cache
8080

8181
- &restore_prod_build_cache
8282
keys:
83-
- v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
83+
- v32-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
8484
}}-{{.Environment.CIRCLE_SHA1 }}
85-
- v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
86-
- v31-prod-build-cache-master-
85+
- v32-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
86+
- v32-prod-build-cache-master-
8787

8888
# To persist the images built by sharp
8989
- &save_prod_homepage_cache
9090
key:
91-
v31-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
91+
v32-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
9292
.Environment.CIRCLE_SHA1 }}
9393
paths:
9494
- ./packages/homepage/public
9595

9696
- &save_prod_result
9797
key:
98-
v31-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
98+
v32-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
9999
.Environment.CIRCLE_SHA1 }}
100100
paths:
101101
- ./www
@@ -136,14 +136,14 @@ commands:
136136
steps:
137137
- restore_cache:
138138
keys:
139-
- v31-source-cache-{{ .Branch }}-{{ .Revision }}
140-
- v31-source-cache-{{ .Branch }}-
141-
- v31-source-cache-
139+
- v32-source-cache-{{ .Branch }}-{{ .Revision }}
140+
- v32-source-cache-{{ .Branch }}-
141+
- v32-source-cache-
142142

143143
- checkout
144144

145145
- save_cache:
146-
key: v31-source-cache-{{ .Branch }}-{{ .Revision }}
146+
key: v32-source-cache-{{ .Branch }}-{{ .Revision }}
147147
paths:
148148
- '.git'
149149
build_deps:
@@ -196,8 +196,6 @@ commands:
196196
./packages/app/integration-tests/BrowserStackLocal --key
197197
$BROWSER_STACK_KEY || true'
198198
background: true
199-
- run:
200-
command: yarn chromatic
201199
- run:
202200
name: Test Integrations
203201
command: |
@@ -207,6 +205,13 @@ commands:
207205
JEST_JUNIT_OUTPUT: '/tmp/test-results/js-test-results.xml'
208206
- store_test_results: *store_test_results
209207
- store_artifacts: *store_artifacts
208+
test_visual_regressions:
209+
description: "Test Chromatic with 'yarn chromatic'"
210+
steps:
211+
- restore_cache: *restore_deps_cache
212+
- attach_workspace: *attach_deps_workspace
213+
- run:
214+
command: yarn chromatic
210215
test_jest:
211216
description: 'Test with `yarn test`'
212217
steps:
@@ -284,6 +289,11 @@ jobs:
284289
steps:
285290
- checkout_with_cache
286291
- test_integrations
292+
test-visual-regressions:
293+
executor: node
294+
steps:
295+
- checkout_with_cache
296+
- test_visual_regressions
287297
test-jest:
288298
executor: node
289299
steps:
@@ -344,6 +354,9 @@ workflows:
344354
- test-integrations:
345355
requires:
346356
- build-deps
357+
- test-visual-regressions:
358+
requires:
359+
- build-deps
347360
- typecheck:
348361
requires:
349362
- build-deps

‎packages/app/integration-tests/tests/sandboxes.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,13 @@ const sandboxesToTest = SANDBOXES.slice(
5555
);
5656

5757
function pageLoaded(page) {
58-
return new Promise(async resolve => {
59-
await page.exposeFunction('__puppeteer__', () => {
58+
return new Promise(resolve =>
59+
page.exposeFunction('__puppeteer__', () => {
6060
if (resolve) {
6161
resolve();
6262
}
63-
});
64-
});
63+
})
64+
);
6565
}
6666

6767
function sandboxUrl(sandboxId) {

‎packages/app/src/sandbox/compile.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -738,7 +738,10 @@ async function compile({
738738
dispatch({ type: 'done', compilatonError: hadError });
739739

740740
if (typeof (window as any).__puppeteer__ === 'function') {
741-
(window as any).__puppeteer__('done');
741+
setTimeout(() => {
742+
// Give everything some time to evaluate
743+
(window as any).__puppeteer__('done');
744+
}, 100);
742745
}
743746
}
744747

‎packages/app/src/sandbox/eval/presets/create-react-app/v3.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ const BABEL7_CONFIG = {
5151
plugins: [
5252
['proposal-decorators', { legacy: true }],
5353
'@babel/plugin-transform-react-jsx-source',
54-
'@babel/plugin-proposal-optional-chaining',
55-
'@babel/plugin-proposal-nullish-coalescing-operator',
5654
'transform-flow-strip-types',
5755
'transform-destructuring',
5856
'babel-plugin-macros',
@@ -66,6 +64,8 @@ const BABEL7_CONFIG = {
6664
regenerator: true,
6765
},
6866
],
67+
'@babel/plugin-proposal-optional-chaining',
68+
'@babel/plugin-proposal-nullish-coalescing-operator',
6969
'syntax-dynamic-import',
7070
],
7171
presets: [

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -425,10 +425,14 @@ async function compile(code, customConfig, path, isV7) {
425425
}
426426

427427
try {
428+
// Rollup globals hardcoded in Babel
429+
self.path$2 = BrowserFS.BFSRequire('path');
430+
self.fs$1 = BrowserFS.BFSRequire('fs');
431+
428432
self.importScripts(
429433
process.env.NODE_ENV === 'development'
430-
? `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.7.3.4.js`
431-
: `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.7.3.4.min.js`
434+
? `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.7.8.1.js`
435+
: `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.7.8.1.min.js`
432436
);
433437
} catch (e) {
434438
console.error(e);
@@ -579,15 +583,16 @@ self.addEventListener('message', async event => {
579583

580584
if (
581585
version === 7 &&
582-
Object.keys(Babel.availablePresets).indexOf('env') === -1 &&
583586
(flattenedPresets.indexOf('env') > -1 ||
584587
flattenedPresets.indexOf('@babel/preset-env') > -1 ||
585588
flattenedPresets.indexOf('@vue/app') > -1)
586589
) {
587590
const envPreset = await import(
588591
/* webpackChunkName: 'babel-preset-env' */ '@babel/preset-env'
589592
);
590-
Babel.registerPreset('env', envPreset);
593+
594+
// Hardcode, since we want to override env
595+
Babel.availablePresets.env = envPreset;
591596
}
592597

593598
if (

‎packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ export default function evaluate(
8080
availablePlugins[requirePath.replace('@babel/plugin-', '')];
8181

8282
if (plugin && requirePath !== 'react') {
83+
// Babel has exports as esmodule, but the plugins are not registered that way sadly
84+
if (requirePath.startsWith('@babel/plugin')) {
85+
return { __esModule: true, default: plugin };
86+
}
8387
return plugin;
8488
}
8589

@@ -88,6 +92,15 @@ export default function evaluate(
8892
availablePresets[requirePath.replace('babel-preset-', '')] ||
8993
availablePresets[requirePath.replace('@babel/preset-', '')];
9094
if (preset && requirePath !== 'react') {
95+
// Babel has exports as esmodule, but the plugins are not registered that way sadly. However, we register
96+
// @babel/preset-env ourselves, so in that case we need to ignore that. We register @babel/preset-env to
97+
// also export helper functions of the preset, to support vue.
98+
if (
99+
requirePath.startsWith('@babel/preset') &&
100+
requirePath !== '@babel/preset-env'
101+
) {
102+
return { __esModule: true, default: plugin };
103+
}
91104
return preset;
92105
}
93106

0 commit comments

Comments
 (0)