chore: ENV types, mindmap rc4

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",

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;
+}

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;
 

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
+};

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
 });