2016-05-26 01:28:20 +00:00
|
|
|
import { Scheduler, Observable } from 'rx';
|
2016-05-20 19:42:26 +00:00
|
|
|
|
2016-07-29 04:54:29 +00:00
|
|
|
import {
|
|
|
|
challengeSelector
|
|
|
|
} from '../../common/app/routes/challenges/redux/selectors';
|
2016-05-20 19:42:26 +00:00
|
|
|
import { ajax$ } from '../../common/utils/ajax-stream';
|
2016-05-24 19:01:50 +00:00
|
|
|
import throwers from '../rechallenge/throwers';
|
|
|
|
import transformers from '../rechallenge/transformers';
|
2016-05-20 19:42:26 +00:00
|
|
|
import types from '../../common/app/routes/challenges/redux/types';
|
2016-05-31 22:26:24 +00:00
|
|
|
import { createErrorObservable } from '../../common/app/redux/actions';
|
2016-05-20 19:42:26 +00:00
|
|
|
import {
|
2016-05-26 01:28:20 +00:00
|
|
|
frameMain,
|
|
|
|
frameTests,
|
2016-05-28 05:07:10 +00:00
|
|
|
initOutput,
|
|
|
|
saveCode
|
2016-05-20 19:42:26 +00:00
|
|
|
} from '../../common/app/routes/challenges/redux/actions';
|
|
|
|
import { setExt, updateContents } from '../../common/utils/polyvinyl';
|
|
|
|
|
|
|
|
// createFileStream(files: Dictionary[Path, PolyVinyl]) =>
|
|
|
|
// Observable[...Observable[...PolyVinyl]]
|
|
|
|
function createFileStream(files = {}) {
|
|
|
|
return Observable.just(
|
|
|
|
Observable.from(Object.keys(files)).map(key => files[key])
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-07-29 03:01:17 +00:00
|
|
|
const globalRequires = [{
|
|
|
|
link: 'https://cdnjs.cloudflare.com/' +
|
|
|
|
'ajax/libs/normalize/4.2.0/normalize.min.css'
|
|
|
|
}, {
|
2016-07-29 04:54:29 +00:00
|
|
|
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js'
|
2016-07-29 03:01:17 +00:00
|
|
|
}];
|
2016-05-20 19:42:26 +00:00
|
|
|
|
|
|
|
const scriptCache = new Map();
|
2016-07-29 03:01:17 +00:00
|
|
|
const linkCache = new Map();
|
2016-05-20 19:42:26 +00:00
|
|
|
|
2016-07-29 03:01:17 +00:00
|
|
|
function cacheScript({ src } = {}, crossDomain = true) {
|
2016-05-20 19:42:26 +00:00
|
|
|
if (!src) {
|
2016-07-29 04:54:29 +00:00
|
|
|
throw new Error('No source provided for script');
|
2016-05-20 19:42:26 +00:00
|
|
|
}
|
|
|
|
if (scriptCache.has(src)) {
|
|
|
|
return scriptCache.get(src);
|
|
|
|
}
|
2016-07-29 03:01:17 +00:00
|
|
|
const script$ = ajax$({ url: src, crossDomain })
|
2016-05-20 19:42:26 +00:00
|
|
|
.doOnNext(res => {
|
|
|
|
if (res.status !== 200) {
|
|
|
|
throw new Error('Request errror: ' + res.status);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.map(({ response }) => response)
|
|
|
|
.map(script => `<script>${script}</script>`)
|
|
|
|
.shareReplay();
|
|
|
|
|
|
|
|
scriptCache.set(src, script$);
|
|
|
|
return script$;
|
|
|
|
}
|
|
|
|
|
2016-07-29 03:01:17 +00:00
|
|
|
function cacheLink({ link } = {}, crossDomain = true) {
|
|
|
|
if (!link) {
|
|
|
|
return Observable.throw(new Error('No source provided for link'));
|
|
|
|
}
|
|
|
|
if (linkCache.has(link)) {
|
|
|
|
return linkCache.get(link);
|
|
|
|
}
|
|
|
|
const link$ = ajax$({ url: link, crossDomain })
|
|
|
|
.doOnNext(res => {
|
|
|
|
if (res.status !== 200) {
|
|
|
|
throw new Error('Request errror: ' + res.status);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.map(({ response }) => response)
|
|
|
|
.map(script => `<style>${script}</style>`)
|
2016-07-29 04:54:29 +00:00
|
|
|
.catch(() => Observable.just(''))
|
2016-07-29 03:01:17 +00:00
|
|
|
.shareReplay();
|
|
|
|
|
|
|
|
linkCache.set(link, link$);
|
|
|
|
return link$;
|
|
|
|
}
|
|
|
|
|
2016-05-20 19:42:26 +00:00
|
|
|
|
2016-06-10 21:01:13 +00:00
|
|
|
const htmlCatch = '\n<!--fcc-->';
|
|
|
|
const jsCatch = '\n;/*fcc*/';
|
2016-05-20 19:42:26 +00:00
|
|
|
|
|
|
|
export default function executeChallengeSaga(action$, getState) {
|
2016-07-29 03:01:17 +00:00
|
|
|
const frameRunner$ = cacheScript(
|
|
|
|
{ src: '/js/frame-runner.js' },
|
|
|
|
false
|
|
|
|
);
|
2016-05-20 19:42:26 +00:00
|
|
|
return action$
|
2016-05-26 01:28:20 +00:00
|
|
|
.filter(({ type }) => (
|
|
|
|
type === types.executeChallenge ||
|
|
|
|
type === types.updateMain
|
|
|
|
))
|
2016-05-20 19:42:26 +00:00
|
|
|
.debounce(750)
|
2016-05-26 01:28:20 +00:00
|
|
|
.flatMapLatest(({ type }) => {
|
2016-07-29 04:54:29 +00:00
|
|
|
const state = getState();
|
|
|
|
const { files } = state.challengesApp;
|
|
|
|
const { challenge: { required = [] } } = challengeSelector(state);
|
|
|
|
const finalRequires = [...globalRequires, ...required ];
|
2016-05-20 19:42:26 +00:00
|
|
|
return createFileStream(files)
|
|
|
|
::throwers()
|
|
|
|
::transformers()
|
|
|
|
// createbuild
|
|
|
|
.flatMap(file$ => file$.reduce((build, file) => {
|
|
|
|
let finalFile;
|
|
|
|
if (file.ext === 'js') {
|
|
|
|
finalFile = setExt('html', updateContents(
|
|
|
|
`<script>${file.contents}${jsCatch}</script>`,
|
|
|
|
file
|
|
|
|
));
|
|
|
|
} else if (file.ext === 'css') {
|
|
|
|
finalFile = setExt('html', updateContents(
|
|
|
|
`<style>${file.contents}</style>`,
|
|
|
|
file
|
|
|
|
));
|
|
|
|
} else {
|
|
|
|
finalFile = file;
|
|
|
|
}
|
|
|
|
return build + finalFile.contents + htmlCatch;
|
|
|
|
}, ''))
|
|
|
|
// add required scripts and links here
|
2016-05-26 01:28:20 +00:00
|
|
|
.flatMap(source => {
|
2016-07-29 03:01:17 +00:00
|
|
|
const head$ = Observable.from(finalRequires)
|
2016-05-20 19:42:26 +00:00
|
|
|
.flatMap(required => {
|
2016-07-29 04:54:29 +00:00
|
|
|
if (required.src) {
|
2016-07-29 03:01:17 +00:00
|
|
|
return cacheScript(required, required.crossDomain);
|
|
|
|
}
|
|
|
|
if (required.link) {
|
|
|
|
return cacheLink(required, required.crossDomain);
|
2016-05-20 19:42:26 +00:00
|
|
|
}
|
|
|
|
return Observable.just('');
|
|
|
|
})
|
2016-05-26 01:28:20 +00:00
|
|
|
.reduce((head, required) => head + required, '')
|
|
|
|
.map(head => `<head>${head}</head>`);
|
|
|
|
|
|
|
|
return Observable.combineLatest(head$, frameRunner$)
|
|
|
|
.map(([ head, frameRunner ]) => {
|
2016-05-28 00:11:25 +00:00
|
|
|
const body = `
|
|
|
|
<body>
|
|
|
|
<!-- fcc-start-source -->
|
|
|
|
${source}
|
|
|
|
<!-- fcc-end-source -->
|
|
|
|
</body>`;
|
|
|
|
return {
|
|
|
|
build: head + body + frameRunner,
|
|
|
|
source,
|
|
|
|
head
|
|
|
|
};
|
|
|
|
});
|
2016-05-20 19:42:26 +00:00
|
|
|
})
|
2016-05-26 01:28:20 +00:00
|
|
|
.flatMap(payload => {
|
2016-05-28 00:11:25 +00:00
|
|
|
const actions = [
|
|
|
|
frameMain(payload)
|
|
|
|
];
|
|
|
|
if (type === types.executeChallenge) {
|
2016-05-28 05:07:10 +00:00
|
|
|
actions.push(saveCode(), frameTests(payload));
|
2016-05-26 01:28:20 +00:00
|
|
|
}
|
|
|
|
return Observable.from(actions, null, null, Scheduler.default);
|
2016-05-28 00:11:25 +00:00
|
|
|
})
|
|
|
|
.startWith((
|
|
|
|
type === types.executeChallenge ?
|
|
|
|
initOutput('// running test') :
|
|
|
|
null
|
|
|
|
))
|
2016-05-31 22:26:24 +00:00
|
|
|
.catch(createErrorObservable);
|
2016-05-20 19:42:26 +00:00
|
|
|
});
|
|
|
|
}
|