msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #2279 from sveltejs/gh-2147-workaround

Browse Source 
run tutorial and widget REPLs in relaxed sandbox
pull/2286/head
Rich Harris 6 years ago committed by GitHub
parent 29b4615d9d 2eba76a1a1
commit d6b9991d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 13 additions and 42 deletions
Show Stats Download Patch File Download Diff File

4
site/src/components/Repl/Output/Viewer.svelte
Unescape View File

@ -15,6 +15,8 @@
proxy.setProp(prop, value); proxy.setProp(prop, value);
} }
export let relaxed = false;
let iframe; let iframe;
let pending_imports = 0; let pending_imports = 0;
let pending = false; let pending = false;
@ -127,7 +129,7 @@
</style> </style>
<div class="iframe-container"> <div class="iframe-container">
<iframe title="Result" class:inited bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc=' <iframe title="Result" class:inited bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals {relaxed ? 'allow-scripts allow-same-origin' : ''}" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
<!doctype html> <!doctype html>
<html> <html>
<head> <head>

2
site/src/components/Repl/Output/index.svelte
Unescape View File

@ -12,6 +12,7 @@
export let sourceErrorLoc = null; export let sourceErrorLoc = null;
export let runtimeError = null; export let runtimeError = null;
export let embedded = false; export let embedded = false;
export let relaxed = false;
let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122 let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122
@ -120,6 +121,7 @@
<Viewer <Viewer
bind:this={viewer} bind:this={viewer}
bind:error={runtimeError} bind:error={runtimeError}
{relaxed}
on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}" on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
/> />
</div> </div>

2
site/src/components/Repl/ReplWidget.svelte
Unescape View File

@ -83,6 +83,6 @@
<div class="repl-outer"> <div class="repl-outer">
{#if process.browser} {#if process.browser}
<Repl bind:this={repl} {version} embedded={true}/> <Repl bind:this={repl} {version} embedded={true} relaxed/>
{/if} {/if}
</div> </div>

3
site/src/components/Repl/index.svelte
Unescape View File

@ -12,6 +12,7 @@
export let version = 'beta'; // TODO change this to latest when the time comes export let version = 'beta'; // TODO change this to latest when the time comes
export let embedded = false; export let embedded = false;
export let orientation = 'columns'; export let orientation = 'columns';
export let relaxed = false;
export function toJSON() { export function toJSON() {
// TODO there's a bug here — Svelte hoists this function because // TODO there's a bug here — Svelte hoists this function because
@ -222,7 +223,7 @@
</section> </section>
<section slot=b style='height: 100%;'> <section slot=b style='height: 100%;'>
<Output {version} {embedded}/> <Output {version} {embedded} {relaxed}/>
</section> </section>
</SplitPane> </SplitPane>
</div> </div>

37
site/src/routes/repl/embed.svelte
Unescape View File

@ -1,37 +0,0 @@
<script context="module">
export function preload({ query }) {
return {
version: query.version,
gist: query.gist,
example: query.example
};
}
</script>
<script>
import ReplWidget from '../../components/Repl/ReplWidget.svelte';
export let version = 'beta';
export let gist;
export let example;
</script>
<style>
.repl-outer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--back);
overflow: hidden;
box-sizing: border-box;
--pane-controls-h: 4.2rem;
}
</style>
<div class="repl-outer">
{#if process.browser}
<ReplWidget {version} {gist} {example} embedded={true}/>
{/if}
</div>

5
site/src/routes/repl/index.svelte
Unescape View File

@ -23,6 +23,7 @@
let gist; let gist;
let name = 'loading...'; let name = 'loading...';
let zen_mode = false; let zen_mode = false;
let relaxed = false;
$: if (typeof history !== 'undefined') { $: if (typeof history !== 'undefined') {
const params = []; const params = [];
@ -48,6 +49,7 @@
} }
if (gist_id) { if (gist_id) {
relaxed = false;
fetch(`gist/${gist_id}`).then(r => r.json()).then(data => { fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
gist = data; gist = data;
const { id, description, files } = data; const { id, description, files } = data;
@ -88,6 +90,7 @@
function load_example(slug) { function load_example(slug) {
console.log(`loading ${slug}`); console.log(`loading ${slug}`);
relaxed = true;
fetch(`examples/${slug}.json`).then(async response => { fetch(`examples/${slug}.json`).then(async response => {
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
@ -171,6 +174,6 @@
/> />
{#if process.browser} {#if process.browser}
<Repl bind:this={repl} {version}/> <Repl bind:this={repl} {version} {relaxed}/>
{/if} {/if}
</div> </div>

2
site/src/routes/tutorial/[slug]/index.svelte
Unescape View File

@ -239,6 +239,6 @@
</div> </div>
<div class="tutorial-repl"> <div class="tutorial-repl">
<Repl bind:this={repl} orientation="rows" on:change={handle_change}/> <Repl bind:this={repl} orientation="rows" on:change={handle_change} relaxed/>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save