docs: use vite.define for template variables

Author: metonym

docs/src/layouts/ComponentLayout.svelte

@@ -27,7 +27,7 @@
   import ComponentApi from "../components/ComponentApi.svelte";
   import { theme } from "../store";
 
-  const REPO_URL = "REPO_URL";
+  const REPO_URL = __REPO_URL__;
 
   export let component = $activeRoute?.leaf?.node?.name ?? "";
   export let components = [component];

docs/src/pages/_module.svelte

@@ -98,7 +98,7 @@
 
     <span slot="platform" class="platform-name" class:hidden={active}>
       Carbon<span class="platform-name-full">&nbsp;Components</span>&nbsp;Svelte
-      &nbsp;<code class="code-01">v{process.env.VERSION || ""}</code>
+      &nbsp;<code class="code-01">v{__PKG_VERSION__}</code>
     </span>
     <HeaderUtilities>
       <HeaderSearch

docs/svelte.config.ts

@@ -10,7 +10,6 @@ import Prism from "prismjs";
 import rehypeSlug from "rehype-slug";
 import { parse } from "svelte/compiler";
 import visit from "unist-util-visit";
-import pkg from "../package.json" with { type: "json" };
 import componentApi from "./src/COMPONENT_API.json" with { type: "json" };
 import "prismjs/components/prism-markup.js";
 import "prismjs/components/prism-css.js";
@@ -28,8 +27,6 @@ const componentApiByName = new Set(
 const ICON_NAME_REGEX = /[A-Z][a-z]*/;
 const NODE_MODULES_REGEX = /node_modules/;
 const PAGES_COMPONENTS_REGEX = /pages\/(components)/;
-const GIT_PREFIX_REGEX = /^git\+/;
-const GIT_SUFFIX_REGEX = /\.git$/;
 const SCRIPT_TAG_REGEX = /(<script[^>]*>)/i;
 const FILE_SOURCE_SRC_REGEX = /src="([^"]+)"/;
 
@@ -351,21 +348,6 @@ function carbonify() {
 export default {
   extensions: [".svelte", ".svx"],
   preprocess: [
-    {
-      markup: ({ filename, content }) => {
-        if (NODE_MODULES_REGEX.test(filename) || !filename.endsWith(".svelte"))
-          return;
-        const repoUrl = pkg.repository?.url ?? "";
-        const normalizedRepoUrl = repoUrl
-          .replace(GIT_PREFIX_REGEX, "")
-          .replace(GIT_SUFFIX_REGEX, "");
-        return {
-          code: content
-            .replace(/process.env.VERSION/g, JSON.stringify(pkg.version))
-            .replace(/"REPO_URL"/g, JSON.stringify(normalizedRepoUrl)),
-        };
-      },
-    },
     mdsvex({
       smartypants: false,
       highlight: { highlighter: mdsvexPrismHighlighter },

docs/vite.config.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from "node:url";
 import routify from "@roxi/routify/vite-plugin";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig } from "vite";
+import pkg from "../package.json" with { type: "json" };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const carbonRoot = path.resolve(__dirname, "..");
@@ -31,6 +32,12 @@ export default defineConfig({
       },
     },
   ],
+  define: {
+    __PKG_VERSION__: JSON.stringify(pkg.version),
+    __REPO_URL__: JSON.stringify(
+      (pkg.repository?.url ?? "").replace(/^git\+/, "").replace(/\.git$/, ""),
+    ),
+  },
   optimizeDeps: {
     include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
     exclude: [