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); output = eval(source);
/* eslint-enable no-eval */ /* eslint-enable no-eval */
} catch (e) { } catch (e) {
output = e.message; output = e.message + '\n' + e.stack;
window.__err = e; window.__err = e;
} }
return output; return output;
@ -68,17 +68,6 @@ document.addEventListener('DOMContentLoaded', function() {
.toArray(); .toArray();
}; };
// used when updating preview without running tests // notify that the window methods are ready to run
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.
frameReady.onNext(null); frameReady.onNext(null);
}); });

5
client/rechallenge/transformers.js
View File

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

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

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

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

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

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

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PureComponent from 'react-pure-render/component'; import PureComponent from 'react-pure-render/component';
import NoSSR from 'react-no-ssr';
import Codemirror from 'react-codemirror'; import Codemirror from 'react-codemirror';
const defaultOutput = `/** const defaultOutput = `/**
@ -12,7 +13,7 @@ const defaultOutput = `/**
const defaultOptions = { const defaultOptions = {
lineNumbers: false, lineNumbers: false,
mode: 'text', mode: 'javascript',
theme: 'monokai', theme: 'monokai',
readOnly: 'nocursor', readOnly: 'nocursor',
lineWrapping: true lineWrapping: true
@ -29,9 +30,11 @@ export default class extends PureComponent {
const { output } = this.props; const { output } = this.props;
return ( return (
<div className='challenge-log'> <div className='challenge-log'>
<NoSSR>
<Codemirror <Codemirror
options={ defaultOptions } options={ defaultOptions }
value={ output } /> value={ output } />
</NoSSR>
</div> </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.app.navHeight,
state => state.challengesApp.tests, state => state.challengesApp.tests,
state => state.challengesApp.refresh, state => state.challengesApp.refresh,
state => state.challengesApp.output,
( (
{ challenge: { title, description } = {} }, { challenge: { title, description } = {} },
windowHeight, windowHeight,
navHeight, navHeight,
tests, tests,
refresh refresh,
output
) => ({ ) => ({
title, title,
description, description,
height: windowHeight - navHeight - 20, height: windowHeight - navHeight - 20,
tests, tests,
refresh refresh,
output
}) })
); );
@ -43,7 +46,8 @@ export class SidePanel extends PureComponent {
height: PropTypes.number, height: PropTypes.number,
tests: PropTypes.arrayOf(PropTypes.object), tests: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string, title: PropTypes.string,
refresh: PropTypes.bool refresh: PropTypes.bool,
output: PropTypes.string
}; };
renderDescription(description = [ 'Happy Coding!' ], descriptionRegex) { renderDescription(description = [ 'Happy Coding!' ], descriptionRegex) {
@ -65,7 +69,14 @@ export class SidePanel extends PureComponent {
} }
render() { render() {
const { title, description, height, tests = [], refresh } = this.props; const {
title,
description,
height,
tests = [],
refresh,
output
} = this.props;
const style = { const style = {
overflowX: 'hidden', overflowX: 'hidden',
overflowY: 'auto' overflowY: 'auto'
@ -91,7 +102,7 @@ export class SidePanel extends PureComponent {
</Row> </Row>
</div> </div>
<ToolPanel /> <ToolPanel />
<Output /> <Output output={ output }/>
<br /> <br />
<TestSuite <TestSuite
refresh={ refresh } refresh={ refresh }

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

@ -1,5 +1,6 @@
import { createAction } from 'redux-actions'; import { createAction } from 'redux-actions';
import { updateContents } from '../../../../utils/polyvinyl'; import { updateContents } from '../../../../utils/polyvinyl';
import { loggerToStr } from '../utils';
import types from './types'; import types from './types';
@ -44,10 +45,14 @@ export const updateFiles = createAction(types.updateFiles);
// rechallenge // rechallenge
export const executeChallenge = createAction(types.executeChallenge); export const executeChallenge = createAction(types.executeChallenge);
export const updateMain = createAction(types.updateMain); export const updateMain = createAction(types.updateMain);
export const frameMain = createAction(types.frameMain); export const frameMain = createAction(types.frameMain);
export const frameOutput = createAction(types.frameOutput); export const frameOutput = createAction(types.frameOutput);
export const frameTests = createAction(types.frameTests); export const frameTests = createAction(types.frameTests);
export const runTests = createAction(types.runTests); export const runTests = createAction(types.runTests);
export const updateOutput = createAction(types.updateOutput);
export const updateTests = createAction(types.updateTests); 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, ...state,
currentStep: step, currentStep: step,
previousStep: state.currentStep previousStep: state.currentStep
}),
[types.initOutput]: (state, { payload: output }) => ({
...state,
output
}),
[types.updateOutput]: (state, { payload: output }) => ({
...state,
output: (state.output || '') + output
}) })
}, },
initialState initialState

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

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

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

@ -64,3 +64,16 @@ export function createTests({ tests = [] }) {
testString: test 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', '');
}