Refactoring: remove dependency on 'ToSvelte' by working with TypeComponent directly

src/Logic/ImageProviders/GenericImageProvider.ts

@@ -43,7 +43,7 @@ export default class GenericImageProvider extends ImageProvider {
         ]
     }
 
-    SourceIcon() {
+    sourceIcon() {
         return undefined
     }
 

src/Logic/ImageProviders/ImageProvider.ts

@@ -1,9 +1,9 @@
 import { Store, Stores } from "../UIEventSource"
-import BaseUIElement from "../../UI/BaseUIElement"
 import { LicenseInfo } from "./LicenseInfo"
 import { Utils } from "../../Utils"
 import { Feature, Point } from "geojson"
 import { ServerSourceInfo } from "../../Models/SourceOverview"
+import { ComponentType } from "svelte/types/runtime/internal/dev"
 
 export interface ProvidedImage {
     url: string
@@ -69,10 +69,7 @@ export default abstract class ImageProvider {
 
     public abstract readonly name: string
 
-    public abstract SourceIcon(
+    public abstract sourceIcon(): ComponentType
-        img?: { id: string; url: string; host?: string },
-        location?: { lon: number; lat: number }
-    ): BaseUIElement
 
     /**
      * Gets all the relevant URLS for the given tags and for the given prefixes;

src/Logic/ImageProviders/Imgur.ts

@@ -1,5 +1,4 @@
 import ImageProvider, { ProvidedImage } from "./ImageProvider"
-import BaseUIElement from "../../UI/BaseUIElement"
 import { Utils } from "../../Utils"
 import Constants from "../../Models/Constants"
 import { LicenseInfo } from "./LicenseInfo"
@@ -27,7 +26,7 @@ export class Imgur extends ImageProvider {
         return [Imgur.apiUrlInfo]
     }
 
-    SourceIcon(): BaseUIElement {
+    sourceIcon() {
         return undefined
     }
 

src/Logic/ImageProviders/Mapillary.ts

@@ -2,11 +2,11 @@ import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
 import { Utils } from "../../Utils"
 import { LicenseInfo } from "./LicenseInfo"
 import Constants from "../../Models/Constants"
-import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import { default as MapillaryIcon } from "../../assets/svg/Mapillary.svelte"
 import { Feature, Point } from "geojson"
 import { Store, UIEventSource } from "../UIEventSource"
 import { ServerSourceInfo } from "../../Models/SourceOverview"
+import { ComponentType } from "svelte/types/runtime/internal/dev"
 
 export class Mapillary extends ImageProvider {
     public static readonly singleton = new Mapillary()
@@ -138,8 +138,8 @@ export class Mapillary extends ImageProvider {
         }))
     }
 
-    SourceIcon(): SvelteUIElement {
+    sourceIcon(): ComponentType {
-        return new SvelteUIElement(MapillaryIcon)
+        return MapillaryIcon
     }
 
     async ExtractUrls(key: string, value: string): Promise<ProvidedImage[]> {

src/Logic/ImageProviders/Panoramax.ts

@@ -2,16 +2,15 @@ import { ImageUploader } from "./ImageUploader"
 import { AuthorizedPanoramax, ImageData, Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
 import ExifReader from "exifreader"
 import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
-import BaseUIElement from "../../UI/BaseUIElement"
 import { LicenseInfo } from "./LicenseInfo"
 import { GeoOperations } from "../GeoOperations"
 import Constants from "../../Models/Constants"
 import { Store, Stores, UIEventSource } from "../UIEventSource"
-import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import Panoramax_bw from "../../assets/svg/Panoramax_bw.svelte"
 import { Feature, Point } from "geojson"
 import { AddImageOptions } from "panoramax-js/dist/Panoramax"
 import { ServerSourceInfo } from "../../Models/SourceOverview"
+import { ComponentType } from "svelte/types/runtime/internal/dev"
 
 export default class PanoramaxImageProvider extends ImageProvider {
     public static readonly singleton: PanoramaxImageProvider = new PanoramaxImageProvider()
@@ -39,8 +38,8 @@ export default class PanoramaxImageProvider extends ImageProvider {
         { data: Promise<{ data: ImageData; url: string }>; time: Date }
     > = {}
 
-    public SourceIcon(): SvelteUIElement {
+    public sourceIcon(): ComponentType {
-        return new SvelteUIElement(Panoramax_bw)
+        return Panoramax_bw
     }
 
     visitUrl(

src/Logic/ImageProviders/WikidataImageProvider.ts

@@ -1,12 +1,11 @@
 import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
-import BaseUIElement from "../../UI/BaseUIElement"
 import { WikimediaImageProvider } from "./WikimediaImageProvider"
 import Wikidata from "../Web/Wikidata"
-import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import Wikidata_icon from "../../assets/svg/Wikidata.svelte"
 import { Utils } from "../../Utils"
 import { Feature, Point } from "geojson"
 import { ServerSourceInfo } from "../../Models/SourceOverview"
+import { ComponentType } from "svelte/types/runtime/internal/dev"
 
 export class WikidataImageProvider extends ImageProvider {
     public static readonly singleton = new WikidataImageProvider()
@@ -25,8 +24,8 @@ export class WikidataImageProvider extends ImageProvider {
         return Wikidata.neededUrls
     }
 
-    public SourceIcon(): BaseUIElement {
+    public sourceIcon(): ComponentType {
-        return new SvelteUIElement(Wikidata_icon)
+        return Wikidata_icon
     }
 
     public async ExtractUrls(key: string, value: string): Promise<ProvidedImage[]> {

src/Logic/ImageProviders/WikimediaImageProvider.ts

@@ -1,13 +1,10 @@
 import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
-import BaseUIElement from "../../UI/BaseUIElement"
-import { Utils } from "../../Utils"
 import { LicenseInfo } from "./LicenseInfo"
 import Wikimedia from "../Web/Wikimedia"
-import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import Wikimedia_commons_white from "../../assets/svg/Wikimedia_commons_white.svelte"
 import { Feature, Point } from "geojson"
 import { ServerSourceInfo } from "../../Models/SourceOverview"
-import { describe } from "vitest"
+import { ComponentType } from "svelte/types/runtime/internal/dev"
 
 /**
  * This module provides endpoints for wikimedia and others
@@ -118,8 +115,8 @@ export class WikimediaImageProvider extends ImageProvider {
         )
     }
 
-    SourceIcon(): BaseUIElement {
+    sourceIcon(): ComponentType {
-        return new SvelteUIElement(Wikimedia_commons_white)
+        return Wikimedia_commons_white
     }
 
     public PrepUrl(value: NonNullable<string>): ProvidedImage

src/UI/Base/SvelteUIElement.ts

@@ -2,6 +2,7 @@ import BaseUIElement from "../BaseUIElement"
 
 import { SvelteComponentTyped } from "svelte"
 
+
 /**
  * The SvelteUIComponent serves as a translating class which which wraps a SvelteElement into the BaseUIElement framework.
  * Also see ToSvelte.svelte for the opposite conversion

src/UI/Image/ImageAttribution.svelte

@@ -2,7 +2,6 @@
   import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
-  import ToSvelte from "../Base/ToSvelte.svelte"
   import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
@@ -17,7 +16,7 @@
   let license: Store<LicenseInfo> = image.license
     ? new ImmutableStore(image.license)
     : UIEventSource.FromPromise(image.provider?.DownloadAttribution(image))
-  let icon = image.provider?.SourceIcon(image)
+  let icon = image.provider?.sourceIcon()
   let openOriginal = image.provider?.visitUrl(image)
 </script>
 
@@ -28,11 +27,11 @@
     {#if icon !== undefined}
       {#if openOriginal}
         <a href={openOriginal} target="_blank" rel="noopener" class="mr-2 h-6 w-6">
-          <ToSvelte construct={icon} />
+          <svelte:component this={icon} />
         </a>
       {:else}
         <div class="mr-2 h-6 w-6">
-          <ToSvelte construct={icon} />
+          <svelte:component this={icon} />
         </div>
       {/if}
     {/if}