Update SvelteKit & prettier plugin, Mark bindable props as bindable, …

…Make container nodes accept children and switch from slot to @render blocks
konvajs · Apr 24, 2024 · d1d28f5 · d1d28f5
1 parent be572b9
commit d1d28f5
Show file tree

Hide file tree

Showing 33 changed files with 98 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.4",
+		"@sveltejs/kit": "^2.5.7",
 		"@sveltejs/package": "^2.1.0",
 		"@tailwindcss/typography": "^0.5.7",
 		"@testing-library/svelte": "^5.1.0",
@@ -61,7 +61,7 @@
 		"lodash.clonedeep": "^4.5.0",
 		"plop": "^4.0.1",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.2.3",
 		"svelte": "5.0.0-next.114",
 		"svelte-check": "^3.6.9",
 		"svelte-highlight": "^7.3.0",
@@ -269,4 +269,4 @@
 			]
 		}
 	}
-}
+}
diff --git a/src/lib/Arc.svelte b/src/lib/Arc.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.ArcConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.ArcConfig> = $props();
 
 	export const handle = new Konva.Arc(config);
 

diff --git a/src/lib/Arrow.svelte b/src/lib/Arrow.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.ArrowConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.ArrowConfig> = $props();
 
 	export const handle = new Konva.Arrow(config);
 

diff --git a/src/lib/Circle.svelte b/src/lib/Circle.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.CircleConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.CircleConfig> = $props();
 
 	export const handle = new Konva.Circle(config);
 

diff --git a/src/lib/Ellipse.svelte b/src/lib/Ellipse.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.EllipseConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.EllipseConfig> = $props();
 
 	export const handle = new Konva.Ellipse(config);
 

diff --git a/src/lib/Group.svelte b/src/lib/Group.svelte
@@ -30,11 +30,15 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 	} from '$lib/util/manageContext';
 	import { registerEvents, type KonvaEvents } from '$lib/util/events';
 	import { copyExistingKeys } from '$lib/util/object';
-	import { type Props } from '$lib/util/props';
+	import { type PropsContainer } from '$lib/util/props';
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config = {}, staticConfig = false }: Props<Konva.GroupConfig | undefined> = $props();
+	let {
+		children,
+		config = $bindable({}),
+		staticConfig = false
+	}: PropsContainer<Konva.GroupConfig | undefined> = $props();
 
 	export const handle = new Konva.Group(config);
 
@@ -76,6 +80,6 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 	setContainerContext(Container.Group, inner);
 </script>
 
-{#if isReady}
-	<slot />
+{#if isReady && children}
+	{@render children()}
 {/if}
diff --git a/src/lib/Image.svelte b/src/lib/Image.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.ImageConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.ImageConfig> = $props();
 
 	export const handle = new Konva.Image(config);
 

diff --git a/src/lib/Label.svelte b/src/lib/Label.svelte
@@ -31,11 +31,15 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 		type KonvaParent
 	} from '$lib/util/manageContext';
 	import { registerEvents, type KonvaEvents } from '$lib/util/events';
-	import { type Props } from '$lib/util/props';
+	import { type PropsContainer } from '$lib/util/props';
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.LabelConfig> = $props();
+	let {
+		children,
+		config = $bindable(),
+		staticConfig = false
+	}: PropsContainer<Konva.LabelConfig> = $props();
 
 	export const handle = new Konva.Label(config);
 
@@ -77,6 +81,6 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 	setContainerContext(Container.Label, inner);
 </script>
 
-{#if isReady}
-	<slot />
+{#if isReady && children}
+	{@render children()}
 {/if}
diff --git a/src/lib/Layer.svelte b/src/lib/Layer.svelte
@@ -27,11 +27,15 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 	import { Container, getParentStage, setContainerContext } from '$lib/util/manageContext';
 	import { registerEvents, type KonvaEvents } from '$lib/util/events';
 	import { copyExistingKeys } from '$lib/util/object';
-	import { type Props } from '$lib/util/props';
+	import { type PropsContainer } from '$lib/util/props';
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config = {}, staticConfig = false }: Props<Konva.LayerConfig | undefined> = $props();
+	let {
+		children,
+		config = $bindable({}),
+		staticConfig = false
+	}: PropsContainer<Konva.LayerConfig | undefined> = $props();
 
 	export const handle = new Konva.Layer(config);
 
@@ -75,6 +79,6 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 	setContainerContext(Container.Layer, inner);
 </script>
 
-{#if isReady}
-	<slot />
+{#if isReady && children}
+	{@render children()}
 {/if}
diff --git a/src/lib/Line.svelte b/src/lib/Line.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.LineConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.LineConfig> = $props();
 
 	export const handle = new Konva.Line(config);
 

diff --git a/src/lib/Path.svelte b/src/lib/Path.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Path.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.PathConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.PathConfig> = $props();
 
 	export const handle = new Konva.Path(config);
 

diff --git a/src/lib/Rect.svelte b/src/lib/Rect.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Rect.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.RectConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.RectConfig> = $props();
 
 	export const handle = new Konva.Rect(config);
 

diff --git a/src/lib/RegularPolygon.svelte b/src/lib/RegularPolygon.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.RegularPolyg
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.RegularPolygonConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.RegularPolygonConfig> = $props();
 
 	export const handle = new Konva.RegularPolygon(config);
 

diff --git a/src/lib/Ring.svelte b/src/lib/Ring.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ring.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.RingConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.RingConfig> = $props();
 
 	export const handle = new Konva.Ring(config);
 

diff --git a/src/lib/Shape.svelte b/src/lib/Shape.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Shape.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.ShapeConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.ShapeConfig> = $props();
 
 	export const handle = new Konva.Shape(config);
 

diff --git a/src/lib/Sprite.svelte b/src/lib/Sprite.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Sprite.html)
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.SpriteConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.SpriteConfig> = $props();
 
 	export const handle = new Konva.Sprite(config);
 

diff --git a/src/lib/Stage.svelte b/src/lib/Stage.svelte
@@ -28,7 +28,13 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, handle, staticConfig = false, ...restProps }: StageProps = $props();
+	let {
+		children,
+		config = $bindable(),
+		handle = $bindable(),
+		staticConfig = false,
+		...restProps
+	}: StageProps = $props();
 	handle = null; // A bit of a workaround as bindings on fallback values are disallowed in runes mode (https://github.com/sveltejs/svelte/issues/9764)
 	let _handle: Konva.Stage | null = null; // Hide inner handle behind a shadow variable to prevent users from overwriting it
 
@@ -74,7 +80,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 </script>
 
 <div bind:this={stage} {...restProps}>
-	{#if isReady}
-		<slot />
+	{#if isReady && children}
+		{@render children()}
 	{/if}
 </div>
diff --git a/src/lib/Star.svelte b/src/lib/Star.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Star.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.StarConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.StarConfig> = $props();
 
 	export const handle = new Konva.Star(config);
 

diff --git a/src/lib/Tag.svelte b/src/lib/Tag.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Tag.html), [
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.TagConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.TagConfig> = $props();
 
 	export const handle = new Konva.Tag(config);
 

diff --git a/src/lib/Text.svelte b/src/lib/Text.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Text.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.TextConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.TextConfig> = $props();
 
 	export const handle = new Konva.Text(config);
 

diff --git a/src/lib/TextPath.svelte b/src/lib/TextPath.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.TextPath.htm
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.TextPathConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.TextPathConfig> = $props();
 
 	export const handle = new Konva.TextPath(config);
 

diff --git a/src/lib/Transformer.svelte b/src/lib/Transformer.svelte
@@ -34,7 +34,8 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Transformer.
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config = {}, staticConfig = false }: Props<Konva.TransformerConfig | undefined> = $props();
+	let { config = $bindable({}), staticConfig = false }: Props<Konva.TransformerConfig | undefined> =
+		$props();
 
 	export const handle = new Konva.Transformer(config);
 

diff --git a/src/lib/Wedge.svelte b/src/lib/Wedge.svelte
@@ -29,7 +29,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Wedge.html),
 
 	interface $$Events extends KonvaEvents {}
 
-	let { config, staticConfig = false }: Props<Konva.WedgeConfig> = $props();
+	let { config = $bindable(), staticConfig = false }: Props<Konva.WedgeConfig> = $props();
 
 	export const handle = new Konva.Wedge(config);
 

diff --git a/src/lib/util/props.ts b/src/lib/util/props.ts
@@ -1,4 +1,5 @@
 import type Konva from 'konva';
+import type { Bindable, Snippet } from 'svelte';
 
 /**
  * Shared props type used on all svelte-konva components
@@ -8,10 +9,17 @@ export type Props<Config> = {
 	staticConfig?: boolean;
 };
 
+/**
+ * Props extension for konva container types which can hold more konva nodes
+ */
+export interface PropsContainer<Config> extends Props<Config> {
+	children?: Snippet;
+}
+
 /**
  * Special props extension for svelte-konva Stage (Forwards rest props to canvas div container)
  */
-export interface StageProps extends Props<Konva.ContainerConfig> {
+export interface StageProps extends PropsContainer<Konva.ContainerConfig> {
 	readonly handle?: null | Konva.Stage;
 	[key: string]: any;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -104,7 +104,7 @@
 			</div>
 		</div>
 		<div class="drawer-side shadow">
-			<label for="my-drawer-2" class="drawer-overlay" />
+			<label for="my-drawer-2" class="drawer-overlay"></label>
 			<ul class="menu menu-compact p-4 overflow-y-auto w-80 bg-base-200 text-base-content h-full">
 				<!-- Sidebar content here -->
 				<li>