@eodash/eodash 5.0.0-alpha → 5.0.0-alpha.1

package/bin/app.js

@@ -1,153 +1,22 @@
 #!/usr/bin/env node
 
-import { fileURLToPath } from 'url';
-import { preview } from 'vite'
-import express from "express";
-import * as chokidar from "chokidar"
-import { copyFile, cp, readFile, writeFile } from "fs/promises";
-import { WebSocketServer } from 'ws';
-
-
-// global paths
-const __appPath = fileURLToPath(new URL("../", import.meta.url));
-const __execPath = fileURLToPath(new URL(process.cwd(), import.meta.url));
-const __configPath = __execPath + "/config.js";
-
+import { buildApp, createDevServer, previewApp } from './cli.js'
 
+const command = process.argv?.[2];
 (async () => {
-  if (process.argv.includes('dev')) {
-    await dev();
-  } else if (process.argv.includes('build')) {
-    await buildApp();
-  } else if (process.argv.includes('preview')) {
-    await previewApp();
+  switch (command) {
+    case "dev":
+      await createDevServer();
+      break;
+    case "build":
+      await buildApp();
+      break;
+    case "preview":
+      await previewApp();
+      break;
+
+    default:
+      console.error('command not found')
+      break;
   }
 })();
-
-async function update() {
-  // 1. copy public
-  const publicPath = __execPath + "/public"
-  const distPath = __appPath + "dist"
-  await cp(publicPath, distPath, { recursive: true }).catch(err => {
-    console.error(err)
-  })
-  // 2. copy config
-  const appConfigPath = __appPath + "dist/config.js";
-  await copyFile(__configPath, appConfigPath).catch(err => {
-    console.error(err)
-  });
-}
-
-const wsClientScript = `<script type="module">
-const client = new WebSocket("ws://localhost:3333/");
-client.onerror = function (e) {
-  console.error('WebSocket Client Error', e);
-};
-client.onopen = function () {
-  console.info('client connected');
-};
-client.onclose = function () {
-  console.info('client closed');
-};
-client.onmessage = function (evt) {
-  if (evt.data === 'reload') {
-    window.location.reload()
-  }
-};
-</script>`
-
-async function dev() {
-  // copy files to app
-  await update();
-  // inject ws client for dev
-  await injectInHTML(wsClientScript)
-  // create static server
-  const server = express();
-  server.use(express.static(__appPath + "dist"));
-
-  server.listen(3000, () => {
-    console.info(`server is running on http://localhost:3000`);
-  })
-
-  server.all("*", (req, res) => {
-    // handle query
-    const params = new URLSearchParams(req.query).toString()
-    // redirect to the app
-    res.redirect(`${params.length ? '/?' + params : '/'}`)
-  })
-
-  // create files watcher
-  const watcher = chokidar.watch(__execPath + '/**/**.js', {
-    ignored: ["**/node_modules/**", __execPath + "/app/**", __appPath + '**/**.**'],
-    depth: 2
-  });
-
-  // create ws server for reloading
-  const wsServer = new WebSocketServer({ port: 3333 });
-
-  let websocket = null
-  wsServer.on('connection', (ws) => {
-    websocket = ws
-  });
-
-  // reload on change
-  watcher.on('change', async (path) => {
-    if (path === __configPath) {
-      await update()
-      websocket.send('reload')
-      console.info(`updated config.js ✨`)
-    }
-  })
-}
-
-
-
-async function buildApp() {
-  await update()
-  // remove injected script before copying to exec path
-  await injectInHTML(wsClientScript, true)
-  await cp(__appPath + 'dist', __execPath + '/app', { recursive: true }).catch(err => {
-    console.error(err)
-  })
-  console.info(`built successfully`)
-}
-
-async function previewApp() {
-  const previewServer = await preview({
-    root: __execPath,
-    preview: {
-      port: 8080,
-      open: true,
-    },
-    build: {
-      outDir: 'app'
-    }
-  })
-  previewServer.printUrls()
-}
-
-
-async function injectInHTML(injected, remove) {
-  const htmlPath = __appPath + 'dist/index.html'
-  const updatedHtml = await readFile(htmlPath, 'utf8').then(data => {
-    let html = ''
-    if (remove) {
-      html = data.replace(injected, '')
-    } else {
-      if (!data.includes(injected)) {
-        const splitHtml = data.split("\n")
-        splitHtml.splice(splitHtml.indexOf("</body>"), 0, injected);
-        html = splitHtml.join("\n")
-      }
-    }
-    return html
-  }).catch(err => {
-    throw err
-  })
-
-  if (updatedHtml.length) {
-    await writeFile(htmlPath, updatedHtml).catch(err => {
-      throw err;
-    });
-  }
-}

package/bin/cli.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+import { build, createServer, preview } from "vite"
+import { execPath, appPath, buildTargetPath } 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()
+  server.printUrls()
+  server.bindCLIShortcuts({ print: true })
+}
+
+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' }))
+    await rm(htmlPath).catch(() => {
+      console.error('failed to remove index.html')
+    })
+    const appPublicPath = path.join(appPath, './public')
+    if (appPath.includes('node_modules') && existsSync(appPublicPath)) {
+      await rm(appPublicPath, { recursive: true }).catch((e) => {
+        console.error(e)
+      })
+    }
+  })
+
+  if (appPath.includes('node_modules')) {
+    await cp(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: execPath,
+    preview: {
+      port: 8080,
+      open: true,
+    },
+    build: {
+      outDir: buildTargetPath
+    }
+  })
+  previewServer.printUrls()
+}

package/bin/serverConfig.js

@@ -0,0 +1,130 @@
+#!/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 { execPath, runtimeConfigPath, appPath, dotEodashPath, compiletimeConfigPath } 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";
+
+export const indexHtml = `
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome to Eodash v5</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="${path.resolve(`/@fs/${appPath}/core/render.js`)}"></script>
+</body>
+</html>`
+
+/**
+ * @type {import('vite').Plugin | null}
+ */
+let virtualPlugin = null;
+export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
+  return {
+    base: '',
+    cacheDir: dotEodashPath + '/cache',
+    plugins: [
+      vue({
+        template: {
+          transformAssetUrls,
+          compilerOptions: {
+            isCustomElement: (tag) => !tag.includes('v-') && tag.includes('-')
+          }
+        },
+      }),
+      // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+      vuetify({
+        autoImport: true,
+      }),
+      (mode === "development" && {
+        name: "inject-html",
+        configureServer
+      }),
+      virtualPlugin = virtual(await getUserModules())
+    ],
+    define: { 'process.env': {} },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('../core', import.meta.url)),
+        '^': fileURLToPath(new URL('../widgets', import.meta.url)),
+      },
+      extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+    },
+    server: {
+      port: 3000,
+      fs: {
+        allow: [searchForWorkspaceRoot(process.cwd())]
+      },
+      open: '/'
+    },
+    root: fileURLToPath(new URL('..', import.meta.url)),
+    optimizeDeps: mode === "development" ? {
+      include: ["webfontloader", "vuetify", "vue", "pinia"],
+      noDiscovery: true,
+    } : {},
+    publicDir: command === 'build' ? path.join(appPath, './public') : path.join(execPath, '/public'),
+    build: {
+      outDir: 'dist',
+      rollupOptions: {
+        input: fileURLToPath(new URL(command === 'build' ? '../index.html' : '../core/main.js', import.meta.url)),
+      },
+      target: "esnext"
+    }
+  }
+}));
+
+
+
+/**
+ * @type {import("vite").ServerHook}
+ */
+async function configureServer(server) {
+  server.watcher.add([compiletimeConfigPath, runtimeConfigPath])
+
+  server.watcher.on('change', async (path) => {
+    if (path == runtimeConfigPath) {
+      server.hot.send('reload')
+    } else if (!path.includes('node_modules') && path.includes('.eodash')) {
+      updateVirtualModule(virtualPlugin, 'user:config',
+        await getUserModules().then(modules => modules['user:config']))
+    }
+  })
+
+  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()
+        })
+        return
+      }
+
+      if (req.url?.endsWith('.html')) {
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'text/html')
+        const html = await server.transformIndexHtml(req.url, indexHtml, req.originalUrl)
+        res.end(html)
+        return
+      }
+      next()
+    })
+  }
+}

package/bin/update.js

@@ -0,0 +1,19 @@
+import { cp } from "fs/promises";
+import { execPath, appPath, runtimeConfigPath } from "./utils.js";
+import { existsSync } from "fs";
+import path from "path";
+
+export async function update() {
+  const execPublicPath = path.join(execPath, "/public"),
+    appPublicPath = path.join(appPath, "/public")
+  if (execPublicPath !== appPublicPath) {
+    await cp(execPublicPath, 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)
+      })
+    }
+  }
+}

package/bin/utils.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+import { readFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// global paths
+export const appPath = fileURLToPath(new URL("..", import.meta.url));
+export const execPath = fileURLToPath(new URL(process.cwd(), import.meta.url));
+export const dotEodashPath = path.join(execPath, "/.eodash");
+export const runtimeConfigPath = path.join(dotEodashPath, "./config.runtime.js");
+export const compiletimeConfigPath = path.join(dotEodashPath, "/config.js");
+export const buildTargetPath = path.join(dotEodashPath, '/dist')
+
+
+
+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
+}

package/core/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-app>
+    <RouterView v-slot="{ Component }">
+      <template v-if="Component">
+        <Suspense>
+          <!-- main content -->
+          <component :is="Component"></component>
+
+          <!-- loading state -->
+          <template #fallback>
+            Loading...
+          </template>
+        </Suspense>
+      </template>
+    </RouterView>
+  </v-app>
+</template>
+
+<script setup>
+//
+</script>

package/core/components/DashboardLayout.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-main>
+    <eox-layout :gap="eodashConfig.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>
+      <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx" class="custom-widget"
+        :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
+
+        <v-btn position="absolute" variant="tonal" :style="slideBtns[idx].style" class="slide-btn"
+          @click="slideInOut(idx)">
+          <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
+        </v-btn>
+        <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
+          v-bind="importedWidgets[idx].value.props" />
+
+      </eox-layout-item>
+    </eox-layout>
+  </v-main>
+</template>
+<script setup >
+import { eodashConfigKey } 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 [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
+
+const widgetsConfig = eodashConfig.template?.widgets
+
+const importedWidgets = useDefineWidgets(widgetsConfig)
+/**
+ * Layout items template ref
+ * @type {import('vue').Ref<HTMLElement[]>}
+ */
+const itemEls = ref([])
+
+const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
+</script>
+<style scoped>
+eox-layout-item {
+  background: rgb(var(--v-theme-surface))
+}
+
+.bg-widget {
+  z-index: 0;
+}
+
+.custom-widget {
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+}
+</style>

package/core/components/DynamicWebComponent.vue

@@ -0,0 +1,68 @@
+<template>
+  <span class="d-flex flex-column fill-height overflow-auto">
+    <component :is="tagName" v-bind="properties" ref="elementRef" />
+  </span>
+</template>
+
+<script async setup>
+import { useSTAcStore } from '@/store/stac';
+import {
+  onUnmounted as whenUnMounted,
+  onMounted as whenMounted
+} from 'vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const props =   /** @type {WebComponentProps}  */(defineProps({
+  link: {
+    type: [String, Function],
+    required: true
+  },
+  constructorProp: String,
+  tagName: {
+    type: String,
+    required: true
+  },
+  properties: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  onMounted: Function,
+  onUnmounted: Function
+}))
+
+
+const getWebComponent = async () => typeof props.link === 'string' ?
+  await import( /* @vite-ignore */props.link) : await props.link()
+
+const imported = await getWebComponent().catch(e => {
+  console.error(e)
+})
+
+const defined = customElements.get(props.tagName)
+
+// if the imported link doesn't define the custom tag provided
+if (!defined && props.constructorProp) {
+  const Constructor = imported[props.constructorProp]
+  customElements.define(props.tagName, Constructor)
+}
+
+const store = useSTAcStore()
+
+/**
+ * @template {HTMLElement} CE
+ * @type {import('vue').Ref<CE|null>}
+ */
+const elementRef = ref(null)
+const router = useRouter()
+
+whenMounted(() => {
+  props.onMounted?.(elementRef.value, store, router)
+})
+
+whenUnMounted(() => {
+  props.onUnmounted?.(elementRef.value, store, router)
+})
+</script>

package/core/components/Footer.vue

@@ -0,0 +1,31 @@
+<template>
+  <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>
+    <div class="footer-text">
+      {{ new Date().getFullYear() }} — <strong>{{ title }}</strong>
+    </div>
+  </v-footer>
+</template>
+<script setup>
+import { eodashConfigKey } from '@/store/Keys';
+import { ref } from 'vue';
+import { inject } from 'vue';
+import { useDisplay } from 'vuetify/lib/framework.mjs';
+
+/**
+ * Footer template ref
+ * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
+ */
+const footer = ref(null)
+const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+
+const title = eodashConfig.brand?.shortName ?? eodashConfig.brand?.name
+const { mdAndDown } = useDisplay()
+</script>
+<style scoped lang='scss'>
+.footer-text {
+  font-size: 0.8rem;
+}
+</style>

package/core/components/Header.vue

@@ -0,0 +1,38 @@
+<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)">
+        {{ route.title }}
+      </v-btn>
+    </v-toolbar-items>
+    <v-img class="mx-12 logo" :src="eodashConfig.brand?.logo" />
+  </v-app-bar>
+</template>
+<script setup>
+import { eodashConfigKey } from '@/store/Keys';
+import { inject } from 'vue';
+import { useRouter } from 'vue-router';
+
+const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+
+const title = eodashConfig.brand?.name
+
+const { push } = useRouter()
+
+/**
+ * @param {string} to
+ */
+const navigateTo = (to) => {
+  if (to.toLowerCase().startsWith('http')) {
+    window.open(to, '_self')
+  } else {
+    push(to)
+  }
+}
+</script>
+<style scoped lang='scss'>
+.logo {
+  max-width: 140px;
+}
+</style>

package/core/components/IframeWrapper.vue

@@ -0,0 +1,11 @@
+<template>
+  <iframe :src="src" style="width: 100%; height: 100%"></iframe>
+</template>
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    required: true
+  }
+})
+</script>