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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy