Use spyglass DocAndNode to store current file data

src/app/components/generator/FileCreation.tsx

@@ -1,18 +1,18 @@
+import type { DocAndNode } from '@spyglassmc/core'
 import { useState } from 'preact/hooks'
 import { Analytics } from '../../Analytics.js'
 import { useLocale, useProject } from '../../contexts/index.js'
-import type { FileModel } from '../../services/index.js'
 import { Btn } from '../Btn.js'
 import { TextInput } from '../forms/index.js'
 import { Modal } from '../Modal.js'
 
 interface Props {
-	model: FileModel,
+	docAndNode: DocAndNode,
 	id: string,
 	method: string,
 	onClose: () => void,
 }
-export function FileCreation({ model, id, method, onClose }: Props) {
+export function FileCreation({ docAndNode, id, method, onClose }: Props) {
 	const { locale } = useLocale()
 	const { projects, project, updateFile } = useProject()
 	const [fileId, setFileId] = useState(id === 'pack_mcmeta' ? 'pack' : '')
@@ -29,7 +29,8 @@ export function FileCreation({ model, id, method, onClose }: Props) {
 			return
 		}
 		Analytics.saveProjectFile(id, projects.length, project.files.length, method as any)
-		updateFile(id, undefined, { type: id, id: fileId, data: model.data })
+		const data = JSON.parse(docAndNode.doc.getText())
+		updateFile(id, undefined, { type: id, id: fileId, data })
 		onClose()
 	}
 

src/app/components/generator/GeneratorCard.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'preact/hooks'
 import type { ConfigGenerator } from '../../Config.js'
 import config from '../../Config.js'
 import { useLocale } from '../../contexts/Locale.jsx'
-import type { VersionId } from '../../services/Schemas.js'
-import { checkVersion } from '../../services/Schemas.js'
+import type { VersionId } from '../../services/Versions.js'
+import { checkVersion } from '../../services/Versions.js'
 import { cleanUrl } from '../../Utils.js'
 import { Badge, Card, Icons, ToolCard } from '../index.js'
 

src/app/components/generator/GeneratorList.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'preact/hooks'
 import type { ConfigGenerator } from '../../Config.js'
 import config from '../../Config.js'
 import { useLocale, useVersion } from '../../contexts/index.js'
-import { checkVersion } from '../../services/Schemas.js'
+import { checkVersion } from '../../services/Versions.js'
 import { GeneratorCard, TextInput, VersionSwitcher } from '../index.js'
 
 interface Props {

src/app/components/generator/PreviewPanel.tsx

@@ -1,59 +1,59 @@
+import type { DocAndNode } from '@spyglassmc/core'
 import { useVersion } from '../../contexts/Version.jsx'
-import type { FileModel } from '../../services/index.js'
 import { checkVersion } from '../../services/index.js'
 import { BiomeSourcePreview, BlockStatePreview, DecoratorPreview, DensityFunctionPreview, LootTablePreview, ModelPreview, NoisePreview, NoiseSettingsPreview, RecipePreview, StructureSetPreview } from '../previews/index.js'
 
-export const HasPreview = ['loot_table', 'recipe', 'dimension', 'worldgen/density_function', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature', 'worldgen/structure_set', 'block_definition', 'model']
+export const HasPreview = ['loot_table', 'recipe', 'dimension', 'worldgen/density_function', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature', 'worldgen/structure_set', 'block_definition', 'docAndNode']
 
 type PreviewPanelProps = {
-	model: FileModel | undefined,
+	docAndNode: DocAndNode | undefined,
 	id: string,
 	shown: boolean,
 	onError: (message: string) => unknown,
 }
-export function PreviewPanel({ model, id, shown }: PreviewPanelProps) {
+export function PreviewPanel({ docAndNode, id, shown }: PreviewPanelProps) {
 	const { version } = useVersion()
 
-	if (!model) return <></>
+	if (!docAndNode) return <></>
 
 	if (id === 'loot_table') {
-		return <LootTablePreview {...{ model, shown }} />
+		return <LootTablePreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'recipe') {
-		return <RecipePreview {...{ model, shown }} />
+		return <RecipePreview {...{ docAndNode, shown }} />
 	}
 
-	if (id === 'dimension' && model.data.generator?.type?.endsWith('noise')) {
-		return <BiomeSourcePreview {...{ model, shown }} />
+	if (id === 'dimension' && JSON.parse(docAndNode.doc.getText()).generator?.type?.endsWith('noise')) {
+		return <BiomeSourcePreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'worldgen/density_function') {
-		return <DensityFunctionPreview {...{ model, shown }} />
+		return <DensityFunctionPreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'worldgen/noise') {
-		return <NoisePreview {...{ model, shown }} />
+		return <NoisePreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'worldgen/noise_settings' && checkVersion(version, '1.18')) {
-		return <NoiseSettingsPreview {...{ model, shown }} />
+		return <NoiseSettingsPreview {...{ docAndNode, shown }} />
 	}
 
 	if ((id === 'worldgen/placed_feature' ||  (id === 'worldgen/configured_feature' && checkVersion(version, '1.16', '1.17')))) {
-		return <DecoratorPreview {...{ model, shown }} />
+		return <DecoratorPreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'worldgen/structure_set' && checkVersion(version, '1.19')) {
-		return <StructureSetPreview {...{ model, shown }} />
+		return <StructureSetPreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'block_definition') {
-		return <BlockStatePreview {...{ model, shown }} />
+		return <BlockStatePreview {...{ docAndNode, shown }} />
 	}
 
 	if (id === 'model') {
-		return <ModelPreview {...{ model, shown }} />
+		return <ModelPreview {...{ docAndNode, shown }} />
 	}
 
 	return <></>

src/app/components/generator/SchemaGenerator.tsx

@@ -5,11 +5,11 @@ import type { ConfigGenerator } from '../../Config.js'
 import config from '../../Config.js'
 import { DRAFT_PROJECT, useLocale, useProject, useVersion } from '../../contexts/index.js'
 import { AsyncCancel, useActiveTimeout, useAsync, useSearchParam } from '../../hooks/index.js'
-import type { FileModel, VersionId } from '../../services/index.js'
-import { checkVersion, createMockFileModel, fetchPreset, fetchRegistries, getSnippet, shareSnippet } from '../../services/index.js'
-import { setupSpyglass } from '../../services/Spyglass.js'
+import type { VersionId } from '../../services/index.js'
+import { checkVersion, fetchPreset, fetchRegistries, getSnippet, shareSnippet } from '../../services/index.js'
+import { Spyglass } from '../../services/Spyglass.js'
 import { Store } from '../../Store.js'
-import { cleanUrl, deepEqual, genPath } from '../../Utils.js'
+import { cleanUrl, genPath } from '../../Utils.js'
 import { Ad, Btn, BtnMenu, ErrorPanel, FileCreation, FileRenaming, Footer, HasPreview, Octicon, PreviewPanel, ProjectCreation, ProjectDeletion, ProjectPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../index.js'
 
 export const SHARE_KEY = 'share'
@@ -31,10 +31,15 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 
 	useEffect(() => Store.visitGenerator(gen.id), [gen.id])
 
-	useEffect(() => {
-		setupSpyglass(version)
+	const { value: spyglass, loading: spyglassLoading } = useAsync(() => {
+		return Spyglass.initialize(version)
 	}, [version])
 
+	const uri = useMemo(() => {
+		// TODO: return different uri when project file is open
+		return spyglass?.getUnsavedFileUri(gen)
+	}, [spyglass, gen.id])
+
 	const [currentPreset, setCurrentPreset] = useSearchParam('preset')
 	const [sharedSnippetId, setSharedSnippetId] = useSearchParam(SHARE_KEY)
 	const backup = useMemo(() => Store.getBackup(gen.id), [gen.id])
@@ -45,7 +50,10 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 		}
 	}
 
-	const {} = useAsync(async () => {
+	const { value: docAndNode } = useAsync(async () => {
+		if (spyglassLoading || !spyglass || !uri) {
+			return AsyncCancel
+		}
 		let data: unknown = undefined
 		if (currentPreset && sharedSnippetId) {
 			setSharedSnippetId(undefined)
@@ -83,14 +91,12 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 			}
 			data = file.data
 		}
-		if (data) {
-			// TODO: set file contents to data
-		}
+		const docAndNode = await spyglass.setFileContents(uri, JSON.stringify(data ?? {}))
 		Analytics.setGenerator(gen.id)
-		return {}
-	}, [gen.id, version, sharedSnippetId, currentPreset, project.name, file?.id])
+		return docAndNode
+	}, [gen.id, version, sharedSnippetId, currentPreset, project.name, file?.id, spyglass, spyglassLoading])
 
-	const model: FileModel = createMockFileModel()
+	const { doc } = docAndNode ?? {} 
 
 	// TODO: when contents of file change:
 	// - remove preset and share id from url
@@ -184,13 +190,13 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 			setShareShown(true)
 			copySharedId()
 		} else {
-			// TODO: get contents from file, and compare to default of type
-			if (deepEqual(model.data, {})) {
+			// TODO: check if files hasn't been modified compared to the default
+			if (false) {
 				setShareUrl(`${location.origin}/${gen.url}/?version=${version}`)
 				setShareShown(true)
-			} else {
+			} else if (doc) {
 				setShareLoading(true)
-				shareSnippet(gen.id, version, model.data, previewShown)
+				shareSnippet(gen.id, version, JSON.parse(doc.getText()), previewShown)
 					.then(({ id, length, compressed, rate }) => {
 						Analytics.createSnippet(gen.id, id, version, length, compressed, rate)
 						const url = `${location.origin}/${gen.url}/?${SHARE_KEY}=${id}`
@@ -306,7 +312,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 				</BtnMenu>
 			</div>
 			{error && <ErrorPanel error={error} onDismiss={() => setError(null)} />}
-			<Tree model={model} onError={setError} />
+			{docAndNode && <Tree docAndNode={docAndNode} onError={setError} />}
 			<Footer donate={!gen.tags?.includes('partners')} />
 		</main>
 		<div class="popup-actions right-actions" style={`--offset: -${8 + actionsShown * 50}px;`}>
@@ -327,10 +333,10 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 			</div>
 		</div>
 		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
-			<PreviewPanel model={model} id={gen.id} shown={previewShown} onError={setError} />
+			<PreviewPanel docAndNode={docAndNode} id={gen.id} shown={previewShown} onError={setError} />
 		</div>
 		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
-			<SourcePanel {...{model, doCopy, doDownload, doImport}} name={gen.schema ?? 'data'} copySuccess={copySuccess} onError={setError} />
+			<SourcePanel spyglass={spyglass} docAndNode={docAndNode} {...{doCopy, doDownload, doImport}} copySuccess={copySuccess} onError={setError} />
 		</div>
 		<div class={`popup-share${shareShown ? ' shown' : ''}`}>
 			<TextInput value={shareUrl} readonly />
@@ -346,7 +352,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 		</div>
 		{projectCreating && <ProjectCreation onClose={() => setProjectCreating(false)} />}
 		{projectDeleting && <ProjectDeletion onClose={() => setprojectDeleting(false)} />}
-		{model && fileSaving && <FileCreation id={gen.id} model={model} method={fileSaving} onClose={() => setFileSaving(undefined)} />}
+		{docAndNode && fileSaving && <FileCreation id={gen.id} docAndNode={docAndNode} method={fileSaving} onClose={() => setFileSaving(undefined)} />}
 		{fileRenaming && <FileRenaming id={fileRenaming.type } name={fileRenaming.id} onClose={() => setFileRenaming(undefined)} />}
 	</>
 }

src/app/components/generator/SourcePanel.tsx

@@ -1,8 +1,10 @@
+import type { DocAndNode } from '@spyglassmc/core'
+import { fileUtil } from '@spyglassmc/core'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { useLocale } from '../../contexts/index.js'
 import { useLocalStorage } from '../../hooks/index.js'
-import type { FileModel } from '../../services/index.js'
 import { getSourceFormats, getSourceIndent, getSourceIndents, parseSource, sortData, stringifySource } from '../../services/index.js'
+import type { Spyglass } from '../../services/Spyglass.js'
 import { Store } from '../../Store.js'
 import { message } from '../../Utils.js'
 import { Btn, BtnMenu } from '../index.js'
@@ -15,15 +17,15 @@ interface Editor {
 }
 
 type SourcePanelProps = {
-	name: string,
-	model: FileModel | undefined,
+	spyglass: Spyglass | undefined,
+	docAndNode: DocAndNode | undefined,
 	doCopy?: number,
 	doDownload?: number,
 	doImport?: number,
 	copySuccess: () => unknown,
 	onError: (message: string | Error) => unknown,
 }
-export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuccess, onError }: SourcePanelProps) {
+export function SourcePanel({ spyglass, docAndNode, doCopy, doDownload, doImport, copySuccess, onError }: SourcePanelProps) {
 	const { locale } = useLocale()
 	const [indent, setIndent] = useState(Store.getIndent())
 	const [format, setFormat] = useState(Store.getFormat())
@@ -37,20 +39,23 @@ export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuc
 	const textarea = useRef<HTMLTextAreaElement>(null)
 	const editor = useRef<Editor>()
 
-	const getSerializedOutput = useCallback((model: FileModel) => {
-		let data = model.data
+	const getSerializedOutput = useCallback((text: string) => {
+		let data = JSON.parse(text)
 		if (sort === 'alphabetically') {
 			data = sortData(data)
 		}
 		return stringifySource(data, format, indent)
 	}, [indent, format, sort])
 
+	const text = docAndNode?.doc.getText()
+	
 	useEffect(() => {
 		retransform.current = () => {
-			if (!editor.current) return
-			if (!model) return
+			if (!editor.current || text === undefined) {
+				return
+			}
 			try {
-				const output = getSerializedOutput(model)
+				const output = getSerializedOutput(text)
 				editor.current.setValue(output)
 			} catch (e) {
 				if (e instanceof Error) {
@@ -68,9 +73,10 @@ export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuc
 			if (!editor.current) return
 			const value = editor.current.getValue()
 			if (value.length === 0) return
+			if (!spyglass || !docAndNode) return
 			try {
-				await parseSource(value, format)
-				// TODO: import
+				const data = await parseSource(value, format)
+				await spyglass.setFileContents(docAndNode.doc.uri, JSON.stringify(data))
 			} catch (e) {
 				if (e instanceof Error) {
 					e.message = `Error importing: ${e.message}`
@@ -81,7 +87,7 @@ export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuc
 				console.error(e)
 			}
 		}
-	}, [model, indent, format, sort, highlighting])
+	}, [spyglass, docAndNode, text, indent, format, sort, highlighting])
 
 	useEffect(() => {
 		if (highlighting) {
@@ -144,9 +150,10 @@ export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuc
 
 	// TODO: when file contents change, retransform
 	useEffect(() => {
-		if (!retransform.current) return
-		if (model) retransform.current()
-	}, [model])
+		if (retransform.current && text !== undefined) {
+			retransform.current()
+		}
+	}, [text])
 
 	useEffect(() => {
 		if (!editor.current || !retransform.current) return
@@ -157,18 +164,18 @@ export function SourcePanel({ name, model, doCopy, doDownload, doImport, copySuc
 	}, [indent, format, sort, highlighting, braceLoaded])
 
 	useEffect(() => {
-		if (doCopy && model) {
-			navigator.clipboard.writeText(getSerializedOutput(model)).then(() => {
+		if (doCopy && text !== undefined) {
+			navigator.clipboard.writeText(getSerializedOutput(text)).then(() => {
 				copySuccess()
 			})
 		}
-	}, [doCopy])
+	}, [doCopy, text])
 
 	useEffect(() => {
-		if (doDownload && model && download.current) {
-			const content = encodeURIComponent(getSerializedOutput(model))
+		if (doDownload && docAndNode && text !== undefined && download.current) {
+			const content = encodeURIComponent(getSerializedOutput(text))
 			download.current.setAttribute('href', `data:text/json;charset=utf-8,${content}`)
-			const fileName = name === 'pack_mcmeta' ? 'pack.mcmeta' : `${name}.${format}`
+			const fileName = fileUtil.basename(docAndNode.doc.uri)
 			download.current.setAttribute('download', fileName)
 			download.current.click()
 		}

src/app/components/generator/Tree.tsx

@@ -1,14 +1,14 @@
+import type { DocAndNode } from '@spyglassmc/core'
 import { useErrorBoundary } from 'preact/hooks'
 import { useLocale } from '../../contexts/index.js'
-import type { FileModel } from '../../services/index.js'
 
 type TreePanelProps = {
-	model: FileModel | undefined,
+	docAndNode: DocAndNode,
 	onError: (message: string) => unknown,
 }
-export function Tree({ model, onError }: TreePanelProps) {
+export function Tree({ onError }: TreePanelProps) {
 	const { lang } = useLocale()
-	if (!model || lang === 'none') return <></>
+	if (lang === 'none') return <></>
 
 	const [error] = useErrorBoundary(e => {
 		onError(`Error rendering the tree: ${e.message}`)