satellite/admin/ui: Fix component rendering
I introduced a change in the UI that was a better way to dynamically render Svelte components (https://review.dev.storj.io/c/storj/storj/+/5931/4..5) during the review of the first version of it, however, while it works perfectly on development mode it doesn't work when the assets are built for production, failing silently, because the constructor name get renamed due to the name mangling caused by the minifyer as stated in the following issue: https://github.com/sveltejs/svelte/issues/6980 This commit use a different alternative not based on the constructor name and it works fine with the production build. Change-Id: I643c405f877a9206cf0e51b44d5138e5a9756a79
This commit is contained in:
parent
5573ece848
commit
f87ce0cadf
@ -9,8 +9,11 @@ See `ui-generator.ts` file for knowing about the `Operation` interface which is
|
||||
the type of the "operation" value to be passed in.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
|
||||
import { prettyPrintJson as prettyJSON } from 'pretty-print-json';
|
||||
import type { Operation } from '$lib/ui-generator';
|
||||
import type { ParamUI, Operation } from '$lib/ui-generator';
|
||||
import { InputText, Select, Textarea } from '$lib/ui-generator';
|
||||
|
||||
import UIInputText from '$lib/UIGeneratorInputText.svelte';
|
||||
import UISelect from '$lib/UIGeneratorSelect.svelte';
|
||||
@ -25,6 +28,22 @@ the type of the "operation" value to be passed in.
|
||||
});
|
||||
}
|
||||
|
||||
function componentFromConfig(param: ParamUI): typeof SvelteComponent {
|
||||
if (param instanceof InputText) {
|
||||
return UIInputText;
|
||||
}
|
||||
|
||||
if (param instanceof Select) {
|
||||
return UISelect;
|
||||
}
|
||||
|
||||
if (param instanceof Textarea) {
|
||||
return UITextarea;
|
||||
}
|
||||
|
||||
throw new Error('PANIC unmapped component');
|
||||
}
|
||||
|
||||
$: {
|
||||
if (operation !== prevOperation) {
|
||||
opArgs = new Array(operation.params.length);
|
||||
@ -38,12 +57,6 @@ the type of the "operation" value to be passed in.
|
||||
let opArgs: opArg[] = new Array(operation.params.length);
|
||||
let result: Promise<Record<string, unknown> | null>;
|
||||
let form: HTMLFormElement;
|
||||
|
||||
let componentsMap = {
|
||||
InputText: UIInputText,
|
||||
Select: UISelect,
|
||||
Textarea: UITextarea
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
@ -51,7 +64,7 @@ the type of the "operation" value to be passed in.
|
||||
<form bind:this={form} on:submit|preventDefault={() => execOperation(operation, opArgs)}>
|
||||
{#each operation.params as param, i}
|
||||
<svelte:component
|
||||
this={componentsMap[param[1].constructor.name]}
|
||||
this={componentFromConfig(param[1])}
|
||||
label={param[0]}
|
||||
config={param[1]}
|
||||
bind:value={opArgs[i]}
|
||||
|
@ -29,7 +29,7 @@ export interface Operation {
|
||||
func: (...p: unknown[]) => Promise<Record<string, unknown> | null>;
|
||||
}
|
||||
|
||||
type ParamUI = InputText | Select | Textarea;
|
||||
export type ParamUI = InputText | Select | Textarea;
|
||||
|
||||
export class InputText {
|
||||
constructor(
|
||||
|
Loading…
Reference in New Issue
Block a user