Skip to content

Commit c890dc4

Browse files
CompuIvesCompuIves
authored
Fix pragmatic jsx babel plugin (codesandbox#2929)
* Fix pragmatic jsx babel plugin * Run tests in parallel * Make some tests conditional * Regenerate yarn.lock * Fix parallel test * Put babel plugin back * Test removing a check * Set new plugins * Return original statement * Remove explanation
1 parent f28493e commit c890dc4

File tree

9 files changed

+97
-67
lines changed

9 files changed

+97
-67
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,7 @@ jobs:
279279
- build_prod
280280
test-integrations:
281281
executor: node-with-puppeteer
282+
parallelism: 2
282283
steps:
283284
- checkout_with_cache
284285
- test_integrations

‎packages/app/integration-tests/browser-tests/browsers.test.js‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -38,68 +38,76 @@ function testPageWitCapabilities(capabilities) {
3838
});
3939
}
4040

41+
const PARALLEL_INDEX = Number.parseInt(process.env.CIRCLE_NODE_INDEX, 10) || 0;
42+
4143
const usedDescribe = process.env.BROWSER_STACK_KEY ? describe : describe.skip;
4244
usedDescribe('browser-tests', () => {
43-
test.skip('ie11', async () => {
44-
// Input capabilities
45-
const capabilities = {
46-
browserName: 'IE',
47-
browser_version: '11.0',
48-
os: 'Windows',
49-
os_version: '10',
50-
resolution: '1024x768',
51-
};
45+
if (PARALLEL_INDEX === 0) {
46+
test.skip('ie11', async () => {
47+
// Input capabilities
48+
const capabilities = {
49+
browserName: 'IE',
50+
browser_version: '11.0',
51+
os: 'Windows',
52+
os_version: '10',
53+
resolution: '1024x768',
54+
};
5255

53-
await testPageWitCapabilities(capabilities);
54-
}, 130000);
56+
await testPageWitCapabilities(capabilities);
57+
}, 130000);
5558

56-
test.skip('ios', async () => {
57-
// Input capabilities
58-
const capabilities = {
59-
browserName: 'iPhone',
60-
device: 'iPhone X',
61-
real_mobile: 'true',
62-
os_version: '11.0',
63-
};
59+
test.skip('ios', async () => {
60+
// Input capabilities
61+
const capabilities = {
62+
browserName: 'iPhone',
63+
device: 'iPhone X',
64+
real_mobile: 'true',
65+
os_version: '11.0',
66+
};
6467

65-
await testPageWitCapabilities(capabilities);
66-
}, 130000);
68+
await testPageWitCapabilities(capabilities);
69+
}, 130000);
6770

68-
test('firefox', async () => {
69-
// Input capabilities
70-
const capabilities = {
71-
browserName: 'Firefox',
72-
browser_version: '58.0',
73-
os: 'Windows',
74-
os_version: '10',
75-
resolution: '1024x768',
76-
};
71+
test('firefox', async () => {
72+
// Input capabilities
73+
const capabilities = {
74+
browserName: 'Firefox',
75+
browser_version: '58.0',
76+
os: 'Windows',
77+
os_version: '10',
78+
resolution: '1024x768',
79+
};
7780

78-
await testPageWitCapabilities(capabilities);
79-
}, 130000);
81+
await testPageWitCapabilities(capabilities);
82+
}, 130000);
8083

81-
test('safari', async () => {
82-
// Input capabilities
83-
const capabilities = {
84-
browserName: 'Safari',
85-
browser_version: '11.0',
86-
os: 'OS X',
87-
os_version: 'High Sierra',
88-
resolution: '1024x768',
89-
};
84+
test('safari', async () => {
85+
// Input capabilities
86+
const capabilities = {
87+
browserName: 'Safari',
88+
browser_version: '11.0',
89+
os: 'OS X',
90+
os_version: 'High Sierra',
91+
resolution: '1024x768',
92+
};
9093

91-
await testPageWitCapabilities(capabilities);
92-
}, 130000);
94+
await testPageWitCapabilities(capabilities);
95+
}, 130000);
9396

94-
test.skip('android', async () => {
95-
// Input capabilities
96-
const capabilities = {
97-
browserName: 'android',
98-
device: 'Samsung Galaxy S8',
99-
real_mobile: 'true',
100-
os_version: '7.0',
101-
};
97+
test.skip('android', async () => {
98+
// Input capabilities
99+
const capabilities = {
100+
browserName: 'android',
101+
device: 'Samsung Galaxy S8',
102+
real_mobile: 'true',
103+
os_version: '7.0',
104+
};
102105

103-
await testPageWitCapabilities(capabilities);
104-
}, 130000);
106+
await testPageWitCapabilities(capabilities);
107+
}, 130000);
108+
} else {
109+
test('it just works', () => {
110+
expect(1).toBe(1);
111+
});
112+
}
105113
});

‎packages/app/integration-tests/tests/__image_snapshots__/sebn6-snap.png‎

3.84 KB
Loading

‎packages/app/integration-tests/tests/__image_snapshots__/utmms-snap.png‎

4.26 KB
Loading

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,22 @@ const SANDBOXES = [
3838
'31kn7voz4q', // cxjs
3939
'zw9zjy0683', // aurelia
4040
'zx22owojr3', // vue v-slot test
41-
'4888omqqz7', // material-ui https://github.com/codesandbox/codesandbox-client/issues/1741
41+
'4888omqqz7', // material-ui https://github.com/codesandbox/codesandbox-client/issues/1741,
42+
'sebn6', // babel plugin dynamically downloaded
43+
'utmms', // babel plugin pragmatic-jsx which requires other babel plugin
4244
];
4345
const SANDBOXES_REPO = 'codesandbox/integration-sandboxes';
4446

47+
// Logic for parallelizing the tests
48+
const PARALLEL_NODES = Number.parseInt(process.env.CIRCLE_NODE_TOTAL, 10) || 1;
49+
const PARALLEL_INDEX = Number.parseInt(process.env.CIRCLE_NODE_INDEX, 10) || 0;
50+
51+
const batchSize = Math.floor(SANDBOXES.length / PARALLEL_NODES);
52+
const sandboxesToTest = SANDBOXES.slice(
53+
batchSize * PARALLEL_INDEX,
54+
batchSize * (PARALLEL_INDEX + 1)
55+
);
56+
4557
function pageLoaded(page) {
4658
return new Promise(async resolve => {
4759
await page.exposeFunction('__puppeteer__', () => {
@@ -110,7 +122,7 @@ describe('sandboxes', () => {
110122
browser.close();
111123
});
112124

113-
SANDBOXES.forEach(sandbox => {
125+
sandboxesToTest.forEach(sandbox => {
114126
const id = sandbox.id || sandbox;
115127
const threshold = sandbox.threshold || 0.01;
116128

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,13 +570,27 @@ self.addEventListener('message', async event => {
570570
}
571571

572572
if (
573-
flattenedPlugins.indexOf('transform-vue-jsx') > -1 &&
573+
(flattenedPlugins.indexOf('transform-vue-jsx') > -1 ||
574+
flattenedPlugins.indexOf('babel-plugin-transform-vue-jsx') > -1) &&
574575
Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1
575576
) {
576577
const vuePlugin = await import(
577578
/* webpackChunkName: 'babel-plugin-transform-vue-jsx' */ 'babel-plugin-transform-vue-jsx'
578579
);
579580
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
581+
Babel.registerPlugin('babel-plugin-transform-vue-jsx', vuePlugin);
582+
}
583+
584+
if (
585+
(flattenedPlugins.indexOf('jsx-pragmatic') > -1 ||
586+
flattenedPlugins.indexOf('babel-plugin-jsx-pragmatic') > -1) &&
587+
Object.keys(Babel.availablePlugins).indexOf('jsx-pragmatic') === -1
588+
) {
589+
const pragmaticPlugin = await import(
590+
/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic'
591+
);
592+
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
593+
Babel.registerPlugin('babel-plugin-jsx-pragmatic', pragmaticPlugin);
580594
}
581595

582596
if (

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,8 @@ export default function evaluate(
7474
availablePlugins[requirePath.replace('babel-plugin-', '')] ||
7575
availablePlugins[requirePath.replace('@babel/plugin-', '')];
7676

77-
// This is some weird behaviour, it seems like we have a mix of { __esModule: true, default ... } modules in
78-
// this list and some direct functions. If we return the plugin itself (not .default) one sandbox breaks,
79-
// if we return a .default the other sandbox breaks. The two sandboxes are: `utmms` and `sebn6`. I've decided
80-
// to only return plugins that have been pre-added to babel-standalone (the plugins with a .default), this
81-
// way both sandboxes work.
82-
if (plugin && requirePath !== 'react' && plugin.__esModule) {
83-
return plugin.default;
77+
if (plugin && requirePath !== 'react') {
78+
return plugin;
8479
}
8580

8681
const preset =

‎packages/app/src/sandbox/npm/fetch-dependencies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ function callApi(url: string, method = 'GET') {
5151
error.response = message;
5252
// @ts-ignore
5353
error.statusCode = response.status;
54-
return Promise.reject(error);
54+
throw error;
5555
}
5656

57-
return Promise.resolve(response);
57+
return response;
5858
})
5959
.then(response => response.json());
6060
}

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8098,7 +8098,7 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
80988098
integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
80998099

81008100
console-feed@CompuIves/console-feed#build2, console-feed@^2.8.5:
8101-
version "2.8.9"
8101+
version "2.8.8"
81028102
resolved "https://codeload.github.com/CompuIves/console-feed/tar.gz/42f10eb3063f0f26ee9745c4c9e4542cb5591f46"
81038103
dependencies:
81048104
emotion "^9.1.1"
@@ -21219,7 +21219,7 @@ [email protected]:
2121921219
prop-types "^15.6.2"
2122021220
scheduler "^0.13.1"
2122121221

21222-
[email protected], react-dom@^16.2.0, react-dom@^16.8.3, react-dom@^16.8.6, react-dom@^16.9.0:
21222+
[email protected], react-dom@^16.2.0, react-dom@^16.8.3, react-dom@^16.9.0:
2122321223
version "16.9.0"
2122421224
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
2122521225
integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==

0 commit comments

Comments
 (0)