Store theme config in globalThis for virtual imports(astrolicious#176)(…

…astrolicious#32) - add function example usage in playground config
Yuhanawa · Dec 7, 2024 · 86dfc0e · 86dfc0e
1 parent dd63fc8
commit 86dfc0e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/package/src/index.ts b/package/src/index.ts
@@ -118,9 +118,10 @@ export default function <ThemeName extends string, Schema extends z.ZodTypeAny>(
 
 					const projectRoot = resolveDirectory("./", config.root);
 
+					(globalThis as any)[themeName] = { userConfig, userConfigPartial };
 					// Record of virtual imports and their content
 					const virtualImports: Parameters<typeof createVirtualResolver>[0]["imports"] = {
-						[`${themeName}:config`]: `export default ${JSON.stringify(userConfig)}`,
+						[`${themeName}:config`]: `export default globalThis["${themeName}"].userConfig;`,
 						[`${themeName}:context`]: "",
 					};
 

diff --git a/playground/astro.config.mts b/playground/astro.config.mts
@@ -11,7 +11,12 @@ export default defineConfig({
 			config: {
 				title: "Hey!",
 				description: "This is a theme created using",
-				// sitemap: false
+				// sitemap: false,
+				customCornerMessage: (url: URL) => {
+					if (url.pathname === "/") return "you are on home page";
+					if (url.pathname.startsWith("/cats")) return `you are on cats page, it's cute!`;
+					return `current url: ${url}`;
+				},
 			},
 			pages: {
 				// '/cats': '/dogs',

diff --git a/tests/themes/theme-playground/index.ts b/tests/themes/theme-playground/index.ts
@@ -8,6 +8,7 @@ export default defineTheme({
 		title: z.string(),
 		description: z.string().optional(),
 		sitemap: z.boolean().optional().default(true),
+		customCornerMessage: z.function().args(z.instanceof(URL)).returns(z.string()).optional(),
 	}),
 	imports: {
 		test: {

diff --git a/tests/themes/theme-playground/src/layouts/Layout.astro b/tests/themes/theme-playground/src/layouts/Layout.astro
@@ -1,20 +1,28 @@
 ---
 import "theme-playground:styles";
+import config from "theme-playground:config";
 ---
 
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-		<link rel="stylesheet" href="">
-    <title>Theme</title>
-  </head>
-  <body>
-    {Astro.url.pathname !== '/' && <a href="/">Home</a>}
-    <main>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Theme</title>
+	</head>
+	<body>
+		{Astro.url.pathname !== "/" && <a href="/">Home</a>}
+		<span>{config.customCornerMessage?.(Astro.url) ?? `current url: ${Astro.url}`}</span>
+		<main>
 			<slot />
-    </main>
-  </body>
+		</main>
+	</body>
 </html>
+<style>
+	span {
+		position: absolute;
+		top: 2rem;
+		left: 1rem;
+	}
+</style>