Add pinia to build externals. Pass WWT engine store as a prop to HUD. Is there a better solution?

Author: Carifio24

src/components/WwtHud.vue

@@ -36,23 +36,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Settings } from "@wwtelescope/engine";
-import { engineStore } from "@wwtelescope/engine-pinia";
 import { storeToRefs } from "pinia";
 
 import { WwtHUDProps } from "../types";
 
-const store = engineStore();
-const {
-  raRad,
-  decRad,
-  rollRad,
-  zoomDeg,
-  currentTime,
-  clockRate,
-  foregroundOpacity,
-  backgroundImageset,
-  foregroundImageset,
-} = storeToRefs(store);
 
 const R2D = 180 / Math.PI;
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -68,6 +55,26 @@ const props = withDefaults(defineProps<WwtHUDProps>(), {
   textShadow: "0 0 5px black",
 });
 
+/*
+* I really don't care for passing the store as a prop,
+* but without just calling `engineStore` (or even `engineStore(wwtPinia)`),
+* we were getting a different store instance than in the using downstream app.
+* Note that if this component is placed directly in the downstream app package,
+* everything worked exactly as expected, so this some sort of Pinia configuration issue.
+* This works, so until I figure out the "right" approach, we'll just do this.
+*/
+const {
+  raRad,
+  decRad,
+  rollRad,
+  zoomDeg,
+  currentTime,
+  clockRate,
+  foregroundOpacity,
+  backgroundImageset,
+  foregroundImageset,
+} = storeToRefs(props.store);
+
 const cssVars = computed(() => {
   return {
     "--hud-top": props.location.top ?? "auto",

src/types.ts

@@ -1,5 +1,8 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { CircleMarkerOptions, TileLayerOptions } from "leaflet";
+import { engineStore } from "@wwtelescope/engine-pinia";
+
+export type WWTEngineStore = ReturnType<typeof engineStore>;
 
 /* Funding acknowledgement */
 
@@ -142,4 +145,5 @@ export interface WwtHUDProps {
   fontSize?: string;
   backgroundColor?: string | null;
   textShadow?: string | null;
+  store: ReturnType<typeof engineStore>;
 }

vue.config.js

@@ -32,7 +32,8 @@ module.exports = defineConfig({
         'commonjs2': '@wwtelescope/engine', // typeof exports === 'object' && typeof module === 'object'
         'commonjs': '@wwtelescope/engine', // typeof exports === 'object'
         'root': 'wwtlib' // none of the above: browser mode using global variables
-      }
+      },
+      pinia: 'pinia',
     });
 
   },