@eodash/eodash 5.0.0-alpha.1.1 → 5.0.0-alpha.1.11

package/README.md

@@ -20,7 +20,7 @@ npm run preview
     .
     ├── core               # Main source code that hosts the microfrontends and renders the dashboard
     ├── docs               # Documentation files
-    ├── widgets            # Internal Vue widgets that can be imported in the configuration
+    ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 

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()
@@ -20,37 +21,34 @@ export const createDevServer = async () => {
 export const buildApp = async () => {
   const htmlPath = path.join(appPath, '/index.html')
   await writeFile(htmlPath, indexHtml).then(async () => {
-    await update()
-    await build(await serverConfig({ mode: 'production', command: 'build' }))
+    const config = await serverConfig({ mode: 'production', command: 'build' });
+    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,15 +1,14 @@
 #!/usr/bin/env node
 
-
-
 import vue from '@vitejs/plugin-vue';
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 import virtual, { updateVirtualModule } from 'vite-plugin-virtual'
 import { fileURLToPath, URL } from 'url';
 import {
   runtimeConfigPath,
-  appPath, compiletimeConfigPath,
-  appPublicPath, cachePath, rootPublicPath
+  appPath, entryPath,
+  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,20 +69,26 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
     server: {
-      port: 3000,
+      warmup: {
+        clientFiles: [path.join(appPath, "core/**")]
+      },
+      port: userConfig.port ?? 3000,
+      open: userConfig.open,
       fs: {
         allow: [searchForWorkspaceRoot(process.cwd())]
       },
-      open: '/'
+      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)),
       },
@@ -98,12 +103,12 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
  * @type {import("vite").ServerHook}
  */
 async function configureServer(server) {
-  server.watcher.add([compiletimeConfigPath, runtimeConfigPath])
+  server.watcher.add([entryPath, runtimeConfigPath])
 
   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 === entryPath) {
       updateVirtualModule(virtualPlugin, 'user:config',
         await getUserModules().then(modules => modules['user:config']))
     }

package/bin/utils.js

@@ -1,29 +1,96 @@
 #!/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';
+
+export const rootPath = searchForWorkspaceRoot(process.cwd());
+const cli = new Command('eodash')
+
+const pkg = JSON.parse(
+  readFileSync(
+    path.join(rootPath, 'package.json')
+    , 'utf-8')
+);
+
+/**
+ * CLI flags object
+ * @typedef {Object} Options
+ * @property {string | false} publicDir
+ * @property {string} outDir
+ * @property {string} entryPoint
+ * @property {string} cacheDir
+ * @property {string} runtime
+ * @property {string} base
+ * @property {string | number} port
+ * @property {boolean} open
+ * @property {boolean | string} host
+ * @property {string} config
+ */
+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('--cacheDir <path>', 'cache folder')
+  .option('-r, --runtime <path>', 'file exporting eodash client 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('-c, --config <path>', 'path to eodash server and build configuration file')
+  .option('--host [IP address]', 'specify which IP addresses the server should listen on')
+  .option('--no-host', 'do not expose server to the network')
+  .parse(process.argv)
+
+
+export const userConfig = await getUserConfig(cli.opts(), process.argv?.[2])
 
-// global paths
 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, "./runtime.js"),
+  entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.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');
+
 
+/**
+ * @param {Options} options
+ * @param {string | undefined} command
+ */
+async function getUserConfig(options, command) {
+  let eodashCLiConfigFile = options.config ? path.resolve(rootPath, options.config) : path.join(rootPath, 'eodash.config.js');
+  /** @type {import("../core/types").EodashConfig} */
+  let config = {};
+  if (existsSync(eodashCLiConfigFile)) {
+    config = await import(eodashCLiConfigFile).then(config => config.default).catch(err => {
+      console.error(err);
+    })
+  } else {
+    eodashCLiConfigFile = null
+  }
 
+  return {
+    base: options.base ?? config?.base,
+    port: Number(options.port ?? config?.[command]?.port),
+    host: options.host ?? config?.[/**@type {"dev"|"preview"} */(command)]?.host,
+    open: options.open ?? config?.[/**@type {"dev"|"preview"} */(command)]?.open,
+    cacheDir: options.cacheDir ?? config?.cacheDir,
+    entryPoint: options.entryPoint ?? config?.entryPoint,
+    outDir: options.outDir ?? config?.outDir,
+    publicDir: options.publicDir ?? config?.publicDir,
+    runtime: options.runtime ?? config?.runtime
+  }
+}
 
 export const getUserModules = async () => {
   /** @type {Record<string,string>} */
   let userModules = {}
-  const indexJs = await readFile(compiletimeConfigPath, 'utf-8').catch(() => {
+  const indexJs = await readFile(entryPath, 'utf-8').catch(() => {
     if (!existsSync(runtimeConfigPath)) {
       console.error(new Error("no eodash configuration found"))
     }

package/core/components/DashboardLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <v-main>
-    <eox-layout :gap="eodashConfig.template.gap ?? 2">
+    <eox-layout :gap="eodash.template.gap ?? 2">
       <eox-layout-item class="bg-widget" x="0" y="0" h="12" w="12">
         <component :is="bgWidget.component" v-bind="bgWidget.props" />
       </eox-layout-item>
@@ -18,19 +18,19 @@
     </eox-layout>
   </v-main>
 </template>
-<script setup >
-import { eodashConfigKey } from '@/store/Keys';
+<script setup>
+import { eodashKey } from '@/store/Keys';
 import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
 import { useSlidePanels } from '@/composables'
 import { ref } from 'vue';
 import '@eox/layout'
 
-const eodashConfig = /** @type {EodashConfig} */ (inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
 
-const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
-const widgetsConfig = eodashConfig.template?.widgets
+const widgetsConfig = eodash.template?.widgets
 
 const importedWidgets = useDefineWidgets(widgetsConfig)
 /**

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>
@@ -9,7 +10,7 @@
   </v-footer>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/store/Keys';
 import { ref } from 'vue';
 import { inject } from 'vue';
 import { useDisplay } from 'vuetify/lib/framework.mjs';
@@ -19,9 +20,9 @@ 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 eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.shortName ?? eodashConfig.brand?.name
+const title = eodash.brand?.shortName ?? eodash.brand?.name
 const { mdAndDown } = useDisplay()
 </script>
 <style scoped lang='scss'>

package/core/components/Header.vue

@@ -1,22 +1,22 @@
 <template>
   <v-app-bar color="primary">
     <v-app-bar-title class="cursor-pointer">{{ title }}</v-app-bar-title>
-    <v-toolbar-items v-if="eodashConfig.routes">
-      <v-btn v-for="route in eodashConfig.routes" :key="route.to" variant="text" @click="navigateTo(route.to)">
+    <v-toolbar-items v-if="eodash.routes">
+      <v-btn v-for="route in eodash.routes" :key="route.to" variant="text" @click="navigateTo(route.to)">
         {{ route.title }}
       </v-btn>
     </v-toolbar-items>
-    <v-img class="mx-12 logo" :src="eodashConfig.brand?.logo" />
+    <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/store/Keys';
 import { inject } from 'vue';
 import { useRouter } from 'vue-router';
 
-const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.name
+const title = eodash.brand?.name
 
 const { push } = useRouter()
 

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">
@@ -19,17 +20,17 @@
   </v-main>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/store/Keys';
 import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
 import { ref } from 'vue';
 
-const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey));
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
 //import widgets
-const widgetsConfig = eodashConfig.template.widgets
+const widgetsConfig = eodash.template.widgets
 const importedWidgets = useDefineWidgets(widgetsConfig)
-const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
 
 
@@ -74,6 +75,4 @@ const handleSelection = (idx) => {
 .close-btn {
   justify-self: end;
 }
-
-//
 </style>

package/core/composables/DefineEodash.js

@@ -0,0 +1,45 @@
+import { eodashKey } from "@/store/Keys"
+import { inject } from "vue"
+import store from '@/store'
+
+/**
+ * Sets user defined instance on runtime.
+ * Consumes `/@fs/config.js` and assign it to `eodash`
+ * @async
+ * @returns {Promise<import("@/types").Eodash>}
+ * @see {@linkplain '@/eodash.js'}
+ */
+export const useEodashRuntime = async () => {
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+  /**
+   * @param {import("@/types").Eodash} config
+   */
+  const assignInstance = (config) => {
+    /** @type {(keyof import("@/types").Eodash)[]} */(Object.keys(eodash))
+      .forEach((key) => {
+        //@ts-expect-error
+        eodash[key] = config[key]
+      })
+  }
+
+  try {
+    assignInstance(
+      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
+    )
+  } catch {
+    try {
+      assignInstance(await import("user:config").then(async m => await m['default']))
+    } catch {
+      console.error('no dashboard configuration defined')
+    }
+  }
+  return eodash
+}
+
+/**
+ * @param {(store:import("@/types").EodashStore)=> import("@/types").Eodash
+ * | Promise<import("@/types").Eodash>}  configCallback
+ */
+export const createEodash = 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").Widget | import("@/types").BackgroundWidget | 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").InternalComponentWidget} **/(config)?.widget.name}.vue`],
         suspensible: true
       })
-      importedWidget.props = reactive(/** @type {InternalComponentConfig} **/(config)?.widget.props ?? {})
+      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.props ?? {})
 
       break;
 

package/core/composables/index.js

@@ -3,7 +3,7 @@
 
 import { reactive } from "vue"
 import { currentUrl } from "@/store/States"
-import eodashConfig from "@/eodashConfig"
+import eodashConfig from "@/eodash"
 import { useTheme } from "vuetify/lib/framework.mjs"
 
 
@@ -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").Widget[]} configs
  */
 export const useSlidePanels = (elements, configs) => {
 

package/core/{eodashConfig.js → eodash.js}

@@ -6,11 +6,11 @@ import { currentUrl, mapInstance } from './store/States';
 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}
+ * Reactive Edoash Instance Object. provided globally in the app,
+ * and used as an intermediate object to make user defined instances config reactive.
+ * @type {import("./types").Eodash}
  */
-const eodashConfig = reactive({
+const eodash = reactive({
   id: 'demo',
   stacEndpoint: 'https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json',
   routes: [],
@@ -133,4 +133,4 @@ const eodashConfig = reactive({
 });
 
 
-export default eodashConfig;
+export default eodash;

package/core/main.js

@@ -1,4 +1,4 @@
 // Plugins
-import { defineCompiletimeConfig } from '@/composables/DefineConfig';
+export { createEodash } from '@/composables/DefineEodash';
+
 
-export { defineCompiletimeConfig as defineConfig }

package/core/plugins/index.js

@@ -8,8 +8,8 @@
 import vuetify from './vuetify';
 import router from './router';
 import { createPinia } from 'pinia';
-import eodashConfig from '@/eodashConfig';
-import { eodashConfigKey } from '@/store/Keys';
+import eodash from '@/eodash';
+import { eodashKey } from '@/store/Keys';
 import store from '../store';
 
 export const pinia = createPinia();
@@ -23,5 +23,5 @@ export function registerPlugins(app) {
   app.use(vuetify)
     .use(router)
     .use(pinia)
-    .provide(eodashConfigKey, eodashConfig);
+    .provide(eodashKey, eodash);
 }

package/core/plugins/router.js

@@ -13,7 +13,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 });
 

package/core/store/Keys.js

@@ -1,6 +1,6 @@
 /**
- *  `eodashConfig` injection key.
+ *  `eodash` injection key.
  * @type {Symbol}
  * @see {@link "@/plugins/index.js"}
  */
-export const eodashConfigKey = Symbol("eodashConfig");
+export const eodashKey = Symbol("eodash");

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

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/store/Keys';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -20,16 +20,16 @@ export const useSTAcStore = defineStore('stac', () => {
   const selectedStac = ref(null);
 
 
-  const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey));
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
   /**
    * fetches root stac catalog and assign it to `stac`
    * @async
-   * @param {StacEndpoint} [url = eodashConfig.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url = eodash.stacEndpoint]
    * @returns {Promise<void>}
    * @see {@link stac}
    */
-  async function loadSTAC(url = eodashConfig.stacEndpoint) {
+  async function loadSTAC(url = eodash.stacEndpoint) {
     await axios.get(url).then(resp => {
       const links = /** @type {import('stac-ts').StacCatalog} */(resp.data).links.map(link => {
         if (!link.title) {