Adapted code to Svelte 4

Author: zonia3000

__tests__/v1/JobLogsModal.test.js

@@ -8,7 +8,9 @@ vi.mock('$env/dynamic/public', () => {
 
 // Mocking bootstrap.Modal
 class MockModal {
-	show = vi.fn();
+	constructor() {
+		this.show = vi.fn();
+	}
 }
 MockModal.getInstance = vi.fn();
 

__tests__/v2/CreateDatasetModal.test.js

@@ -18,8 +18,10 @@ vi.mock('$app/stores', () => {
 
 // Mocking bootstrap.Modal
 class MockModal {
-	show = vi.fn();
-	hide = vi.fn();
+	constructor() {
+		this.show = vi.fn();
+		this.hide = vi.fn();
+	}
 }
 MockModal.getInstance = vi.fn();
 

__tests__/v2/RunWorkflowModal.test.js

@@ -12,8 +12,10 @@ fetch.mockResolvedValue({
 
 // Mocking bootstrap.Modal
 class MockModal {
-	show = vi.fn();
-	hide = vi.fn();
+	constructor() {
+		this.show = vi.fn();
+		this.hide = vi.fn();
+	}
 }
 MockModal.getInstance = vi.fn();
 

docs/development/structure.md

@@ -163,7 +163,7 @@ export const actions = {
 		console.log(cookieOptions);
 		cookies.set(AUTH_COOKIE_NAME, authData.access_token, cookieOptions);
 
-		throw redirect(302, '/');
+		redirect(302, '/');
 	}
 };
 ```

jschema/src/lib/components/form_element.js

@@ -6,38 +6,28 @@ import { getPropertyData } from './jschema_initial_data';
  * @abstract
  */
 export class BaseFormElement {
-	manager;
-	/**
-	 * Unique identifier associated with the HTML element
-	 */
-	id;
-	key;
-	type;
-	title;
-	description;
-	required;
-	/**
-	 * Tells if the property can be removed from an object: true for custom properties
-	 * of schema objects having additionalProperties set to true.
-	 */
-	removable;
-	/**
-	 * @type {import("../types/jschema").JSONSchemaProperty}
-	 */
-	property;
-
 	/**
 	 * @param {import("../types/form").BaseFormElementFields} fields
 	 */
 	constructor(fields) {
 		this.manager = fields.manager;
+		/**
+		 * Unique identifier associated with the HTML element
+		 */
 		this.id = fields.id;
 		this.key = fields.key;
 		this.type = fields.type;
 		this.title = fields.title;
 		this.required = fields.required;
 		this.description = fields.description;
+		/**
+		 * Tells if the property can be removed from an object: true for custom properties
+		 * of schema objects having additionalProperties set to true.
+		 */
 		this.removable = fields.removable;
+		/**
+		 * @type {import("../types/jschema").JSONSchemaProperty}
+		 */
 		this.property = fields.property;
 	}
 
@@ -52,8 +42,6 @@ export class BaseFormElement {
  * @abstract
  */
 export class ValueFormElement extends BaseFormElement {
-	value;
-
 	/**
 	 * @param {import("../types/form").ValueFormElementFields<T>} fields
 	 */
@@ -82,8 +70,6 @@ export class BooleanFormElement extends ValueFormElement {
 }
 
 export class EnumFormElement extends ValueFormElement {
-	options;
-
 	/**
 	 * @param {import("../types/form").EnumFormElementFields} fields
 	 */
@@ -94,29 +80,26 @@ export class EnumFormElement extends ValueFormElement {
 }
 
 export class NumberFormElement extends ValueFormElement {
-	badInput = false;
 	/**
 	 * @param {import("../types/form").NumberFormElementFields} fields
 	 */
 	constructor(fields) {
 		super(fields);
 		this.min = fields.min;
 		this.max = fields.max;
+		this.badInput = false;
 	}
 }
 
 export class ObjectFormElement extends BaseFormElement {
-	children;
-	/**
-	 * @type {import("../types/jschema").JSONSchemaProperty | false}
-	 */
-	additionalProperties = false;
-
 	/**
 	 * @param {import("../types/form").ObjectFormElementFields} fields
 	 */
 	constructor(fields) {
 		super(fields);
+		/**
+		 * @type {import("../types/jschema").JSONSchemaProperty | false}
+		 */
 		this.additionalProperties = fields.additionalProperties;
 		this.children = fields.children;
 		this.collapsed = !fields.required;
@@ -201,11 +184,6 @@ export class ObjectFormElement extends BaseFormElement {
 }
 
 export class ArrayFormElement extends BaseFormElement {
-	children;
-	items;
-	minItems;
-	maxItems;
-
 	/**
 	 * @param {import("../types/form").ArrayFormElementFields} fields
 	 */
@@ -283,10 +261,6 @@ export class ArrayFormElement extends BaseFormElement {
 }
 
 export class TupleFormElement extends BaseFormElement {
-	children;
-	items;
-	size;
-
 	/**
 	 * @param {import("../types/form").TupleFormElementFields} fields
 	 */

jschema/src/lib/components/form_manager.js

@@ -25,21 +25,6 @@ import { SchemaValidator } from './jschema_validation.js';
  * validate the form and retrieve an object based on the data present in the form.
  */
 export class FormManager {
-	/**
-	 * The root of the object representing the form.
-	 * @type {ObjectFormElement}
-	 */
-	root;
-
-	/**
-	 * List of unique identifiers generated for elements
-	 * @type {string[]}
-	 */
-	ids = [];
-
-	/** @type {'pydantic_v1'|'pydantic_v2'} */
-	schemaVersion;
-
 	/**
 	 * @param {import("../types/jschema").JSONSchema} originalJsonSchema
 	 * @param {(type: string, detail?: any) => boolean} dispatch
@@ -48,6 +33,7 @@ export class FormManager {
 	 * @param {any} initialValue
 	 */
 	constructor(originalJsonSchema, dispatch, schemaVersion, propertiesToIgnore = [], initialValue = undefined) {
+		/** @type {'pydantic_v1'|'pydantic_v2'} */
 		this.schemaVersion = schemaVersion;
 		this.jsonSchema = adaptJsonSchema(originalJsonSchema, propertiesToIgnore);
 
@@ -57,13 +43,23 @@ export class FormManager {
 			throw new Error('Invalid JSON Schema');
 		}
 
+		/**
+		 * List of unique identifiers generated for elements
+		 * @type {string[]}
+		 */
+		this.ids = [];
+
 		const data = getJsonSchemaData(this.jsonSchema, schemaVersion, initialValue);
 		this.dispatch = dispatch;
 		this.notifyChange = () => {
 			const data = this.getFormData();
 			this.dispatch('change', { value: data });
 		};
 
+		/**
+		 * The root of the object representing the form.
+		 * @type {ObjectFormElement}
+		 */
 		this.root = this.createObjectElement({
 			key: null,
 			property: this.jsonSchema,

jschema/src/lib/components/jschema_validation.js

@@ -68,7 +68,7 @@ export function detectSchemaVersion(schema) {
 		const schemaValidatorV2 = new SchemaValidator('pydantic_v2');
 		schemaValidatorV2.validateSchema(schema);
 		return 'pydantic_v2';
-	} catch (_) {
+	} catch {
 		const schemaValidatorV1 = new SchemaValidator('pydantic_v1');
 		schemaValidatorV1.validateSchema(schema);
 		return 'pydantic_v1';

jschema/src/lib/components/properties/EnumProperty.svelte

@@ -11,7 +11,7 @@
 	function handleValueChange() {
 		formElement.notifyChange();
 		validationError = '';
-		if (formElement.required && field.value === 'null') {
+		if (formElement.required && field.value === '') {
 			validationError = 'Field is required';
 		}
 	}
@@ -31,7 +31,7 @@
 			id="property-{formElement.id}"
 			class:is-invalid={validationError}
 		>
-			<option value={null}>Select...</option>
+			<option value="">Select...</option>
 			{#each formElement.options as optionValue}
 				<option>{optionValue}</option>
 			{/each}

jschema/src/lib/components/properties/TupleProperty.svelte

@@ -39,7 +39,7 @@
 		{/if}
 	</div>
 	<div>
-		{#each children as nestedProperty, index (nestedProperty.id)}
+		{#each children as nestedProperty}
 			<div class="d-flex">
 				<div class="flex-fill">
 					<PropertyDiscriminator formElement={nestedProperty} />

sandbox/src/lib/components/DragAndDropUploader.svelte

@@ -94,6 +94,7 @@
 	on:dragover={handleDragOver}
 	on:dragleave={handleDragLeave}
 	class:dragOver
+	role="region"
 >
 	<div class="m-1">
 		<div class="input-group has-validation">