🛠️ Add NBT validation to bone configs

Author: SnaveSutit

src/components/boneConfigDialog.svelte

@@ -12,6 +12,8 @@
 </script>
 
 <script lang="ts">
+	import { NbtCompound, NbtTag } from 'deepslate'
+
 	const pluginModeEnabled = !!Project?.animated_java?.enable_plugin_mode
 
 	export let variant: Variant
@@ -36,6 +38,26 @@
 		horizontal: translate('dialog.bone_config.billboard.options.horizontal'),
 		center: translate('dialog.bone_config.billboard.options.center'),
 	}
+
+	const nbtChecker: DialogItemValueChecker<string> = value => {
+		let parsedNbt: NbtTag | undefined
+		try {
+			parsedNbt = NbtTag.fromString(value)
+		} catch (e: any) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.error', e.message),
+			}
+		}
+		if (!(parsedNbt instanceof NbtCompound)) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.not_compound'),
+			}
+		}
+
+		return { type: 'success', message: '' }
+	}
 </script>
 
 <div>
@@ -150,6 +172,7 @@
 				label={translate('dialog.bone_config.nbt.title')}
 				tooltip={translate('dialog.bone_config.nbt.description')}
 				bind:value={nbt}
+				valueChecker={nbtChecker}
 			/>
 		{:else}
 			<Select

src/components/dialogItems/baseDialogItem.svelte

@@ -37,11 +37,21 @@
 <div class="base_dialog_item">
 	{#if error_text}
 		<div class="error_text">
-			<i class="fa fa-exclamation-circle dialog_form_error text_icon" />{error_text}
+			<i class="fa fa-exclamation-circle dialog_form_error text_icon" />
+			<div class="error_lines">
+				{#each error_text.split('\n') as text}
+					<div>{text}</div>
+				{/each}
+			</div>
 		</div>
 	{:else if warning_text}
 		<div class="warning_text">
-			<i class="fa fa-exclamation-triangle dialog_form_warning text_icon" />{warning_text}
+			<i class="fa fa-exclamation-triangle dialog_form_warning text_icon" />
+			<div class="warning_lines">
+				{#each warning_text.split('\n') as text}
+					<div>{text}</div>
+				{/each}
+			</div>
 		</div>
 	{/if}
 </div>
@@ -57,15 +67,27 @@
 		flex-grow: 1;
 	}
 	.warning_text {
+		display: flex;
+		align-items: center;
 		color: var(--color-warning);
 		font-family: var(--font-code);
 		font-size: 0.8em;
 	}
+	.warning_lines {
+		display: flex;
+		flex-direction: column;
+	}
 	.error_text {
+		display: flex;
+		align-items: center;
 		color: var(--color-error);
 		font-family: var(--font-code);
 		font-size: 0.8em;
 	}
+	.error_lines {
+		display: flex;
+		flex-direction: column;
+	}
 	.text_icon {
 		margin-right: 8px;
 	}

src/components/vanillaBlockDisplayConfigDialog.svelte

@@ -11,6 +11,8 @@
 </script>
 
 <script lang="ts">
+	import { NbtCompound, NbtTag } from 'deepslate'
+
 	const pluginModeEnabled = !!Project?.animated_java?.enable_plugin_mode
 
 	export let billboard: Valuable<string>
@@ -31,6 +33,26 @@
 		horizontal: translate('dialog.bone_config.billboard.options.horizontal'),
 		center: translate('dialog.bone_config.billboard.options.center'),
 	}
+
+	const nbtChecker: DialogItemValueChecker<string> = value => {
+		let parsedNbt: NbtTag | undefined
+		try {
+			parsedNbt = NbtTag.fromString(value)
+		} catch (e: any) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.error', e.message),
+			}
+		}
+		if (!(parsedNbt instanceof NbtCompound)) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.not_compound'),
+			}
+		}
+
+		return { type: 'success', message: '' }
+	}
 </script>
 
 <div>
@@ -114,6 +136,7 @@
 				label={translate('dialog.bone_config.nbt.title')}
 				tooltip={translate('dialog.bone_config.nbt.description')}
 				bind:value={nbt}
+				valueChecker={nbtChecker}
 			/>
 		{:else}
 			<Select

src/components/vanillaItemDisplayConfigDialog.svelte

@@ -11,6 +11,8 @@
 </script>
 
 <script lang="ts">
+	import { NbtCompound, NbtTag } from 'deepslate'
+
 	const pluginModeEnabled = !!Project?.animated_java?.enable_plugin_mode
 
 	export let billboard: Valuable<string>
@@ -31,6 +33,26 @@
 		horizontal: translate('dialog.bone_config.billboard.options.horizontal'),
 		center: translate('dialog.bone_config.billboard.options.center'),
 	}
+
+	const nbtChecker: DialogItemValueChecker<string> = value => {
+		let parsedNbt: NbtTag | undefined
+		try {
+			parsedNbt = NbtTag.fromString(value)
+		} catch (e: any) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.error', e.message),
+			}
+		}
+		if (!(parsedNbt instanceof NbtCompound)) {
+			return {
+				type: 'error',
+				message: translate('dialog.bone_config.nbt.invalid_nbt.not_compound'),
+			}
+		}
+
+		return { type: 'success', message: '' }
+	}
 </script>
 
 <div>
@@ -114,6 +136,7 @@
 				label={translate('dialog.bone_config.nbt.title')}
 				tooltip={translate('dialog.bone_config.nbt.description')}
 				bind:value={nbt}
+				valueChecker={nbtChecker}
 			/>
 		{:else}
 			<Select

src/lang/en.yml

@@ -194,6 +194,10 @@ animated_java.dialog.bone_config.invisible.description: Whether or not the bone
 
 animated_java.dialog.bone_config.nbt.title: NBT
 animated_java.dialog.bone_config.nbt.description: The NBT to apply to the bone.
+animated_java.dialog.bone_config.nbt.invalid_nbt.not_compound: The NBT must be a compound tag! Eg. {CustomName:'"my name"'}
+animated_java.dialog.bone_config.nbt.invalid_nbt.error: |-
+    Invalid NBT!
+    {0}
 
 animated_java.dialog.bone_config.billboard.title: Billboard
 animated_java.dialog.bone_config.billboard.description: Controls if this bone should pivot to face player when rendered. It can be fixed (both vertical and horizontal angles are fixed), vertical (faces player around vertical axis), horizontal (pivots around horizontal axis), and center (pivots around center point).