Skip to content

Commit 9a12c8f

Browse files
author
Ives van Hoorne
committed
Babel Repl Template
1 parent 22f3635 commit 9a12c8f

File tree

13 files changed

+176
-58
lines changed

13 files changed

+176
-58
lines changed

‎packages/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"private": true,
66
"scripts": {
77
"start": "cross-env LOCAL_SERVER=1 node scripts/start.js",
8+
"start:sandbox": "cross-env SANDBOX_ONLY=true node scripts/start.js",
89
"start:dev_api": "node scripts/start.js",
910
"start:test": "cross-env LOCAL_SERVER=1 NODE_ENV=test SANDBOX_ONLY=true node scripts/start.js",
1011
"build": "NODE_ENV=production node scripts/build.js",

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

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,7 @@ const WHITELISTED_DEV_DEPENDENCIES = [
5353
'identity-obj-proxy',
5454
];
5555

56-
// Dependencies that we actually don't need, we will replace this by a dynamic
57-
// system in the future
58-
const PREINSTALLED_DEPENDENCIES = [
59-
'node-lib-browser',
60-
'babel-runtime',
61-
'react-scripts',
62-
'react-scripts-ts',
63-
'parcel-bundler',
56+
const BABEL_DEPENDENCIES = [
6457
'babel-preset-env',
6558
'babel-preset-latest',
6659
'babel-preset-es2015',
@@ -72,6 +65,16 @@ const PREINSTALLED_DEPENDENCIES = [
7265
'babel-preset-stage-1',
7366
'babel-preset-stage-2',
7467
'babel-preset-stage-3',
68+
];
69+
70+
// Dependencies that we actually don't need, we will replace this by a dynamic
71+
// system in the future
72+
const PREINSTALLED_DEPENDENCIES = [
73+
'node-lib-browser',
74+
'babel-runtime',
75+
'react-scripts',
76+
'react-scripts-ts',
77+
'parcel-bundler',
7578
'babel-plugin-check-es2015-constants',
7679
'babel-plugin-external-helpers',
7780
'babel-plugin-inline-replace-variables',
@@ -154,7 +157,7 @@ const PREINSTALLED_DEPENDENCIES = [
154157
'flow-bin',
155158
];
156159

157-
function getDependencies(parsedPackage, configurations) {
160+
function getDependencies(parsedPackage, templateDefinition, configurations) {
158161
const {
159162
dependencies: d = {},
160163
peerDependencies = {},
@@ -188,7 +191,15 @@ function getDependencies(parsedPackage, configurations) {
188191
}
189192
});
190193

191-
PREINSTALLED_DEPENDENCIES.forEach(dep => {
194+
let preinstalledDependencies = PREINSTALLED_DEPENDENCIES;
195+
if (templateDefinition.name !== 'babel-repl') {
196+
preinstalledDependencies = [
197+
...preinstalledDependencies,
198+
...BABEL_DEPENDENCIES,
199+
];
200+
}
201+
202+
preinstalledDependencies.forEach(dep => {
192203
if (returnedDependencies[dep]) {
193204
delete returnedDependencies[dep];
194205
}
@@ -318,7 +329,11 @@ async function compile({
318329

319330
dispatch({ type: 'status', status: 'installing-dependencies' });
320331

321-
const dependencies = getDependencies(parsedPackageJSON, configurations);
332+
const dependencies = getDependencies(
333+
parsedPackageJSON,
334+
templateDefinition,
335+
configurations
336+
);
322337
const { manifest, isNewCombination } = await loadDependencies(dependencies);
323338

324339
if (isNewCombination && !firstLoad) {

‎packages/app/src/sandbox/eval/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
preact,
88
reactTs,
99
angular,
10+
babel,
1011
} from 'common/templates';
1112

1213
import reactPreset from './presets/create-react-app';
@@ -16,6 +17,7 @@ import preactPreset from './presets/preact-cli';
1617
import sveltePreset from './presets/svelte';
1718
import angularPreset from './presets/angular-cli';
1819
import parcelPreset from './presets/parcel';
20+
import babelPreset from './presets/babel-repl';
1921

2022
export default function getPreset(template: string) {
2123
switch (template) {
@@ -33,6 +35,8 @@ export default function getPreset(template: string) {
3335
return angularPreset();
3436
case parcel.name:
3537
return parcelPreset();
38+
case babel.name:
39+
return babelPreset();
3640
default:
3741
return reactPreset();
3842
}

‎packages/app/src/sandbox/eval/presets/babel-repl/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import babelTranspiler from '../../transpilers/babel';
2+
import jsonTranspiler from '../../transpilers/json';
3+
import rawTranspiler from '../../transpilers/raw';
4+
5+
import Preset from '../';
6+
7+
export default function initialize() {
8+
const babelPreset = new Preset(
9+
'babel-repl',
10+
['js', 'jsx', 'ts', 'tsx', 'json'],
11+
{},
12+
{}
13+
);
14+
15+
babelPreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
16+
{
17+
transpiler: babelTranspiler,
18+
options: {
19+
disableCodeSandboxPlugins: true,
20+
},
21+
},
22+
]);
23+
24+
babelPreset.registerTranspiler(module => /\.json$/.test(module.path), [
25+
{ transpiler: jsonTranspiler },
26+
]);
27+
28+
babelPreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
29+
30+
return babelPreset;
31+
}

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

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export type IBabel = {
147147

148148
declare var Babel: IBabel;
149149

150-
Babel.registerPreset('env', Babel.availablePresets.latest);
150+
let loadedTranspilerURL = null;
151151

152152
Babel.registerPlugin('dynamic-import-node', dynamicImportPlugin);
153153
Babel.registerPlugin('babel-plugin-detective', detective);
@@ -180,24 +180,52 @@ self.addEventListener('message', async event => {
180180

181181
resetCache();
182182

183-
const { code, path, sandboxOptions, config, loaderOptions } = event.data;
183+
const {
184+
code,
185+
path,
186+
babelTranspilerOptions,
187+
sandboxOptions,
188+
config,
189+
loaderOptions,
190+
} = event.data;
191+
192+
const { disableCodeSandboxPlugins } = loaderOptions;
184193

185194
const flattenedPresets = flatten(config.presets);
186195
const flattenedPlugins = flatten(config.plugins);
196+
187197
if (
188-
flattenedPlugins.indexOf('transform-vue-jsx') > -1 &&
189-
Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1
198+
babelTranspilerOptions &&
199+
babelTranspilerOptions.babelURL &&
200+
babelTranspilerOptions.babelURL !== loadedTranspilerURL
190201
) {
191-
const vuePlugin = await import(/* webpackChunkName: 'babel-plugin-transform-vue-jsx' */ 'babel-plugin-transform-vue-jsx');
192-
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
202+
self.importScripts([babelTranspilerOptions.babelURL]);
203+
loadedTranspilerURL = babelTranspilerOptions.babelURL;
193204
}
194205

195-
if (
196-
flattenedPlugins.indexOf('jsx-pragmatic') > -1 &&
197-
Object.keys(Babel.availablePlugins).indexOf('jsx-pragmatic') === -1
198-
) {
199-
const pragmaticPlugin = await import(/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic');
200-
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
206+
if (!disableCodeSandboxPlugins) {
207+
if (
208+
flattenedPresets.indexOf('env') > -1 &&
209+
Object.keys(Babel.availablePresets).indexOf('env') === -1
210+
) {
211+
Babel.registerPreset('env', Babel.availablePresets.latest);
212+
}
213+
214+
if (
215+
flattenedPlugins.indexOf('transform-vue-jsx') > -1 &&
216+
Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1
217+
) {
218+
const vuePlugin = await import(/* webpackChunkName: 'babel-plugin-transform-vue-jsx' */ 'babel-plugin-transform-vue-jsx');
219+
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
220+
}
221+
222+
if (
223+
flattenedPlugins.indexOf('jsx-pragmatic') > -1 &&
224+
Object.keys(Babel.availablePlugins).indexOf('jsx-pragmatic') === -1
225+
) {
226+
const pragmaticPlugin = await import(/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic');
227+
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
228+
}
201229
}
202230

203231
try {
@@ -235,18 +263,22 @@ self.addEventListener('message', async event => {
235263
})
236264
);
237265

238-
const plugins = [...config.plugins, 'dynamic-import-node'];
266+
const plugins = [...config.plugins];
239267

240-
if (loaderOptions.dynamicCSSModules) {
241-
plugins.push('dynamic-css-modules');
242-
}
268+
if (!disableCodeSandboxPlugins) {
269+
plugins.push('dynamic-import-node');
243270

244-
plugins.push(['babel-plugin-detective', { source: true, nodes: true }]);
271+
if (loaderOptions.dynamicCSSModules) {
272+
plugins.push('dynamic-css-modules');
273+
}
245274

246-
if (!sandboxOptions || sandboxOptions.infiniteLoopProtection) {
247-
plugins.push('babel-plugin-transform-prevent-infinite-loops');
275+
if (!sandboxOptions || sandboxOptions.infiniteLoopProtection) {
276+
plugins.push('babel-plugin-transform-prevent-infinite-loops');
277+
}
248278
}
249279

280+
plugins.push(['babel-plugin-detective', { source: true, nodes: true }]);
281+
250282
const customConfig = {
251283
...config,
252284
plugins,

‎packages/app/src/sandbox/eval/transpilers/babel/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ class BabelTranspiler extends WorkerTranspiler {
4545
config: babelConfig,
4646
path,
4747
loaderOptions: loaderContext.options,
48+
49+
babelTranspilerOptions:
50+
loaderContext.options.configurations &&
51+
loaderContext.options.configurations.babelTranspiler &&
52+
loaderContext.options.configurations.babelTranspiler.parsed,
4853
sandboxOptions:
4954
loaderContext.options.configurations &&
5055
loaderContext.options.configurations.sandbox &&

‎packages/common/templates/babel.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @flow
2+
import Template from './template';
3+
import { decorateSelector } from '../theme';
4+
import configurations from './configuration';
5+
6+
export default new Template(
7+
'babel-repl',
8+
'Babel',
9+
'https://github.com/@babel/core',
10+
'babel',
11+
decorateSelector(() => '#F5DA55'),
12+
{
13+
extraConfigurations: {
14+
'/.babelrc': configurations.babelrc,
15+
'/babel-transpiler.json': configurations.babelTranspiler,
16+
},
17+
}
18+
);

‎packages/common/templates/configuration/babel-transpiler/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import type { ConfigurationFile } from '../types';
3+
4+
const config: ConfigurationFile = {
5+
title: 'babel-transpiler.json',
6+
type: 'babelTranspiler',
7+
description: 'Configuration for the Babel REPL.',
8+
moreInfoUrl: 'https://eslint.org/docs/user-guide/configuring',
9+
10+
getDefaultCode: () => {
11+
return '{}';
12+
},
13+
};
14+
15+
export default config;

‎packages/common/templates/configuration/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import sandboxConfig from './sandbox';
55
import babelrc from './babelrc';
66
import angularCli from './angular-cli';
77
import tsconfig from './tsconfig';
8+
import babelTranspiler from './babel-transpiler';
89

910
const configs = {
1011
babelrc,
12+
babelTranspiler,
1113
packageJSON,
1214
prettierRC,
1315
sandboxConfig,

‎packages/common/templates/configuration/ui.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import sandboxUI from './sandbox/ui';
66

77
export default function getUI(configType: string) {
88
switch (configType) {
9-
case configs.prettier.type: {
9+
case configs.prettierRC.type: {
1010
return prettierUI;
1111
}
12-
case configs.sandbox.type: {
12+
case configs.sandboxConfig.type: {
1313
return sandboxUI;
1414
}
1515
default: {

0 commit comments

Comments
 (0)