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

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/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

@@ -3,7 +3,7 @@
 import { build, createServer, preview } from "vite"
 import {
   rootPath, appPath, buildTargetPath,
-  appPublicPath, rootPublicPath, runtimeConfigPath
+  userConfig, runtimeConfigPath,
 } from "./utils.js";
 import { writeFile, rm, cp } from "fs/promises";
 import { indexHtml, serverConfig } from "./serverConfig.js";
@@ -18,47 +18,44 @@ export const createDevServer = async () => {
   server.bindCLIShortcuts({ print: true })
 }
 
-export const buildApp = async (baseFlag) => {
-  const htmlPath = path.join(appPath, '/index.html')
-  await writeFile(htmlPath, indexHtml).then(async () => {
-    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) => {
+export const buildApp = async () => {
+  /** @param {"production"|"lib"} mode  */
+  const viteBuild = async (mode) => {
+    const config = await serverConfig({ mode, command: 'build' });
+    await build(config)
+
+    if (existsSync(runtimeConfigPath)) {
+      await cp(runtimeConfigPath, path.join(buildTargetPath, 'config.js'),
+        { recursive: true }).catch((e) => {
           console.error(e)
         })
-      }
     }
-
-    const config = await serverConfig({ mode: 'production', command: 'build' });
-    if (baseFlag !== null) {
-      config.base = baseFlag
-    }
-    await build(config)
-
-    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 (userConfig.lib) {
+    await viteBuild("lib")
+  } else {
+    const htmlPath = path.join(appPath, '/index.html')
+    await writeFile(htmlPath, indexHtml).then(async () => {
+      await viteBuild("production")
+      await rm(htmlPath).catch(() => {
+        console.error('failed to remove index.html')
       })
-    }
-  })
+    })
+  }
 }
 
 
 export async function previewApp() {
   const previewServer = await preview({
     root: rootPath,
+    base: userConfig.base ?? '',
     preview: {
-      port: 8080,
-      open: true,
+      port: isNaN(userConfig.port) ? 8080 : userConfig.port,
+      open: userConfig.open,
+      host: userConfig.host
     },
     build: {
-      outDir: buildTargetPath
+      outDir: buildTargetPath,
     }
   })
   previewServer.printUrls()

package/bin/main.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+/**
+ * @param {import('./types').EodashConfig} config
+ */
+export const defineConfig = (config) => {
+  return config
+}
+

package/bin/serverConfig.js

@@ -1,20 +1,19 @@
 #!/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,
-  buildTargetPath
+  appPath, entryPath,
+  cachePath, publicPath, userConfig,
+  buildTargetPath,
+  logger,
+  rootPath,
+  internalWidgetsPath
 } 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";
 
@@ -30,21 +29,22 @@ export const indexHtml = `
 </head>
 
 <body>
-  <div id="app"></div>
-  <script type="module" src="${path.resolve(`/@fs/${appPath}/core/render.js`)}"></script>
+${userConfig.lib ? `<eo-dash/>
+<script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/asWebComponent.js`)}"></script>
+`: ` <div id="app"/>
+<script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/render.js`)}"></script>
+`}
 </body>
 </html>`
 
-/**
- * @type {import('vite').Plugin | null}
- */
-let virtualPlugin = null;
+//@ts-expect-error
 export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
   return {
-    base: '',
+    base: userConfig.base ?? '',
     cacheDir: cachePath,
     plugins: [
       vue({
+        customElement: userConfig.lib,
         template: {
           transformAssetUrls,
           compilerOptions: {
@@ -59,35 +59,49 @@ 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,
+        "user:widgets": internalWidgetsPath
       },
       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())]
       },
+      host: userConfig.host
     },
     root: fileURLToPath(new URL('..', import.meta.url)),
     optimizeDeps: mode === "development" ? {
-      include: ["webfontloader", "vuetify", "vue", "pinia"],
+      include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
       noDiscovery: true,
     } : {},
-    publicDir: command === 'build' ? appPublicPath : rootPublicPath,
+    /** @type {string|false} */
+    publicDir: userConfig.publicDir === false ? false : publicPath,
     build: {
+      lib: (mode === 'lib' && command === 'build') && {
+        entry: path.join(appPath, "core/asWebComponent.js"),
+        fileName: "eo-dash",
+        formats: ["es"],
+        name: "@eodash/eodash"
+      },
       outDir: buildTargetPath,
       emptyOutDir: true,
-      rollupOptions: {
-        input: fileURLToPath(new URL(command === 'build' ? '../index.html' : '../core/main.js', import.meta.url)),
-      },
+      rollupOptions: command == 'build' ? {
+        input: fileURLToPath(new URL(mode === 'lib' ? '../core/asWebComponent.js' : '../index.html', import.meta.url)),
+      } : undefined,
       target: "esnext"
     }
   }
@@ -99,26 +113,42 @@ 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, path.join(internalWidgetsPath, "**/*.vue")])
+
+  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 === compiletimeConfigPath) {
-      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/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Extending [Vite's](https://vitejs.dev/) config to configure eodash's server, build and setup.
+ * @group CLI
+ */
+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
+  widgets?: string
+  /** builds eodash as a web component library */
+  lib?: boolean
+}
+/**
+ *  helper function that provides intellisense
+ *  without the need for JSDOC for `eodash.config.js`:
+ * @group CLI
+ */
+export declare const definConfig: (config: EodashConfig) => EodashConfig

package/bin/utils.js

@@ -1,33 +1,103 @@
 #!/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 { searchForWorkspaceRoot, createLogger } 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} widgets
+ * @property {string} cacheDir
+ * @property {string} runtime
+ * @property {string} base
+ * @property {string | number} port
+ * @property {boolean} open
+ * @property {boolean | string} host
+ * @property {string} config
+ * @property {boolean} lib
+ */
+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 `createEodash`')
+  .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
+  .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('-l, --lib', 'builds eodash as a web component library')
+  .option('--no-lib', 'builds eodash as an SPA')
+  .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"),
+  internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
   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 logger = createLogger()
 
+/**
+ * @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("./types").EodashConfig} */
+  let config = {};
+  if (existsSync(eodashCLiConfigFile)) {
+    config = await import(eodashCLiConfigFile).then(config => {
+      if (config.default instanceof Function) {
+        return config.default()
+      } else {
+        return config.default
+      }
+    }).catch(err => {
+      console.error(err);
+    })
+  } else {
+    eodashCLiConfigFile = null
+  }
 
-export const getUserModules = async () => {
-  /** @type {Record<string,string>} */
-  let userModules = {}
-  const indexJs = await readFile(compiletimeConfigPath, 'utf-8').catch(() => {
-    if (!existsSync(runtimeConfigPath)) {
-      console.error(new Error("no eodash configuration found"))
-    }
-  })
-  userModules['user:config'] = typeof indexJs === 'string' ? indexJs : ''
-  return userModules
+  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,
+    widgets: options.widgets ?? config?.widgets,
+    lib: options.lib ?? config?.lib
+  }
 }

package/core/App.vue

@@ -1,21 +1,19 @@
 <template>
   <v-app>
-    <RouterView v-slot="{ Component }">
-      <template v-if="Component">
-        <Suspense>
-          <!-- main content -->
-          <component :is="Component"></component>
+    <Suspense>
+      <!-- main content -->
+      <Dashboard />
 
-          <!-- loading state -->
-          <template #fallback>
-            Loading...
-          </template>
-        </Suspense>
+      <!-- loading state -->
+      <template #fallback>
+        <Loading />
       </template>
-    </RouterView>
+    </Suspense>
   </v-app>
 </template>
 
 <script setup>
-//
+import Loading from '@/components/Loading.vue';
+import Dashboard from '@/views/Dashboard.vue';
+
 </script>

package/core/SuspensedDashboard.ce.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-app>
+    <Suspense>
+      <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
+      <template #fallback>
+        <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
+          <Loading />
+        </div>
+      </template>
+    </Suspense>
+  </v-app>
+</template>
+<script setup>
+import Dashboard from '@/views/Dashboard.vue';
+import { createApp, getCurrentInstance } from "vue"
+import { registerPlugins } from '@/plugins';
+import { eodashKey } from '@/utils/keys';
+import Loading from '@/components/Loading.vue';
+
+defineProps({
+  config: {
+    type: String,
+  }
+})
+const app = createApp({})
+registerPlugins(app)
+
+const inst = getCurrentInstance()
+//@ts-expect-error
+Object.assign(inst.appContext, app._context)
+//@ts-expect-error
+Object.assign(inst.provides, app._context.provides)
+
+function setStylesFromHead() {
+  const eodashComponent = document.querySelector('eo-dash')
+  const styleSheet = new CSSStyleSheet()
+  const head = document.querySelector('head')
+  let stylesStr = ''
+
+  Array.from(head?.children ?? []).forEach((child) => {
+    if (child.getAttribute('type') === 'text/css') {
+      stylesStr += `\n ${child.innerHTML}`
+      return
+    }
+
+    if (child.tagName == 'LINK' && child.getAttribute('rel') === 'stylesheet') {
+      eodashComponent?.shadowRoot?.appendChild(child.cloneNode(true))
+    }
+  });
+
+  stylesStr += `\n * {
+    font-family:${
+      //@ts-expect-error
+      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
+  }`
+  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
+  eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
+}
+</script>

package/core/asWebComponent.d.ts

@@ -0,0 +1,18 @@
+/** @group WebComponent */
+type EodashConstructor = import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{ config: string }>>
+/**
+ *  Eodash Web Component constructor
+ * @group WebComponent
+ */
+export declare const Eodash: EodashConstructor
+/**
+ * Registers `eo-dash` as Custom Element in the window
+ * @group WebComponent
+ */
+export declare function register(): void
+
+/**
+ * Eodash store @see EodashStore
+ * @group WebComponent
+ */
+export declare const store: import("./types").EodashStore

package/core/asWebComponent.js

@@ -0,0 +1,12 @@
+import SuspensedDashboard from './SuspensedDashboard.ce.vue';
+import { defineCustomElement } from 'vue'
+/** @type {import("./asWebComponent").EodashConstructor} */
+export const Eodash = defineCustomElement(SuspensedDashboard)
+
+export function register() {
+  customElements.define('eo-dash', Eodash)
+}
+
+export { default as store } from '@/store'
+
+register()