Feat(Challenges): no js preview (#16149)
* fix(files): Decouple files from challenges * feat(server/react): Remove action logger use redux remote devtools instead! * feat(Challenges): Disable js on edit, enable on execute * feat(Challenge/Preview): Show message when js is disabled * refactor(frameEpic): Reduce code by using lodash * feat(frameEpic): Disable js in preview by state * feat(frameEpic): Colocate epic in Challenges/redux * refactor(ExecuteChallengeEpic): CoLocated with Challenges * refactor(executeChallengesEpic): Separate tests from main logic * feat(Challenge/Preview): Update main on edit * feat(frameEpuc): Replace frame on edit/execute This allows for sandbox to work properly * fix(Challenges/Utils): Require utisl * revert(frameEpic): Hoist function to mount code in frame * fix(frameEpic): Ensure new frame is given classname * feat(executeChallenge): Update main on code unlocked * fix(frameEpic): Filter out empty test message * fix(Challenge/Preview): Remove unnessary quote in classname * feat(codeStorageEpic): Separate localstorage from solutions loading * fix(fetchUser): Merge user actions into one prefer many effects from one action over one action to one effect * fix(themes): Centralize theme utils and defs * fix(entities.user): Fix user reducer namespacing * feat(frame): Refactor frameEpic to util * feat(Challenges.redux): Should not attempt to update main from storage * fix(loadPreviousChallengeEpic): Refactor for RFR * fix(Challenges.Modern): Show preview plane
This commit is contained in:
Berkeley Martinez
committed by
Quincy Larson
Quincy Larson
parent
9051faee79
commit
2e410330f1
@@ -1,60 +0,0 @@
|
||||
import { Observable } from 'rx';
|
||||
import { getValues } from 'redux-form';
|
||||
import identity from 'lodash/identity';
|
||||
|
||||
import { fetchScript } from '../utils/fetch-and-cache.js';
|
||||
import throwers from '../rechallenge/throwers';
|
||||
import {
|
||||
applyTransformers,
|
||||
proxyLoggerTransformer
|
||||
} from '../rechallenge/transformers';
|
||||
import {
|
||||
cssToHtml,
|
||||
jsToHtml,
|
||||
concactHtml
|
||||
} from '../rechallenge/builders.js';
|
||||
import {
|
||||
createFileStream,
|
||||
pipe
|
||||
} from '../../common/utils/polyvinyl.js';
|
||||
|
||||
|
||||
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/' +
|
||||
'ajax/libs/normalize/4.2.0/normalize.min.css'
|
||||
},
|
||||
jQuery
|
||||
];
|
||||
|
||||
export function buildFromFiles(files, required, shouldProxyConsole) {
|
||||
const finalRequires = [...globalRequires, ...required ];
|
||||
return createFileStream(files)
|
||||
::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(
|
||||
fetchScript(frameRunner),
|
||||
fetchScript(jQuery)
|
||||
)
|
||||
.map(([ frameRunner, jQuery ]) => ({
|
||||
build: jQuery + frameRunner,
|
||||
source: { url },
|
||||
checkChallengePayload: { solution: url }
|
||||
}));
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import flow from 'lodash/flow';
|
||||
import { decodeFcc } from '../../common/utils/encode-decode';
|
||||
|
||||
const queryRegex = /^(\?|#\?)/;
|
||||
export function legacyIsInQuery(query, decode) {
|
||||
let decoded;
|
||||
try {
|
||||
decoded = decode(query);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
if (!decoded || typeof decoded.split !== 'function') {
|
||||
return false;
|
||||
}
|
||||
return decoded
|
||||
.replace(queryRegex, '')
|
||||
.split('&')
|
||||
.reduce(function(found, param) {
|
||||
var key = param.split('=')[0];
|
||||
if (key === 'solution') {
|
||||
return true;
|
||||
}
|
||||
return found;
|
||||
}, false);
|
||||
}
|
||||
|
||||
export function getKeyInQuery(query, keyToFind = '') {
|
||||
return query
|
||||
.split('&')
|
||||
.reduce((oldValue, param) => {
|
||||
const key = param.split('=')[0];
|
||||
const value = param
|
||||
.split('=')
|
||||
.slice(1)
|
||||
.join('=');
|
||||
|
||||
if (key === keyToFind) {
|
||||
return value;
|
||||
}
|
||||
return oldValue;
|
||||
}, null);
|
||||
}
|
||||
|
||||
export function getLegacySolutionFromQuery(query = '', decode) {
|
||||
return flow(
|
||||
getKeyInQuery,
|
||||
decode,
|
||||
decodeFcc
|
||||
)(query, 'solution');
|
||||
}
|
||||
|
||||
export function getCodeUri(location, decodeURIComponent) {
|
||||
let query;
|
||||
if (
|
||||
location.search &&
|
||||
legacyIsInQuery(location.search, decodeURIComponent)
|
||||
) {
|
||||
query = location.search.replace(/^\?/, '');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
return getLegacySolutionFromQuery(query, decodeURIComponent);
|
||||
}
|
||||
|
||||
export function removeCodeUri(location, history) {
|
||||
if (
|
||||
typeof location.href.split !== 'function' ||
|
||||
typeof history.replaceState !== 'function'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
history.replaceState(
|
||||
history.state,
|
||||
null,
|
||||
location.href.split('?')[0]
|
||||
);
|
||||
return true;
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
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