Merge pull request #195 from CaptainCodeman/bundle-size

Minimize bundle size

plopfile.js

@@ -90,6 +90,17 @@ const COMPONENT_LIST = [
 ];
 
 const SVELTE_KONVA_COMPONENT_ACTION_LIST = COMPONENT_LIST.map((data) => {
+	switch (data.componentName) {
+		case 'Tag':
+			data.importPath = `konva/lib/shapes/Label`;
+			break;
+		case 'Shape':
+			data.importPath = `konva/lib/${data.componentName}`;
+			break;
+		default:
+			data.importPath = `konva/lib/shapes/${data.componentName}`;
+			break;
+	}
 	return {
 		type: 'add',
 		force: true,

src/lib/Arc.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Arc component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Arc component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Arc x={100} y={100} innerRadius={25} outerRadius={50} angle={120} fill="blue" />
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Arc, type ArcConfig } from 'konva/lib/shapes/Arc';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.ArcConfig> = $props();
+	}: Props<ArcConfig> = $props();
 
-	export const handle = new Konva.Arc({
+	export const handle = new Arc({
 		x,
 		y,
 		scale,

src/lib/Arrow.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Arrow component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Arrow component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Arrow x={100} y={100} points={[0, 0, 40, 40]} pointerLength={20} pointerWidth={20} fill="blue" stroke="blue" strokeWidth={6} />
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Arrow, type ArrowConfig } from 'konva/lib/shapes/Arrow';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.ArrowConfig> = $props();
+	}: Props<ArrowConfig> = $props();
 
-	export const handle = new Konva.Arrow({
+	export const handle = new Arrow({
 		x,
 		y,
 		scale,

src/lib/Circle.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Circle component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Circle component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Circle x={100} y={100} radius={50} fill="blue" />
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Circle, type CircleConfig } from 'konva/lib/shapes/Circle';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.CircleConfig> = $props();
+	}: Props<CircleConfig> = $props();
 
-	export const handle = new Konva.Circle({
+	export const handle = new Circle({
 		x,
 		y,
 		scale,

src/lib/Ellipse.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Ellipse component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Ellipse component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Ellipse x={100} y={100} radiusX={50} radiusY={25} fill="blue"/>
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Ellipse, type EllipseConfig } from 'konva/lib/shapes/Ellipse';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.EllipseConfig> = $props();
+	}: Props<EllipseConfig> = $props();
 
-	export const handle = new Konva.Ellipse({
+	export const handle = new Ellipse({
 		x,
 		y,
 		scale,

src/lib/Group.svelte

@@ -1,6 +1,6 @@
 <!--
 @component
-The Group component needs to be placed inside a svelte-konva Layer or Group component. 
+The Group component needs to be placed inside a svelte-konva Layer or Group component.
 
 The Group component automatically groups all components that are placed inside it.
 
@@ -12,15 +12,16 @@ The Group component automatically groups all components that are placed inside i
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
 
 Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html), [svelte-konva docs](https://konvajs.org/docs/svelte)
 -->
 <script lang="ts">
-	import Konva from 'konva';
+	import Konva from 'konva/lib/Core';
+	import type { Group, GroupConfig } from 'konva/lib/Group';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable, writable } from 'svelte/store';
 	import {
@@ -44,7 +45,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.GroupConfig> & PropsContainer = $props();
+	}: Props<GroupConfig> & PropsContainer = $props();
 
 	export const handle = new Konva.Group({
 		x,
@@ -58,7 +59,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 		...restProps
 	});
 
-	const inner = writable<null | Konva.Group>(null);
+	const inner = writable<null | Group>(null);
 
 	let isReady = $state(false);
 

src/lib/Image.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Image component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Image component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Image x={100} y={100} image={imageObj} width={100} height={100} />
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Image, type ImageConfig } from 'konva/lib/shapes/Image';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.ImageConfig> = $props();
+	}: Props<ImageConfig> = $props();
 
-	export const handle = new Konva.Image({
+	export const handle = new Image({
 		x,
 		y,
 		scale,

src/lib/Label.svelte

@@ -1,6 +1,6 @@
 <!--
 @component
-The Label component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Label component needs to be placed either inside a svelte-konva Layer or Group component.
 
 To work as intended it needs to contain a Tag component as well as a Text component in the order shown below.
 
@@ -13,15 +13,15 @@ To work as intended it needs to contain a Tag component as well as a Text compon
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
 
 Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html), [svelte-konva docs](https://konvajs.org/docs/svelte)
 -->
 <script lang="ts">
-	import Konva from 'konva';
+	import { Label, type LabelConfig } from 'konva/lib/shapes/Label';
 	import { onMount, onDestroy } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 	import {
@@ -45,9 +45,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.LabelConfig> & PropsContainer = $props();
+	}: Props<LabelConfig> & PropsContainer = $props();
 
-	export const handle = new Konva.Label({
+	export const handle = new Label({
 		x,
 		y,
 		scale,
@@ -59,7 +59,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 		...restProps
 	});
 
-	const inner = writable<null | Konva.Label>(null);
+	const inner = writable<null | Label>(null);
 
 	let isReady = $state(false);
 

src/lib/Layer.svelte

@@ -1,6 +1,6 @@
 <!--
 @component
-The Layer component needs to be placed inside a svelte-konva Stage component. 
+The Layer component needs to be placed inside a svelte-konva Stage component.
 
 ### Usage:
 ```tsx
@@ -14,15 +14,17 @@ The Layer component needs to be placed inside a svelte-konva Stage component.
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
 
 Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html), [svelte-konva docs](https://konvajs.org/docs/svelte)
 -->
 <script lang="ts">
-	import Konva from 'konva';
+	import Konva from 'konva/lib/Core';
+	import type { Stage } from 'konva/lib/Stage';
+	import type { Layer, LayerConfig } from 'konva/lib/Layer';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable, writable } from 'svelte/store';
 	import { Container, getParentStage, setContainerContext } from '$lib/util/manageContext';
@@ -41,7 +43,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.LayerConfig> & PropsContainer = $props();
+	}: Props<LayerConfig> & PropsContainer = $props();
 
 	export const handle = new Konva.Layer({
 		x,
@@ -55,11 +57,11 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 		...restProps
 	});
 
-	const inner = writable<null | Konva.Layer>(null);
+	const inner = writable<null | Layer>(null);
 
 	let isReady = $state(false);
 
-	let parent: Writable<null | Konva.Stage> = getParentStage();
+	let parent: Writable<null | Stage> = getParentStage();
 
 	onMount(() => {
 		$parent!.add(handle);

src/lib/Line.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The Line component needs to be placed either inside a svelte-konva Layer or Group component. 
+The Line component needs to be placed either inside a svelte-konva Layer or Group component.
 
 ### Usage:
 ```tsx
 <Line points={[0, 0, 60, 30, 300, 90, 30, 100]} stroke="blue" strokeWidth={10} />
 ```
 
 ### Static config:
-By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state. 
+By default svelte-konva will automatically update all changed props on `dragend` and `transformend` events to match the prop values (position, rotation, scale, ...) with the internal Konva state.
 If you bind those props they will be updated automatically, otherwise no update of the changed values happens.
 In cases this is not needed (eg. the respective values are not bound) or not beneficial you can disable it by passing the `staticConfig = true` prop to the component.
 It is recommended to only pass `staticConfig = true` if you indeed run into performance problems connected to dragging and transforming of nodes.
@@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 	 * WARNING: This component is autogenerated using the svelteKonvaComponent.hbs template. Do not edit this file manually!
 	 */
 
-	import Konva from 'konva';
+	import { Line, type LineConfig } from 'konva/lib/shapes/Line';
 	import { onMount, onDestroy } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
@@ -38,9 +38,9 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 		skewX = $bindable(),
 		skewY = $bindable(),
 		...restProps
-	}: Props<Konva.LineConfig> = $props();
+	}: Props<LineConfig> = $props();
 
-	export const handle = new Konva.Line({
+	export const handle = new Line({
 		x,
 		y,
 		scale,