Skip to content

Commit 88016ff

Browse files
author
Ives van Hoorne
committed
TranspiledView
1 parent 5752883 commit 88016ff

File tree

12 files changed

+254
-111
lines changed

12 files changed

+254
-111
lines changed

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

Lines changed: 65 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ async function compile({
131131
template,
132132
entry,
133133
showOpenInCodeSandbox = true,
134+
skipEval = false,
134135
}) {
135136
dispatch({
136137
type: 'start',
@@ -217,75 +218,78 @@ async function compile({
217218

218219
debug(`Transpilation time ${Date.now() - t}ms`);
219220

220-
resetScreen();
221+
console.log(skipEval);
222+
if (!skipEval) {
223+
resetScreen();
221224

222-
if (!manager.webpackHMR) {
223-
try {
224-
const children = document.body.children;
225-
// Do unmounting for react
226-
if (manifest.dependencies.find(n => n.name === 'react-dom')) {
227-
const reactDOMModule = manager.resolveModule('react-dom', '');
228-
const reactDOM = manager.evaluateModule(reactDOMModule);
225+
if (!manager.webpackHMR) {
226+
try {
227+
const children = document.body.children;
228+
// Do unmounting for react
229+
if (manifest.dependencies.find(n => n.name === 'react-dom')) {
230+
const reactDOMModule = manager.resolveModule('react-dom', '');
231+
const reactDOM = manager.evaluateModule(reactDOMModule);
229232

230-
reactDOM.unmountComponentAtNode(document.body);
233+
reactDOM.unmountComponentAtNode(document.body);
231234

232-
for (let i = 0; i < children.length; i += 1) {
233-
if (children[i].tagName === 'DIV') {
234-
reactDOM.unmountComponentAtNode(children[i]);
235+
for (let i = 0; i < children.length; i += 1) {
236+
if (children[i].tagName === 'DIV') {
237+
reactDOM.unmountComponentAtNode(children[i]);
238+
}
235239
}
236240
}
241+
} catch (e) {
242+
/* don't do anything with this error */
237243
}
238-
} catch (e) {
239-
/* don't do anything with this error */
240244
}
241-
}
242-
if (!manager.webpackHMR || firstLoad) {
243-
const htmlModule =
244-
modules[
245-
templateDefinition
246-
.getHTMLEntries(configurations)
247-
.find(p => modules[p])
248-
];
249-
250-
const html = htmlModule
251-
? htmlModule.code
252-
: template === 'vue-cli'
253-
? '<div id="app"></div>'
254-
: '<div id="root"></div>';
255-
document.body.innerHTML = html;
256-
}
245+
if (!manager.webpackHMR || firstLoad) {
246+
const htmlModule =
247+
modules[
248+
templateDefinition
249+
.getHTMLEntries(configurations)
250+
.find(p => modules[p])
251+
];
252+
253+
const html = htmlModule
254+
? htmlModule.code
255+
: template === 'vue-cli'
256+
? '<div id="app"></div>'
257+
: '<div id="root"></div>';
258+
document.body.innerHTML = html;
259+
}
257260

258-
const tt = Date.now();
259-
const oldHTML = document.body.innerHTML;
260-
const evalled = manager.evaluateModule(managerModuleToTranspile);
261-
debug(`Evaluation time: ${Date.now() - tt}ms`);
262-
const domChanged = oldHTML !== document.body.innerHTML;
263-
264-
if (
265-
isModuleView &&
266-
!domChanged &&
267-
!managerModuleToTranspile.path.endsWith('.html')
268-
) {
269-
const isReact =
270-
managerModuleToTranspile.code &&
271-
managerModuleToTranspile.code.includes('React');
272-
273-
if (isReact) {
274-
// initiate boilerplates
275-
if (getBoilerplates().length === 0) {
276-
try {
277-
await evalBoilerplates(defaultBoilerplates);
278-
} catch (e) {
279-
console.log("Couldn't load all boilerplates");
261+
const tt = Date.now();
262+
const oldHTML = document.body.innerHTML;
263+
const evalled = manager.evaluateModule(managerModuleToTranspile);
264+
debug(`Evaluation time: ${Date.now() - tt}ms`);
265+
const domChanged = oldHTML !== document.body.innerHTML;
266+
267+
if (
268+
isModuleView &&
269+
!domChanged &&
270+
!managerModuleToTranspile.path.endsWith('.html')
271+
) {
272+
const isReact =
273+
managerModuleToTranspile.code &&
274+
managerModuleToTranspile.code.includes('React');
275+
276+
if (isReact) {
277+
// initiate boilerplates
278+
if (getBoilerplates().length === 0) {
279+
try {
280+
await evalBoilerplates(defaultBoilerplates);
281+
} catch (e) {
282+
console.log("Couldn't load all boilerplates");
283+
}
280284
}
281-
}
282285

283-
const boilerplate = findBoilerplate(managerModuleToTranspile);
284-
if (boilerplate) {
285-
try {
286-
boilerplate.module.default(evalled);
287-
} catch (e) {
288-
console.error(e);
286+
const boilerplate = findBoilerplate(managerModuleToTranspile);
287+
if (boilerplate) {
288+
try {
289+
boilerplate.module.default(evalled);
290+
} catch (e) {
291+
console.error(e);
292+
}
289293
}
290294
}
291295
}
@@ -320,6 +324,7 @@ async function compile({
320324

321325
dispatch({
322326
type: 'success',
327+
state: manager.serialize(),
323328
});
324329

325330
manager.save();
@@ -359,6 +364,7 @@ type Arguments = {
359364
hasActions: boolean,
360365
template: string,
361366
showOpenInCodeSandbox?: boolean,
367+
skipEval?: boolean,
362368
};
363369

364370
const tasks: Array<Arguments> = [];

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -678,27 +678,31 @@ export default class Manager {
678678
this.hardReload = true;
679679
}
680680

681+
serialize() {
682+
const serializedTModules = {};
683+
684+
Object.keys(this.transpiledModules).forEach(path => {
685+
Object.keys(this.transpiledModules[path].tModules).forEach(query => {
686+
const tModule = this.transpiledModules[path].tModules[query];
687+
serializedTModules[tModule.getId()] = tModule.serialize();
688+
});
689+
});
690+
691+
return {
692+
transpiledModules: serializedTModules,
693+
cachedPaths: this.cachedPaths,
694+
version: VERSION,
695+
configurations: this.configurations,
696+
};
697+
}
698+
681699
/**
682700
* Generate a JSON structure out of this manager that can be used to load
683701
* the manager later on. This is useful for faster initial loading.
684702
*/
685703
async save() {
686704
try {
687-
const serializedTModules = {};
688-
689-
Object.keys(this.transpiledModules).forEach(path => {
690-
Object.keys(this.transpiledModules[path].tModules).forEach(query => {
691-
const tModule = this.transpiledModules[path].tModules[query];
692-
serializedTModules[tModule.getId()] = tModule.serialize();
693-
});
694-
});
695-
696-
await localforage.setItem(this.id, {
697-
transpiledModules: serializedTModules,
698-
cachedPaths: this.cachedPaths,
699-
version: VERSION,
700-
configurations: this.configurations,
701-
});
705+
await localforage.setItem(this.id, this.serialize());
702706
} catch (e) {
703707
if (process.env.NODE_ENV === 'development') {
704708
console.error(e);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { getModulePath } from 'common/sandbox/modules';
77
import { generateFileFromSandbox } from 'common/templates/configuration/package-json';
88

99
import setupHistoryListeners from './url-listeners';
10-
import compile from './compile';
10+
import compile, { getCurrentManager } from './compile';
1111
import setupConsole from './console';
1212
import transformJSON from './console/transform-json';
1313

‎packages/react-sandpack/src/components/CodeEditor/CodeMirror/CodeMirror.tsx‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import * as React from 'react';
2-
import { Controlled } from 'react-codemirror2';
2+
import { IInstance, Controlled } from 'react-codemirror2';
33
import codemirror from 'codemirror';
44

55
import withSandpack from '../../../utils/with-sandpack';
66
import cn from '../../../utils/cn';
77
import { ISandpackContext } from '../../../types';
88

9-
import 'codemirror/mode/javascript/javascript';
10-
import 'codemirror/mode/jsx/jsx';
11-
import 'codemirror/keymap/sublime';
9+
import CodeMirrorComponent from '../../../helper-components/CodeMirror';
1210

1311
interface Props {
1412
sandpack: ISandpackContext;
@@ -22,7 +20,11 @@ class CodeMirror extends React.PureComponent<Props> {
2220
codeMirrorOptions: {},
2321
};
2422

25-
onChange = (editor: any, data: any, value: string) => {
23+
onChange = (
24+
editor: IInstance,
25+
data: codemirror.EditorChange,
26+
value: string
27+
) => {
2628
this.props.sandpack.updateFiles({
2729
...this.props.sandpack.files,
2830
[this.props.sandpack.openedPath]: {
@@ -36,25 +38,13 @@ class CodeMirror extends React.PureComponent<Props> {
3638
const { openedPath, files } = this.props.sandpack;
3739

3840
return (
39-
<div
40-
className={`${cn('CodeMirror', 'container')} ${className}`}
41-
style={{ ...style, position: 'relative' }}
42-
>
43-
<Controlled
44-
options={{
45-
keyMap: 'sublime',
46-
indentUnit: 2,
47-
foldGutter: true,
48-
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
49-
lineNumbers: true,
50-
lineWrapping: false,
51-
mode: 'jsx',
52-
...codeMirrorOptions,
53-
}}
54-
onBeforeChange={this.onChange}
55-
value={files[openedPath].code}
56-
/>
57-
</div>
41+
<CodeMirrorComponent
42+
className={className}
43+
style={style}
44+
codeMirrorOptions={codeMirrorOptions}
45+
onBeforeChange={this.onChange}
46+
value={files[openedPath].code}
47+
/>
5848
);
5949
}
6050
}

‎packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { Broadcast } from 'react-broadcast';
33
import { Manager } from 'sandpack';
44

5-
import { IFileProps, IFile, IFiles } from '../../types';
5+
import { IFile, IFiles } from '../../types';
66

77
export interface State {
88
files: IFiles;
@@ -20,6 +20,7 @@ export interface Props {
2020
width?: number | string;
2121
height?: number | string;
2222
sandboxUrl: string;
23+
skipEval: boolean;
2324
}
2425

2526
export default class SandpackProvider extends React.PureComponent<
@@ -28,6 +29,7 @@ export default class SandpackProvider extends React.PureComponent<
2829
> {
2930
static defaultProps = {
3031
sandboxUrl: 'http://localhost:3001',
32+
skipEval: false,
3133
};
3234

3335
manager?: Manager;
@@ -86,7 +88,9 @@ export default class SandpackProvider extends React.PureComponent<
8688
}
8789

8890
setupFrame = (el: HTMLIFrameElement) => {
89-
this.manager = new Manager(el, this.props.files);
91+
this.manager = new Manager(el, this.props.files, {
92+
skipEval: this.props.skipEval,
93+
});
9094

9195
this.iframe = el;
9296
};
@@ -99,7 +103,7 @@ export default class SandpackProvider extends React.PureComponent<
99103
}
100104
};
101105

102-
componentDidUpdate(props: IFileProps) {
106+
componentDidUpdate(props: Props) {
103107
if (
104108
props.files !== this.props.files ||
105109
props.dependencies !== this.props.dependencies ||

0 commit comments

Comments
 (0)