fix: resolve issue remounting civictheme javascript (#96)

* chore(#9): improve node library setup/teardown * chore(#93): improve node library setup/teardown * chore: fix lint issues
Realityloop · Aug 1, 2023 · fba3b0d · fba3b0d
1 parent dd263f8
commit fba3b0d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/components/MenuItem.vue b/src/components/MenuItem.vue
@@ -106,16 +106,27 @@ export default {
     isFlyout: ({ type }) => type === 'flyout',
   },
 
-  created() {
-    // @TODO - Do this elsewhere?
+  mounted() {
     try {
-      if (process.client && this.isCollapsible) require('civictheme/components/00-base/collapsible/collapsible')
-      if (process.client && this.isFlyout) require('civictheme/components/00-base/flyout/flyout')
+      if (this.isCollapsible) {
+        delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
+        require('civictheme/components/00-base/collapsible/collapsible')
+      }
+
+      if (this.isFlyout) {
+        delete require.cache[require.resolve('civictheme/components/00-base/flyout/flyout')]
+        require('civictheme/components/00-base/flyout/flyout')
+      }
     }
     catch(e) {
       // eslint-disable-next-line
       console.error(e)
     }
+  },
+
+  beforeDestroy() {
+    if (this.isCollapsible) delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
+    if (this.isFlyout) delete require.cache[require.resolve('civictheme/components/00-base/flyout/flyout')]
   }
 }
 </script>
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
@@ -9,6 +9,7 @@
     <a
       :class="`ct-link ${themeClass} ct-popover__link`"
       :data-collapsible-trigger="true"
+      @click="$emit('trigger')"
     >
       <slot name="trigger">
         {{ trigger }}
@@ -42,14 +43,21 @@ export default {
     }
   },
 
-  created() {
+  mounted() {
     try {
-      if (process.client) require('civictheme/components/00-base/collapsible/collapsible')
+      if (this.$el) {
+        delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
+        require('civictheme/components/00-base/collapsible/collapsible')
+      }
     }
     catch(e) {
       // eslint-disable-next-line
       console.error(e)
     }
+  },
+
+  beforeDestroy() {
+    delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
   }
 }
 </script>