Skip to content

Commit 9fa4e98

Browse files
CompuIvesCompuIves
authored
Parcel Template (codesandbox#593)
Parcel Template
1 parent cebba85 commit 9fa4e98

File tree

44 files changed

+1042
-161
lines changed

Some content is hidden

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

44 files changed

+1042
-161
lines changed

‎.eslintrc‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,5 @@
2626
"no-underscore-dangle": "off",
2727
"no-nested-ternary": "warn",
2828
"react/require-default-props": "off"
29-
},
30-
"settings": {
31-
"import/resolver": "webpack"
3229
}
3330
}

‎packages/app/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@
136136
"humps": "CompuIves/humps",
137137
"image-extensions": "^1.1.0",
138138
"immer": "^0.8.5",
139+
"is-url": "^1.2.2",
139140
"jest-circus": "^22.1.4",
140141
"jest-snapshot": "^22.1.2",
141142
"jszip": "^3.1.3",
@@ -152,6 +153,9 @@
152153
"normalizr": "^3.2.3",
153154
"postcss": "^6.0.9",
154155
"postcss-selector-parser": "^2.2.3",
156+
"posthtml": "^0.11.3",
157+
"posthtml-parser": "^0.4.1",
158+
"posthtml-render": "^1.1.0",
155159
"qs": "^6.5.0",
156160
"querystring": "^0.2.0",
157161
"rc-slider": "^8.2.0",

‎packages/app/src/app/components/NewSandbox/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import TerminalIcon from 'react-icons/lib/go/terminal';
55

66
import {
77
newSandboxUrl,
8+
parcelSandboxUrl,
89
newReactTypeScriptSandboxUrl,
910
newPreactSandboxUrl,
1011
newVueSandboxUrl,
@@ -16,6 +17,7 @@ import {
1617

1718
import ReactIcon from 'common/components/logos/React';
1819
import PreactIcon from 'common/components/logos/Preact';
20+
import ParcelIcon from 'common/components/logos/Parcel';
1921
import VueIcon from 'common/components/logos/Vue';
2022
import SvelteIcon from 'common/components/logos/Svelte';
2123
import AngularIcon from 'common/components/logos/Angular';
@@ -43,6 +45,15 @@ function NewSandbox({ signals }) {
4345
return (
4446
<Container>
4547
<RowContainer>
48+
<Logo
49+
Icon={ParcelIcon}
50+
width={50}
51+
height={50}
52+
text="Vanilla"
53+
href={parcelSandboxUrl()}
54+
onClick={() => signals.closeModal()}
55+
/>
56+
4657
<Logo
4758
Icon={ReactIcon}
4859
width={50}

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
// @flow
12
import * as React from 'react';
23
import { inject, observer } from 'mobx-react';
34

45
import Margin from 'common/components/spacing/Margin';
6+
import getDefinition from 'common/templates';
57
import { WorkspaceSubtitle } from '../elements';
68

79
import AddVersion from './AddVersion';
@@ -25,6 +27,8 @@ function Dependencies({ signals, store }) {
2527
const dependencies = parsed.dependencies || {};
2628
// const devDependencies = parsed.devDependencies || {};
2729

30+
const templateDefinition = getDefinition(sandbox.template);
31+
2832
return (
2933
<div>
3034
<Margin bottom={0}>
@@ -66,27 +70,29 @@ function Dependencies({ signals, store }) {
6670
))} */}
6771
<AddVersion>Add Dependency</AddVersion>
6872
</Margin>
69-
<div>
70-
<WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
71-
{(sandbox.externalResources || []).map(resource => (
72-
<ExternalResource
73-
key={resource}
74-
resource={resource}
75-
removeResource={() =>
76-
this.props.signals.workspace.externalResourceRemoved({
73+
{templateDefinition.externalResourcesEnabled && (
74+
<div>
75+
<WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
76+
{(sandbox.externalResources || []).map(resource => (
77+
<ExternalResource
78+
key={resource}
79+
resource={resource}
80+
removeResource={() =>
81+
this.props.signals.workspace.externalResourceRemoved({
82+
resource,
83+
})
84+
}
85+
/>
86+
))}
87+
<AddResource
88+
addResource={resource =>
89+
signals.workspace.externalResourceAdded({
7790
resource,
7891
})
7992
}
8093
/>
81-
))}
82-
<AddResource
83-
addResource={resource =>
84-
signals.workspace.externalResourceAdded({
85-
resource,
86-
})
87-
}
88-
/>
89-
</div>
94+
</div>
95+
)}
9096
</div>
9197
);
9298
}

‎packages/app/src/app/store/modules/files/actions.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { clone } from 'mobx-state-tree';
22
import { getModulePath } from 'common/sandbox/modules';
33
import getDefinition from 'common/templates';
44

5+
import { resolveModuleWrapped } from '../../utils/resolve-module-wrapped';
6+
57
export function whenModuleIsSelected({ state, props, path }) {
68
const currentModule = state.get('editor.currentModule');
79

@@ -382,7 +384,9 @@ export function setDefaultNewCode({ state, props }) {
382384
} else if (config.generateFileFromSandbox) {
383385
code = config.generateFileFromSandbox(sandbox);
384386
} else {
385-
code = config.getDefaultCode(sandbox.template);
387+
const resolveModule = resolveModuleWrapped(sandbox);
388+
389+
code = config.getDefaultCode(sandbox.template, resolveModule);
386390
}
387391

388392
const optimisticModuleIndex = sandbox.modules.findIndex(

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

Lines changed: 153 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { dispatch, clearErrorTransformers } from 'codesandbox-api';
1+
import { dispatch, reattach, clearErrorTransformers } from 'codesandbox-api';
22
import { absolute } from 'common/utils/path';
33
import _debug from 'app/utils/debug';
44
import parseConfigurations from 'common/templates/configuration/parse';
@@ -54,28 +54,143 @@ const WHITELISTED_DEV_DEPENDENCIES = [
5454

5555
// Dependencies that we actually don't need, we will replace this by a dynamic
5656
// system in the future
57-
const BLACKLISTED_DEPENDENCIES = ['react-scripts', 'react-scripts-ts'];
57+
const PREINSTALLED_DEPENDENCIES = [
58+
'node-lib-browser',
59+
'babel-runtime',
60+
'react-scripts',
61+
'react-scripts-ts',
62+
'parcel-bundler',
63+
'babel-preset-env',
64+
'babel-preset-latest',
65+
'babel-preset-es2015',
66+
'babel-preset-es2015-loose',
67+
'babel-preset-es2016',
68+
'babel-preset-es2017',
69+
'babel-preset-react',
70+
'babel-preset-stage-0',
71+
'babel-preset-stage-1',
72+
'babel-preset-stage-2',
73+
'babel-preset-stage-3',
74+
'babel-plugin-check-es2015-constants',
75+
'babel-plugin-external-helpers',
76+
'babel-plugin-inline-replace-variables',
77+
'babel-plugin-syntax-async-functions',
78+
'babel-plugin-syntax-async-generators',
79+
'babel-plugin-syntax-class-constructor-call',
80+
'babel-plugin-syntax-class-properties',
81+
'babel-plugin-syntax-decorators',
82+
'babel-plugin-syntax-do-expressions',
83+
'babel-plugin-syntax-exponentiation-operator',
84+
'babel-plugin-syntax-export-extensions',
85+
'babel-plugin-syntax-flow',
86+
'babel-plugin-syntax-function-bind',
87+
'babel-plugin-syntax-function-sent',
88+
'babel-plugin-syntax-jsx',
89+
'babel-plugin-syntax-object-rest-spread',
90+
'babel-plugin-syntax-trailing-function-commas',
91+
'babel-plugin-transform-async-functions',
92+
'babel-plugin-transform-async-to-generator',
93+
'babel-plugin-transform-async-to-module-method',
94+
'babel-plugin-transform-class-constructor-call',
95+
'babel-plugin-transform-class-properties',
96+
'babel-plugin-transform-decorators',
97+
'babel-plugin-transform-decorators-legacy',
98+
'babel-plugin-transform-do-expressions',
99+
'babel-plugin-transform-es2015-arrow-functions',
100+
'babel-plugin-transform-es2015-block-scoped-functions',
101+
'babel-plugin-transform-es2015-block-scoping',
102+
'babel-plugin-transform-es2015-classes',
103+
'babel-plugin-transform-es2015-computed-properties',
104+
'babel-plugin-transform-es2015-destructuring',
105+
'babel-plugin-transform-es2015-duplicate-keys',
106+
'babel-plugin-transform-es2015-for-of',
107+
'babel-plugin-transform-es2015-function-name',
108+
'babel-plugin-transform-es2015-instanceof',
109+
'babel-plugin-transform-es2015-literals',
110+
'babel-plugin-transform-es2015-modules-amd',
111+
'babel-plugin-transform-es2015-modules-commonjs',
112+
'babel-plugin-transform-es2015-modules-systemjs',
113+
'babel-plugin-transform-es2015-modules-umd',
114+
'babel-plugin-transform-es2015-object-super',
115+
'babel-plugin-transform-es2015-parameters',
116+
'babel-plugin-transform-es2015-shorthand-properties',
117+
'babel-plugin-transform-es2015-spread',
118+
'babel-plugin-transform-es2015-sticky-regex',
119+
'babel-plugin-transform-es2015-template-literals',
120+
'babel-plugin-transform-es2015-typeof-symbol',
121+
'babel-plugin-transform-es2015-unicode-regex',
122+
'babel-plugin-transform-es3-member-expression-literals',
123+
'babel-plugin-transform-es3-property-literals',
124+
'babel-plugin-transform-es5-property-mutators',
125+
'babel-plugin-transform-eval',
126+
'babel-plugin-transform-exponentiation-operator',
127+
'babel-plugin-transform-export-extensions',
128+
'babel-plugin-transform-flow-comments',
129+
'babel-plugin-transform-flow-strip-types',
130+
'babel-plugin-transform-function-bind',
131+
'babel-plugin-transform-jscript',
132+
'babel-plugin-transform-object-assign',
133+
'babel-plugin-transform-object-rest-spread',
134+
'babel-plugin-transform-object-set-prototype-of-to-assign',
135+
'babel-plugin-transform-proto-to-assign',
136+
'babel-plugin-transform-react-constant-elements',
137+
'babel-plugin-transform-react-display-name',
138+
'babel-plugin-transform-react-inline-elements',
139+
'babel-plugin-transform-react-jsx',
140+
'babel-plugin-transform-react-jsx-compat',
141+
'babel-plugin-transform-react-jsx-self',
142+
'babel-plugin-transform-react-jsx-source',
143+
'babel-plugin-transform-regenerator',
144+
'babel-plugin-transform-runtime',
145+
'babel-plugin-transform-strict-mode',
146+
'babel-plugin-undeclared-variables-check',
147+
'babel-plugin-dynamic-import-node',
148+
'babel-plugin-detective',
149+
'babel-plugin-transform-prevent-infinite-loops',
150+
'babel-plugin-transform-vue-jsx',
151+
'babel-plugin-jsx-pragmatic',
152+
];
58153

59-
function getDependencies(parsedPackage) {
154+
function getDependencies(parsedPackage, configurations) {
60155
const {
61156
dependencies: d = {},
62157
peerDependencies = {},
63158
devDependencies = {},
64159
} = parsedPackage;
65160

66-
const returnedDependencies = { ...peerDependencies };
161+
const returnedDependencies = { ...peerDependencies, ...d };
162+
163+
const foundWhitelistedDevDependencies = [...WHITELISTED_DEV_DEPENDENCIES];
164+
165+
// Add all babel plugins/presets to whitelisted dependencies
166+
if (configurations && configurations.babel && configurations.babel.parsed) {
167+
(configurations.babel.parsed.presets || [])
168+
.filter(p => typeof p === 'string')
169+
.forEach(p => {
170+
foundWhitelistedDevDependencies.push(p);
171+
foundWhitelistedDevDependencies.push(`babel-preset-${p}`);
172+
});
173+
174+
(configurations.babel.parsed.plugins || [])
175+
.filter(p => typeof p === 'string')
176+
.forEach(p => {
177+
foundWhitelistedDevDependencies.push(p);
178+
foundWhitelistedDevDependencies.push(`babel-plugin-${p}`);
179+
});
180+
}
67181

68-
Object.keys(d).forEach(dep => {
69-
if (BLACKLISTED_DEPENDENCIES.indexOf(dep) === -1) {
70-
returnedDependencies[dep] = d[dep];
71-
}
72-
});
73182
Object.keys(devDependencies).forEach(dep => {
74-
if (WHITELISTED_DEV_DEPENDENCIES.indexOf(dep) > -1) {
183+
if (foundWhitelistedDevDependencies.indexOf(dep) > -1) {
75184
returnedDependencies[dep] = devDependencies[dep];
76185
}
77186
});
78187

188+
PREINSTALLED_DEPENDENCIES.forEach(dep => {
189+
if (returnedDependencies[dep]) {
190+
delete returnedDependencies[dep];
191+
}
192+
});
193+
79194
return returnedDependencies;
80195
}
81196

@@ -103,8 +218,7 @@ async function updateManager(
103218
manager.setManifest(manifest);
104219
}
105220
manager.updateConfigurations(configurations);
106-
await manager.updateData(managerModules);
107-
return manager;
221+
return await manager.updateData(managerModules);
108222
}
109223

110224
function initializeResizeListener() {
@@ -119,6 +233,24 @@ function initializeResizeListener() {
119233
});
120234
initializedResizeListener = true;
121235
}
236+
237+
function overrideDocumentClose() {
238+
const oldClose = window.document.close;
239+
240+
window.document.close = function close(...args) {
241+
try {
242+
oldClose.call(document, args);
243+
} catch (e) {
244+
throw e;
245+
} finally {
246+
inject();
247+
reattach();
248+
}
249+
};
250+
}
251+
252+
overrideDocumentClose();
253+
122254
inject();
123255

124256
async function compile({
@@ -142,6 +274,7 @@ async function compile({
142274
} catch (e) {
143275
console.error(e);
144276
}
277+
145278
hadError = false;
146279

147280
actionsEnabled = hasActions;
@@ -175,7 +308,7 @@ async function compile({
175308

176309
const parsedPackageJSON = configurations.package.parsed;
177310

178-
const dependencies = getDependencies(parsedPackageJSON);
311+
const dependencies = getDependencies(parsedPackageJSON, configurations);
179312
const { manifest, isNewCombination } = await loadDependencies(dependencies);
180313

181314
if (isNewCombination && !firstLoad) {
@@ -237,7 +370,7 @@ async function compile({
237370
/* don't do anything with this error */
238371
}
239372
}
240-
if (!manager.webpackHMR || firstLoad) {
373+
if ((!manager.webpackHMR || firstLoad) && !manager.preset.htmlDisabled) {
241374
const htmlModule =
242375
modules[
243376
templateDefinition
@@ -257,7 +390,8 @@ async function compile({
257390
const oldHTML = document.body.innerHTML;
258391
const evalled = manager.evaluateModule(managerModuleToTranspile);
259392
debug(`Evaluation time: ${Date.now() - tt}ms`);
260-
const domChanged = oldHTML !== document.body.innerHTML;
393+
const domChanged =
394+
!manager.preset.htmlDisabled && oldHTML !== document.body.innerHTML;
261395

262396
if (
263397
isModuleView &&
@@ -291,7 +425,7 @@ async function compile({
291425

292426
await manager.preset.teardown(manager);
293427

294-
if (!initializedResizeListener) {
428+
if (!initializedResizeListener && !manager.preset.htmlDisabled) {
295429
initializeResizeListener();
296430
}
297431

@@ -325,8 +459,9 @@ async function compile({
325459
manager.clearCache();
326460
}
327461

328-
e.module = e.module;
329-
e.fileName = e.fileName;
462+
if (firstLoad) {
463+
inject();
464+
}
330465

331466
const event = new Event('error');
332467
event.error = e;

0 commit comments

Comments
 (0)