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

package/bin/serverConfig.js

@@ -2,17 +2,17 @@
 
 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, entryPath,
   cachePath, publicPath, userConfig,
-  buildTargetPath
+  buildTargetPath,
+  logger,
+  rootPath
 } from "./utils.js";
 import { readFile } from "fs/promises";
 import { defineConfig, searchForWorkspaceRoot } from "vite"
-import { getUserModules } from './utils.js';
 import { existsSync } from 'fs';
 import path from "path";
 
@@ -33,10 +33,6 @@ export const indexHtml = `
 </body>
 </html>`
 
-/**
- * @type {import('vite').Plugin | null}
- */
-let virtualPlugin = null;
 export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
   return {
     base: userConfig.base ?? '',
@@ -57,14 +53,15 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       (mode === "development" && {
         name: "inject-html",
         configureServer
-      }),
-      virtualPlugin = virtual(await getUserModules())
+      })
     ],
+    customLogger: logger,
     define: { 'process.env': {} },
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('../core', import.meta.url)),
         '^': fileURLToPath(new URL('../widgets', import.meta.url)),
+        "user:config": entryPath
       },
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
@@ -105,24 +102,40 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
 async function configureServer(server) {
   server.watcher.add([entryPath, runtimeConfigPath])
 
+  let updatedPath = ''
+  const loggerInfo = logger.info
+  logger.info = (msg, options) => {
+    if (msg.includes('core')) {
+      const removedPath = msg.split('/')[0].split(" ")
+      removedPath.pop()
+      const updatedMsg = removedPath.join(" ") + " " + updatedPath.replace(rootPath, "")
+
+      return loggerInfo(updatedMsg, options)
+    }
+    return loggerInfo(msg, options)
+  }
+
   server.watcher.on('change', async (path) => {
-    if (path == runtimeConfigPath) {
-      server.hot.send('reload')
-    } else if (path === entryPath) {
-      updateVirtualModule(virtualPlugin, 'user:config',
-        await getUserModules().then(modules => modules['user:config']))
+    updatedPath = path
+    if (path === runtimeConfigPath) {
+      server.hot.send({
+        type: 'full-reload',
+        path: path
+      })
     }
   })
 
   return () => {
     server.middlewares.use(async (req, res, next) => {
-      if (req.originalUrl === '/@fs/config.js' && existsSync(runtimeConfigPath)) {
-        await readFile(runtimeConfigPath).then(runtimeConfig => {
-          res.statusCode = 200
-          res.setHeader('Content-Type', 'text/javascript')
-          res.write(runtimeConfig)
-          res.end()
-        })
+      if (req.originalUrl === '/@fs/config.js') {
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'text/javascript')
+        if (existsSync(runtimeConfigPath)) {
+          await readFile(runtimeConfigPath).then(runtimeConfig => {
+            res.write(runtimeConfig)
+          })
+        }
+        res.end()
         return
       }
 

package/bin/utils.js

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 
-import { readFile } from 'fs/promises';
 import { existsSync, readFileSync } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { searchForWorkspaceRoot } from 'vite';
+import { searchForWorkspaceRoot, createLogger } from 'vite';
 import { Command } from 'commander';
 
 export const rootPath = searchForWorkspaceRoot(process.cwd());
@@ -58,6 +57,8 @@ export const appPath = fileURLToPath(new URL("..", import.meta.url)),
   cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
 
 
+export const logger = createLogger()
+
 /**
  * @param {Options} options
  * @param {string | undefined} command
@@ -86,15 +87,3 @@ async function getUserConfig(options, command) {
     runtime: options.runtime ?? config?.runtime
   }
 }
-
-export const getUserModules = async () => {
-  /** @type {Record<string,string>} */
-  let userModules = {}
-  const indexJs = await readFile(entryPath, 'utf-8').catch(() => {
-    if (!existsSync(runtimeConfigPath)) {
-      console.error(new Error("no eodash configuration found"))
-    }
-  })
-  userModules['user:config'] = typeof indexJs === 'string' ? indexJs : ''
-  return userModules
-}

package/core/eodash.js

@@ -25,7 +25,8 @@ const eodash = reactive({
         secondary: '#00417044',
         surface: "#f0f0f0f0",
       }
-    }
+    },
+    meta: {}
   },
   template: {
     background: {

package/core/plugins/index.js

@@ -11,8 +11,10 @@ import { createPinia } from 'pinia';
 import eodash from '@/eodash';
 import { eodashKey } from '@/store/Keys';
 import store from '../store';
+import { createHead } from '@unhead/vue'
 
 export const pinia = createPinia();
+const head = createHead()
 
 /**
  * @param {import('vue').App} app
@@ -21,6 +23,7 @@ export function registerPlugins(app) {
   window.eodashStore = store;
 
   app.use(vuetify)
+    .use(head)
     .use(router)
     .use(pinia)
     .provide(eodashKey, eodash);

package/core/types.d.ts

@@ -4,26 +4,41 @@ import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
 import type { Ref } from "vue"
 import type { ThemeDefinition } from "vuetify/lib/index.mjs";
 import type { Map } from "openlayers";
+
 /**
- * Web Component configuration
+ * @group Eodash
  */
 export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
-  /** Web component definition file URL*/
+  /**
+   * Imports web component file, either using a URL or an import funtion.
+   * @example
+   * importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
+   * referenced:
+   * ```js
+   * link: async() => import("@eox/itemfilter")
+   * ```
+   *
+   * ::: warning
+   * import maps are not available in runtime config
+   * :::
+   **/
   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 */
+  /**
+   *  Exported Constructor, needs to be provided if the web component is not registered in by the
+   * [link](#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.
+   * 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.
+   * 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`
    */
@@ -38,85 +53,70 @@ export interface WidgetsContainerProps {
 
 // eodash 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`
+ * Widget type: `web-component` API
+ * @group Eodash
  */
 export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
-  /**
- * Unique Identifier, triggers rerender when using `defineWidget`
- **/
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
    * Widget position and size.
    */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
   widget: WebComponentProps<T>
-  /**
-   * Widget type
-   */
   type: 'web-component'
 }
 
 /**
- * Widget type: `internal` specification.
- * Internal widgets are Vue components inside the `/widgets` directory.
+ * Widget type: `internal` API.
+ * Internal widgets are Vue components provided by eodash.
+ * @group Eodash
  */
 export interface InternalComponentWidget {
-  /**
-  * Unique Identifier, triggers rerender when using `defineWidget`
-  **/
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
   widget: {
     /**
-     * Internal Vue Component file name without the extention .vue
+     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder can be referenced
+     * using their name without the extention .vue
      */
     name: string;
     /**
@@ -124,43 +124,37 @@ export interface InternalComponentWidget {
      */
     props?: Record<string, unknown>
   }
-  /**
-  * Widget type.
-  */
   type: 'internal'
 }
 
 /**
- * Widget type: `iframe` specification.
+ * Widget type: `iframe` API
  * Renders an external HTML file as a widget.
  */
+/**
+ * @group Eodash
+ */
 export interface IFrameWidget {
-  /**
-   * Unique Identifier, triggers rerender when using `defineWidget`
-   **/
   id: number | string | symbol
-  /**
-  * Widget title
-  */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
@@ -170,11 +164,11 @@ export interface IFrameWidget {
      */
     src: string
   }
-  /**
-  * Widget type
-  */
   type: 'iframe'
 }
+/**
+ * @group Eodash
+ */
 export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   /**
    * Provides a functional definition of the widget,
@@ -184,32 +178,42 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
 }
+/**
+ * @group Eodash
+ */
 export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentWidget<T> | InternalComponentWidget | IFrameWidget
+/**
+ * @group Eodash
+ */
 export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
 
 
+/**
+ * @group Eodash
+ */
 export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title'> | Omit<InternalComponentWidget, 'layout' | 'title'> | Omit<IFrameWidget, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
 /**
  * Dashboard rendered widgets  specification.
  * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
  * A specific object should be provided based on the type of the widget.
+ * @group Eodash
  */
 export interface Template<T extends ExecutionTime = "compiletime"> {
   /**
@@ -226,15 +230,21 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
    */
   widgets: Widget<T>[]
 }
-
+/** @ignore */
 export type ExternalURL = `${'https://' | 'http://'}${string}`;
+/** @ignore */
 export type InternalRoute = `/${string}`
+/** @ignore */
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
+/**
+ * @group Eodash
+ */
 export type ExecutionTime = "runtime" | "compiletime";
 
 /**
- * Eodash instance specification.
+ * Eodash instance API
+ * @group Eodash
  */
 export interface Eodash<T extends ExecutionTime = "compiletime"> {
   /**
@@ -249,13 +259,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
   * 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
   }>
   /**
@@ -263,7 +267,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
    */
   brand: {
     /**
-     * Automatically fetches the specified font family from google fonts. if the `link` property is specified
+     * Automatically fetches the specified font family from google fonts. if the [link](#font-link) property is specified
      * the font family will be fetched from the provided source instead.
      */
     font?: {
@@ -272,7 +276,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
        */
       link?: string;
       /**
-       * Font family. Use FVD notation to include families https://github.com/typekit/fvd
+       * Font family. Use FVD notation to include families. see https://github.com/typekit/fvd
        */
       family: string
     }
@@ -292,6 +296,8 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
      * Dashboard theme as a custom vuetifyJs theme.
      */
     theme?: ThemeDefinition
+
+    meta?: import("@unhead/vue").UseSeoMetaInput
   }
   /**
    * Template configuration
@@ -301,6 +307,9 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
 /////////
 
 /// eodash store types
+/**
+ * @group EodashStore
+ */
 export interface EodashStore {
   /**
    * Stateful Reactive variables
@@ -315,7 +324,6 @@ export interface EodashStore {
     */
     mapInstance: Ref<Map | null>
   }
-  // consider removing the actions ?
   actions: {
     loadFont: (family?: string, link?: string) => Promise<string>;
   };
@@ -327,23 +335,52 @@ export interface EodashStore {
   }
 }
 ///////
+/**
+ * Eodash server, build and setup configuration
+ * @group EodashConfig
+ */
 export interface EodashConfig {
   dev?: {
+    /** serving  port */
     port?: string | number
     host?: string | boolean
+    /** open default browser when the server starts */
     open?: boolean
   }
   preview?: {
+    /** serving  port */
     port?: string | number
     host?: string | boolean
+    /** open default browser when the server starts */
     open?: boolean
   }
+  /**
+   * base public path
+   */
   base?: string;
+  /**
+   * build target folder path
+   */
   outDir?: string;
+  /** path to statically served assets folder, can be set to `false`
+   *  to disable serving assets statically
+   **/
   publicDir?: string | false;
+  /**
+   * cache folder
+   */
   cacheDir?: string
+  /** specifies main entry file, exporting `createEodash`*/
   entryPoint?: string
+  /**
+   * file exporting eodash client runtime config
+   */
   runtime?: string
 }
-
+/**
+ * project entry point should export this function as a default
+ * to instantiate eodash
+ *
+ * @param  configCallback
+ */
 export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Eodash

package/core/views/Dashboard.vue

@@ -11,15 +11,15 @@ import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
 import { loadFont } from '@/store/Actions'
-import { onUnmounted } from "vue";
+import { useSeoMeta } from "@unhead/vue"
 
 
-const eodashConfig = await useEodashRuntime()
+const eodash = await useEodashRuntime()
 
-const theme = useUpdateTheme('dashboardTheme', eodashConfig.brand?.theme)
+const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
 
-const fontFamily = await loadFont(eodashConfig.brand?.font?.family, eodashConfig.brand?.font?.link)
+const fontFamily = await loadFont(eodash.brand?.font?.family, eodash.brand?.font?.link)
 
 const { loadSTAC } = useSTAcStore()
 await loadSTAC()
@@ -32,14 +32,7 @@ const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.v
 const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
 const { mainRect } = useLayout()
 
-onUnmounted(() => {
-  theme.global.name.value = 'light'
-})
-
-import.meta.hot?.on('reload', () => {
-  window.location.reload()
-})
-
+useSeoMeta(eodash.brand.meta ?? {})
 </script>
 
 <style scoped lang="scss">
@@ -47,4 +40,3 @@ import.meta.hot?.on('reload', () => {
   font-family: v-bind('fontFamily');
 }
 </style>
-@/composables/DefineEodash

package/core/vite-env.d.ts

@@ -15,3 +15,15 @@ declare module 'user:config' {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
   export default eodash
 }
+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
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.11",
+  "version": "5.0.0-alpha.1.13",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -16,19 +16,23 @@
   },
   "browser": "./core/main.js",
   "scripts": {
-    "dev": "npx eodash dev",
-    "build": "npx eodash build",
+    "dev": "npx eodash dev --entryPoint core/eodash.js",
+    "build": "npx eodash build --entryPoint core/eodash.js",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
     "check:lint": "eslint .",
     "check:types": "vue-tsc --noEmit --skipLibCheck",
     "preview": "vite preview",
     "lint": "eslint . --fix",
-    "docs:generate": "typedoc --plugin typedoc-plugin-markdown core/store/Types.ts --tsconfig tsconfig.json --out docs --readme none"
+    "docs:generate": "typedoc --options typedoc.config.json",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "npm run docs:generate && vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@eox/layout": "^0.1.0",
     "@eox/stacinfo": "^0.3.0",
     "@mdi/font": "7.0.96",
+    "@unhead/vue": "^1.8.20",
     "@vitejs/plugin-vue": "^5.0.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
@@ -38,7 +42,6 @@
     "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",
@@ -53,10 +56,12 @@
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "typedoc": "^0.25.7",
-    "typedoc-plugin-markdown": "^3.17.1",
+    "typedoc-plugin-markdown": "^4.0.0-next.54",
+    "typedoc-plugin-vue": "^1.1.0",
+    "typedoc-vitepress-theme": "^1.0.0-next.0",
     "typescript": "^5.0.0",
     "unplugin-fonts": "^1.0.3",
-    "vite-plugin-dts": "^3.7.3",
+    "vitepress": "^1.0.0",
     "vue-eslint-parser": "^9.3.2",
     "vue-tsc": "^1.2.0"
   },