gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Challenge now display console.log in output window

Browse Source
This commit is contained in:
Berkeley Martinez
2016-05-27 17:11:25 -07:00
parent 256182836a
commit 2466d66eb1
10 changed files with 127 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/frame-runner.js
View File

@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
output = eval(source);
/* eslint-enable no-eval */
} catch (e) {
output = e.message;
output = e.message + '\n' + e.stack;
window.__err = e;
}
return output;
@ -68,17 +68,6 @@ document.addEventListener('DOMContentLoaded', function() {
.toArray();
};
// used when updating preview without running tests
document.__checkPreview$ = function checkPreview$(args) {
if (window.__err) {
return Rx.Observable.throw(window.__err);
}
return Rx.Observable.just(args);
};
// now that the runPreviewTest$ is defined
// we set the subject to true
// this will let the updatePreview
// script now that we are ready.
// notify that the window methods are ready to run
frameReady.onNext(null);
});

5
client/rechallenge/transformers.js
View File

@ -1,6 +1,8 @@
import { Observable } from 'rx';
import loopProtect from 'loop-protect';
import { updateContents } from '../../common/utils/polyvinyl';
loopProtect.hit = function hit(line) {
var err = 'Error: Exiting potential infinite loop at line ' +
line +
@ -16,8 +18,7 @@ const transformersForHtmlJS = {
{
name: 'add-loop-protect',
transformer: function addLoopProtect(file) {
file.contents = loopProtect(file.contents);
return file;
return updateContents(loopProtect(file.contents), file);
}
}
]

36
client/sagas/execute-challenge-saga.js
View File

@ -7,7 +7,7 @@ import types from '../../common/app/routes/challenges/redux/types';
import {
frameMain,
frameTests,
frameOutput
initOutput
} from '../../common/app/routes/challenges/redux/actions';
import { setExt, updateContents } from '../../common/utils/polyvinyl';
@ -98,18 +98,36 @@ export default function executeChallengeSaga(action$, getState) {
return Observable.combineLatest(head$, frameRunner$)
.map(([ head, frameRunner ]) => {
return head + `<body>${source}</body>` + frameRunner;
})
.map(build => ({ source, build }));
const body = `
<body>
<!-- fcc-start-source -->
${source}
<!-- fcc-end-source -->
</body>`;
return {
build: head + body + frameRunner,
source,
head
};
});
})
.flatMap(payload => {
const actions = [];
actions.push(frameMain(payload));
if (type !== types.updateMain) {
const actions = [
frameMain(payload)
];
if (type === types.executeChallenge) {
actions.push(frameTests(payload));
actions.push(frameOutput(payload));
}
return Observable.from(actions, null, null, Scheduler.default);
});
})
.startWith((
type === types.executeChallenge ?
initOutput('// running test') :
null
))
.catch(error => Observable.just({
type: 'app.error',
error
}));
});
}

65
client/sagas/frame-saga.js
View File

@ -1,9 +1,9 @@
import Rx, { Observable, Subject } from 'rx';
import tape from 'tape';
import loopProtect from 'loop-protect';
import types from '../../common/app/routes/challenges/redux/types';
import {
updateOutput
} from '../../common/app/routes/challenges/redux/types';
} from '../../common/app/routes/challenges/redux/actions';
import {
updateTests
} from '../../common/app/routes/challenges/redux/actions';
@ -11,7 +11,6 @@ import {
// we use three different frames to make them all essentially pure functions
const mainId = 'fcc-main-frame';
const testId = 'fcc-test-frame';
const outputId = 'fcc-output-frame';
const createHeader = (id = mainId) => `
<script>
@ -38,22 +37,45 @@ function getFrameDocument(document, id = mainId) {
if (!frame) {
frame = createFrame(document, id);
}
return frame.contentDocument || frame.contentWindow.document;
frame.contentWindow.loopProtect = loopProtect;
return {
frame: frame.contentDocument || frame.contentWindow.document,
frameWindow: frame.contentWindow
};
}
function frameMain({ build } = {}, document) {
const main = getFrameDocument(document);
const consoleReg = /(?:\b)console(\.log\S+)/g;
const sourceReg =
/(<!-- fcc-start-source -->)([\s\S]*?)(?=<!-- fcc-end-source -->)/g;
function proxyConsole(build, source) {
const newSource = source.replace(consoleReg, (match, methodCall) => {
return 'window.__console' + methodCall;
});
return build.replace(sourceReg, '\$1' + newSource);
}
function buildProxyConsole(window, proxyLogger$) {
const oldLog = window.console.log.bind(console);
window.__console = {};
window.__console.log = function proxyConsole(...args) {
proxyLogger$.onNext(args);
return oldLog(...args);
};
}
function frameMain({ build, source } = {}, document, proxyLogger$) {
const { frame: main, frameWindow } = getFrameDocument(document);
refreshFrame(main);
buildProxyConsole(frameWindow, proxyLogger$);
main.open();
main.write(createHeader() + build);
main.write(createHeader() + proxyConsole(build, source));
main.close();
}
function frameTests({ build, source } = {}, document) {
const tests = getFrameDocument(document, testId);
const { frame: tests } = getFrameDocument(document, testId);
refreshFrame(tests);
tests.Rx = Rx;
tests.tape = tape;
tests.__source = source;
tests.open();
tests.write(createHeader(testId) + build);
@ -62,32 +84,33 @@ function frameTests({ build, source } = {}, document) {
export default function frameSaga(actions$, getState, { window, document }) {
window.__common = {};
window.__common.shouldRun = () => true;
const proxyLogger$ = new Subject();
const runTests$ = window.__common[testId + 'Ready$'] =
new Subject();
const updateOutput$ = window.__common[outputId + 'Ready$'] =
new Subject();
window.__common.shouldRun = () => true;
const result$ = actions$
.filter(({ type }) => (
type === types.frameMain ||
type === types.frameTests
type === types.frameTests ||
type === types.frameOutput
))
.map(action => {
if (action.type === types.frameMain) {
return frameMain(action.payload, document);
return frameMain(action.payload, document, proxyLogger$);
}
if (action.type === types.frameTests) {
return frameTests(action.payload, document);
}
return null;
return frameTests(action.payload, document);
});
return Observable.merge(
updateOutput$.map(updateOutput),
proxyLogger$.map(args => {
return updateOutput(args);
}),
runTests$.flatMap(() => {
const frame = getFrameDocument(document, testId);
const { frame } = getFrameDocument(document, testId);
const { tests } = getState().challengesApp;
return frame.__runTests$(tests).map(updateTests);
return frame.__runTests$(tests)
.map(updateTests)
.concat(Observable.just(updateOutput('// tests completed')).delay(250));
}),
result$
);

11
common/app/routes/challenges/components/classic/Output.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import PureComponent from 'react-pure-render/component';
import NoSSR from 'react-no-ssr';
import Codemirror from 'react-codemirror';
const defaultOutput = `/**
@ -12,7 +13,7 @@ const defaultOutput = `/**
const defaultOptions = {
lineNumbers: false,
mode: 'text',
mode: 'javascript',
theme: 'monokai',
readOnly: 'nocursor',
lineWrapping: true
@ -29,9 +30,11 @@ export default class extends PureComponent {
const { output } = this.props;
return (
<div className='challenge-log'>
<Codemirror
options={ defaultOptions }
value={ output } />
<NoSSR>
<Codemirror
options={ defaultOptions }
value={ output } />
</NoSSR>
</div>
);
}

21
common/app/routes/challenges/components/classic/Side-Panel.jsx
View File

@ -16,18 +16,21 @@ const mapStateToProps = createSelector(
state => state.app.navHeight,
state => state.challengesApp.tests,
state => state.challengesApp.refresh,
state => state.challengesApp.output,
(
{ challenge: { title, description } = {} },
windowHeight,
navHeight,
tests,
refresh
refresh,
output
) => ({
title,
description,
height: windowHeight - navHeight - 20,
tests,
refresh
refresh,
output
})
);
@ -43,7 +46,8 @@ export class SidePanel extends PureComponent {
height: PropTypes.number,
tests: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string,
refresh: PropTypes.bool
refresh: PropTypes.bool,
output: PropTypes.string
};
renderDescription(description = [ 'Happy Coding!' ], descriptionRegex) {
@ -65,7 +69,14 @@ export class SidePanel extends PureComponent {
}
render() {
const { title, description, height, tests = [], refresh } = this.props;
const {
title,
description,
height,
tests = [],
refresh,
output
} = this.props;
const style = {
overflowX: 'hidden',
overflowY: 'auto'
@ -91,7 +102,7 @@ export class SidePanel extends PureComponent {
</Row>
</div>
<ToolPanel />
<Output />
<Output output={ output }/>
<br />
<TestSuite
refresh={ refresh }

7
common/app/routes/challenges/redux/actions.js
View File

@ -1,5 +1,6 @@
import { createAction } from 'redux-actions';
import { updateContents } from '../../../../utils/polyvinyl';
import { loggerToStr } from '../utils';
import types from './types';
@ -44,10 +45,14 @@ export const updateFiles = createAction(types.updateFiles);
// rechallenge
export const executeChallenge = createAction(types.executeChallenge);
export const updateMain = createAction(types.updateMain);
export const frameMain = createAction(types.frameMain);
export const frameOutput = createAction(types.frameOutput);
export const frameTests = createAction(types.frameTests);
export const runTests = createAction(types.runTests);
export const updateOutput = createAction(types.updateOutput);
export const updateTests = createAction(types.updateTests);
export const initOutput = createAction(types.initOutput, loggerToStr);
export const updateOutput = createAction(types.updateOutput, loggerToStr);

8
common/app/routes/challenges/redux/reducer.js
View File

@ -60,6 +60,14 @@ const mainReducer = handleActions(
...state,
currentStep: step,
previousStep: state.currentStep
}),
[types.initOutput]: (state, { payload: output }) => ({
...state,
output
}),
[types.updateOutput]: (state, { payload: output }) => ({
...state,
output: (state.output || '') + output
})
},
initialState

1
common/app/routes/challenges/redux/types.js
View File

@ -27,5 +27,6 @@ export default createTypes([
'frameOutput',
'frameTests',
'updateOutput',
'initOutput',
'updateTests'
], 'challenges');

13
common/app/routes/challenges/utils.js
View File

@ -64,3 +64,16 @@ export function createTests({ tests = [] }) {
testString: test
}));
}
export function loggerToStr(args) {
args = Array.isArray(args) ? args : [args];
return args
.map(arg => typeof arg === 'undefined' ? 'undefined' : arg)
.map(arg => {
if (typeof arg !== 'string') {
return JSON.stringify(arg);
}
return arg;
})
.reduce((str, arg) => str + arg + '\n', '');
}