@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.4

package/README.md

@@ -18,9 +18,18 @@ npm run preview
 
 ## Folder Structure
     .
-    ├── core               # Main source code that hosts the microfrontends and renders the dashboard
+    ├── core               # CLI & Client source code 
     ├── docs               # Documentation files
+    ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 
+
+## Writing commits
+To ensure clear communication with the package consumers and enable machine-readable commits, we adhere to [The Conventional Commits](https://www.conventionalcommits.org/) specification that allows the generation of [semVer](https://semver.org) releases and associated change logs using [googleapis/release-please](https://github.com/googleapis/release-please).
+
+The most important prefixes you should have in mind are:
+* fix: which represents bug fixes, and correlates to a SemVer patch.
+* feat: which represents a new feature, and correlates to a SemVer minor.
+* feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.

package/core/client/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-app>
+    <Suspense>
+
+      <Dashboard />
+
+      <template #fallback>
+        <ErrorAlert v-model="error" />
+      </template>
+    </Suspense>
+  </v-app>
+</template>
+
+<script setup>
+import Dashboard from '@/views/Dashboard.vue';
+import ErrorAlert from './components/ErrorAlert.vue';
+import { onErrorCaptured, ref } from 'vue';
+
+const error = ref('')
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `
+})
+</script>

package/core/client/SuspensedDashboard.ce.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-app ref="vAppRef">
+    <Suspense>
+      <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
+
+      <template #fallback>
+        <ErrorAlert @vue:mounted="setStylesFromHead()" v-model="error" />
+      </template>
+    </Suspense>
+  </v-app>
+</template>
+<script setup>
+import Dashboard from '@/views/Dashboard.vue';
+import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue"
+import { registerPlugins } from '@/plugins';
+import { eodashKey } from '@/utils/keys';
+import ErrorAlert from '@/components/ErrorAlert.vue';
+
+defineProps({
+  config: {
+    type: String,
+  }
+});
+
+/** @type { import("vue").Ref<import("vuetify/components").VApp| null > } */
+const vAppRef = ref(null)
+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)
+
+/** @param {import("vue").Ref<HTMLElement | import("vue").ComponentPublicInstance>[]} [hiddenElements] */
+function setStylesFromHead(hiddenElements) {
+  const eodashShadowRoot = vAppRef.value?.$el.getRootNode()
+  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')?.includes('stylesheet')) {
+      eodashShadowRoot?.appendChild(child.cloneNode(true))
+    }
+  });
+
+  stylesStr += `\n * {
+      font-family:${
+        //@ts-expect-error
+        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
+      }
+      ${//@ts-expect-error
+        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
+      `div.v-application__wrap {
+          min-height: fit-content;
+        }`: ""}
+        `
+  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
+  eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
+
+  //@ts-expect-error
+  if (hiddenElements && !(/** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.noLayout)) {
+    hiddenElements.forEach(element => {
+      if (element.value) {
+        if (element.value instanceof HTMLElement) {
+          element.value.style.opacity = "1"
+        } else {
+          /** @type {HTMLElement} */
+          (element.value.$el).style.opacity = "1"
+        }
+      }
+    })
+  }
+}
+
+const error = ref('')
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `
+})
+</script>

package/core/client/components/DashboardLayout.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-main>
+    <eox-layout :gap="eodash.template.gap ?? 2">
+      <eox-layout-item v-if="bgWidget.component" style="z-index: 0;" x="0" y="0" h="12" w="12">
+        <Suspense suspensible>
+          <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
+        </Suspense>
+      </eox-layout-item>
+      <template v-for="(config, idx) in widgetsConfig" :key="idx">
+        <eox-layout-item v-if="importedWidgets[idx].value.component"
+          style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
+          :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
+
+          <Suspense suspensible>
+            <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
+              v-bind="importedWidgets[idx].value.props" />
+          </Suspense>
+        </eox-layout-item>
+      </template>
+    </eox-layout>
+  </v-main>
+</template>
+<script setup>
+import { eodashKey } from '@/utils/keys';
+import { inject } from 'vue';
+import { useDefineWidgets } from '@/composables/DefineWidgets'
+import '@eox/layout'
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
+
+const widgetsConfig = eodash.template?.widgets
+
+const importedWidgets = useDefineWidgets(widgetsConfig)
+</script>

package/core/client/components/ErrorAlert.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-alert v-if="error" translate="yes" location="start bottom" type="error" position="fixed" @click:close="error = ''"
+    variant="elevated" :icon="[mdiAlertCircle]" style="z-index: 10000;" closable :close-icon="[mdiClose]">
+    {{ errorMessage }}
+    <details is="animated-details">
+      <summary> Error </summary>
+      {{ error }}
+    </details>
+  </v-alert>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { mdiClose, mdiAlertCircle } from "@mdi/js"
+import { inject } from "vue";
+
+const error = defineModel({ type: String, required: true })
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+const errorMessage = eodash.brand.errorMessage ?? 'something went wrong, please try again later'
+</script>

package/core/{components → client/components}/Loading.vue

@@ -1,6 +1,7 @@
 <template>
   <v-row class="d-flex justify-center align-center ">
     <v-col class="flex-column justify-center align-center">
+      <ErrorAlert v-model="error" />
       <Suspense>
         <component v-if="loading.component" :is="loading.component" v-bind="loading.props"></component>
         <div v-else class="text-center">
@@ -16,12 +17,22 @@
   </v-row>
 </template>
 <script setup>
-import { inject } from 'vue';
+import { inject, onErrorCaptured, ref } from 'vue';
 import { eodashKey } from '@/utils/keys';
 import { useDefineWidgets } from '@/composables/DefineWidgets';
+import ErrorAlert from './ErrorAlert.vue';
 
 const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
 
 const [loading] = useDefineWidgets([eodash.template.loading])
 
+const error = ref('')
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `
+})
+
 </script>

package/core/{components → client/components}/MobileLayout.vue

@@ -1,24 +1,32 @@
 <template>
   <v-main class="overflow-hidden" style="height: 91dvh;">
+    <Suspense suspensible>
+      <component id="bg-widget" v-if="bgWidget.component" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+    </Suspense>
 
-    <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props"></component>
-
-    <div v-show="activeIdx === idx" id="overlay" class="pa-2" v-for="(importedWidget, idx) in importedWidgets"
-      :key="idx" :style="{
+    <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+      <div v-if="importedWidget.value.component" v-show="activeIdx === idx" id="overlay" class="pa-2" :style="{
         bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
         width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
       }">
-      <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
-      <component style="height: 94% !important;" :key="importedWidget.value.id" :is="importedWidget.value.component"
-        v-show="activeIdx === idx" v-bind="importedWidget.value.props" />
-    </div>
+        <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+        <Suspense suspensible>
+          <div style="height: 90% !important;" v-show="activeIdx === idx">
+            <component :key="importedWidget.value.id" :is="importedWidget.value.component"
+              v-bind="importedWidget.value.props" />
+          </div>
+        </Suspense>
+      </div>
+    </template>
 
     <v-tabs ref="tabs" align-tabs="center" bg-color="surface"
       :style="{ position: 'relative', bottom: (mainRect.bottom || 48) + 'px', zIndex: 10 }" show-arrows
       v-model="activeIdx">
-      <v-tab v-for="(importedWidget, idx) in importedWidgets" :key="idx" :value="idx">
-        {{ importedWidget.value.title }}
-      </v-tab>
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <v-tab v-if="importedWidget.value.component" :value="idx">
+          {{ importedWidget.value.title }}
+        </v-tab>
+      </template>
     </v-tabs>
 
   </v-main>

package/core/{composables → client/composables}/DefineWidgets.js

@@ -60,9 +60,11 @@ export const useDefineWidgets = (widgetConfigs) => {
     if ('defineWidget' in (config ?? {})) {
       const { selectedStac } = storeToRefs(useSTAcStore())
       watch(selectedStac, (updatedStac) => {
-        const definedConfig = reactive(/** @type {import("@/types").FunctionalWidget} */
-          (config)?.defineWidget(updatedStac))
-        definedWidget.value = definedWidget.value.id === definedConfig.id ?
+        let definedConfig =  /** @type {import("@/types").FunctionalWidget} */(config)?.defineWidget(updatedStac)
+        if (definedConfig) {
+          definedConfig = reactive(definedConfig)
+        }
+        definedWidget.value = definedWidget.value.id === definedConfig?.id ?
           definedWidget.value : getWidgetDefinition(definedConfig);
       }, { immediate: true })
     } else {
@@ -76,7 +78,7 @@ export const useDefineWidgets = (widgetConfigs) => {
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined} config
+ * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} config
  * @returns {DefinedWidget}
  **/
 const getWidgetDefinition = (config) => {
@@ -119,7 +121,11 @@ const getWidgetDefinition = (config) => {
       break;
 
     default:
-      console.error('Widget type not found')
+      if (!config) {
+        return importedWidget
+      } else {
+        console.error('Widget type not found')
+      }
       break;
   }
   importedWidget.title = config?.title ?? ''

package/core/{composables → client/composables}/index.js

@@ -6,6 +6,7 @@ import { currentUrl, indicator, mapPosition } from "@/store/States";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
 import { onMounted, watch } from "vue";
+import { mdiChevronDoubleDown, mdiChevronDoubleLeft, mdiChevronDoubleRight, mdiChevronDoubleUp } from "@mdi/js"
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -56,41 +57,43 @@ export const useSlidePanels = (elements, configs) => {
   /**
    * Array of sliding button's style and icons
    */
-  const slideBtns = slideDirs.map((dir, idx) => {
+  const slideBtns = slideDirs.map((dir, _idx) => {
     const btn = reactive({
       style: {},
       icon: { in: "", out: "" },
       active: false,
       enabled: true,
     });
-    if (configs[idx].slidable === false) {
-      btn.enabled = false;
-      return btn;
-    }
+
+    // temp removal of `slidable` from the  widgets API
+    // if (configs[idx].slidable === false) {
+    //   btn.enabled = false;
+    //   return btn;
+    // }
 
     switch (dir) {
       case "left":
         btn.style = { top: "50%", right: "-11%" };
-        btn.icon.in = "mdi-chevron-double-right";
-        btn.icon.out = "mdi-chevron-double-left";
+        btn.icon.in = mdiChevronDoubleRight
+        btn.icon.out = mdiChevronDoubleLeft
 
         break;
       case "right":
         btn.style = { top: "50%", left: "-11%" };
-        btn.icon.in = "mdi-chevron-double-left";
-        btn.icon.out = "mdi-chevron-double-right";
+        btn.icon.in = mdiChevronDoubleLeft
+        btn.icon.out = mdiChevronDoubleRight
 
         break;
       case "up":
         btn.style = { right: "50%", bottom: "-17%" };
-        btn.icon.in = "mdi-chevron-double-down";
-        btn.icon.out = "mdi-chevron-double-up";
+        btn.icon.in = mdiChevronDoubleDown
+        btn.icon.out = mdiChevronDoubleUp
 
         break;
       case "down":
         btn.style = { right: "50%", top: "-17%" };
-        btn.icon.in = "mdi-chevron-double-up";
-        btn.icon.out = "mdi-chevron-double-down";
+        btn.icon.in = mdiChevronDoubleUp
+        btn.icon.out = mdiChevronDoubleDown
         break;
 
       default:

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

@@ -53,7 +53,6 @@ export const eodash = reactive({
         type: "internal",
         title: "itemfilter",
         layout: { x: 0, y: 0, w: 3, h: 12 },
-        slidable: false,
         widget: {
           name: "EodashItemFilter",
         },
@@ -63,7 +62,6 @@ export const eodash = reactive({
         type: "internal",
         title: "datepicker",
         layout: { x: 5, y: 11, w: 2, h: 1 },
-        slidable: false,
         widget: {
           name: "EodashDatePicker",
           properties: {

package/core/{plugins → client/plugins}/vuetify.js

@@ -5,15 +5,21 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
 
 
 import { createVuetify } from 'vuetify';
-// import {} from "vuetify"
+import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 const vuetify = createVuetify({
+  icons: {
+    aliases: {
+      // mapping v-date-picker and v-tabs default icons to `@mdi/js`
+      next: [mdiChevronRight],
+      prev: [mdiChevronLeft],
+      subgroup: [mdiMenuDown]
+    },
+  },
   theme: {
     themes: {
       dashboardTheme: {},

package/core/{store → client/store}/stac.js

@@ -39,7 +39,9 @@ export const useSTAcStore = defineStore('stac', () => {
         return link
       })
       stac.value = links;
-    }).catch(err => console.error(err));
+    }).catch(err => {
+      throw new Error("error loading assigned STAC endpoint", err)
+    });
   }
 
   /**
@@ -56,7 +58,9 @@ export const useSTAcStore = defineStore('stac', () => {
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
       indicator.value = selectedStac.value?.id ?? "";
-    }).catch(err => console.error(err));
+    }).catch(err => {
+      throw new Error("error loading the selected STAC", err)
+    });
   }
 
   return { stac, loadSTAC, loadSelectedSTAC, selectedStac };

package/core/{types.d.ts → client/types.d.ts}

@@ -23,17 +23,17 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   constructorProp?: string
   tagName: `${string}-${string}`
   /** Object defining all the properties and attributes of the web component */
-  properties?: Record<string, any>
+  properties?: Record<string, unknown>
   /**
    * 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`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
   /**
    * 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`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
 }
@@ -41,7 +41,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
 
 /** @ignore */
 export interface WidgetsContainerProps {
-  widgets: Omit<Widget, 'layout' | 'slidable'>[]
+  widgets: Omit<Widget, 'layout'>[]
 }
 
 // eodash types:
@@ -73,10 +73,6 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   },
-  /**
- * Enable/Disable widget sliding.
- */
-  slidable?: boolean
   widget: WebComponentProps<T>
   type: 'web-component'
 }
@@ -110,10 +106,6 @@ export interface InternalComponentWidget {
      */
     h: number
   }
-  /**
-   * Enable/Disable widget sliding.
-   */
-  slidable?: boolean
   widget: {
     /**
      * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder. Referenced
@@ -159,10 +151,6 @@ export interface IFrameWidget {
      */
     h: number
   }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean;
   widget: {
     /**
      * The URL of the page to embed
@@ -176,13 +164,13 @@ export interface IFrameWidget {
  */
 export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   /**
-   * Provides a functional definition of the widget,
-   * gets triggered whenever a STAC object is selected.
+   * Provides a functional definition of widgets,
+   * gets triggered whenever a STAC object is selected, and only renders the returned configuration
+   * if the `id` doesn't match the currently rendered `id`
    * @param selectedSTAC - Currently selected STAC object
    */
   defineWidget: (selectedSTAC: import("stac-ts").StacCatalog |
-    import("stac-ts").StacCollection | import("stac-ts").StacItem
-    | null) => Omit<StaticWidget<T>, 'layout' | 'slidable'>
+    import("stac-ts").StacCollection | import("stac-ts").StacItem | null) => Omit<StaticWidget<T>, 'layout' | 'slidable'> | undefined | null
   layout: {
     /**
      *  Horizontal start position. Integer between 1 and 12
@@ -201,10 +189,6 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean
 }
 /**
  * @group Eodash
@@ -275,6 +259,8 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
   brand: {
     /** Removes the dashboard layout */
     noLayout?: boolean
+    /** custom error message to alert the users if something crashes */
+    errorMessage?: string
     /**
      * 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.
@@ -348,7 +334,7 @@ export interface EodashStore {
  * the project's entry point should export this function as a default
  * to instantiate eodash
  * @group Eodash
- * @param  configCallback
+ * @param config
  */
 export declare const createEodash: (config: ((store: EodashStore) => Eodash | Promise<Eodash>) | Eodash) => Eodash | Promise<Eodash>
 

package/core/{views → client/views}/Dashboard.vue

@@ -1,25 +1,27 @@
 <template>
-  <HeaderComponent v-if="!eodash.brand.noLayout" />
+  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
+  <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.()"
+    <TemplateComponent @vue:mounted="onTemplateMount?.(hiddenElements)"
       :style="`height: ${eodash.brand.noLayout ? (onTemplateMount ? '100%' : '90dvh') : 'calc(100dvh - ' + mainRect['top'] + mainRect['bottom'] + 'px)'}`" />
     <template #fallback>
-      <div v-if="onTemplateMount" style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
+      <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
         <Loading />
       </div>
     </template>
   </Suspense>
-  <FooterComponent v-if="!eodash.brand.noLayout" />
+  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
-import { defineAsyncComponent, onMounted } from "vue";
+import { defineAsyncComponent, onErrorCaptured, onMounted, ref } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
 import { loadFont } from '@/utils'
 import Loading from "@/components/Loading.vue";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 
 const props = defineProps({
   config: {
@@ -29,7 +31,6 @@ const props = defineProps({
     type: Function
   }
 })
-
 const eodash = await useEodashRuntime(props.config)
 
 useURLSearchParametersSync();
@@ -51,9 +52,37 @@ const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.v
 const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
 const { mainRect } = useLayout()
 
+/** @type {import("vue").Ref<InstanceType<typeof
+ *  import("@/components/Header.vue").default >|null>}
+ **/
+const headerRef = ref(null);
+/** @type {import("vue").Ref<InstanceType<typeof
+ *  import("@/components/Footer.vue").default >|null>}
+ **/
+const footerRef = ref(null);
+
+const hiddenElements = [headerRef, footerRef]
+
 onMounted(() => {
   const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
   htmlTag.style.overflow = 'hidden';
+
+  if (props.onTemplateMount && !eodash.brand.noLayout) {
+    hiddenElements.forEach(element => {
+      /** @type {HTMLElement} */
+      // @ts-expect-error
+      (element.value.$el).style.opacity = "0"
+    })
+  }
+})
+
+const error = ref('')
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  error: ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `
 })
 
 </script>