Skip to content

Commit 45926cc

Browse files
Rich-HarrisRich-Harris
authored
bump svelte-split-pane (#1031)
* bump svelte-split-pane * fix
1 parent db2cbee commit 45926cc

File tree

9 files changed

+125
-110
lines changed

9 files changed

+125
-110
lines changed

‎apps/svelte.dev/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@lezer/common": "^1.0.4",
2121
"@lezer/javascript": "^1.4.7",
2222
"@lezer/lr": "^1.3.10",
23-
"@rich_harris/svelte-split-pane": "^1.1.3",
23+
"@rich_harris/svelte-split-pane": "^2.0.0",
2424
"@shikijs/twoslash": "^1.22.0",
2525
"@sveltejs/amp": "^1.1.4",
2626
"@sveltejs/repl": "workspace:*",

‎apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte

Lines changed: 64 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -262,71 +262,79 @@
262262

263263
<div class="top" class:offset={show_editor}>
264264
<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
265-
<section slot="a" class="content">
266-
<Sidebar
267-
bind:sidebar
268-
exercise={data.exercise}
269-
on:select={(e) => {
270-
navigate_to_file(e.detail.file);
271-
}}
272-
/>
273-
</section>
274-
275-
<section slot="b">
265+
{#snippet a()}
266+
<section class="content">
267+
<Sidebar
268+
bind:sidebar
269+
exercise={data.exercise}
270+
on:select={(e) => {
271+
navigate_to_file(e.detail.file);
272+
}}
273+
/>
274+
</section>
275+
{/snippet}
276+
277+
{#snippet b()}
276278
<SplitPane type="vertical" min="100px" max="-4.1rem" pos="50%">
277-
<section slot="a">
279+
{#snippet a()}
278280
<SplitPane
279281
id="editor"
280282
type={mobile ? 'vertical' : 'horizontal'}
281283
min="120px"
282284
max="300px"
283285
pos="200px"
284286
>
285-
<section slot="a" class="navigator">
286-
{#if mobile}
287-
<button class="file" onclick={() => (show_filetree = !show_filetree)}>
288-
{workspace.current.name.replace(
289-
data.exercise.scope.prefix,
290-
data.exercise.scope.name + '/'
291-
) ?? 'Files'}
292-
</button>
293-
{:else}
294-
<Filetree exercise={data.exercise} {workspace} />
295-
{/if}
296-
</section>
297-
298-
<section slot="b" class="editor-container">
299-
<Editor
300-
{workspace}
301-
autocomplete_filter={(file) => {
302-
return (
303-
file.name.startsWith('/src') &&
304-
file.name.startsWith(data.exercise.scope.prefix) &&
305-
file.name !== '/src/__client.js' &&
306-
file.name !== '/src/app.html'
307-
);
308-
}}
309-
/>
310-
<ImageViewer selected={workspace.current} />
311-
312-
{#if mobile && show_filetree}
313-
<div class="mobile-filetree">
314-
<Filetree mobile exercise={data.exercise} {workspace} />
315-
</div>
316-
{/if}
317-
</section>
287+
{#snippet a()}
288+
<section class="navigator">
289+
{#if mobile}
290+
<button class="file" onclick={() => (show_filetree = !show_filetree)}>
291+
{workspace.current.name.replace(
292+
data.exercise.scope.prefix,
293+
data.exercise.scope.name + '/'
294+
) ?? 'Files'}
295+
</button>
296+
{:else}
297+
<Filetree exercise={data.exercise} {workspace} />
298+
{/if}
299+
</section>
300+
{/snippet}
301+
302+
{#snippet b()}
303+
<section class="editor-container">
304+
<Editor
305+
{workspace}
306+
autocomplete_filter={(file) => {
307+
return (
308+
file.name.startsWith('/src') &&
309+
file.name.startsWith(data.exercise.scope.prefix) &&
310+
file.name !== '/src/__client.js' &&
311+
file.name !== '/src/app.html'
312+
);
313+
}}
314+
/>
315+
<ImageViewer selected={workspace.current} />
316+
317+
{#if mobile && show_filetree}
318+
<div class="mobile-filetree">
319+
<Filetree mobile exercise={data.exercise} {workspace} />
320+
</div>
321+
{/if}
322+
</section>
323+
{/snippet}
318324
</SplitPane>
319-
</section>
320-
321-
<section slot="b" class="preview">
322-
{#if needs_webcontainers(page.data.exercise)}
323-
<Output exercise={data.exercise} {paused} {workspace} />
324-
{:else}
325-
<OutputRollup />
326-
{/if}
327-
</section>
325+
{/snippet}
326+
327+
{#snippet b()}
328+
<section class="preview">
329+
{#if needs_webcontainers(page.data.exercise)}
330+
<Output exercise={data.exercise} {paused} {workspace} />
331+
{:else}
332+
<OutputRollup />
333+
{/if}
334+
</section>
335+
{/snippet}
328336
</SplitPane>
329-
</section>
337+
{/snippet}
330338
</SplitPane>
331339
</div>
332340

@@ -446,7 +454,7 @@
446454
--pos: 5.4rem !important;
447455
}
448456
449-
:global([data-pane]) :global(.divider) {
457+
:global([data-pane]) :global(svelte-split-pane-divider) {
450458
cursor: default;
451459
}
452460
}

‎packages/repl/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@jridgewell/sourcemap-codec": "^1.4.15",
7676
"@replit/codemirror-lang-svelte": "^6.0.0",
7777
"@replit/codemirror-vim": "^6.0.14",
78-
"@rich_harris/svelte-split-pane": "^1.1.3",
78+
"@rich_harris/svelte-split-pane": "^2.0.0",
7979
"@rollup/browser": "^4.17.2",
8080
"@sveltejs/site-kit": "workspace:*",
8181
"@sveltejs/svelte-json-tree": "^2.2.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
{#if embedded}
113113
<Editor workspace={js_workspace} />
114114
{:else}
115-
<PaneWithPanel pos="50%" panel="Compiler options">
115+
<PaneWithPanel pos="50%" max="-4.2rem" panel="Compiler options">
116116
<div slot="main">
117117
<Editor workspace={js_workspace} />
118118
</div>

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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
<script lang="ts">
22
import { spring } from 'svelte/motion';
3-
import { SplitPane } from '@rich_harris/svelte-split-pane';
4-
import type { ComponentProps } from 'svelte';
3+
import { SplitPane, type Length } from '@rich_harris/svelte-split-pane';
54
65
const UNIT_REGEX = /(\d+)(?:(px|rem|%|em))/i;
76
87
export let panel: string;
98
10-
export let pos: Exclude<ComponentProps<SplitPane>['pos'], undefined> = '90%';
9+
export let pos: Length = '90%';
1110
1211
$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
1312
14-
let max: Exclude<ComponentProps<SplitPane>['max'], undefined> = '90%';
13+
export let max: Length = '90%';
1514
1615
// we can't bind to the spring itself, but we
1716
// can still use the spring to drive `pos`
@@ -32,26 +31,30 @@
3231
driver.set(previous_pos);
3332
} else {
3433
previous_pos = numeric_pos;
35-
driver.set(+max.replace(UNIT_REGEX, '$1'));
34+
driver.set(100);
3635
}
3736
};
3837
</script>
3938

40-
<SplitPane {max} min="10%" type="vertical" bind:pos priority="max">
41-
<section slot="a">
42-
<slot name="main" />
43-
</section>
44-
45-
<section slot="b">
46-
<div class="panel-header">
47-
<button class="panel-heading" on:click={toggle}>{panel}</button>
48-
<slot name="panel-header" />
49-
</div>
50-
51-
<div class="panel-body">
52-
<slot name="panel-body" />
53-
</div>
54-
</section>
39+
<SplitPane {max} min="10%" type="vertical" bind:pos>
40+
{#snippet a()}
41+
<section>
42+
<slot name="main" />
43+
</section>
44+
{/snippet}
45+
46+
{#snippet b()}
47+
<section>
48+
<div class="panel-header">
49+
<button class="panel-heading" on:click={toggle}>{panel}</button>
50+
<slot name="panel-header" />
51+
</div>
52+
53+
<div class="panel-body">
54+
<slot name="panel-body" />
55+
</div>
56+
</section>
57+
{/snippet}
5558
</SplitPane>
5659

5760
<style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@
295295

296296
<div class="iframe-container">
297297
{#if !onLog}
298-
<PaneWithPanel pos="90%" panel="Console">
298+
<PaneWithPanel pos="100%" max="-4.2rem" panel="Console">
299299
<div slot="main">
300300
{@render main()}
301301
</div>

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

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -175,25 +175,29 @@
175175
min="100px"
176176
max="-4.1rem"
177177
>
178-
<section slot="a">
179-
<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
180-
181-
<Editor {workspace} />
182-
</section>
183-
184-
<section slot="b" style="height: 100%;">
185-
<Output
186-
status={status_visible ? status : null}
187-
{embedded}
188-
{relaxed}
189-
{can_escape}
190-
{injectedJS}
191-
{injectedCSS}
192-
{previewTheme}
193-
{workspace}
194-
runtimeError={status_visible ? runtime_error : null}
195-
/>
196-
</section>
178+
{#snippet a()}
179+
<section>
180+
<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
181+
182+
<Editor {workspace} />
183+
</section>
184+
{/snippet}
185+
186+
{#snippet b()}
187+
<section>
188+
<Output
189+
status={status_visible ? status : null}
190+
{embedded}
191+
{relaxed}
192+
{can_escape}
193+
{injectedJS}
194+
{injectedCSS}
195+
{previewTheme}
196+
{workspace}
197+
runtimeError={status_visible ? runtime_error : null}
198+
/>
199+
</section>
200+
{/snippet}
197201
</SplitPane>
198202
</div>
199203

@@ -237,7 +241,7 @@
237241
}
238242
}
239243
240-
[data-pane='main'] > .divider::after {
244+
[data-pane='main'] > svelte-split-pane-divider::after {
241245
height: calc(100% - var(--sk-pane-controls-height));
242246
top: var(--sk-pane-controls-height);
243247
}
@@ -269,7 +273,7 @@
269273
--pos: 5.4rem !important;
270274
}
271275
272-
[data-pane] .divider {
276+
[data-pane] svelte-split-pane-divider {
273277
cursor: default;
274278
}
275279
}

‎packages/site-kit/src/lib/styles/utils/dividers.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.divider {
1+
svelte-split-pane-divider {
22
z-index: 2;
33
&::after {
44
background-color: var(--sk-border) !important;

‎pnpm-lock.yaml

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)