Update mcschema to new mounter system

src/app/AbstractView.ts

@@ -0,0 +1,18 @@
+import { ModelListener, DataModel } from '@mcschema/core';
+
+export abstract class AbstractView implements ModelListener {
+  model: DataModel
+
+  constructor(model: DataModel) {
+    this.model = model
+    this.model.addListener(this)
+  }
+
+  setModel(model: DataModel) {
+    this.model.removeListener(this)
+    this.model = model
+    this.model.addListener(this)
+  }
+
+  invalidated(model: DataModel): void {}
+}

src/app/ErrorsView.ts

@@ -1,9 +1,9 @@
 import {
-  AbstractView,
   DataModel,
   Errors,
   locale,
 } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
 
 export class ErrorsView extends AbstractView {
   target: HTMLElement

src/app/SourceView.ts

@@ -0,0 +1,44 @@
+import { DataModel, Path, ModelPath } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
+
+type SourceViewOptions = {
+  indentation?: number | string,
+  rows?: number
+}
+
+/**
+ * JSON representation view of the model.
+ * Renders the result in a <textarea>.
+ */
+export class SourceView extends AbstractView {
+  target: HTMLTextAreaElement
+  options?: SourceViewOptions
+
+  /**
+   * @param model data model this view represents and listens to
+   * @param target DOM element to render the view
+   * @param options optional options for the view
+   */
+  constructor(model: DataModel, target: HTMLTextAreaElement, options?: SourceViewOptions) {
+    super(model)
+    this.target = target
+    this.options = options
+    this.target.addEventListener('change', evt => this.updateModel())
+  }
+
+  invalidated() {
+    const transformed = this.model.schema.transform(new ModelPath(this.model), this.model.data)
+    this.target.value = JSON.stringify(transformed, null, this.options?.indentation)
+  }
+
+  updateModel() {
+    let parsed = {}
+    try {
+      parsed = JSON.parse(this.target.value)
+    } catch (err) {
+      this.model.error(new Path().push('JSON'), err.message)
+      return
+    }
+    this.model.reset(parsed)
+  }
+}

src/app/TreeView.ts

@@ -0,0 +1,46 @@
+import { DataModel, ModelPath, Mounter } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
+
+type Registry = {
+  [id: string]: (el: Element) => void
+}
+
+type TreeViewOptions = {
+  showErrors?: boolean
+  observer?: (el: HTMLElement) => void
+  nodeInjector?: (path: ModelPath, mounter: Mounter) => string
+}
+
+/**
+ * DOM representation view of the model.
+ */
+export class TreeView extends AbstractView {
+  target: HTMLElement
+  registry: Registry = {}
+  showErrors: boolean
+  observer: (el: HTMLElement) => void
+  nodeInjector: (path: ModelPath, mounter: Mounter) => string
+
+  /**
+   * @param model data model this view represents and listens to
+   * @param target DOM element to render the view
+   */
+  constructor(model: DataModel, target: HTMLElement, options?: TreeViewOptions) {
+    super(model)
+    this.target = target
+    this.showErrors = options?.showErrors ?? false
+    this.observer = options?.observer ?? (() => {})
+    this.nodeInjector = options?.nodeInjector ?? (() => '')
+  }
+
+  /**
+   * @override
+   */
+  invalidated() {
+    const mounter = new Mounter({nodeInjector: this.nodeInjector})
+    const rendered = this.model.schema.render(new ModelPath(this.model), this.model.data, mounter)
+    this.target.innerHTML = rendered[2];
+    mounter.mount(this.target);
+    this.observer(this.target)
+  }
+}

src/app/app.ts

@@ -5,13 +5,14 @@ import {
   locale,
   LOCALES,
   ModelPath,
-  SourceView,
-  TreeView,
+  Mounter,
   Path,
 } from '@mcschema/core'
 import { getCollections, getSchemas } from '@mcschema/java-1.16'
 import { VisualizerView } from './visualization/VisualizerView'
 import { RegistryFetcher } from './RegistryFetcher'
+import { TreeView } from './TreeView'
+import { SourceView } from './SourceView'
 import { ErrorsView } from './ErrorsView'
 import config from '../config.json'
 import { BiomeNoiseVisualizer } from './visualization/BiomeNoiseVisualizer'
@@ -63,11 +64,11 @@ const treeViewObserver = (el: HTMLElement) => {
   })
 }
 
-const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
+const treeViewNodeInjector = (path: ModelPath, mounter: Mounter) => {
   let res = VisualizerView.visualizers
     .filter(v => v.active(path))
     .map(v => {
-      const id = view.registerClick(() => {
+      const id = mounter.registerClick(() => {
         views.visualizer.set(v, path)
         views.visualizer.model.invalidate()
       })
@@ -78,7 +79,7 @@ const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
     if (path.pop().endsWith(new Path(['generator', 'biome_source', 'biomes']))) {
       const biomeVisualizer = views.visualizer.visualizer as BiomeNoiseVisualizer
       const biome = path.push('biome').get()
-      const id = view.registerChange(el => {
+      const id = mounter.registerChange(el => {
         biomeVisualizer.setBiomeColor(biome, (el as HTMLInputElement).value)
         views.visualizer.visualizer!.state = {}
         views.visualizer.invalidated()
@@ -166,7 +167,6 @@ Promise.all([
     }
   }
   config.models.forEach(buildModel)
-  
 
   let selected = ''
   Object.values(models).forEach(m => m.validate(true))

src/app/visualization/VisualizerView.ts

@@ -1,4 +1,5 @@
-import { AbstractView, DataModel, Path, ModelPath } from "@mcschema/core"
+import { DataModel, ModelPath } from "@mcschema/core"
+import { AbstractView } from "../AbstractView"
 import { BiomeNoiseVisualizer } from "./BiomeNoiseVisualizer"
 import { NoiseSettingsVisualizer } from "./NoiseSettingsVisualizer"
 import { Visualizer } from "./Visualizer"