Update TS version and code-split deepslate

src/app/components/ErrorPanel.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from 'preact/hooks'
-import { mapStackTrace } from 'sourcemapped-stacktrace'
 import { Octicon } from './Octicon'
 
 type ErrorPanelProps = {
@@ -16,11 +15,13 @@ export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
 				return line.replace(/^(\s+)at (?:async )?(https?:.*)/, '$1at ($2)')
 			})
 			setStack(stack.join('\n'))
-			mapStackTrace(stack.join('\n'), (mapped) => {
-				const mappedStack = mapped.map(line => {
-					return line.replace(/..\/..\/src\//, 'src/')
-				}).join('\n')
-				setStack(mappedStack)
+			import('sourcemapped-stacktrace').then(({ mapStackTrace }) => {
+				mapStackTrace(stack.join('\n'), (mapped) => {
+					const mappedStack = mapped.map(line => {
+						return line.replace(/..\/..\/src\//, 'src/')
+					}).join('\n')
+					setStack(mappedStack)
+				})
 			})
 		}
 	}, [error])

src/app/components/generator/SourcePanel.tsx

@@ -58,10 +58,10 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 	const [highlighting, setHighlighting] = useState(Store.getHighlighting())
 	const [braceLoaded, setBraceLoaded] = useState(false)
 	const download = useRef<HTMLAnchorElement>(null)
-	const retransform = useRef<Function>()
-	const onImport = useRef<(e: any) => any>()
+	const retransform = useRef<Function>(() => {})
+	const onImport = useRef<(e: any) => any>(() => {})
 
-	const textarea = useRef<HTMLTextAreaElement>()
+	const textarea = useRef<HTMLTextAreaElement>(null)
 	const editor = useRef<Editor>()
 
 	const getSerializedOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
@@ -71,6 +71,7 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 
 	useEffect(() => {
 		retransform.current = () => {
+			if (!editor.current) return
 			if (!model || !blockStates) return
 			try {
 				const output = getSerializedOutput(model, blockStates)
@@ -88,6 +89,7 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 		}
 
 		onImport.current = () => {
+			if (!editor.current) return
 			const value = editor.current.getValue()
 			if (value.length === 0) return
 			try {
@@ -150,9 +152,11 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 		} else {
 			editor.current = {
 				getValue() {
+					if (!textarea.current) return ''
 					return textarea.current.value
 				},
 				setValue(value: string) {
+					if (!textarea.current) return
 					textarea.current.value = value
 				},
 				configure() {},
@@ -162,13 +166,16 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
 	}, [highlighting])
 
 	useModel(model, () => {
+		if (!retransform.current) return
 		retransform.current()
 	})
 	useEffect(() => {
+		if (!retransform.current) return
 		if (model) retransform.current()
 	}, [model])
 
 	useEffect(() => {
+		if (!editor.current || !retransform.current) return
 		if (!highlighting || braceLoaded) {
 			editor.current.configure(indent, format)
 			retransform.current()

src/app/components/previews/BiomeSourcePreview.tsx

@@ -1,5 +1,5 @@
 import { Path } from '@mcschema/core'
-import type { NoiseParameters } from 'deepslate'
+import type { NoiseParameters } from 'deepslate/worldgen'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import type { PreviewProps } from '.'
 import { Btn, BtnMenu } from '..'
@@ -18,7 +18,7 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 	const [layers, setLayers] = useState(new Set<typeof LAYERS[number]>(['biomes']))
 	const offset = useRef<[number, number]>([0, 0])
 	const res = useRef(1)
-	const refineTimeout = useRef<number>(undefined)
+	const refineTimeout = useRef<number>()
 
 	const seed = BigInt(model.get(new Path(['generator', 'seed'])) ?? configuredSeed)
 	const octaves = useMemo(() => {