diff --git a/site/src/components/Repl/Output/PropEditor.svelte b/site/src/components/Repl/Output/PropEditor.svelte deleted file mode 100644 index 4ea6ce5e7f..0000000000 --- a/site/src/components/Repl/Output/PropEditor.svelte +++ /dev/null @@ -1,71 +0,0 @@ - - - - -
- -
\ No newline at end of file diff --git a/site/src/components/Repl/Output/ReplProxy.js b/site/src/components/Repl/Output/ReplProxy.js index 44b77b84dd..7ae56e35b7 100644 --- a/site/src/components/Repl/Output/ReplProxy.js +++ b/site/src/components/Repl/Output/ReplProxy.js @@ -57,11 +57,6 @@ export default class ReplProxy { this.handleCommandMessage(event.data); } - if (action === 'prop_update') { - const { prop, value } = args; - this.handlers.onPropUpdate(prop, value) - } - if (action === 'fetch_progress') { this.handlers.onFetchProgress(args.remaining) } @@ -71,14 +66,6 @@ export default class ReplProxy { return this.iframeCommand('eval', { script }); } - setProp(prop, value) { - return this.iframeCommand('set_prop', {prop, value}) - } - - bindProps(props) { - return this.iframeCommand('bind_props', { props }) - } - handleLinks() { return this.iframeCommand('catch_clicks', {}); } diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte index eec904526f..08ae0f9639 100644 --- a/site/src/components/Repl/Output/Viewer.svelte +++ b/site/src/components/Repl/Output/Viewer.svelte @@ -6,9 +6,8 @@ import { decode } from 'sourcemap-codec'; const dispatch = createEventDispatcher(); - const { bundle, values, navigate } = getContext('REPL'); + const { bundle, navigate } = getContext('REPL'); - export let props; export let error; // TODO should this be exposed as a prop? export function setProp(prop, value) { @@ -26,13 +25,6 @@ onMount(() => { proxy = new ReplProxy(iframe, { - onPropUpdate: (prop, value) => { - dispatch('binding', { prop, value }); - values.update(values => Object.assign({}, values, { - [prop]: value - })); - }, - onFetchProgress: progress => { pending_imports = progress; } @@ -84,13 +76,10 @@ window._svelteTransitionManager = null; window.component = new SvelteComponent({ - target: document.body, - props: ${JSON.stringify($values)} + target: document.body }); `); - await proxy.bindProps(props); - error = null; } catch (e) { const loc = getLocationFromStack(e.stack, $bundle.dom.map); diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte index ce67ca5f7a..9212b516ed 100644 --- a/site/src/components/Repl/Output/index.svelte +++ b/site/src/components/Repl/Output/index.svelte @@ -4,7 +4,6 @@ import Viewer from './Viewer.svelte'; import CompilerOptions from './CompilerOptions.svelte'; import Compiler from './Compiler.js'; - import PropEditor from './PropEditor.svelte'; import CodeMirror from '../CodeMirror.svelte'; const { values, register_output } = getContext('REPL'); @@ -13,9 +12,6 @@ export let sourceErrorLoc; export let runtimeError; export let embedded; - export let show_props; - - let props; let compile_options = { generate: 'dom', @@ -39,7 +35,6 @@ js_editor.set(compiled.js, 'js'); css_editor.set(compiled.css, 'css'); - if (compiled.props) props = compiled.props; }, update: async selected => { @@ -49,7 +44,6 @@ js_editor.update(compiled.js); css_editor.update(compiled.css); - if (compiled.props) props = compiled.props; } }); @@ -119,19 +113,6 @@ color: var(--text); } - .props { - display: grid; - padding: 0.5em; - grid-template-columns: auto 1fr; - grid-auto-rows: min-content; - grid-gap: 0.5em; - overflow-y: auto; - } - - .props code { - top: .1rem; - } - .tab-content { position: absolute; width: 100%; @@ -166,44 +147,11 @@
- -
- -
- -
- {#if show_props} -

Props editor

- - {#if props} - {#if props.length > 0} -
- {#each props.sort() as prop (prop)} - {prop} - - - - {/each} -
- {:else} -
- - -

This component has no props — declare props with the export keyword

-
- {/if} - {/if} - {/if} -
-
+
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte index 30757f1868..aa9a9fed93 100644 --- a/site/src/components/Repl/index.svelte +++ b/site/src/components/Repl/index.svelte @@ -11,7 +11,6 @@ export let version = 'beta'; // TODO change this to latest when the time comes export let embedded = false; export let orientation = 'columns'; - export let show_props = true; export function toJSON() { // TODO there's a bug here — Svelte hoists this function because @@ -22,14 +21,12 @@ return { imports: $bundle.imports, - components: $components, - values: $values + components: $components }; } export function set(data) { components.set(data.components); - values.set(data.values); selected.set(data.components[0]); module_editor.set($selected.source, $selected.type); @@ -40,7 +37,6 @@ const { name, type } = $selected || {}; components.set(data.components); - values.set(data.values); const matched_component = data.components.find(file => file.name === name && file.type === type); selected.set(matched_component || data.components[0]); @@ -57,7 +53,6 @@ const dispatch = createEventDispatcher(); const components = writable([]); - const values = writable({}); const selected = writable(null); const bundle = writable(null); @@ -66,7 +61,6 @@ setContext('REPL', { components, - values, selected, bundle, @@ -227,7 +221,7 @@
- +
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte index 9f1b6a47a7..427137ae45 100644 --- a/site/src/routes/repl/_components/AppControls/index.svelte +++ b/site/src/routes/repl/_components/AppControls/index.svelte @@ -1,5 +1,4 @@