From 433fd4d045fd8e4bce4ae60db7bf147e830afb53 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 Oct 2022 14:11:26 +0530
Subject: [PATCH] chore: ENV types, mindmap rc4

---
 package.json                      |  2 +-
 src/env.d.ts                      | 14 ++++++++++++++
 src/lib/components/actions.svelte |  3 ++-
 src/lib/util/env.ts               | 19 +++++++++----------
 src/lib/util/mermaid.ts           | 12 ++++++------
 5 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 src/env.d.ts

diff --git a/package.json b/package.json
index 9516861d..b9bf43eb 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
-		"dev:force": "yarn dev --force",
+		"dev:force": "MERMAID_LOCAL=true yarn dev --force",
 		"dev:test": "yarn dev",
 		"build": "vite build",
 		"preview": "vite preview",
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 00000000..571447df
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly MERMAID_RENDERER_URL: string;
+	readonly MERMAID_KROKI_RENDERER_URL: string;
+	readonly MERMAID_CDN_URL: string;
+	readonly MERMAID_BASE_URL: string;
+	readonly MERMAID_LOCAL: boolean;
+	// more env variables...
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
index c31128b7..d1980e9d 100644
--- a/src/lib/components/actions.svelte
+++ b/src/lib/components/actions.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import Card from '$lib/components/card/card.svelte';
-	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
+	import { env } from '$lib/util/env';
 	import { pakoSerde } from '$lib/util/serde';
 	import { stateStore } from '$lib/util/state';
 	import { logEvent } from '$lib/util/stats';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
+	const { krokiRendererUrl, rendererUrl } = env;
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
index 354ee3aa..f5738f65 100644
--- a/src/lib/util/env.ts
+++ b/src/lib/util/env.ts
@@ -1,10 +1,9 @@
-export const rendererUrl: string =
-	(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
-export const krokiRendererUrl: string =
-	(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
-export const mermaidCDNUrl: string =
-	(import.meta.env.MERMAID_CDN_URL as string) ?? 'https://unpkg.com/@mermaid-js';
-export const mermaidBaseURL =
-	(import.meta.env.MERMAID_BASE_URL as string) ?? 'http://localhost:9000';
-export const isDev = import.meta.env.DEV;
-export const baseURL = import.meta.env.BASE_URL;
+export const env = {
+	rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink',
+	krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io',
+	mermaidCDNUrl: import.meta.env.MERMAID_CDN_URL ?? 'https://unpkg.com/@mermaid-js',
+	mermaidBaseURL: import.meta.env.MERMAID_BASE_URL ?? 'http://localhost:9000',
+	useLocalMermaid: import.meta.env.MERMAID_LOCAL ?? false,
+	isDev: import.meta.env.DEV,
+	baseURL: import.meta.env.BASE_URL
+};
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
index 7ae795fc..15ae08e9 100644
--- a/src/lib/util/mermaid.ts
+++ b/src/lib/util/mermaid.ts
@@ -1,20 +1,20 @@
 import mermaid from 'mermaid';
 // We need to export MermaidConfig and all related types from mermaid.
 import type { MermaidConfig } from 'mermaid/dist/config.type';
-import { mermaidCDNUrl, isDev, mermaidBaseURL } from './env';
+import { env } from './env';
+const { mermaidBaseURL, mermaidCDNUrl, useLocalMermaid } = env;
 
 const getDiagramURL = (name: string, version: string): string => {
-	// if (isDev) {
-	// 	// TODO: Check and fallback to CDN if mermaidBaseURL isn't up.
-	// 	return `${mermaidBaseURL}/${name}-detector.esm.mjs`;
-	// }
+	if (useLocalMermaid) {
+		return `${mermaidBaseURL}/${name}-detector.esm.mjs`;
+	}
 	return `${mermaidCDNUrl}/${name}@${version}/dist/${name}-detector.esm.mjs`;
 };
 
 console.log(mermaid);
 const initialize = mermaid.initializeAsync({
 	logLevel: 0,
-	lazyLoadedDiagrams: [getDiagramURL('mermaid-mindmap', '9.2.0-rc3')],
+	lazyLoadedDiagrams: [getDiagramURL('mermaid-mindmap', '9.2.0-rc4')],
 	loadExternalDiagramsAtStartup: true
 });