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

Merge pull request #2248 from sveltejs/gh-2211

Browse Source 
rebundle on new file, recompile on option change
pull/2250/head
Rich Harris 6 years ago committed by GitHub
parent 81d33a2fb0 a859d5cb90
commit 7a297afa30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File

4
site/src/components/Repl/Input/ComponentSelector.svelte
Unescape View File

@ -5,7 +5,7 @@
export let handle_select;
const { components, selected, request_focus } = getContext('REPL');
const { components, selected, request_focus, rebundle } = getContext('REPL');
let editing = null;
@ -35,6 +35,8 @@
// focus the editor, but wait a beat (so key events aren't misdirected)
setTimeout(request_focus);
rebundle();
}
function remove(component) {

20
site/src/components/Repl/Output/CompilerOptions.svelte
Unescape View File

@ -1,5 +1,7 @@
<script>
export let options;
import { getContext } from 'svelte';
const { compile_options } = getContext('REPL');
</script>
<style>
@ -104,41 +106,41 @@
<div class="option">
<span class="key">generate:</span>
<input id="dom-input" type="radio" bind:group={options.generate} value="dom">
<input id="dom-input" type="radio" bind:group={$compile_options.generate} value="dom">
<label for="dom-input"><span class="string">"dom"</span></label>
<input id="ssr-input" type="radio" bind:group={options.generate} value="ssr">
<input id="ssr-input" type="radio" bind:group={$compile_options.generate} value="ssr">
<label for="ssr-input"><span class="string">"ssr"</span>,</label>
</div>
<label class="option">
<span class="key">dev:</span>
<input type="checkbox" bind:checked={options.dev}> <span class="boolean">{options.dev}</span>,
<input type="checkbox" bind:checked={$compile_options.dev}> <span class="boolean">{$compile_options.dev}</span>,
</label>
<label class="option">
<span class="key">css:</span>
<input type="checkbox" bind:checked={options.css}> <span class="boolean">{options.css}</span>,
<input type="checkbox" bind:checked={$compile_options.css}> <span class="boolean">{$compile_options.css}</span>,
</label>
<label class="option">
<span class="key">hydratable:</span>
<input type="checkbox" bind:checked={options.hydratable}> <span class="boolean">{options.hydratable}</span>,
<input type="checkbox" bind:checked={$compile_options.hydratable}> <span class="boolean">{$compile_options.hydratable}</span>,
</label>
<label class="option">
<span class="key">customElement:</span>
<input type="checkbox" bind:checked={options.customElement}> <span class="boolean">{options.customElement}</span>,
<input type="checkbox" bind:checked={$compile_options.customElement}> <span class="boolean">{$compile_options.customElement}</span>,
</label>
<label class="option">
<span class="key">immutable:</span>
<input type="checkbox" bind:checked={options.immutable}> <span class="boolean">{options.immutable}</span>,
<input type="checkbox" bind:checked={$compile_options.immutable}> <span class="boolean">{$compile_options.immutable}</span>,
</label>
<label class="option">
<span class="key">legacy:</span>
<input type="checkbox" bind:checked={options.legacy}> <span class="boolean">{options.legacy}</span>
<input type="checkbox" bind:checked={$compile_options.legacy}> <span class="boolean">{$compile_options.legacy}</span>
</label>
});
</div>

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

@ -13,34 +13,26 @@
export let runtimeError;
export let embedded;
let compile_options = {
generate: 'dom',
dev: false,
css: false,
hydratable: false,
customElement: false,
immutable: false,
legacy: false
};
let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122
register_output({
set: async selected => {
set: async (selected, options) => {
if (selected.type === 'js') {
js_editor.set(`/* Select a component to see its compiled code */`);
css_editor.set(`/* Select a component to see its compiled code */`);
return;
}
const compiled = await compiler.compile(selected, compile_options);
const compiled = await compiler.compile(selected, options);
js_editor.set(compiled.js, 'js');
css_editor.set(compiled.css, 'css');
},
update: async selected => {
update: async (selected, options) => {
if (selected.type === 'js') return;
const compiled = await compiler.compile(selected, compile_options);
const compiled = await compiler.compile(selected, options);
js_editor.update(compiled.js);
css_editor.update(compiled.css);
@ -160,7 +152,7 @@
<section slot="b">
<h3>Compiler options</h3>
<CompilerOptions bind:options={compile_options}/>
<CompilerOptions bind:foo={foo}/>
</section>
</SplitPane>
{/if}

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

@ -30,7 +30,7 @@
selected.set(data.components[0]);
module_editor.set($selected.source, $selected.type);
output.set($selected);
output.set($selected, $compile_options);
}
export function update(data) {
@ -43,10 +43,10 @@
if (matched_component) {
module_editor.update(matched_component.source);
output.update(matched_component);
output.update(matched_component, $compile_options);
} else {
module_editor.set(matched_component.source, matched_component.type);
output.set(matched_component);
output.set(matched_component, $compile_options);
}
}
@ -56,13 +56,30 @@
const selected = writable(null);
const bundle = writable(null);
const compile_options = writable({
generate: 'dom',
dev: false,
css: false,
hydratable: false,
customElement: false,
immutable: false,
legacy: false
});
let module_editor;
let output;
function rebundle() {
workers.bundler.postMessage({ type: 'bundle', components: $components });
}
setContext('REPL', {
components,
selected,
bundle,
compile_options,
rebundle,
navigate: item => {
const match = /^(.+)\.(\w+)$/.exec(item.filename);
@ -72,7 +89,7 @@
const component = $components.find(c => c.name === name && c.type === type);
selected.set(component);
output.set($selected);
output.set($selected, $compile_options);
// TODO select the line/column in question
},
@ -91,10 +108,9 @@
components.update(c => c);
// recompile selected component
output.update($selected);
output.update($selected, $compile_options);
// regenerate bundle (TODO do this in a separate worker?)
workers.bundler.postMessage({ type: 'bundle', components: $components });
rebundle();
dispatch('change', {
components: $components
@ -117,7 +133,7 @@
function handle_select(component) {
selected.set(component);
module_editor.set(component.source, component.type);
output.set($selected);
output.set($selected, $compile_options);
}
let workers;
@ -153,6 +169,10 @@
$: if (workers && $components) {
workers.bundler.postMessage({ type: 'bundle', components: $components });
}
$: if (output && $selected) {
output.update($selected, $compile_options);
}
</script>
<style>

Write Preview
Loading…
Cancel
Save