add latest

package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
-    "@types/mermaid": "^9.1.0",
     "endent": "^2.1.0",
     "mermaid": "^9.1.7",
     "quasar": "^2.6.0",
@@ -22,6 +21,7 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.0.0",
+    "@types/mermaid": "^9.1.0",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
@@ -31,6 +31,7 @@
     "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.5.1",
     "push-dir": "^0.4.1",
+    "rollup-plugin-visualizer": "^5.8.2",
     "typescript": "^4.5.4"
   },
   "engines": {

quasar.config.js

@@ -28,7 +28,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [],
+    boot: ['mermaid'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
@@ -56,6 +56,7 @@ module.exports = configure(function (/* ctx */) {
 
       alias: {
         composables: path.join(__dirname, './src/composables'),
+        boot: path.join(__dirname, './src/boot'),
       },
 
       vueRouterMode: 'hash', // available values: 'hash', 'history'
@@ -79,15 +80,22 @@ module.exports = configure(function (/* ctx */) {
       },
       // viteVuePluginOptions: {},
 
-      // vitePlugins: [
+      // vitePlugins: [],
-      //   [ 'package-name', { ..options.. } ]
+
-      // ]
+      extendViteConf(viteConf, { isClient, isServer }) {
+        viteConf.plugins.push(
+          require('rollup-plugin-visualizer').visualizer({
+            emitFile: true,
+            file: 'stats.html',
+          })
+        );
+      },
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      open: true, // opens browser window automatically
+      open: false, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework

src/boot/mermaid.ts

@@ -0,0 +1,16 @@
+import { onMounted } from 'vue';
+import mermaid from 'mermaid';
+
+function initialiseMermaid() {
+  onMounted(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      logLevel: 'fatal',
+      securityLevel: 'loose',
+      theme: 'neutral',
+      flowchart: { htmlLabels: true }
+    });
+  });
+}
+
+export { mermaid, initialiseMermaid };

src/components/ProductionChain.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
-import mermaid from 'mermaid';
+import { mermaid } from 'boot/mermaid';
 
 // DOM Refs
 const diagram = ref<HTMLInputElement | null>(null);

src/pages/AnnoBase.vue

@@ -35,7 +35,7 @@
 import { productionChainsBase } from './data/production-chains-base';
 
 // Mermaid
-import { initialiseMermaid } from 'composables/mermaid';
+import { initialiseMermaid } from 'boot/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';

src/pages/AnnoExpansions.vue

@@ -31,7 +31,7 @@
 import { productionChainsExpansions } from './data/production-chains-expansions';
 
 // Mermaid
-import { initialiseMermaid } from 'composables/mermaid';
+import { initialiseMermaid } from 'boot/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';

src/pages/data/production-chains-base.ts

@@ -1,4 +1,5 @@
 import { TieredProductionChain } from './models';
+import endent from 'endent';
 
 // Icons
 // Regions
@@ -167,19 +168,39 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'coalRatio',
-        mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
+        mermaidDefinition: endent`
+        flowchart LR
+        Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Coal --> Charcoal
+        `
       },
       {
         productionChain: 'goldRatio',
-        mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
+        mermaidDefinition: endent`
+        flowchart LR
+        ArcticGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        NewWorldGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticGold --> NewWorldGold
+        `
       },
       {
         productionChain: 'furRatio',
-        mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
+        mermaidDefinition: `
+        flowchart LR
+        ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticFur --> OldWorldFur
+        `
       },
       {
         productionChain: 'clayRatio',
-        mermaidDefinition: `flowchart LR; EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)`
+        mermaidDefinition: `
+        flowchart LR
+        EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)
+        EnbesaClay --> OldWorldClay
+        `
       }
     ]
   },
@@ -189,15 +210,30 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'oilPowerPlant',
-        mermaidDefinition: `flowchart LR; OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilWell --> OilPowerPlant
+        `
       },
       {
         productionChain: 'oilTanker',
-        mermaidDefinition: `flowchart LR; OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)
+        OilTanker --> OilPowerPlant
+        `
       },
       {
         productionChain: 'gasPowerPlant',
-        mermaidDefinition: `flowchart LR; Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>) --> GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>)
+        GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Gas --> GasPlant
+        `
       }
     ]
   },

tsconfig.json

@@ -2,6 +2,9 @@
   "extends": "@quasar/app-vite/tsconfig-preset",
   "compilerOptions": {
     "baseUrl": ".",
-    "paths": { "composables/*": ["./src/composables/*"] }
+    "paths": {
+      "composables/*": ["./src/composables/*"],
+      "boot/*": ["./src/boot/*"]
+    }
   }
 }

yarn.lock

@@ -3114,6 +3114,15 @@ rollup-plugin-visualizer@^5.5.4:
     source-map "^0.7.3"
     yargs "^17.5.1"
 
+rollup-plugin-visualizer@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.8.2.tgz#25a4cc6431aba2eba8ecb7c99d8c3623d493e4bd"
+  integrity sha512-Fh7KoAa7FVVOojmyyX9ro7fBSR7mPG2cgfDbA877HM4IeJJtSZO+I/R3h/u6TB8wVP5J4pXPpTaRMSREyqCS3g==
+  dependencies:
+    open "^8.4.0"
+    source-map "^0.7.4"
+    yargs "^17.5.1"
+
 "rollup@>=2.59.0 <2.78.0":
   version "2.77.3"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
@@ -3277,7 +3286,7 @@ source-map@^0.6.1, source-map@~0.6.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==