feat(rechallenge): Retool challenge framework (#13666)
* feat(rechallenge): Retool challenge framework * fix(code-storage): should use setContent not updateContent * fix(rechallenge): fix context issue and temporal zone of death * fix(rechallenge): Fix frame sources for user code * fix(polyvinyl): Set should ignore source and transform should keep track of source * fix(rechallenge): Missing return statement causing issues
This commit is contained in:
Berkeley Martinez
committed by
Quincy Larson
Quincy Larson
parent
da52116860
commit
ee8ac7b453
@@ -1,33 +1,32 @@
|
||||
import { Observable } from 'rx';
|
||||
import { getValues } from 'redux-form';
|
||||
import identity from 'lodash/identity';
|
||||
|
||||
import { ajax$ } from '../../common/utils/ajax-stream';
|
||||
import { fetchScript } from '../utils/fetch-and-cache.js';
|
||||
import throwers from '../rechallenge/throwers';
|
||||
import transformers from '../rechallenge/transformers';
|
||||
import { setExt, updateContents } from '../../common/utils/polyvinyl';
|
||||
import {
|
||||
applyTransformers,
|
||||
proxyLoggerTransformer
|
||||
} from '../rechallenge/transformers';
|
||||
import {
|
||||
cssToHtml,
|
||||
jsToHtml,
|
||||
concactHtml
|
||||
} from '../rechallenge/builders.js';
|
||||
import {
|
||||
createFileStream,
|
||||
pipe
|
||||
} from '../../common/utils/polyvinyl.js';
|
||||
|
||||
const consoleReg = /(?:\b)console(\.log\S+)/g;
|
||||
// const sourceReg =
|
||||
// /(<!-- fcc-start-source -->)([\s\S]*?)(?=<!-- fcc-end-source -->)/g;
|
||||
|
||||
// useConsoleLogProxy(source: String) => String
|
||||
export function useConsoleLogProxy(source) {
|
||||
return source.replace(consoleReg, (match, methodCall) => {
|
||||
return 'window.__console' + methodCall;
|
||||
});
|
||||
}
|
||||
|
||||
// createFileStream(files: Dictionary[Path, PolyVinyl]) =>
|
||||
// Observable[...Observable[...PolyVinyl]]
|
||||
export function createFileStream(files = {}) {
|
||||
return Observable.just(
|
||||
Observable.from(Object.keys(files)).map(key => files[key])
|
||||
);
|
||||
}
|
||||
|
||||
const jQuery = {
|
||||
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
|
||||
};
|
||||
const frameRunner = {
|
||||
src: '/js/frame-runner.js',
|
||||
crossDomain: false,
|
||||
cacheBreaker: true
|
||||
};
|
||||
const globalRequires = [
|
||||
{
|
||||
link: 'https://cdnjs.cloudflare.com/' +
|
||||
@@ -36,135 +35,23 @@ const globalRequires = [
|
||||
jQuery
|
||||
];
|
||||
|
||||
const scriptCache = new Map();
|
||||
export function cacheScript({ src } = {}, crossDomain = true) {
|
||||
if (!src) {
|
||||
throw new Error('No source provided for script');
|
||||
}
|
||||
if (scriptCache.has(src)) {
|
||||
return scriptCache.get(src);
|
||||
}
|
||||
const script$ = ajax$({ url: src, crossDomain })
|
||||
.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$;
|
||||
}
|
||||
|
||||
const linkCache = new Map();
|
||||
export 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>`)
|
||||
.catch(() => Observable.just(''))
|
||||
.shareReplay();
|
||||
|
||||
linkCache.set(link, link$);
|
||||
return link$;
|
||||
}
|
||||
|
||||
const htmlCatch = '\n<!--fcc-->';
|
||||
const jsCatch = '\n;/*fcc*/\n';
|
||||
// we add a cache breaker to prevent browser from caching ajax request
|
||||
const frameRunner = cacheScript({
|
||||
src: `/js/frame-runner.js?cacheBreaker=${Math.random()}` },
|
||||
false
|
||||
);
|
||||
|
||||
export function buildClassic(files, required, shouldProxyConsole) {
|
||||
const finalRequires = [...globalRequires, ...required ];
|
||||
return createFileStream(files)
|
||||
::throwers()
|
||||
::transformers()
|
||||
// createbuild
|
||||
.flatMap(file$ => file$.reduce((build, file) => {
|
||||
let finalFile;
|
||||
const finalContents = [
|
||||
file.head,
|
||||
file.contents,
|
||||
file.tail
|
||||
].map(
|
||||
// if shouldProxyConsole then we change instances of console log
|
||||
// to `window.__console.log`
|
||||
// this let's us tap into logging into the console.
|
||||
// currently we only do this to the main window and not the test window
|
||||
source => shouldProxyConsole ? useConsoleLogProxy(source) : source
|
||||
);
|
||||
if (file.ext === 'js') {
|
||||
finalFile = setExt('html', updateContents(
|
||||
`<script>${finalContents.join(jsCatch)}${jsCatch}</script>`,
|
||||
file
|
||||
));
|
||||
} else if (file.ext === 'css') {
|
||||
finalFile = setExt('html', updateContents(
|
||||
`<style>${finalContents.join(htmlCatch)}</style>`,
|
||||
file
|
||||
));
|
||||
} else {
|
||||
finalFile = file;
|
||||
}
|
||||
return build + finalFile.contents + htmlCatch;
|
||||
}, ''))
|
||||
// add required scripts and links here
|
||||
.flatMap(source => {
|
||||
const head$ = Observable.from(finalRequires)
|
||||
.flatMap(required => {
|
||||
if (required.src) {
|
||||
return cacheScript(required, required.crossDomain);
|
||||
}
|
||||
// css files with `url(...` may not work in style tags
|
||||
// so we put them in raw links
|
||||
if (required.link && required.raw) {
|
||||
return Observable.just(
|
||||
`<link href=${required.link} rel='stylesheet' />`
|
||||
);
|
||||
}
|
||||
if (required.link) {
|
||||
return cacheLink(required, required.crossDomain);
|
||||
}
|
||||
return Observable.just('');
|
||||
})
|
||||
.reduce((head, required) => head + required, '')
|
||||
.map(head => `<head>${head}</head>`);
|
||||
|
||||
return Observable.combineLatest(head$, frameRunner)
|
||||
.map(([ head, frameRunner ]) => {
|
||||
const body = `
|
||||
<body style='margin:8px;'>
|
||||
<!-- fcc-start-source -->
|
||||
${source}
|
||||
<!-- fcc-end-source -->
|
||||
</body>`;
|
||||
return {
|
||||
build: head + body + frameRunner,
|
||||
source,
|
||||
head
|
||||
};
|
||||
});
|
||||
});
|
||||
::pipe(throwers)
|
||||
::pipe(applyTransformers)
|
||||
::pipe(shouldProxyConsole ? proxyLoggerTransformer : identity)
|
||||
::pipe(jsToHtml)
|
||||
::pipe(cssToHtml)
|
||||
::concactHtml(finalRequires, frameRunner);
|
||||
}
|
||||
|
||||
export function buildBackendChallenge(state) {
|
||||
const { solution: url } = getValues(state.form.BackEndChallenge);
|
||||
return Observable.combineLatest(frameRunner, cacheScript(jQuery))
|
||||
return Observable.combineLatest(
|
||||
fetchScript(frameRunner),
|
||||
fetchScript(jQuery)
|
||||
)
|
||||
.map(([ frameRunner, jQuery ]) => ({
|
||||
build: jQuery + frameRunner,
|
||||
source: { url },
|
||||
|
||||
74
client/utils/fetch-and-cache.js
Normal file
74
client/utils/fetch-and-cache.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import { Observable } from 'rx';
|
||||
import { ajax$ } from '../../common/utils/ajax-stream';
|
||||
|
||||
// value used to break browser ajax caching
|
||||
const cacheBreakerValue = Math.random();
|
||||
|
||||
export function _fetchScript(
|
||||
{
|
||||
src,
|
||||
cacheBreaker = false,
|
||||
crossDomain = true
|
||||
} = {},
|
||||
) {
|
||||
if (!src) {
|
||||
throw new Error('No source provided for script');
|
||||
}
|
||||
if (this.cache.has(src)) {
|
||||
return this.cache.get(src);
|
||||
}
|
||||
const url = cacheBreaker ?
|
||||
`${src}?cacheBreaker=${cacheBreakerValue}` :
|
||||
src;
|
||||
const script = ajax$({ url, crossDomain })
|
||||
.doOnNext(res => {
|
||||
if (res.status !== 200) {
|
||||
throw new Error('Request errror: ' + res.status);
|
||||
}
|
||||
})
|
||||
.map(({ response }) => response)
|
||||
.map(script => `<script>${script}</script>`)
|
||||
.shareReplay();
|
||||
|
||||
this.cache.set(src, script);
|
||||
return script;
|
||||
}
|
||||
export const fetchScript = _fetchScript.bind({ cache: new Map() });
|
||||
|
||||
export function _fetchLink(
|
||||
{
|
||||
link: href,
|
||||
raw = false,
|
||||
crossDomain = true
|
||||
} = {},
|
||||
) {
|
||||
if (!href) {
|
||||
return Observable.throw(new Error('No source provided for link'));
|
||||
}
|
||||
if (this.cache.has(href)) {
|
||||
return this.cache.get(href);
|
||||
}
|
||||
// css files with `url(...` may not work in style tags
|
||||
// so we put them in raw links
|
||||
if (raw) {
|
||||
const link = Observable.just(`<link href=${href} rel='stylesheet' />`)
|
||||
.shareReplay();
|
||||
this.cache.set(href, link);
|
||||
return link;
|
||||
}
|
||||
const link = ajax$({ url: href, crossDomain })
|
||||
.doOnNext(res => {
|
||||
if (res.status !== 200) {
|
||||
throw new Error('Request error: ' + res.status);
|
||||
}
|
||||
})
|
||||
.map(({ response }) => response)
|
||||
.map(script => `<style>${script}</style>`)
|
||||
.catch(() => Observable.just(''))
|
||||
.shareReplay();
|
||||
|
||||
this.cache.set(href, link);
|
||||
return link;
|
||||
}
|
||||
|
||||
export const fetchLink = _fetchLink.bind({ cache: new Map() });
|
||||
Reference in New Issue
Block a user