chore: show ast on playground (#9440)

The modern one
pull/9446/head
Yuichiro Yamashita 1 year ago committed by GitHub
parent 66661eff04
commit a6fdc47a0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -58,8 +58,7 @@
let view = 'result'; let view = 'result';
let markdown = ''; let markdown = '';
/** @type {import('svelte/types/compiler/interfaces').Ast} */ $: ast = compiled?.result?.ast;
let ast;
</script> </script>
<div class="view-toggle"> <div class="view-toggle">
@ -110,7 +109,7 @@
</div> </div>
<!-- ast output --> <!-- ast output -->
{#if showAst} {#if showAst && ast}
<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'ast'}> <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'ast'}>
<!-- ast view interacts with the module editor, wait for it first --> <!-- ast view interacts with the module editor, wait for it first -->
{#if $module_editor} {#if $module_editor}

@ -254,7 +254,7 @@
if (!compiler || !$selected) return; if (!compiler || !$selected) return;
if ($selected.type === 'svelte' || $selected.type === 'js') { if ($selected.type === 'svelte' || $selected.type === 'js') {
compiled = await compiler.compile($selected, $compile_options, false); compiled = await compiler.compile($selected, $compile_options, true);
runes = compiled.result.metadata?.runes ?? false; runes = compiled.result.metadata?.runes ?? false;
} else { } else {
runes = false; runes = false;

@ -3,6 +3,7 @@ self.window = self; //TODO: still need?: egregious hack to get magic-string to w
/** /**
* @type {{ * @type {{
* parse: typeof import('svelte/compiler').parse;
* compile: typeof import('svelte/compiler').compile; * compile: typeof import('svelte/compiler').compile;
* compileModule: typeof import('svelte/compiler').compileModule; * compileModule: typeof import('svelte/compiler').compileModule;
* VERSION: string; * VERSION: string;
@ -65,6 +66,8 @@ function compile({ id, source, options, return_ast }) {
const { js, css, warnings, metadata } = compiled; const { js, css, warnings, metadata } = compiled;
const ast = return_ast ? svelte.parse(source, { modern: true }) : undefined;
return { return {
id, id,
result: { result: {
@ -72,7 +75,8 @@ function compile({ id, source, options, return_ast }) {
css: css?.code || `/* Add a <sty` + `le> tag to see compiled CSS */`, css: css?.code || `/* Add a <sty` + `le> tag to see compiled CSS */`,
error: null, error: null,
warnings, warnings,
metadata metadata,
ast
} }
}; };
} else if (options.filename.endsWith('.svelte.js')) { } else if (options.filename.endsWith('.svelte.js')) {

@ -92,4 +92,5 @@
on:change={change_from_editor} on:change={change_from_editor}
on:remove={change_from_editor} on:remove={change_from_editor}
previewTheme={$theme.current} previewTheme={$theme.current}
showAst={true}
/> />

Loading…
Cancel
Save