✨ Improve dialog item reactivity

Author: SnaveSutit

src/components/customCodeJar.svelte

@@ -3,6 +3,7 @@
 
 	export let value: string
 	export let placeholder: string | undefined = undefined
+	export let style: string | undefined = undefined
 	export let syntax: string | undefined = undefined
 
 	let codeJarElement: HTMLPreElement | undefined
@@ -26,12 +27,13 @@
 		}
 	}
 
-	const forceNoWrap = () => {
+	const forceNoWrap = (_?: HTMLElement) => {
 		if (!codeJarElement) return
 		codeJarElement.style.overflowWrap = 'unset'
 		codeJarElement.style.whiteSpace = 'pre'
 	}
 
+	$: codeJarElement && forceNoWrap()
 	$: value !== undefined && forceNoWrap()
 </script>
 
@@ -45,7 +47,7 @@
 		preserveIdent
 		history
 		class={'language-' + (syntax ?? 'plaintext')}
-		style="
+		style={`
 			font-family: var(--font-code);
 			font-size: 14px;
 			padding: 3px 6px;
@@ -61,8 +63,9 @@
 			border: 1px solid var(--color-border);
 			border-radius: 0;
 			text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
-		"
+		` + style}
 	/>
+	<div use:forceNoWrap />
 	{#if placeholder && (!value || value.length === 0)}
 		<div class="placeholder">{placeholder}</div>
 	{/if}

src/components/dialogItems/codeInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { CodeJar } from '@novacbn/svelte-codejar'
 	import { onDestroy } from 'svelte'
 	import { Valuable } from '../../util/stores'
+	import CustomCodeJar from '../customCodeJar.svelte'
 	import BaseDialogItem from './baseDialogItem.svelte'
 
 	export let label: string
@@ -18,25 +18,12 @@
 	let warningText = ''
 	let errorText = ''
 
-	function highlight(code: string, syntax?: string) {
-		if (!syntax) return code
-		return Prism.highlight(code, Prism.languages[syntax], syntax)
-	}
-
-	function forceNoWrap() {
-		if (!codeJarElement) return
-		codeJarElement.style.overflowWrap = 'unset'
-		codeJarElement.style.whiteSpace = 'pre'
-	}
-
 	function onValueChange() {
 		if (valueChecker) {
 			const result = valueChecker($value)
 			result.type === 'error' ? (errorText = result.message) : (errorText = '')
 			result.type === 'warning' ? (warningText = result.message) : (warningText = '')
 		}
-
-		forceNoWrap()
 	}
 
 	const unsub = value.subscribe(() => {
@@ -73,34 +60,12 @@
 		<label class="name_space_left" for={id}>{label}</label>
 
 		<div class="content codejar-container" on:keydown={onKeydown}>
-			<CodeJar
-				bind:element={codeJarElement}
+			<CustomCodeJar
 				{syntax}
-				{highlight}
 				bind:value={$value}
-				on:change={() => forceNoWrap()}
-				preserveIdent
-				history
-				class={'language-' + (syntax ?? 'plaintext')}
-				style="
-					font-family: var(--font-code);
-					font-size: 14px;
-					padding: 3px 6px;
-					max-height: 20em;
-					height: fit-content;
-					padding-bottom: 1rem;
-					width: 100%;
-					outline: none;
-					overflow-wrap: unset;
-					overflow-y: scroll;
-					white-space: pre;
-					margin: 8px;
-					margin-bottom: 0px;
-					{errorText
+				style={errorText
 					? 'border: 1px solid var(--color-error); border-bottom: none; border-radius: 0.3em 0.3em 0 0;'
 					: 'border: 1px solid var(--color-border);'}
-					text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
-				"
 			/>
 			{#if errorText || warningText}
 				<textarea readonly rows={errorText.split('\n').length + 1}

src/components/dialogItems/colorPicker.svelte

@@ -6,33 +6,38 @@
 
 	export let label: string
 	export let tooltip = ''
+	export let defaultValue = '#ffffff'
 	export let value: Valuable<string>
 
 	let colorPicker = new ColorPicker(`${PACKAGE.name}:${label}-color_picker`, {
 		onChange() {
 			const color = colorPicker.get() as tinycolor.Instance
-			value.set(color.toHexString())
+			$value = color.toHexString()
 		},
 	})
-	let colorPickerMount: HTMLDivElement
 
-	function onLoad(el: HTMLDivElement) {
+	function mountColorPicker(el: HTMLDivElement) {
 		colorPicker.toElement(el)
-		colorPicker.set(value.get())
+		colorPicker.set($value)
 	}
 
 	function onReset() {
-		value.set('#ffffff')
+		$value = defaultValue
 	}
 
+	const unsub = value.subscribe(v => {
+		colorPicker.set(v)
+	})
+
 	onDestroy(() => {
+		unsub()
 		colorPicker.delete()
 	})
 </script>
 
 <BaseDialogItem {label} {tooltip} {onReset} let:id>
 	<div class="dialog_bar form_bar">
 		<label class="name_space_left" for={id}>{label}</label>
-		<div bind:this={colorPickerMount} use:onLoad />
+		<div use:mountColorPicker />
 	</div>
 </BaseDialogItem>

src/components/dialogItems/select.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte'
 	import { Valuable } from '../../util/stores'
 	import BaseDialogItem from './baseDialogItem.svelte'
 
@@ -8,8 +9,6 @@
 	export let defaultOption: string
 	export let value: Valuable<string>
 
-	let container: HTMLDivElement
-
 	if (!(value.get() || options[value.get()])) value.set(defaultOption)
 
 	const SELECT_ELEMENT = new Interface.CustomElements.SelectInput('dialog-select', {
@@ -32,13 +31,22 @@
 		}
 	}
 
-	requestAnimationFrame(() => {
-		container.appendChild(SELECT_ELEMENT.node)
+	const unsub = value.subscribe(v => {
+		SELECT_ELEMENT.set(v)
+	})
+
+	onDestroy(() => {
+		unsub()
+		SELECT_ELEMENT.node.remove()
 	})
+
+	const mountSelect = (node: HTMLDivElement) => {
+		node.appendChild(SELECT_ELEMENT.node)
+	}
 </script>
 
 <BaseDialogItem {label} {tooltip} {onReset} let:id>
-	<div bind:this={container} class="dialog_bar form_bar">
+	<div class="dialog_bar form_bar" use:mountSelect>
 		<label class="name_space_left" for={id}>{label}</label>
 	</div>
 </BaseDialogItem>