@eodash/eodash 5.0.0-alpha.1.6 → 5.0.0-alpha.1.8

package/core/types.d.ts

@@ -1,362 +1,331 @@
-import { useSTAcStore } from "@/store/stac"
+import { useSTAcStore } from "./store/stac"
 import type { Router } from "vue-router";
 import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-
-declare global {
+import type { Ref } from "vue"
+import type { ThemeDefinition } from "vuetify/lib/index.mjs";
+import type { Map } from "openlayers";
+/**
+ * Web Component configuration
+ */
+export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
+  /** Web component definition file URL*/
+  link: T extends 'runtime' ? string : (string | (() => Promise<unknown>));
+  /** Exported Constructor, needs to be provided if the web component is not registered by the `link` provided */
+  constructorProp?: string
+  /** Custom tag name */
+  tagName: `${string}-${string}`
+  /** Object defining all the properties and attributes of the web component */
+  properties?: Record<string, any>
   /**
-   * Specification of web components imported from an external URL
+   * Function that is triggered when the web component is mounted in the DOM.
+   * @param el - web component
+   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
-  interface ExternalWebComponentProps {
-    /** Web component definition file URL*/
-    link: string
-    /** Indicates if the widget is a node module */
-    // node_module?: false
-    /** Exported Constructor, needs to be provided if the web component is not registered by the `link` provided */
-    constructorProp?: string
-    /** Custom tag name */
-    tagName: `${string}-${string}`
-    /** Object defining all the properties and attributes of the web component */
-    properties?: Record<string, any>
-    /**
-     * Function that is triggered when the web component is mounted in the DOM.
-     * @param el - web component
-     * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-     */
-    onMounted?: (el: Element, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
-    /**
-     * Function that is triggered when the web component is unmounted from the DOM.
-     * @param el - web component
-     * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-     */
-    onUnmounted?: (el: Element, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
-  }
+  onMounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
+  /**
+   * Function that is triggered when the web component is unmounted from the DOM.
+   * @param el - web component
+   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
+   */
+  onUnmounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
+}
 
-  // /**
-  //  * Specification of web components imported as a node_module.
-  //  */
-  // export interface NodeModuleWebComponentProps {
-  //   /** Type of `modulesMap` key. Defined in `/core/modulesMap.ts`*/
-  //   link: keyof typeof modulesMap;
-  //   /** Indicates if the widget is a node module */
-  //   node_module: true;
-  //   /** Exported Constructor, needs to be provided if the web component is not registered */
-  //   constructorProp?: string
-  //   /** Custom tag name */
-  //   tagName: `${string}-${string}`
-  //   /** Object defining all the properties and attributes of the web component */
-  //   properties?: Record<string, any>
-  //   /**
-  //    * Function that is triggered when the web component is mounted in the DOM.
-  //    * @param el - web component
-  //    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-  //    */
-  //   onMounted?: (el: Element, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
-  //   /**
-  //    * Function that is triggered when the web component is unmounted from the DOM.
-  //    * @param el - web component
-  //    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-  //    */
-  //   onUnmounted?: (el: Element, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
-  // }
-  /** @ignore */
-  type DynamicWebComponentProps = ExternalWebComponentProps // ExternalWebComponentProps | NodeModuleWebComponentProps
 
-  /** @ignore */
-  interface WidgetsContainerProps {
-    widgets: Omit<WidgetConfig, 'layout'>[]
-  }
+/** @ignore */
+export interface WidgetsContainerProps {
+  widgets: Omit<WidgetConfig, 'layout'>[]
+}
 
-  // eodash config types:
+// eodash config types:
+/**
+ * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
+ * an external endpoint, or an installed node_module.
+ * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
+ * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+ */
+export interface WebComponentConfig<T extends ExecutionTime = "compiletime"> {
+  /**
+ * Unique Identifier, triggers rerender when using `defineWidget`
+ **/
+  id: number | string | symbol
+  /**
+   * Widget title
+   */
+  title: string
   /**
-   * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
-   * an external endpoint, or an installed node_module.
-   * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
-   * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+   * Widget position and size.
    */
-  interface WebComponentConfig {
+  layout: {
     /**
-   * Unique Identifier, triggers rerender when using `defineWidget`
-   **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-     * Widget title
+     *  Vertical start position. Integer (1 - 12)
      */
-    title: string
+    y: number
     /**
-     * Widget position and size.
+     *  Width. Integer (1 - 12)
      */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: ExternalWebComponentProps // | NodeModuleWebComponentProps
+    w: number
     /**
-     * Widget type
+     *  Height. Integer (1 - 12)
      */
-    type: 'web-component'
+    h: number
   }
+  widget: WebComponentProps<T>
+  /**
+   * Widget type
+   */
+  type: 'web-component'
+}
 
+/**
+ * Widget type: `internal` specification.
+ * Internal widgets are Vue components inside the `/widgets` directory.
+ */
+export interface InternalComponentConfig {
+  /**
+  * Unique Identifier, triggers rerender when using `defineWidget`
+  **/
+  id: number | string | symbol
   /**
-   * Widget type: `internal` specification.
-   * Internal widgets are Vue components inside the `/widgets` directory.
+   * Widget title
    */
-  interface InternalComponentConfig {
+  title: string
+  /**
+  * Widget position and size.
+  */
+  layout: {
     /**
-    * Unique Identifier, triggers rerender when using `defineWidget`
-    **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-     * Widget title
+     *  Vertical start position. Integer (1 - 12)
      */
-    title: string
+    y: number
     /**
-    * Widget position and size.
-    */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: {
-      /**
-       * Internal Vue Component file name without the extention .vue
-       */
-      name: string;
-      /**
-       * Specified Vue component props
-       */
-      props?: Record<string, unknown>
-    }
+     *  Width. Integer (1 - 12)
+     */
+    w: number
     /**
-    * Widget type.
-    */
-    type: 'internal'
+     *  Height. Integer (1 - 12)
+     */
+    h: number
+  }
+  widget: {
+    /**
+     * Internal Vue Component file name without the extention .vue
+     */
+    name: string;
+    /**
+     * Specified Vue component props
+     */
+    props?: Record<string, unknown>
   }
+  /**
+  * Widget type.
+  */
+  type: 'internal'
+}
 
+/**
+ * Widget type: `iframe` specification.
+ * Renders an external HTML file as a widget.
+ */
+export interface IFrameConfig {
   /**
-   * Widget type: `iframe` specification.
-   * Renders an external HTML file as a widget.
-   */
-  interface IFrameConfig {
+   * Unique Identifier, triggers rerender when using `defineWidget`
+   **/
+  id: number | string | symbol
+  /**
+  * Widget title
+  */
+  title: string
+  /**
+  * Widget position and size.
+  */
+  layout: {
     /**
-     * Unique Identifier, triggers rerender when using `defineWidget`
-     **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-    * Widget title
-    */
-    title: string
+     *  Vertical start position. Integer (1 - 12)
+     */
+    y: number
     /**
-    * Widget position and size.
-    */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: {
-      /**
-       * The URL of the page to embed
-       */
-      src: string
-    }
+     *  Width. Integer (1 - 12)
+     */
+    w: number
     /**
-    * Widget type
-    */
-    type: 'iframe'
+     *  Height. Integer (1 - 12)
+     */
+    h: number
   }
-  interface FunctionalWidget {
+  widget: {
     /**
-     * Provides a functional definition of the widget,
-     * gets triggered whenever a stac object is selected.
-     * @param selectedSTAC - currently selected stac object
+     * The URL of the page to embed
      */
-    defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget, 'layout'>
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
+    src: string
   }
-  type StaticWidget = WebComponentConfig | InternalComponentConfig | IFrameConfig
-  type WidgetConfig = StaticWidget | FunctionalWidget
-
-
-  type BackgroundWidgetConfig = Omit<WebComponentConfig, 'layout' | 'title'> | Omit<InternalComponentConfig, 'layout' | 'title'> | Omit<IFrameConfig, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
   /**
-   * Dashboard rendered widgets configuration specification.
-   * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
-   * A specific configuration should be provided based on the type of the widget.
+  * Widget type
+  */
+  type: 'iframe'
+}
+export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
+  /**
+   * Provides a functional definition of the widget,
+   * gets triggered whenever a stac object is selected.
+   * @param selectedSTAC - currently selected stac object
    */
-  interface TemplateConfig {
+  defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
+  layout: {
     /**
-     * Gap between widgets
+     *  Horizontal start position. Integer (1 - 12)
      */
-    gap?: number;
+    x: number
     /**
-     * Widget rendered as the dashboard background.
-     * Has the same specifications of [WidgetConfig](../readme#widgetconfig) without the `title` and  `layout` properties
+     *  Vertical start position. Integer (1 - 12)
      */
-    background?: BackgroundWidgetConfig
+    y: number
     /**
-     * Array of widgets that will be rendered as dashboard panels.
+     *  Width. Integer (1 - 12)
      */
-    widgets: WidgetConfig[]
+    w: number
+    /**
+     *  Height. Integer (1 - 12)
+     */
+    h: number
   }
+}
+export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentConfig<T> | InternalComponentConfig | IFrameConfig
+export type WidgetConfig<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
+
 
-  type ExternalURL = `${'https://' | 'http://'}${string}`;
-  type InternalRoute = `/${string}`
-  type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
+export type BackgroundWidgetConfig<T extends ExecutionTime = "compiletime"> = Omit<WebComponentConfig<T>, 'layout' | 'title'> | Omit<InternalComponentConfig, 'layout' | 'title'> | Omit<IFrameConfig, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
+/**
+ * Dashboard rendered widgets configuration specification.
+ * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
+ * A specific configuration should be provided based on the type of the widget.
+ */
+export interface TemplateConfig<T extends ExecutionTime = "compiletime"> {
+  /**
+   * Gap between widgets
+   */
+  gap?: number;
+  /**
+   * Widget rendered as the dashboard background.
+   * Has the same specifications of [WidgetConfig](../readme#widgetconfig) without the `title` and  `layout` properties
+   */
+  background?: BackgroundWidgetConfig<T>
+  /**
+   * Array of widgets that will be rendered as dashboard panels.
+   */
+  widgets: WidgetConfig<T>[]
+}
 
+export type ExternalURL = `${'https://' | 'http://'}${string}`;
+export type InternalRoute = `/${string}`
+export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
+export type ExecutionTime = "runtime" | "compiletime";
 
+/**
+ * Eodash configuration specification.
+ */
+export interface EodashConfig<T extends ExecutionTime = "compiletime"> {
   /**
-   * Eodash configuration specification.
+   * Configuration ID that defines the route of the dashboard.
+   * Rendered dashboard can be accessed on route `/dashboard/config-id`
    */
-  interface EodashConfig {
-    /**
-     * Configuration ID that defines the route of the dashboard.
-     * Rendered dashboard can be accessed on route `/dashboard/config-id`
-     */
-    id: string;
+  id: string;
+  /**
+   * Root STAC catalog endpoint
+   **/
+  stacEndpoint: StacEndpoint
+  /**
+  * Renderes to navigation buttons on the app header.
+  **/
+  routes?: Array<{
     /**
-     * Root STAC catalog endpoint
+     * button title
      **/
-    stacEndpoint: StacEndpoint
+    title: string,
     /**
-    * Renderes to navigation buttons on the app header.
-    **/
-    routes?: Array<{
-      /**
-       * button title
-       **/
-      title: string,
-      /**
-       * external URL or inner path to navigate to.
-       **/
-      to: ExternalURL | InternalRoute
-    }>
+     * external URL or inner path to navigate to.
+     **/
+    to: ExternalURL | InternalRoute
+  }>
+  /**
+   * Brand specifications.
+   */
+  brand: {
     /**
-     * Brand specifications.
+     * Automatically fetches the specified font family from google fonts. if the `link` property is specified
+     * the font family will be fetched from the provided source instead.
      */
-    brand: {
-      /**
-       * Automatically fetches the specified font family from google fonts. if the `link` property is specified
-       * the font family will be fetched from the provided source instead.
-       */
-      font?: {
-        /**
-         * Link to stylesheet that defines font-face.
-         */
-        link?: string;
-        /**
-         * Font family. Use FVD notation to include families https://github.com/typekit/fvd
-         */
-        family: string
-      }
-      /**
-       *  Title that will be shown in the app header
-       */
-      name: string;
-      /**
-       * Alias that will be shown in the app footer if specified.
-       */
-      shortName?: string
+    font?: {
       /**
-       * brand logo
+       * Link to stylesheet that defines font-face.
        */
-      logo?: string;
+      link?: string;
       /**
-       * Dashboard theme as a custom vuetifyJs theme.
+       * Font family. Use FVD notation to include families https://github.com/typekit/fvd
        */
-      theme?: ThemeDefinition
+      family: string
     }
     /**
-     * Rendered widgets configuration
+     *  Title that will be shown in the app header
+     */
+    name: string;
+    /**
+     * Alias that will be shown in the app footer if specified.
+     */
+    shortName?: string
+    /**
+     * brand logo
      */
-    template: TemplateConfig
+    logo?: string;
+    /**
+     * Dashboard theme as a custom vuetifyJs theme.
+     */
+    theme?: ThemeDefinition
   }
-  /////////
+  /**
+   * Rendered widgets configuration
+   */
+  template: TemplateConfig<T>
+}
+/////////
 
-  /// eodash store types
-  interface EodashStore {
+/// eodash store types
+export interface EodashStore {
+  /**
+   * Stateful Reactive variables
+   */
+  states: {
     /**
-     * Stateful Reactive variables
+     * Currently selected STAC endpoint
      */
-    states: {
-      /**
-       * Currently selected STAC endpoint
-       */
-      currentUrl: Ref<string>
-      /**
-      * OpenLayers map instance
-      */
-      mapInstance: Ref<Map | null>
-    }
-    // consider removing the actions ?
-    actions: {
-      loadFont: (family?: string, link?: string) => Promise<string>;
-    };
+    currentUrl: Ref<string>
     /**
-     *  Pinia store definition used to navigate the root STAC catalog.
-     */
-    stac: {
-      useSTAcStore: typeof useSTAcStore
-    }
+    * OpenLayers map instance
+    */
+    mapInstance: Ref<Map | null>
+  }
+  // consider removing the actions ?
+  actions: {
+    loadFont: (family?: string, link?: string) => Promise<string>;
+  };
+  /**
+   *  Pinia store definition used to navigate the root STAC catalog.
+   */
+  stac: {
+    useSTAcStore: typeof useSTAcStore
   }
-  ///////
 }
-export type { EodashConfig, EodashStore }
+///////
+export declare const defineConfig: (configCallback: (store: EodashStore) => EodashConfig | Promise<EodashConfig>) => EodashConfig

package/core/views/Dashboard.vue

@@ -35,11 +35,11 @@ const { mainRect } = useLayout()
 onUnmounted(() => {
   theme.global.name.value = 'light'
 })
-if (import.meta.hot) {
-  import.meta.hot.on('config:update', () => {
-    window.location.reload()
-  })
-}
+
+import.meta.hot?.on('reload', () => {
+  window.location.reload()
+})
+
 </script>
 
 <style scoped lang="scss">

package/core/vite-env.d.ts

@@ -6,26 +6,12 @@ declare module '*.vue' {
   export default component
 }
 declare interface Window {
-  eodashStore: EodashStore
-}
-declare module '@eox/itemfilter' {
-  export const EOxItemFilter: CustomElementConstructor
+  eodashStore: import("@/types").EodashStore
 }
 declare module '@eox/stacinfo' {
   export const EOxStacInfo: CustomElementConstructor
 }
-declare module '@eox/map' {
-  export const EOxMap: CustomElementConstructor
-}
-declare module '@eox/chart' {
-  export const EOxChart: CustomElementConstructor
-}
-declare module '@eox/layercontrol' {
-  export const EOxLayerControl: CustomElementConstructor
-}
-declare module '@eox/timecontrol' {
-  export const EOxTimeControl: CustomElementConstructor
-}
-declare module '@eox/jsonform' {
-  export const EOxJSONForm: CustomElementConstructor
+declare module 'user:config' {
+  const config: import("@/types").EodashConfig | Promise<import("@/types").EodashConfig>;
+  export default config
 }