chore: show ast on playground (#9440)

The modern one

Author: baseballyama

sites/svelte-5-preview/src/lib/Output/Output.svelte

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

sites/svelte-5-preview/src/lib/Repl.svelte

@@ -254,7 +254,7 @@
 		if (!compiler || !$selected) return;
 
 		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;
 		} else {
 			runes = false;

sites/svelte-5-preview/src/lib/workers/compiler/index.js

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

sites/svelte-5-preview/src/routes/+page.svelte

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