Merge pull request #31 from webgme/issue/30-load-schema-errors

Dispatch schema compile errors

Author: romancow

src/lib/SchemaForm.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import 'core-js/actual/structured-clone';
   import type { JSONSchema7Definition } from "json-schema";
+  import { createEventDispatcher } from 'svelte';
   import DownloadOptions, { type DataTransform } from './DowloadOptions';
   import UISchema from "./UISchema";
   import JsonSchemaDereferencer from "@json-schema-tools/dereferencer";
-  import Ajv from "ajv";
+  import Ajv, { type ValidateFunction } from "ajv";
   import ajvFormats from "ajv-formats";
   import mergeAllOf from "json-schema-merge-allof";
   import Paper, { Title, Subtitle, Content } from '@smui/paper';
@@ -18,6 +19,7 @@
   export let data: { [prop: string]: any } = {};
   export let uischema: UISchema = {};
 
+  const dispatch = createEventDispatcher();
   /* A bit of a hack - When bulding the static test site, the dereferencer is still behind a
    * `.default` property for some reason. I'm guessing it has something to do with how modules are
    * imported during the svelte build process. When running in browser, it appears to be imported
@@ -39,13 +41,22 @@
     download
   };
   let uischemaStore = UISchema.store(uischema);
+  let validator: ValidateFunction;
 
   $: dereferencing = new Dereferencer(
     isBoolean(schema) ? schema : mergeAllOf(structuredClone(schema)),
     { mutate: true }
-  ).resolve();
+  ).resolve().catch(error => {
+    dispatch("error", error);
+    return null;
+  });
 
-  $: validator = ajv.compile(schema);
+  $: try {
+    validator = ajv.compile(schema);
+  }
+  catch (error) {
+    dispatch("error", error);
+  }
 
   $: updateUischemaStore(uischema);
 
@@ -108,11 +119,9 @@
           <ObjectProps {...dereferenced} bind:data {uischema} force />
         </Content>
       </Paper>
-    {:else}
+    {:else if dereferenced != null}
       <Control schema={dereferenced} bind:data {uischema} force />
     {/if}
-  {:catch error}
-    <div class="error">ERROR: {error.message}</div>
   {/await}
 
   {#if $$slots.default}

src/lib/index.ts

@@ -1,5 +1,5 @@
 // Reexport your entry components here
 export { default as default } from "./SchemaForm.svelte";
 export type { JSONSchema7 } from "json-schema";
-export type { default as ValidationError } from "./ValidationError";
+export { default as ValidationError } from "./ValidationError";
 export type { default as UISchema } from "./UISchema";

src/routes/+page.svelte

@@ -6,7 +6,7 @@
   import Button, { Label as BtnLabel } from "@smui/button"
   import Textfield from '@smui/textfield';
   import Snackbar, { Label as SBLabel, Actions } from '@smui/snackbar';
-  import SchemaForm, { type ValidationError } from "$lib";
+  import SchemaForm, { ValidationError } from "$lib";
   import schemas, { type TestSchema } from "../schemas";
 
   import type UISchema from "$lib/UISchema";
@@ -18,7 +18,7 @@
   let schemaString = "";
   let uischemaString = "";
   let dataString = "";
-  let validationError: ValidationError | null = null;
+  let schemaError: Error | ValidationError | null = null;
 
   let schemaForm: SchemaForm;
   let errorSnackbar: Snackbar;
@@ -27,7 +27,7 @@
   $: setSchemaString(schema);
   $: setUISchemaString(uischema);
   $: setDataString(data);
-  $: if (validationError != null) errorSnackbar.open();
+  $: if (schemaError != null) errorSnackbar.open();
 
   async function setSchemaString(schema: TestSchema["schema"]) {
     await tick();
@@ -87,7 +87,7 @@
     try {
       schemaForm.download();
     } catch (error) {
-      validationError = error as ValidationError;
+      schemaError = error as Error;
     }
   }
 </script>
@@ -98,21 +98,23 @@
       <Label>{tab.name}</Label>
     </Tab>
   </TabBar>
-  <SchemaForm {schema} {uischema} bind:data bind:this={schemaForm}>
+  <SchemaForm {schema} {uischema} bind:data bind:this={schemaForm} on:error={(event) => schemaError = event.detail}>
     <Button on:click={download} type="button" variant="raised">
       <BtnLabel>Download</BtnLabel>
     </Button>
   </SchemaForm>
 
   <Snackbar class="schema-error" bind:this={errorSnackbar}>
     <SBLabel>
-      {#if validationError}
-        {validationError.message}
-        <ul>
-          {#each validationError.errors as error}
-            <li>{error.message}</li>
-          {/each}
-        </ul>
+      {#if schemaError}
+        {schemaError.message}
+        {#if schemaError instanceof ValidationError}
+          <ul>
+            {#each schemaError.errors as error}
+              <li>{error.message}</li>
+            {/each}
+          </ul>
+        {/if}
       {:else}
         Unknown error
       {/if}