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(() => {

src/app/hooks/useCanvas.ts

@@ -18,11 +18,13 @@ export function useCanvas({ size, draw, onDrag, onHover, onLeave }: {
 	const dragBusy = useRef(false)
 
 	useEffect(() => {
+		if (!canvas.current) return
 		const onMouseDown = (e: MouseEvent) => {
 			dragStart.current = [e.offsetX, e.offsetY]
 		}
 		const onMouseMove = (e: MouseEvent) => {
 			if (dragStart.current === undefined) {
+				if (!canvas.current) return
 				const x = e.offsetX  / canvas.current.clientWidth
 				const y = e.offsetY  / canvas.current.clientHeight
 				onHover?.(x, y)
@@ -34,8 +36,10 @@ export function useCanvas({ size, draw, onDrag, onHover, onLeave }: {
 			if (!(dx === 0 && dy === 0)) {
 				dragPending.current = [dragPending.current[0] + dx, dragPending.current[1] + dy]
 				if (!dragBusy.current) {
+					if (!dragRequest.current) return
 					cancelAnimationFrame(dragRequest.current)
 					dragRequest.current = requestAnimationFrame(async () => {
+						if (!canvas.current) return
 						dragBusy.current = true
 						const dx = dragPending.current[0] / canvas.current.clientWidth
 						const dy = dragPending.current[1] / canvas.current.clientHeight
@@ -70,6 +74,7 @@ export function useCanvas({ size, draw, onDrag, onHover, onLeave }: {
 	const redraw = useRef<() => Promise<unknown>>()
 	const redrawCount = useRef(0)
 	redraw.current = async () => {
+		if (!canvas.current) return
 		const ctx = canvas.current.getContext('2d')!
 		const s = size()
 		canvas.current.width = s[0]

src/app/pages/Sounds.tsx

@@ -51,6 +51,7 @@ export function Sounds({}: Props) {
 
 	const download = useRef<HTMLAnchorElement>(null)
 	const downloadFunction = () => {
+		if (!download.current) return
 		const hasDelay = configs.some(c => c.delay > 0)
 		const content = configs
 			.sort((a, b) => a.delay - b.delay)

src/app/previews/BiomeSource.ts

@@ -1,9 +1,9 @@
 import { DataModel } from '@mcschema/core'
-import type { NoiseParameters } from 'deepslate'
-import { FixedBiome, Identifier, LegacyRandom, NormalNoise } from 'deepslate'
 import init, { biome_parameters, climate_noise, climate_sampler, multi_noise } from 'deepslate-rs'
 // @ts-expect-error
 import wasm from 'deepslate-rs/deepslate_rs_bg.wasm?url'
+import type { NoiseParameters } from 'deepslate/worldgen'
+import { FixedBiome, Identifier, LegacyRandom, NormalNoise } from 'deepslate/worldgen'
 import type { VersionId } from '../services'
 import { checkVersion, fetchPreset } from '../services'
 import { BiMap, clamp, deepClone, deepEqual, square, stringToColor } from '../Utils'

src/app/previews/Decorator.ts

@@ -1,6 +1,6 @@
 import { DataModel } from '@mcschema/core'
-import type { Random } from 'deepslate'
-import { LegacyRandom, PerlinNoise } from 'deepslate'
+import type { Random } from 'deepslate/worldgen'
+import { LegacyRandom, PerlinNoise } from 'deepslate/worldgen'
 import type { VersionId } from '../services'
 import { checkVersion } from '../services'
 import { clamp, isObject, stringToColor } from '../Utils'

src/app/previews/NoiseSettings.ts

@@ -1,7 +1,6 @@
 import { DataModel } from '@mcschema/core'
-import type { BlockState } from 'deepslate'
-import { BlockPos, Chunk, ChunkPos, clampedMap, DensityFunction, FixedBiome, Identifier, NoiseChunkGenerator, NoiseGeneratorSettings, NoiseParameters, NoiseRouter, NoiseSettings, Registry, WorldgenRegistries, XoroshiroRandom } from 'deepslate'
-import * as deepslate18 from 'deepslate-1.18'
+import type { BlockState } from 'deepslate/worldgen'
+import { BlockPos, Chunk, ChunkPos, clampedMap, DensityFunction, FixedBiome, Identifier, NoiseChunkGenerator, NoiseGeneratorSettings, NoiseParameters, NoiseRouter, NoiseSettings, Registry, WorldgenRegistries, XoroshiroRandom } from 'deepslate/worldgen'
 import type { VersionId } from '../services'
 import { checkVersion, fetchAllPresets } from '../services'
 import { deepClone, deepEqual } from '../Utils'
@@ -49,7 +48,7 @@ export async function noiseSettings(state: any, img: ImageData, options: NoiseSe
 			await initRegistries(options.version)
 		}
 
-		const { settings, generator } = getCached(state, options)
+		const { settings, generator } = await getCached(state, options)
 
 		const slice = new LevelSlice(-options.offset, options.width, settings.noise.minY, settings.noise.height)
 		slice.generate(generator, options.biome)
@@ -167,7 +166,7 @@ async function fetchRegistry<T extends { fromJson(obj: unknown): T }>(version: V
 	root.register(registry.key, registry)
 }
 
-function getCached(state: unknown, options: NoiseSettingsOptions) {
+async function getCached(state: unknown, options: NoiseSettingsOptions) {
 	const settings = NoiseGeneratorSettings.fromJson(DataModel.unwrapLists(state))
 
 	const newState = [state, `${options.seed}`, options.biome]
@@ -178,6 +177,7 @@ function getCached(state: unknown, options: NoiseSettingsOptions) {
 			const biomeSource = new FixedBiome(Identifier.create('unknown'))
 			generatorCache = new NoiseChunkGenerator(options.seed, biomeSource, settings)
 		} else {
+			const deepslate18 = await import('deepslate-1.18')
 			const biomeSource = new deepslate18.FixedBiome('unknown')
 			generatorCache = new deepslate18.NoiseChunkGenerator(options.seed, biomeSource, settings as any) as any
 		}

src/app/previews/NormalNoise.ts

@@ -1,5 +1,5 @@
 import { DataModel } from '@mcschema/core'
-import { LegacyRandom, NoiseParameters, NormalNoise } from 'deepslate'
+import { LegacyRandom, NoiseParameters, NormalNoise } from 'deepslate/worldgen'
 import type { VersionId } from '../services'
 
 export type NoiseOptions = {

src/app/previews/noise/NoiseChunkGenerator.ts

@@ -1,4 +1,4 @@
-import { LegacyRandom, PerlinNoise } from 'deepslate'
+import { LegacyRandom, PerlinNoise } from 'deepslate/worldgen'
 import { clampedLerp, lerp2 } from '../../Utils'
 
 export class NoiseChunkGenerator {