Update TS version and code-split deepslate

package-lock.json

@@ -21,7 +21,7 @@
         "brace": "^0.11.1",
         "buffer": "^6.0.3",
         "comment-json": "^4.1.1",
-        "deepslate": "^0.9.0-beta.13",
+        "deepslate": "^0.11.0-beta.1",
         "deepslate-1.18": "npm:deepslate@^0.9.0-beta.9",
         "deepslate-rs": "^0.1.6",
         "highlight.js": "^11.5.1",
@@ -50,7 +50,7 @@
         "preact": "^10.5.13",
         "preact-router": "^3.2.1",
         "rollup-plugin-visualizer": "^5.6.0",
-        "typescript": "^4.1.3",
+        "typescript": "^4.6.4",
         "vite": "^2.3.7",
         "vite-plugin-static-copy": "^0.5.0"
       }
@@ -1768,9 +1768,9 @@
       "dev": true
     },
     "node_modules/deepslate": {
-      "version": "0.9.0-beta.14",
-      "resolved": "https://registry.npmjs.org/deepslate/-/deepslate-0.9.0-beta.14.tgz",
-      "integrity": "sha512-cFrt4hNfD22uAANi5uCTA7/TDIprxXFLvPnfFGFupEKl4/u3jkb0NXr9IEtRw1bpQnnE0Xm2x/KwkYq6zse90g==",
+      "version": "0.11.0-beta.1",
+      "resolved": "https://registry.npmjs.org/deepslate/-/deepslate-0.11.0-beta.1.tgz",
+      "integrity": "sha512-Nem5kB4p0Usa1kkPw7PdhQRpq9xqezAnMPDv14SWCmfExmhkv4sNCYuBzrz+09QagK5TOUSQgaOuLoqIXlfbNA==",
       "dependencies": {
         "gl-matrix": "^3.3.0",
         "md5": "^2.3.0",
@@ -4794,9 +4794,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6422,9 +6422,9 @@
       "dev": true
     },
     "deepslate": {
-      "version": "0.9.0-beta.14",
-      "resolved": "https://registry.npmjs.org/deepslate/-/deepslate-0.9.0-beta.14.tgz",
-      "integrity": "sha512-cFrt4hNfD22uAANi5uCTA7/TDIprxXFLvPnfFGFupEKl4/u3jkb0NXr9IEtRw1bpQnnE0Xm2x/KwkYq6zse90g==",
+      "version": "0.11.0-beta.1",
+      "resolved": "https://registry.npmjs.org/deepslate/-/deepslate-0.11.0-beta.1.tgz",
+      "integrity": "sha512-Nem5kB4p0Usa1kkPw7PdhQRpq9xqezAnMPDv14SWCmfExmhkv4sNCYuBzrz+09QagK5TOUSQgaOuLoqIXlfbNA==",
       "requires": {
         "gl-matrix": "^3.3.0",
         "md5": "^2.3.0",
@@ -8562,9 +8562,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
       "dev": true
     },
     "untildify": {

package.json

@@ -27,7 +27,7 @@
     "brace": "^0.11.1",
     "buffer": "^6.0.3",
     "comment-json": "^4.1.1",
-    "deepslate": "^0.9.0-beta.13",
+    "deepslate": "^0.11.0-beta.1",
     "deepslate-1.18": "npm:deepslate@^0.9.0-beta.9",
     "deepslate-rs": "^0.1.6",
     "highlight.js": "^11.5.1",
@@ -56,7 +56,7 @@
     "preact": "^10.5.13",
     "preact-router": "^3.2.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "typescript": "^4.1.3",
+    "typescript": "^4.6.4",
     "vite": "^2.3.7",
     "vite-plugin-static-copy": "^0.5.0"
   }

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 {

vite.config.js

@@ -87,7 +87,7 @@ export default defineConfig({
 				{ src: 'src/guides/*', dest: 'guides' },
 			],
 		}),
-		visualizer(),
+		visualizer({ open: true }),
 	],
 })