@eodash/eodash 5.0.0-alpha.1.7 → 5.0.0-alpha.1.9

package/bin/app.js

@@ -4,15 +4,12 @@ import { buildApp, createDevServer, previewApp } from './cli.js'
 
 const command = process.argv?.[2];
 (async () => {
-  const baseFlag = (  
-    process.argv.indexOf('--base') > -1 ? process.argv[process.argv.indexOf('--base')+1] : null
-  );
   switch (command) {
     case "dev":
       await createDevServer();
       break;
     case "build":
-      await buildApp(baseFlag);
+      await buildApp();
       break;
     case "preview":
       await previewApp();

package/bin/cli.js

@@ -1,15 +1,16 @@
 #!/usr/bin/env node
 
 import { build, createServer, preview } from "vite"
-import { rootPath, appPath, buildTargetPath, appPublicPath } from "./utils.js";
+import {
+  rootPath, appPath, buildTargetPath,
+  userConfig, runtimeConfigPath,
+} from "./utils.js";
 import { writeFile, rm, cp } from "fs/promises";
-import { update } from "./update.js";
 import { indexHtml, serverConfig } from "./serverConfig.js";
 import path from "path";
 import { existsSync } from "fs";
 
 
-
 export const createDevServer = async () => {
   const server = await createServer(await serverConfig({ mode: 'development', command: 'serve' }))
   await server.listen()
@@ -17,44 +18,37 @@ export const createDevServer = async () => {
   server.bindCLIShortcuts({ print: true })
 }
 
-export const buildApp = async (baseFlag) => {
+export const buildApp = async () => {
   const htmlPath = path.join(appPath, '/index.html')
   await writeFile(htmlPath, indexHtml).then(async () => {
-    await update()
     const config = await serverConfig({ mode: 'production', command: 'build' });
-    if (baseFlag !== null) {
-      config.base = baseFlag
-    }
     await build(config)
+
+    if (existsSync(runtimeConfigPath)) {
+      await cp(runtimeConfigPath, path.join(buildTargetPath, 'config.js'),
+        { recursive: true }).catch((e) => {
+          console.error(e)
+        })
+    }
+
     await rm(htmlPath).catch(() => {
       console.error('failed to remove index.html')
     })
-    if (appPath.includes('node_modules') && existsSync(appPublicPath)) {
-      await rm(appPublicPath, { recursive: true }).catch((e) => {
-        console.error(e)
-      })
-    }
   })
-
-  if (appPath.includes('node_modules')) {
-    await cp(path.join(appPath, 'dist'), buildTargetPath, { recursive: true }).then(() => {
-      console.info('dashboard built successfully')
-    }).catch((e) => {
-      console.error(e)
-    })
-  }
 }
 
 
 export async function previewApp() {
   const previewServer = await preview({
     root: rootPath,
+    base: userConfig.base ?? '',
     preview: {
-      port: 8080,
-      open: true,
+      port: userConfig.port ?? 8080,
+      open: userConfig.open,
+      host: userConfig.host
     },
     build: {
-      outDir: buildTargetPath
+      outDir: buildTargetPath,
     }
   })
   previewServer.printUrls()

package/bin/serverConfig.js

@@ -1,7 +1,5 @@
 #!/usr/bin/env node
 
-
-
 import vue from '@vitejs/plugin-vue';
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 import virtual, { updateVirtualModule } from 'vite-plugin-virtual'
@@ -9,7 +7,8 @@ import { fileURLToPath, URL } from 'url';
 import {
   runtimeConfigPath,
   appPath, compiletimeConfigPath,
-  appPublicPath, cachePath, rootPublicPath
+  cachePath, publicPath, userConfig,
+  buildTargetPath
 } from "./utils.js";
 import { readFile } from "fs/promises";
 import { defineConfig, searchForWorkspaceRoot } from "vite"
@@ -40,7 +39,7 @@ export const indexHtml = `
 let virtualPlugin = null;
 export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
   return {
-    base: '',
+    base: userConfig.base ?? '',
     cacheDir: cachePath,
     plugins: [
       vue({
@@ -70,19 +69,23 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
     server: {
-      port: 3000,
+      port: userConfig.port ?? 3000,
+      open: userConfig.open,
       fs: {
         allow: [searchForWorkspaceRoot(process.cwd())]
       },
+      host: userConfig.host
     },
     root: fileURLToPath(new URL('..', import.meta.url)),
     optimizeDeps: mode === "development" ? {
       include: ["webfontloader", "vuetify", "vue", "pinia"],
       noDiscovery: true,
     } : {},
-    publicDir: command === 'build' ? appPublicPath : rootPublicPath,
+    /** @type {string|false} */
+    publicDir: userConfig.publicDir === false ? false : publicPath,
     build: {
-      outDir: 'dist',
+      outDir: buildTargetPath,
+      emptyOutDir: true,
       rollupOptions: {
         input: fileURLToPath(new URL(command === 'build' ? '../index.html' : '../core/main.js', import.meta.url)),
       },
@@ -102,7 +105,7 @@ async function configureServer(server) {
   server.watcher.on('change', async (path) => {
     if (path == runtimeConfigPath) {
       server.hot.send('reload')
-    } else if (!path.includes('node_modules') && path.includes('.eodash')) {
+    } else if (path === compiletimeConfigPath) {
       updateVirtualModule(virtualPlugin, 'user:config',
         await getUserModules().then(modules => modules['user:config']))
     }

package/bin/utils.js

@@ -1,23 +1,43 @@
 #!/usr/bin/env node
 
 import { readFile } from 'fs/promises';
-import { existsSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { searchForWorkspaceRoot } from 'vite';
+import { Command } from 'commander';
+const cli = new Command('eodash')
 
-// global paths
+const pkg = JSON.parse(
+  readFileSync(
+    fileURLToPath(new URL('../package.json', import.meta.url))
+    , 'utf-8')
+);
+
+cli.version(pkg.version, '-v, --version', 'output the current version')
+  .option('--publicDir <path>', 'path to statically served assets folder')
+  .option('--no-publicDir', 'stop serving static assets')
+  .option('--outDir <path>', 'minified output folder')
+  .option('-e, --entryPoint <path>', 'file exporting `defineConfig`')
+  .option('-c, --cacheDir <path>', 'cache folder')
+  .option('-r, --runtime <path>', 'file exporting eodash runtime config')
+  .option('-b, --base <path>', 'base public path')
+  .option('-p, --port <port>', 'serving  port')
+  .option('-o, --open', 'open default browser when the server starts')
+  .option('--host [IP address]', 'specify which IP addresses the server should listen on')
+  .parse(process.argv)
+
+
+export const userConfig = cli.opts()
 export const appPath = fileURLToPath(new URL("..", import.meta.url)),
-  appPublicPath = path.join(appPath, './public'),
   rootPath = searchForWorkspaceRoot(process.cwd()),
-  rootPublicPath = path.join(rootPath, './public'),
+  publicPath = userConfig.publicDir ? path.resolve(rootPath, userConfig.publicDir) : path.join(rootPath, './public'),
   srcPath = path.join(rootPath, "/src"),
-  runtimeConfigPath = path.join(srcPath, "./config.runtime.js"),
-  compiletimeConfigPath = path.join(srcPath, "/config.js"),
+  runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./config.runtime.js"),
+  compiletimeConfigPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/config.js"),
   dotEodashPath = path.join(rootPath, "/.eodash"),
-  buildTargetPath = path.join(dotEodashPath, '/dist'),
-  cachePath = path.join(dotEodashPath, 'cache');
-
+  buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
+  cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
 
 
 export const getUserModules = async () => {

package/core/components/DashboardLayout.vue

@@ -18,7 +18,7 @@
     </eox-layout>
   </v-main>
 </template>
-<script setup >
+<script setup>
 import { eodashConfigKey } from '@/store/Keys';
 import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
@@ -26,7 +26,7 @@ import { useSlidePanels } from '@/composables'
 import { ref } from 'vue';
 import '@eox/layout'
 
-const eodashConfig = /** @type {EodashConfig} */ (inject(eodashConfigKey))
+const eodashConfig = /** @type {import("@/types").EodashConfig} */ (inject(eodashConfigKey))
 
 const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
 

package/core/components/DynamicWebComponent.vue

@@ -13,7 +13,7 @@ import {
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-const props =   /** @type {WebComponentProps}  */(defineProps({
+const props =   /** @type {import("@/types").WebComponentProps}  */(defineProps({
   link: {
     type: [String, Function],
     required: true
@@ -37,9 +37,9 @@ const props =   /** @type {WebComponentProps}  */(defineProps({
 const getWebComponent = async () => typeof props.link === 'string' ?
   await import( /* @vite-ignore */props.link) : await props.link()
 
-const imported = await getWebComponent().catch(e => {
+const imported = !customElements.get(props.tagName) ? await getWebComponent().catch(e => {
   console.error(e)
-})
+}) : null
 
 const defined = customElements.get(props.tagName)
 

package/core/components/Footer.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app class="d-flex justify-space-between">
+  <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
+    class="d-flex justify-space-between">
     <p class="pt-0 footer-text">
       Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum.
     </p>
@@ -19,7 +20,7 @@ import { useDisplay } from 'vuetify/lib/framework.mjs';
  * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
  */
 const footer = ref(null)
-const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
 
 const title = eodashConfig.brand?.shortName ?? eodashConfig.brand?.name
 const { mdAndDown } = useDisplay()

package/core/components/Header.vue

@@ -14,7 +14,7 @@ import { eodashConfigKey } from '@/store/Keys';
 import { inject } from 'vue';
 import { useRouter } from 'vue-router';
 
-const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
 
 const title = eodashConfig.brand?.name
 

package/core/components/MobileLayout.vue

@@ -6,7 +6,8 @@
     <v-row no-gutters class="d-flex justify-center align-end">
       <v-col v-for="(importedWidget, idx) in importedWidgets" :key="idx" :cols="cols"
         class="flex-column fill-height fill-width elevation-1 align-start ma-0 justify-center">
-        <span class="d-flex pa-2 justify-center ma-0 panel-header align-center fill-width" @click="handleSelection(idx)">
+        <span class="d-flex pa-2 justify-center ma-0 panel-header align-center fill-width"
+          @click="handleSelection(idx)">
           {{ importedWidget.value.title }}
         </span>
         <div v-show="activeIdx === idx" class="overlay align-self-end overflow-auto pa-2">
@@ -24,7 +25,7 @@ import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
 import { ref } from 'vue';
 
-const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey));
+const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
 
 //import widgets
 const widgetsConfig = eodashConfig.template.widgets
@@ -74,6 +75,4 @@ const handleSelection = (idx) => {
 .close-btn {
   justify-self: end;
 }
-
-//
 </style>

package/core/composables/DefineConfig.js

@@ -6,16 +6,16 @@ import store from '@/store'
  * Sets user defined configuration on runtime.
  * Consumes `/config.js` file from the base URL, and assign it to `eodashConfig`
  * @async
- * @returns {Promise<EodashConfig>}
+ * @returns {Promise<import("@/types").EodashConfig>}
  * @see {@linkplain '@/eodashConfig.js'}
  */
 export const useEodashRuntimeConfig = async () => {
-  const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+  const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
   /**
-   * @param {EodashConfig} updatedConfig
+   * @param {import("@/types").EodashConfig} updatedConfig
    */
   const assignConfig = (updatedConfig) => {
-    /** @type {(keyof EodashConfig)[]} */(Object.keys(eodashConfig))
+    /** @type {(keyof import("@/types").EodashConfig)[]} */(Object.keys(eodashConfig))
       .forEach((key) => {
         //@ts-expect-error
         eodashConfig[key] = updatedConfig[key]
@@ -28,7 +28,7 @@ export const useEodashRuntimeConfig = async () => {
     )
   } catch {
     try {
-      assignConfig((await import("user:config")).default)
+      assignConfig(await import("user:config").then(async m => await m['default']))
     } catch {
       console.error('no dashboard configuration assigned')
     }
@@ -37,8 +37,9 @@ export const useEodashRuntimeConfig = async () => {
 }
 
 /**
- * @param {(store:EodashStore)=>EodashConfig} configCallback
+ * @param {(store:import("@/types").EodashStore)=> import("@/types").EodashConfig
+ * | Promise<import("@/types").EodashConfig>}  configCallback
  */
-export const defineCompiletimeConfig = (configCallback) => {
-  return configCallback(store)
+export const defineCompiletimeConfig = async (configCallback) => {
+  return await configCallback(store)
 }

package/core/composables/DefineWidgets.js

@@ -27,8 +27,8 @@ const internalWidgets = import.meta.glob('^/**/*.vue')
 
 /**
  * Composable that converts widgets Configurations to defined imported widgets
- * @param { (WidgetConfig | BackgroundWidgetConfig | undefined)[] |
- * WidgetsContainerProps['widgets'] | undefined} widgetConfigs
+ * @param { (import("@/types").WidgetConfig | import("@/types").BackgroundWidgetConfig | undefined)[] |
+ * import("@/types").WidgetsContainerProps['widgets'] | undefined} widgetConfigs
  * @returns {Array<ReactiveDefinedWidget>}
  **/
 export const useDefineWidgets = (widgetConfigs) => {
@@ -52,13 +52,13 @@ export const useDefineWidgets = (widgetConfigs) => {
     if ('defineWidget' in (config ?? {})) {
       const { selectedStac } = storeToRefs(useSTAcStore())
       watch(selectedStac, (updatedStac) => {
-        const definedConfig = reactive(/** @type {FunctionalWidget} */
+        const definedConfig = reactive(/** @type {import("@/types").FunctionalWidget} */
           (config)?.defineWidget(updatedStac))
         definedWidget.value = definedWidget.value.id === definedConfig.id ?
           definedWidget.value : getWidgetDefinition(definedConfig);
       }, { immediate: true })
     } else {
-      definedWidget.value = getWidgetDefinition(/** @type {StaticWidget} */(config))
+      definedWidget.value = getWidgetDefinition(/** @type {import("@/types").StaticWidget} */(config))
     }
     definedWidgets.push(definedWidget)
   }
@@ -68,7 +68,7 @@ export const useDefineWidgets = (widgetConfigs) => {
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {StaticWidget| Omit<StaticWidget, "layout">| undefined} config
+ * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined} config
  * @returns {DefinedWidget}
  **/
 const getWidgetDefinition = (config) => {
@@ -84,10 +84,10 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {InternalComponentConfig} **/(config)?.widget.name}.vue`],
+        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.name}.vue`],
         suspensible: true
       })
-      importedWidget.props = reactive(/** @type {InternalComponentConfig} **/(config)?.widget.props ?? {})
+      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.props ?? {})
 
       break;
 

package/core/composables/index.js

@@ -40,7 +40,7 @@ export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
 /**
  * Adds slide in and out functionality to Elements
  * @param {import('vue').Ref<HTMLElement[]|null>} elements - elements to add the functionality to
- * @param {WidgetConfig[]} configs
+ * @param {import("@/types").WidgetConfig[]} configs
  */
 export const useSlidePanels = (elements, configs) => {
 

package/core/eodashConfig.js

@@ -8,7 +8,7 @@ let handleMoveEnd = null;
 /**
  * Reactive Edoash Config Object. provided globally in the app,
  * and used as an intermediate object to make user defined configurations reactive.
- * @type {EodashConfig}
+ * @type {import("./types").EodashConfig}
  */
 const eodashConfig = reactive({
   id: 'demo',

package/core/store/index.js

@@ -1,15 +1,9 @@
 //export all actions, states, and pinia stores
-/**
- * @template {keyof EodashStore} [K = keyof EodashStore]
-* @typedef {Record<K,EodashStore[K]>} EodashStoreImports
-*/
 
-const storesImport = /**@type {EodashStoreImports} */(import.meta.glob('../store/**.js', { eager: true }))
-/**
- * @type {EodashStore}
- */
-const store = (() => {
-  const stores = /** @type {EodashStore}*/({});
+const storesImport = import.meta.glob('../store/**.js', { eager: true })
+
+const store = /** @type {import("@/types").EodashStore} */((() => {
+  const stores = {}
   for (const [filePath, importedstore] of Object.entries(storesImport)) {
     const storeType = filePath.split('/').at(-1)?.slice(0, -3).toLowerCase() ?? ''
     if (!['keys'].includes(storeType)) {
@@ -18,6 +12,6 @@ const store = (() => {
     }
   }
   return stores;
-})();
+})());
 
 export default store;

package/core/store/stac.js

@@ -20,12 +20,12 @@ export const useSTAcStore = defineStore('stac', () => {
   const selectedStac = ref(null);
 
 
-  const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey));
+  const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
 
   /**
    * fetches root stac catalog and assign it to `stac`
    * @async
-   * @param {StacEndpoint} [url = eodashConfig.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url = eodashConfig.stacEndpoint]
    * @returns {Promise<void>}
    * @see {@link stac}
    */

package/core/types.d.ts

@@ -1,333 +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";
-import { defineCompiletimeConfig } from "./composables/DefineConfig";
-
-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>
   /**
-   * Web Component configuration
+   * 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 WebComponentProps<T extends ExecutionTime = "compiletime"> {
-    /** Web component definition file URL*/
-    link: T extends 'runtime' ? string : (string | (() => Promise));
-    /** 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 | 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)
-  }
+  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)
+}
 
 
-  /** @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<T extends ExecutionTime = "compiletime"> {
+  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: WebComponentProps<T>
+    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<T extends ExecutionTime = "compiletime"> {
+  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<T>, '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<T extends ExecutionTime = "compiletime"> = WebComponentConfig<T> | InternalComponentConfig | IFrameConfig
-  type WidgetConfig<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
-
-
-  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.
+  * 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<T extends ExecutionTime = "compiletime"> {
+  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<T>
+    y: number
     /**
-     * Array of widgets that will be rendered as dashboard panels.
+     *  Width. Integer (1 - 12)
      */
-    widgets: WidgetConfig<T>[]
+    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>[]
+}
 
-  type ExecutionTime = "runtime" | "compiletime";
+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<T extends ExecutionTime = "compiletime"> {
-    /**
-     * 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: {
+    font?: {
       /**
-       * 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.
+       * Link to stylesheet that defines font-face.
        */
-      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
-      }
+      link?: string;
       /**
-       *  Title that will be shown in the app header
+       * Font family. Use FVD notation to include families https://github.com/typekit/fvd
        */
-      name: string;
-      /**
-       * Alias that will be shown in the app footer if specified.
-       */
-      shortName?: string
-      /**
-       * brand logo
-       */
-      logo?: string;
-      /**
-       * Dashboard theme as a custom vuetifyJs theme.
-       */
-      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
+     */
+    logo?: string;
+    /**
+     * Dashboard theme as a custom vuetifyJs theme.
      */
-    template: TemplateConfig<T>
+    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: typeof defineCompiletimeConfig
+///////
+export declare const defineConfig: (configCallback: (store: EodashStore) => EodashConfig | Promise<EodashConfig>) => EodashConfig

package/core/vite-env.d.ts

@@ -6,30 +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: EodashConfig;
+  const config: import("@/types").EodashConfig | Promise<import("@/types").EodashConfig>;
   export default config
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.7",
+  "version": "5.0.0-alpha.1.9",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -32,17 +32,18 @@
     "@vitejs/plugin-vue": "^5.0.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
+    "commander": "^12.0.0",
     "core-js": "^3.29.0",
     "pinia": "^2.0.0",
-    "roboto-fontface": "*",
+    "sass": "^1.60.0",
+    "stac-ts": "^1.0.3",
     "vite": "^5.1.5",
     "vite-plugin-virtual": "^0.3.0",
     "vite-plugin-vuetify": "^2.0.0",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
     "vuetify": "^3.5.1",
-    "webfontloader": "^1.6.28",
-    "sass": "^1.60.0"
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",
@@ -51,7 +52,6 @@
     "@vue/eslint-config-typescript": "^11.0.0",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
-    "stac-ts": "^1.0.3",
     "typedoc": "^0.25.7",
     "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "^5.0.0",
@@ -63,4 +63,4 @@
   "bin": {
     "eodash": "./bin/app.js"
   }
-}
+}

package/widgets/WidgetsContainer.vue

@@ -16,7 +16,7 @@ import 'animated-details'
 
 const props = defineProps({
   widgets: {
-    /** @type {import('vue').PropType<Omit<WidgetConfig,'layout'>[]>} */
+    /** @type {import('vue').PropType<Omit<import("@/types").WidgetConfig,'layout'>[]>} */
     type: Array,
     required: true,
   }

package/bin/update.js

@@ -1,17 +0,0 @@
-import { cp } from "fs/promises";
-import { rootPublicPath, appPath, runtimeConfigPath, appPublicPath } from "./utils.js";
-import { existsSync } from "fs";
-import path from "path";
-
-export async function update() {
-  if (rootPublicPath !== appPublicPath) {
-    await cp(rootPublicPath, appPublicPath, { recursive: true }).catch(err => {
-      console.error(err)
-    })
-    if (existsSync(runtimeConfigPath)) {
-      await cp(runtimeConfigPath, path.join(appPath, '/public/config.js')).catch((e) => {
-        console.error(e)
-      })
-    }
-  }
-}