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

switch REPL orientation in tutorial, hide props editor

Browse Source
pull/2143/head
Rich Harris 7 years ago
parent f4748e23b0
commit 816f83f4b6
4 changed files with 111 additions and 101 deletions
Show Stats Download Patch File Download Diff File

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

@ -19,6 +19,7 @@
export let runtimeError;
export let compileOptions;
export let embedded;
export let show_props;
// refs
let viewer;
@ -121,7 +122,7 @@
</div>
{#if view === 'result'}
<SplitPane type="vertical" pos={67}>
<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
<div slot="a">
{#if bundle}
<Viewer
@ -143,27 +144,29 @@
</div>
<section slot="b">
<h3>Props editor</h3>
{#if props}
{#if props.length > 0}
<div class="props">
{#each props.sort() as prop (prop)}
<code style="display: block; whitespace: pre;">{prop}</code>
<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
<PropEditor
value={$values_store[prop]}
on:change="{e => setPropFromEditor(prop, e.detail.value)}"
/>
{/each}
</div>
{:else}
<div style="padding: 0.5em" class="linkify">
<!-- TODO explain distincion between logic-less and logic-ful components? -->
<!-- TODO style the <a> so it looks like a link -->
<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
</div>
{#if show_props}
<h3>Props editor</h3>
{#if props}
{#if props.length > 0}
<div class="props">
{#each props.sort() as prop (prop)}
<code style="display: block; whitespace: pre;">{prop}</code>
<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
<PropEditor
value={$values_store[prop]}
on:change="{e => setPropFromEditor(prop, e.detail.value)}"
/>
{/each}
</div>
{:else}
<div style="padding: 0.5em" class="linkify">
<!-- TODO explain distincion between logic-less and logic-ful components? -->
<!-- TODO style the <a> so it looks like a link -->
<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
</div>
{/if}
{/if}
{/if}
</section>

153
site/src/components/Repl/Output/replProxy.js
Unescape View File

@ -1,90 +1,89 @@
export default class ReplProxy {
constructor(iframe) {
this.iframe = iframe;
this.cmdId = 1;
this.pendingCmds = new Map();
this.onPropUpdate = null;
this.onFetchProgress = null;
this.handle_event = (ev) => this.handleReplMessage(ev);
window.addEventListener("message", this.handle_event, false);
}
constructor(iframe) {
this.iframe = iframe;
this.cmdId = 1;
this.pendingCmds = new Map();
this.onPropUpdate = null;
this.onFetchProgress = null;
this.handle_event = (ev) => this.handleReplMessage(ev);
window.addEventListener("message", this.handle_event, false);
}
destroy() {
window.removeEventListener("message", this.handle_event);
}
iframeCommand(command, args) {
return new Promise( (resolve, reject) => {
this.cmdId = this.cmdId + 1;
this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
this.iframe.contentWindow.postMessage({
action: command,
cmdId: this.cmdId,
args: args
}, '*')
});
}
destroy() {
window.removeEventListener("message", this.handle_event);
}
handleCommandMessage(cmdData) {
let action = cmdData.action;
let id = cmdData.cmdId;
let handler = this.pendingCmds.get(id);
if (handler) {
this.pendingCmds.delete(id);
if (action == "cmdError") {
let { message, stack } = cmdData;
let e = new Error(message);
e.stack = stack;
console.log("repl cmd fail");
handler.reject(e)
}
iframeCommand(command, args) {
return new Promise( (resolve, reject) => {
this.cmdId = this.cmdId + 1;
this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
this.iframe.contentWindow.postMessage({
action: command,
cmdId: this.cmdId,
args: args
}, '*')
});
}
if (action == "cmdOk") {
handler.resolve(cmdData.args)
}
} else {
console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
}
}
handleCommandMessage(cmdData) {
let action = cmdData.action;
let id = cmdData.cmdId;
let handler = this.pendingCmds.get(id);
if (handler) {
handleReplMessage(ev) {
let action = ev.data.action;
if ( action == "cmdError" || action == "cmdOk" ) {
this.handleCommandMessage(ev.data);
}
this.pendingCmds.delete(id);
if (action == "cmdError") {
let { message, stack } = cmdData;
let e = new Error(message);
e.stack = stack;
console.log("repl cmd fail");
handler.reject(e)
}
if (action == "prop_update") {
let { prop, value } = ev.data.args;
if (this.onPropUpdate)
this.onPropUpdate(prop, value)
}
if (action == "fetch_progress") {
if (this.onFetchProgress)
this.onFetchProgress(ev.data.args.remaining)
}
}
if (action == "cmdOk") {
handler.resolve(cmdData.args)
}
} else {
console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
}
}
eval(script) {
return this.iframeCommand("eval", { script: script });
}
handleReplMessage(ev) {
setProp(prop, value) {
return this.iframeCommand("set_prop", {prop, value})
}
let action = ev.data.action;
if ( action == "cmdError" || action == "cmdOk" ) {
this.handleCommandMessage(ev.data);
}
bindProps(props) {
return this.iframeCommand("bind_props", { props: props })
}
if (action == "prop_update") {
let { prop, value } = ev.data.args;
if (this.onPropUpdate)
this.onPropUpdate(prop, value)
}
handleLinks() {
return this.iframeCommand("catch_clicks", {});
}
if (action == "fetch_progress") {
if (this.onFetchProgress)
this.onFetchProgress(ev.data.args.remaining)
}
}
fetchImports(bundle) {
return this.iframeCommand("fetch_imports", { bundle })
}
eval(script) {
return this.iframeCommand("eval", { script: script });
}
setProp(prop, value) {
return this.iframeCommand("set_prop", {prop, value})
}
bindProps(props) {
return this.iframeCommand("bind_props", { props: props })
}
handleLinks() {
return this.iframeCommand("catch_clicks", {});
}
fetchImports(bundle) {
return this.iframeCommand("fetch_imports", { bundle })
}
}

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

@ -11,6 +11,8 @@
export let version = 'beta'; // TODO change this to latest when the time comes
export let app;
export let embedded = false;
export let orientation = 'auto';
export let show_props = true;
export function toJSON() {
// TODO there's a bug here — Svelte hoists this function because
@ -277,7 +279,12 @@
<div class="container" bind:clientWidth={width}>
<div class="repl-inner" class:offset="{show_output}">
<SplitPane type="horizontal" fixed="{600 > width}" pos={60} fixed_pos={50}>
<SplitPane
type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"
fixed="{600 > width}"
pos="{orientation === 'rows' ? 50 : 60}"
fixed_pos={50}
>
<section slot=a>
<Input
{component_store}
@ -306,6 +313,7 @@
{sourceError}
{runtimeError}
{embedded}
{show_props}
/>
</section>
</SplitPane>

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

@ -146,7 +146,7 @@
</div>
<div class="tutorial-repl">
<Repl {app}/>
<Repl {app} orientation="rows" show_props={false}/>
</div>
</div>

Write Preview
Loading…
Cancel
Save