From be6c1abb682dce448f4f87b023f82f6d210de108 Mon Sep 17 00:00:00 2001
From: David Enke <david@enke.dev>
Date: Sat, 14 Dec 2024 16:23:14 +0100
Subject: [PATCH] fix(demo): add example paths at build time

---
 src/demo/demo.ts | 18 +++++++-----------
 vite-env.d.ts    |  3 +++
 vite.config.ts   | 11 ++++++++++-
 3 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 vite-env.d.ts

diff --git a/src/demo/demo.ts b/src/demo/demo.ts
index 1089024..fd2ed37 100644
--- a/src/demo/demo.ts
+++ b/src/demo/demo.ts
@@ -1,5 +1,3 @@
-/// <reference types="vite/client" />
-
 import hljs from 'highlight.js';
 import json from 'highlight.js/lib/languages/json';
 import ts from 'highlight.js/lib/languages/typescript';
@@ -87,15 +85,13 @@ window.updateInput = event => {
 
 // lists all examples from the `examples` folder
 window.initExamples = async () => {
-  const examples = Object.keys(import.meta.glob('/public/examples/*.yml'));
-  document.querySelector('#input > nav')!.innerHTML = examples
-    .map(path => {
-      const [, , folder, name] = path.split('/');
-      return `
-        <button data-example="${`${folder}/${name}`}" onclick="window.handleClick(event)">
-          ${name.replace(/\.yml$/, '')} example
-        </button>`;
-    })
+  document.querySelector('#input > nav')!.innerHTML = __EXAMPLES__
+    .map(
+      ({ href, name }) => `
+        <button data-example="${href}" onclick="window.handleClick(event)">
+          ${name} example
+        </button>`,
+    )
     .join('');
 };
 
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 0000000..a271836
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __EXAMPLES__: { href: string; name: string }[];
diff --git a/vite.config.ts b/vite.config.ts
index d2e6832..c95d4f3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,4 @@
-import { readFileSync } from 'node:fs';
+import { readdirSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 
 import { defineConfig, type Plugin } from 'vite';
@@ -35,4 +35,13 @@ export default defineConfig(async () => ({
   ],
   // https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/25#issuecomment-1962228168
   resolve: { alias: { 'node:fs/promises': 'node-stdlib-browser/mock/empty' } },
+  // defined available examples
+  define: {
+    __EXAMPLES__: JSON.stringify(
+      readdirSync('public/examples').map(file => ({
+        href: `examples/${file}`,
+        name: file.replace(/\.yml$/, ''),
+      })),
+    ),
+  },
 }));