Skip to content

Commit edc5592

Browse files
Rich-HarrisRich-Harris
committed
Merge branch 'main' of github.com:sveltejs/svelte.dev
2 parents 6390752 + 0a244f0 commit edc5592

File tree

16 files changed

+286
-126
lines changed

16 files changed

+286
-126
lines changed

‎apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
4545
.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
4646
.map((f) => ({ ...f, name: f.name.slice(9) })),
4747
{
48-
runes: true
48+
// TODO support Tailwind here?
4949
}
5050
);
5151
}

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
import { Repl } from '@sveltejs/repl';
66
import { mapbox_setup } from '../../../../../config.js';
77
import { page } from '$app/state';
8+
import { decode_and_decompress_text } from '../gzip.js';
9+
import type { File } from 'editor';
810
911
let { data } = $props();
1012
@@ -25,10 +27,40 @@
2527
});
2628
}
2729
30+
// TODO make this munging unnecessary
31+
function munge(data: any): File {
32+
const basename = `${data.name}.${data.type}`;
33+
34+
return {
35+
type: 'file',
36+
name: basename,
37+
basename,
38+
contents: data.source,
39+
text: true
40+
};
41+
}
42+
43+
async function set_files() {
44+
const hash = location.hash.slice(1);
45+
46+
if (!hash) {
47+
repl?.set({
48+
files: data.gist.components.map(munge)
49+
});
50+
51+
return;
52+
}
53+
54+
try {
55+
const recovered = JSON.parse(await decode_and_decompress_text(hash));
56+
repl.set({ files: recovered.files });
57+
} catch {
58+
alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
59+
}
60+
}
61+
2862
afterNavigate(() => {
29-
repl?.set({
30-
files: data.gist.components
31-
});
63+
set_files();
3264
});
3365
3466
const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
@@ -51,7 +83,7 @@
5183
can_escape
5284
injectedJS={mapbox_setup}
5385
previewTheme={theme.current}
54-
embedded
86+
embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
5587
/>
5688
{/if}
5789
</div>

‎packages/editor/src/lib/Workspace.svelte.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export class Workspace {
113113
#files = $state.raw<Item[]>([]);
114114
#current = $state.raw() as File;
115115
#vim = $state(false);
116+
#tailwind = $state(false);
116117

117118
#handlers = {
118119
hover: new Set<(pos: number | null) => void>(),
@@ -464,6 +465,15 @@ export class Workspace {
464465
}
465466
}
466467

468+
get tailwind() {
469+
return this.#tailwind;
470+
}
471+
472+
set tailwind(value) {
473+
this.#tailwind = value;
474+
this.#onreset(this.#files);
475+
}
476+
467477
get vim() {
468478
return this.#vim;
469479
}

‎packages/repl/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"marked": "^14.1.2",
8787
"resolve.exports": "^2.0.2",
8888
"svelte": "5.23.0",
89+
"tailwindcss": "^4.0.15",
8990
"tarparser": "^0.0.4",
9091
"zimmerframe": "^1.1.2"
9192
}

‎packages/repl/src/lib/Bundler.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default class Bundler {
5858
});
5959
}
6060

61-
bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
61+
bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
6262
return new Promise<any>((fulfil) => {
6363
this.handlers.set(uid, fulfil);
6464
this.worker.postMessage({

‎packages/repl/src/lib/Input/ComponentSelector.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,11 @@
170170
<Checkbox bind:checked={workspace.vim}></Checkbox>
171171
</label>
172172

173+
<label class="option">
174+
<span>Toggle Tailwind</span>
175+
<Checkbox bind:checked={workspace.tailwind}></Checkbox>
176+
</label>
177+
173178
<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
174179

175180
{#if download}

‎packages/repl/src/lib/Output/Output.svelte

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
interface Props {
1313
status: string | null;
1414
runtimeError?: Error | null;
15-
embedded?: boolean;
15+
embedded?: boolean | 'output-only';
1616
relaxed?: boolean;
1717
can_escape?: boolean;
1818
injectedJS: string;
@@ -182,16 +182,18 @@
182182
});
183183
</script>
184184

185-
<div class="view-toggle">
186-
{#if workspace.current.name.endsWith('.md')}
187-
<button class="active">Markdown</button>
188-
{:else}
189-
<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
190-
<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
191-
<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
192-
<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
193-
{/if}
194-
</div>
185+
{#if embedded !== 'output-only'}
186+
<div class="view-toggle">
187+
{#if workspace.current.name.endsWith('.md')}
188+
<button class="active">Markdown</button>
189+
{:else}
190+
<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
191+
<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
192+
<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
193+
<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
194+
{/if}
195+
</div>
196+
{/if}
195197

196198
<!-- component viewer -->
197199
<div class="tab-content" class:visible={!is_markdown && view === 'result'}>
@@ -202,6 +204,7 @@
202204
{can_escape}
203205
{injectedJS}
204206
{injectedCSS}
207+
onLog={embedded === 'output-only' ? () => {} : undefined}
205208
theme={previewTheme}
206209
/>
207210
</div>

‎packages/repl/src/lib/Output/ReplProxy.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ export default class ReplProxy {
8585
}
8686
}
8787

88-
eval(script: string) {
89-
return this.iframe_command('eval', { script });
88+
eval(script: string, style?: string) {
89+
return this.iframe_command('eval', { script, style });
9090
}
9191

9292
handle_links() {

‎packages/repl/src/lib/Output/Viewer.svelte

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import Console, { type Log } from './console/Console.svelte';
99
import getLocationFromStack from './get-location-from-stack';
1010
import srcdoc from './srcdoc/index.html?raw';
11+
import srcdoc_styles from './srcdoc/styles.css?raw';
1112
import ErrorOverlay from './ErrorOverlay.svelte';
1213
import type { CompileError } from 'svelte/compiler';
1314
import type { Bundle } from '../types';
@@ -107,7 +108,8 @@
107108
clear_logs();
108109
109110
if (!$bundle.error) {
110-
await proxy?.eval(`
111+
await proxy?.eval(
112+
`
111113
${injectedJS}
112114
113115
if (!window.__setup_focus_handling) {
@@ -183,7 +185,9 @@
183185
}
184186
}
185187
//# sourceURL=playground:output
186-
`);
188+
`,
189+
$bundle?.tailwind ?? srcdoc_styles
190+
);
187191
error = null;
188192
}
189193
} catch (e) {

‎packages/repl/src/lib/Output/srcdoc/index.html

Lines changed: 8 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,13 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<style>
5-
body {
6-
--bg-1: hsl(0, 0%, 100%);
7-
--bg-2: hsl(206, 20%, 90%);
8-
--bg-3: hsl(206, 20%, 80%);
9-
--fg-1: hsl(0, 0%, 13%);
10-
--fg-2: hsl(0, 0%, 20%);
11-
--fg-2: hsl(0, 0%, 30%);
12-
--link: hsl(208, 77%, 47%);
13-
--link-hover: hsl(208, 77%, 55%);
14-
--link-active: hsl(208, 77%, 40%);
15-
--border-radius: 4px;
16-
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
17-
'Open Sans', 'Helvetica Neue', sans-serif;
18-
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
19-
'DejaVu Sans Mono', monospace;
20-
color-scheme: light;
21-
background: var(--bg-1);
22-
color: var(--fg-1);
23-
font-family: var(--font);
24-
line-height: 1.5;
25-
margin: 1rem;
26-
height: calc(100vh - 2rem);
27-
accent-color: var(--hover) !important;
28-
}
29-
30-
a {
31-
color: var(--link);
32-
}
33-
34-
a:hover {
35-
color: var(--link-hover);
36-
}
37-
38-
a:active {
39-
color: var(--link-active);
40-
}
41-
42-
code {
43-
background: var(--bg-2);
44-
font-family: var(--font-mono);
45-
font-size: 0.9em;
46-
padding: 0.15rem 0.3rem;
47-
border-radius: var(--border-radius);
48-
}
49-
50-
ul.todos {
51-
padding: 0;
52-
}
53-
54-
body.dark {
55-
color-scheme: dark;
56-
--bg-1: hsl(0, 0%, 18%);
57-
--bg-2: hsl(0, 0%, 30%);
58-
--bg-3: hsl(0, 0%, 40%);
59-
--fg-1: hsl(0, 0%, 90%);
60-
--fg-2: hsl(0, 0%, 70%);
61-
--fg-3: hsl(0, 0%, 60%);
62-
--link: hsl(206, 96%, 72%);
63-
--link-hover: hsl(206, 96%, 78%);
64-
--link-active: hsl(206, 96%, 64%);
65-
}
66-
</style>
4+
<style id="injected"></style>
675

686
<script>
697
(function () {
8+
const style = document.querySelector('style#injected');
9+
let styles = '';
10+
7011
function send(payload, origin = '*') {
7112
if (payload.command === 'info' && payload.args[0] instanceof Error) {
7213
const error = payload.args[0];
@@ -97,6 +38,10 @@
9738
}
9839

9940
if (action === 'eval') {
41+
if (data.args.style !== undefined && styles !== (styles = data.args.style)) {
42+
style.textContent = styles;
43+
}
44+
10045
(0, eval)(data.args.script);
10146
}
10247

‎packages/repl/src/lib/Output/srcdoc/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
--bg-1: hsl(0, 0%, 100%);
3+
--bg-2: hsl(206, 20%, 90%);
4+
--bg-3: hsl(206, 20%, 80%);
5+
--fg-1: hsl(0, 0%, 13%);
6+
--fg-2: hsl(0, 0%, 20%);
7+
--fg-2: hsl(0, 0%, 30%);
8+
--link: hsl(208, 77%, 47%);
9+
--link-hover: hsl(208, 77%, 55%);
10+
--link-active: hsl(208, 77%, 40%);
11+
--border-radius: 4px;
12+
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
13+
'Open Sans', 'Helvetica Neue', sans-serif;
14+
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
15+
monospace;
16+
color-scheme: light;
17+
background: var(--bg-1);
18+
color: var(--fg-1);
19+
font-family: var(--font);
20+
line-height: 1.5;
21+
margin: 1rem;
22+
height: calc(100vh - 2rem);
23+
accent-color: var(--hover) !important;
24+
}
25+
26+
a {
27+
color: var(--link);
28+
}
29+
30+
a:hover {
31+
color: var(--link-hover);
32+
}
33+
34+
a:active {
35+
color: var(--link-active);
36+
}
37+
38+
code {
39+
background: var(--bg-2);
40+
font-family: var(--font-mono);
41+
font-size: 0.9em;
42+
padding: 0.15rem 0.3rem;
43+
border-radius: var(--border-radius);
44+
}
45+
46+
ul.todos {
47+
padding: 0;
48+
}
49+
50+
body.dark {
51+
color-scheme: dark;
52+
--bg-1: hsl(0, 0%, 18%);
53+
--bg-2: hsl(0, 0%, 30%);
54+
--bg-3: hsl(0, 0%, 40%);
55+
--fg-1: hsl(0, 0%, 90%);
56+
--fg-2: hsl(0, 0%, 70%);
57+
--fg-3: hsl(0, 0%, 60%);
58+
--link: hsl(206, 96%, 72%);
59+
--link-hover: hsl(206, 96%, 78%);
60+
--link-active: hsl(206, 96%, 64%);
61+
}

0 commit comments

Comments
 (0)