Support exporting YAML + minified

src/app/Store.ts

@@ -6,6 +6,7 @@ export namespace Store {
 	export const ID_THEME = 'theme'
 	export const ID_VERSION = 'schema_version'
 	export const ID_INDENT = 'indentation'
+	export const ID_FORMAT = 'output_format'
 	export const ID_SOUNDS_VERSION = 'minecraft_sounds_version'
 
 	export function getLanguage() {
@@ -28,6 +29,10 @@ export namespace Store {
 		return localStorage.getItem(ID_INDENT) ?? '2_spaces'
 	}
 
+	export function getFormat() {
+		return localStorage.getItem(ID_FORMAT) ?? 'json'
+	}
+
 	export function getSoundsVersion() {
 		return localStorage.getItem(ID_SOUNDS_VERSION) ?? 'latest'
 	}
@@ -48,6 +53,10 @@ export namespace Store {
 		if (indent) localStorage.setItem(ID_INDENT, indent)
 	}
 
+	export function setFormat(format: string | undefined) {
+		if (format) localStorage.setItem(ID_FORMAT, format)
+	}
+
 	export function setSoundsVersion(version: string | undefined) {
 		if (version) localStorage.setItem(ID_SOUNDS_VERSION, version)
 	}

src/app/components/generator/SourcePanel.tsx

@@ -1,4 +1,5 @@
 import { DataModel, ModelPath } from '@mcschema/core'
+import yaml from 'js-yaml'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Btn, BtnMenu } from '..'
 import { useModel } from '../../hooks'
@@ -10,10 +11,28 @@ import { message } from '../../Utils'
 
 const OUTPUT_CHARS_LIMIT = 10000
 
-const INDENT: Record<string, number | string> = {
+const INDENT: Record<string, number | string | undefined> = {
 	'2_spaces': 2,
 	'4_spaces': 4,
 	tabs: '\t',
+	minified: undefined,
+}
+
+const FORMATS: Record<string, {
+	parse: (v: string) => any,
+	stringify: (v: any, indentation: string | number | undefined) => string,
+}> = {
+	json: {
+		parse: JSON.parse,
+		stringify: (v, i) => JSON.stringify(v, null, i),
+	},
+	yaml: {
+		parse: yaml.load,
+		stringify: (v, i) => yaml.dump(v, {
+			flowLevel: i === undefined ? 0 : -1,
+			indent: typeof i === 'string' ? 4 : i,
+		}),
+	},
 }
 
 type SourcePanelProps = {
@@ -30,14 +49,15 @@ type SourcePanelProps = {
 export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, copySuccess, onError }: SourcePanelProps) {
 	const loc = locale.bind(null, lang)
 	const [indent, setIndent] = useState(Store.getIndent())
+	const [format, setFormat] = useState(Store.getFormat())
 	const source = useRef<HTMLTextAreaElement>(null)
 	const download = useRef<HTMLAnchorElement>(null)
 	const retransform = useRef<Function>()
 
 	const getOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
 		const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, { blockStates })
-		return JSON.stringify(data, null, INDENT[indent]) + '\n'
-	}, [indent])
+		return FORMATS[format].stringify(data, INDENT[indent]) + '\n'
+	}, [indent, format])
 
 	useEffect(() => {
 		retransform.current = () => {
@@ -66,11 +86,12 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 
 	useEffect(() => {
 		retransform.current()
-	}, [indent])
+	}, [indent, format])
 
 	const onImport = () => {
+		if (source.current.value.length === 0) return
 		try {
-			const data = JSON.parse(source.current.value)
+			const data = FORMATS[format].parse(source.current.value)
 			model?.reset(DataModel.wrapLists(data), false)
 		} catch (e) {
 			onError(`Error importing: ${message(e)}`)
@@ -90,7 +111,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 		if (doDownload && model && blockStates && download.current) {
 			const content = encodeURIComponent(getOutput(model, blockStates))
 			download.current.setAttribute('href', `data:text/json;charset=utf-8,${content}`)
-			download.current.setAttribute('download', `${name}.json`)
+			download.current.setAttribute('download', `${name}.${format}`)
 			download.current.click()
 		}
 	}, [doDownload])
@@ -107,6 +128,11 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 		setIndent(value)
 	}
 
+	const changeFormat = (value: string) => {
+		Store.setFormat(value)
+		setFormat(value)
+	}
+
 	return <> 
 		<div class="controls">
 			<BtnMenu icon="gear" tooltip={loc('output_settings')}>
@@ -114,6 +140,10 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 					<Btn label={loc(`indentation.${key}`)} active={indent === key}
 						onClick={() => changeIndent(key)}/>
 				)}
+				<hr />
+				{Object.keys(FORMATS).map(key =>
+					<Btn label={loc(`format.${key}`)} active={format === key}
+						onClick={() => changeFormat(key)} />)}
 			</BtnMenu>
 		</div>
 		<textarea ref={source} class="source" onBlur={onImport} spellcheck={false} autocorrect="off" placeholder={loc('source_placeholder')}></textarea>

src/app/schema/renderHtml.tsx

@@ -59,7 +59,6 @@ const renderHtml: RenderHook = {
 	choice({ choices, config, switchNode }, path, value, lang, states, ctx) {
 		const choice = switchNode.activeCase(path, true) as typeof choices[number]
 		const contextPath = (config?.context) ? new ModelPath(path.getModel(), new Path(path.getArray(), [config.context])) : path
-		console.log('RENDER', path.toString(), choice.type, value)
 		const [prefix, suffix, body] = choice.node.hook(this, contextPath, value, lang, states, ctx)
 		if (choices.length === 1) {
 			return [prefix, suffix, body]
@@ -70,7 +69,6 @@ const renderHtml: RenderHook = {
 			const newValue = c.change
 				? c.change(DataModel.unwrapLists(value))
 				: config.choiceContext === 'feature' ?	c.node.default()?.config?.feature : c.node.default()
-			console.warn('CHOICE', type, c, value, newValue)
 			path.model.set(path, DataModel.wrapLists(newValue))
 		}
 		const inject = <select value={choice.type} onChange={(e) => set((e.target as HTMLSelectElement).value)}>
@@ -260,7 +258,6 @@ const renderHtml: RenderHook = {
 		}
 		const newCtx = (typeof value === 'object' && value !== null && node.default()?.pools)
 			? { ...ctx, loot: value?.type } : ctx
-		// console.log('OBJECT', path.toString(), Object.keys(getActiveFields(path)))
 		const body = <>
 			{(typeof value === 'object' && value !== null && !(node.optional() && value === undefined)) &&
 				Object.entries(getActiveFields(path))

src/app/schema/transformOutput.ts

@@ -43,7 +43,10 @@ export const transformOutput: Hook<[any, OutputProps], any> = {
 		Object.keys(activeFields)
 			.filter(k => activeFields[k].enabled(path))
 			.forEach(f => {
-				res[f] = activeFields[f].hook(this, path.push(f), value[f], props)
+				const out = activeFields[f].hook(this, path.push(f), value[f], props)
+				if (out !== undefined && out !== null) {
+					res[f] = out
+				}
 			})
 		return res
 	},

src/locales/en.json

@@ -25,15 +25,18 @@
   "expand_all": "Hold %0% to expand all",
   "feature.decorated.decorators": "Decorators",
   "feature.decorated.decorators.entry": "Decorator",
+  "format.json": "JSON",
+  "format.yaml": "YAML",
   "fields": "Fields",
   "generate_new_seed": "Generate new seed",
   "github": "GitHub",
-  "hide_output": "Hide JSON output",
+  "hide_output": "Hide output",
   "hide_preview": "Hide preview",
   "home": "Home",
   "import": "Import",
   "indentation.2_spaces": "2 spaces",
   "indentation.4_spaces": "4 spaces",
+  "indentation.minified": "Minified",
   "indentation.tabs": "Tabs",
   "item_modifier": "Item Modifier",
   "language": "Language",
@@ -53,7 +56,7 @@
   "move_up": "Move up",
   "not_found.description": "The page you were looking for does not exist.",
   "no_presets": "No presets",
-  "output_settings": "JSON output settings",
+  "output_settings": "Output settings",
   "predicate": "Predicate",
   "recipe": "Recipe",
   "redo": "Redo",
@@ -82,7 +85,7 @@
   "preview.width": "Width",
   "remove": "Remove",
   "search": "Search",
-  "show_output": "Show JSON output",
+  "show_output": "Show output",
   "show_preview": "Show preview",
   "sounds.play": "Play",
   "sounds.play_sound": "Play sound",
@@ -97,7 +100,7 @@
   "sounds.remove_sound": "Remove sound",
   "sounds.unknown_sound": "Unknown sound",
   "sounds.loading_sound": "Loading sound",
-  "source_placeholder": "Paste JSON content here",
+  "source_placeholder": "Paste raw content here",
   "switch_generator": "Switch generator",
   "terrain_settings": "Terrain settings",
   "undo": "Undo",

src/styles/global.css

@@ -298,6 +298,14 @@ main > .controls {
 	box-shadow: 0 0 7px -3px #000;
 }
 
+.popup-source .btn-menu > .btn-group {
+	right: 100%;
+	top: 50%;
+	margin-top: 0;
+	margin-right: 8px;
+	transform: translateY(-50%);
+}
+
 .popup-preview {
 	position: fixed;
 	display: flex;
@@ -410,6 +418,15 @@ main.has-preview {
 	border-top-left-radius: 0px;
 }
 
+.btn-group > hr {
+	border: 4px solid var(--background-4);
+	border-left: transparent;
+	border-right: transparent;
+	background-color: var(--background-6);
+	margin: 0;
+	padding: 2px 0;
+}
+
 .btn-input {
 	cursor: initial;
 	padding-right: 7px;