@aklinker1/viteshot 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,9 @@
 
 # ViteShot
 
-Build and generate store screenshots and promo images with code, powered by Vite.
+Generate store screenshots and promo images with code, powered by Vite.
+
+<img width="1241" height="1243" alt="image" src="https://github.com/user-attachments/assets/c6eb4360-f367-4c37-8132-c675c7afe212" />
 
 </div>
 
@@ -10,7 +12,7 @@ Build and generate store screenshots and promo images with code, powered by Vite
 
 With AI, it's common for developers with less design experience to generate store screenshots and promo images. However, one shot image generation models aren't very good at this yet.
 
-However, AI is really good at building *simple* UIs with HTML! ViteShot provides a simple way for agents in your preferred dev environment to create and generate images in a structured, easy-to-iterate way.
+However, AI is really good at building _simple_ UIs with HTML! ViteShot provides a simple way for agents in your preferred dev environment to create and generate images in a structured, easy-to-iterate way.
 
 ## Get Started
 
@@ -47,25 +49,82 @@ Your screenshot designs go in `store/designs/{name}@{width}x{height}.{ext}`.
 - `{width}x{height}`: The size your screenshot should be rendered at (ex: "1280x600", "640x400").
 - `{ext}`: ViteShot supports a variety of file extensions, so you can build your designs using your preferred frontend framework!
 
-### HTML (Recommended)
+### HTML
 
-You don't need a frontend framework to build a simple static layout.
+1. Define an HTML fragment, this will be added to the `body` element automatically.
+2. `<link>` to your CSS for styles or use an inline `<style>` block
+3. Translations can be accessed using the handlebars syntax
 
 ```html
-<div>My screenshot design</div>
+<!-- designs/example@640x400.html-->
+<link rel="stylesheet" href="assets/tailwind.css" />
+<div>{{path.to.translation}}</div>
 ```
 
+> [!NOTE]
+>
+> You don't need a frontend framework to build a simple static layout. Using HTML design files is recommended.
+
 ### Vue
 
-TODO
+1. Add `@vitejs/plugin-vue` to `store/viteshot.config.ts`
+2. Define your screenshot in a `.vue` file
+3. Import any styles, or use Vue's `<style>` block
+4. Use the `t` prop to access translations for the current locale
+
+```vue
+<!-- store/designs/example@640x480.vue -->
+<script lang="ts" setup>
+import "../assets/tailwind.css";
+
+defineProps<{
+  t: Record<string, any>;
+}>();
+</script>
+
+<template>
+  <p>{{ t.path.to.message }}</p>
+</template>
+```
 
 ### Svelte
 
-TODO
+> [!WARN]
+>
+> Experimental, not 100% working yet.
+
+1. Add `@sveltejs/vite-plugin-svelte` to `store/viteshot.config.ts`
+2. Export your component as the default module from your `.svelte` file
+3. Import any styles or use an inline `<style>` block
+4. Use the `t` prop to access translations for the current locale
+
+```svelte
+<!-- store/designs/example@640x480.svelte -->
+<script lang="ts">
+  import "../assets/tailwind.css"
+
+  export let t: Record<string, any>
+</script>
+
+<p>{t.path.to.translation}</p>
+```
 
 ### React
 
-TODO
+1. Add `@vitejs/plugin-react` to `store/viteshot.config.ts`
+2. Export your component as the default module from your `.tsx` or `.jsx` file
+3. Import any styles
+4. Use the `t` prop to access translations for the current locale
+
+```tsx
+// store/designs/example@640x400.tsx
+import React from "react";
+import "../assets/tailwind.css";
+
+export default function (props: { t: Record<string, any> }) {
+  return <p>{t.path.to.translation}</p>;
+}
+```
 
 ## Styling
 

package/assets/dashboard.ts

@@ -4,82 +4,194 @@ import locales from "viteshot-virtual/locales";
 
 declare const app: HTMLDivElement;
 
-// Language management
-
-const CURRENT_LANGUAGE_STORAGE_KEY = "viteshot:current-language";
+// Icons
+
+const LOCALE_FLAGS: Record<string, string> = {
+  be: "🇧🇪",
+  br: "🇧🇷",
+  de: "🇩🇪",
+  en: "🇺🇸",
+  en_gb: "🇬🇧",
+  en_us: "🇺🇸",
+  es: "🇪🇸",
+  es_mx: "🇲🇽",
+  fr: "🇫🇷",
+  it: "🇮🇹",
+  ja: "🇯🇵",
+  pt: "🇧🇷",
+  pt_br: "🇧🇷",
+  ru: "🇷🇺",
+  zh: "🇨🇳",
+  zh_tw: "🇹🇼",
+};
+
+const HEROICONS_ARROW_UP_RIGHT_16_SOLID = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE --><path fill="currentColor" fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0" clip-rule="evenodd"/></svg>`;
+const HEROICONS_SUN = `<svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0"/></svg>`;
+const HEROICONS_MOON = `<svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998"/></svg>`;
 
-let currentLanguageId: string | undefined = locales[0]?.language;
+// Language management
 
-function restoreLanguage() {
-  const oldId = localStorage.getItem(CURRENT_LANGUAGE_STORAGE_KEY);
-  if (!oldId) return;
+const LANGUAGE_STORAGE_KEY = "viteshot:language";
 
-  const oldLocale = locales.find((l) => l.id === oldId);
-  if (!oldLocale) return;
+let currentLanguageId: string | undefined =
+  getStoredLanguage() ?? locales[0]?.id;
+function getStoredLanguage() {
+  const prevId = localStorage.getItem(LANGUAGE_STORAGE_KEY);
+  if (!prevId || !locales.some((l) => l.id === prevId)) return;
 
-  currentLanguageId = oldId;
+  return prevId;
 }
-
 function setLanguage(languageId: string): void {
   currentLanguageId = languageId;
-  localStorage.setItem(CURRENT_LANGUAGE_STORAGE_KEY, languageId);
+  localStorage.setItem(LANGUAGE_STORAGE_KEY, languageId);
 }
 
-// UI Rendering
+// Theme
 
-function renderScreenshots() {
-  app.innerHTML = "";
+const THEME_STORAGE_KEY = "viteshot:theme";
 
-  const header = document.createElement("div");
-  {
-    header.className = "header";
+let currentTheme: string = getStoredTheme() ?? "dark";
 
-    const h1 = document.createElement("h1");
-    h1.textContent = "Dashboard";
-    header.append(h1);
+function getStoredTheme() {
+  const prevTheme = localStorage.getItem(THEME_STORAGE_KEY);
+  if (prevTheme !== "light" && prevTheme !== "dark") return;
 
-    if (locales.length > 0) {
-      const select = document.createElement("select");
+  return prevTheme;
+}
+function toggleTheme(): void {
+  const theme = currentTheme === "dark" ? "light" : "dark";
 
-      for (const locale of locales) {
-        const option = document.createElement("option");
-        option.value = locale.id;
-        option.textContent = locale.language;
-        select.append(option);
-      }
+  currentTheme = theme;
+  updateTheme();
+  localStorage.setItem(THEME_STORAGE_KEY, theme);
+}
+function updateTheme() {
+  document.documentElement.setAttribute("data-theme", currentTheme);
+}
 
-      if (currentLanguageId) select.value = currentLanguageId;
+// UI Rendering
 
-      select.addEventListener("change", () => {
-        setLanguage(select.value);
-        renderScreenshots();
-      });
+type Child = string | HTMLElement | SVGElement | false | undefined | null;
 
-      header.append(select);
+interface ElementTagMap extends HTMLElementTagNameMap {
+  svg: SVGElement;
+}
+
+function h<TTag extends keyof ElementTagMap>(
+  tag: TTag,
+  children: Child[],
+): ElementTagMap[TTag];
+function h<TTag extends keyof ElementTagMap>(
+  tag: TTag,
+  props: Partial<ElementTagMap[TTag]>,
+  children?: Child[],
+): ElementTagMap[TTag];
+function h<TTag extends keyof ElementTagMap>(
+  tag: TTag,
+  arg1?: any,
+  arg2?: any,
+): ElementTagMap[TTag] {
+  const hasProps =
+    typeof arg1 === "object" &&
+    !Array.isArray(arg1) &&
+    !(arg1 instanceof HTMLElement);
+  const props: Record<string, any> = hasProps ? arg1 : undefined;
+  const children: Child[] = hasProps ? arg2 : arg1;
+
+  const el = document.createElement(tag) as ElementTagMap[TTag];
+
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      if (key in el) (el as any)[key] = value;
+      else el.setAttribute(key, value);
     }
   }
-  app.append(header);
 
-  const listItems = screenshots.map((screenshot) => {
-    const li = document.createElement("li");
-    li.id = screenshot.id;
-    li.className = "list-item";
+  if (children) {
+    for (const child of children) {
+      if (child != null && child !== false) el.append(child);
+    }
+  }
 
-    const p = document.createElement("p");
-    p.textContent = screenshot.name;
-    li.append(p);
+  return el;
+}
 
-    const iframe = document.createElement("iframe");
-    iframe.src = `/screenshot/${currentLanguageId ? encodeURIComponent(currentLanguageId) : "null"}/${encodeURIComponent(screenshot.id)}`;
-    if (screenshot.width) iframe.width = String(screenshot.width);
-    if (screenshot.width) iframe.height = String(screenshot.height);
-    li.append(iframe);
+function svg(outerHtml: string): SVGElement {
+  const temp = document.createElement("div");
+  temp.innerHTML = outerHtml;
+  return temp.firstElementChild as SVGElement;
+}
 
-    return li;
-  });
+function renderHeader() {
+  app.append(
+    h("div", { className: "header" }, [
+      h("div", { className: "left" }, [
+        h("h1", "ViteShot"),
+        h(
+          "a",
+          { href: "https://github.com/aklinker1/viteshot", target: "_blank" },
+          [h("span", ["Docs"]), svg(HEROICONS_ARROW_UP_RIGHT_16_SOLID)],
+        ),
+      ]),
+      locales.length > 0 &&
+        h(
+          "select",
+          {
+            className: "language-select",
+            onchange: (e) => {
+              setLanguage((e.target as HTMLSelectElement).value);
+              renderScreenshots();
+            },
+          },
+          locales.map((l) =>
+            h("option", { value: l.id, selected: currentLanguageId === l.id }, [
+              `${LOCALE_FLAGS[l.language.replaceAll("-", "_").toLowerCase()] || "🌐"} ${l.language}`,
+            ]),
+          ),
+        ),
+      h("button", { className: "theme-toggle", onclick: toggleTheme }, [
+        svg(HEROICONS_SUN),
+        svg(HEROICONS_MOON),
+      ]),
+    ]),
+  );
+}
 
-  app.append(...listItems);
+function renderScreenshots() {
+  const existingUl = app.querySelector("& > ul");
+
+  const newUl = h(
+    "ul",
+    screenshots.map((ss) =>
+      h("li", { id: ss.id, className: "list-item" }, [
+        h("h2", { className: "title-row" }, [
+          h("a", { className: "name", href: `#${ss.id}` }, [ss.name]),
+          ss.size && h("span", " "),
+          ss.size && h("span", { className: "size" }, [ss.size]),
+        ]),
+
+        h("div", { className: "iframe-wrapper" }, [
+          h(
+            "iframe",
+            {
+              width: String(ss.width),
+              height: String(ss.height),
+              src: `/screenshot/${currentLanguageId ? encodeURIComponent(currentLanguageId) : "null"}/${encodeURIComponent(ss.id)}`,
+            },
+            [],
+          ),
+        ]),
+      ]),
+    ),
+  );
+
+  if (existingUl) {
+    existingUl.replaceWith(newUl);
+  } else {
+    app.append(newUl);
+  }
 }
 
-restoreLanguage();
+updateTheme();
+renderHeader();
 renderScreenshots();

package/dist/cli.mjs

@@ -1,4 +1,5 @@
-import { n as createServer, t as generateScreenshots } from "./generate-screenshots-bbolMzf5.mjs";
+#!/usr/bin/env node
+import { n as createServer, t as generateScreenshots } from "./generate-screenshots-W20DkMBq.mjs";
 
 //#region src/cli.ts
 const [command, ..._args] = process.argv.slice(2);

package/dist/{generate-screenshots-bbolMzf5.mjs → generate-screenshots-W20DkMBq.mjs}

@@ -12,15 +12,27 @@ var favicon_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1
 
 //#endregion
 //#region src/templates/dashboard.html?raw
-var dashboard_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Viteshot</title>\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        min-width: 0;\n        min-height: 0;\n        list-style: none;\n      }\n\n      .app {\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n        padding: 1rem;\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n      }\n      .header h1 {\n        flex: 1;\n      }\n      .header select {\n        flex-shrink: 0;\n        padding-left: 0.25rem;\n      }\n      .list-item {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"app\" class=\"app\"></div>\n    <script type=\"module\" src=\"/viteshot-assets/dashboard.ts\"><\/script>\n  </body>\n</html>\n";
+var dashboard_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Viteshot</title>\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        min-width: 0;\n        min-height: 0;\n        list-style: none;\n      }\n\n      :root {\n        --color-base: #000000;\n        --color-base-content: #ffffff;\n        --color-accent: #2ce4f4;\n        --spacing: 0.25rem;\n        color-scheme: dark;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n      [data-theme=\"light\"] {\n        --color-base: #f8f8f0;\n        --color-base-content: #000000;\n        --color-accent: #008996;\n        color-scheme: light;\n      }\n      body {\n        background-color: var(--color-base);\n        color: var(--color-base-content);\n        font-family:\n          system-ui,\n          -apple-system,\n          BlinkMacSystemFont,\n          \"Segoe UI\",\n          Roboto,\n          \"Helvetica Neue\",\n          Arial,\n          sans-serif;\n      }\n      a {\n        color: var(--color-accent);\n        font-weight: 500;\n        text-decoration: underline;\n      }\n      a:hover {\n        color: color-mix(\n          in srgb,\n          var(--color-accent) 70%,\n          var(--color-base-content)\n        );\n      }\n\n      .app {\n        display: flex;\n        flex-direction: column;\n        gap: calc(4 * var(--spacing));\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: calc(2 * var(--spacing));\n        padding: calc(4 * var(--spacing)) calc(4 * var(--spacing)) 0\n          calc(4 * var(--spacing));\n      }\n      .header .left {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        gap: calc(4 * var(--spacing));\n      }\n      .header .left h1 {\n        font-size: calc(6 * var(--spacing));\n      }\n      .header .left a {\n        font-size: calc(4 * var(--spacing));\n        display: flex;\n        align-items: center;\n      }\n      .header .left a svg {\n        width: calc(4 * var(--spacing));\n        height: calc(4 * var(--spacing));\n      }\n      .header .language-select {\n        flex-shrink: 0;\n        height: calc(8 * var(--spacing));\n        padding: 0 calc(1 * var(--spacing)) 0 calc(2 * var(--spacing));\n      }\n\n      .theme-toggle {\n        display: block;\n        padding: var(--spacing);\n        width: calc(8 * var(--spacing));\n        height: calc(8 * var(--spacing));\n      }\n      .theme-toggle > .light {\n        display: none;\n      }\n      *[data-theme=\"light\"] .theme-toggle > .dark {\n        display: none;\n      }\n      *[data-theme=\"light\"] .theme-toggle > .light {\n        display: block;\n      }\n\n      .list-item {\n        display: flex;\n        flex-direction: column;\n        gap: calc(2 * var(--spacing));\n        border-top: calc(0.5 * var(--spacing)) solid\n          color-mix(in srgb, var(--color-base-content) 50%, transparent);\n      }\n      .list-item .title-row {\n        padding: calc(4 * var(--spacing)) calc(4 * var(--spacing)) 0\n          calc(4 * var(--spacing));\n        font-size: calc(4 * var(--spacing));\n        font-weight: normal;\n      }\n      .list-item .title-row .name {\n        font-size: calc(5 * var(--spacing));\n      }\n      .list-item .title-row .size {\n        color: color-mix(in srgb, var(--color-base-content) 50%, transparent);\n      }\n      .list-item .iframe-wrapper {\n        overflow-x: auto;\n        width: 100%;\n        padding: 0 calc(4 * var(--spacing)) calc(4 * var(--spacing))\n          calc(4 * var(--spacing));\n      }\n      .list-item iframe {\n        border: calc(0.5 * var(--spacing)) solid\n          color-mix(in srgb, var(--color-base-content) 50%, transparent);\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"app\" class=\"app\"></div>\n    <script type=\"module\" src=\"/viteshot-assets/dashboard.ts\"><\/script>\n  </body>\n</html>\n";
 
 //#endregion
 //#region src/templates/screenshot.html?raw
-var screenshot_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Screenshot</title>\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"app\" class=\"app\"></div>\n    <script type=\"module\">\n      import { renderScreenshot } from \"/viteshot-virtual/render-screenshot/{{screenshot.id}}\";\n      import messages from \"/viteshot-virtual/messages/{{locale.id}}\";\n\n      renderScreenshot(app, messages);\n    <\/script>\n  </body>\n</html>\n";
+var screenshot_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Screenshot</title>\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"app\" class=\"app\"></div>\n    <script type=\"module\">\n      console.log(\"TEST\", location.pathname);\n      import { renderScreenshot } from \"/viteshot-virtual/render-screenshot/{{screenshot.id}}.js\";\n      import messages from \"/viteshot-virtual/messages/{{locale.id}}\";\n      console.log({ messages, renderScreenshot });\n\n      renderScreenshot(app, messages);\n    <\/script>\n  </body>\n</html>\n";
 
 //#endregion
 //#region src/templates/render-html-screenshot.js?raw
-var render_html_screenshot_default = "import HTML from \"/@fs/{{path}}?raw\";\n\nexport function renderScreenshot(container, messages) {\n  container.innerHTML = Object.entries(messages).reduce(\n    (text, [key, value]) => text.replaceAll(`{{${key}}}`, value),\n    HTML,\n  );\n}\n";
+var render_html_screenshot_default = "import HTML from \"/@fs/{{path}}?raw\";\n\nexport function renderScreenshot(container, messages) {\n  container.innerHTML = Object.entries(messages).reduce(\n    (text, [key, value]) =>\n      text.replace(new RegExp(`\\\\{\\\\{\\\\s*?${key}\\\\s*?\\\\}\\\\}`, \"g\"), value),\n    HTML,\n  );\n}\n";
+
+//#endregion
+//#region src/templates/render-vue-screenshot.js?raw
+var render_vue_screenshot_default = "import Component from \"/@fs/{{path}}\";\nimport { createApp } from \"vue\";\n\nexport function renderScreenshot(container, messages) {\n  const app = createApp(Component, { t: messages });\n  app.mount(container);\n}\n";
+
+//#endregion
+//#region src/templates/render-react-screenshot.js?raw
+var render_react_screenshot_default = "import Component from \"/@fs/{{path}}\";\nimport { createElement } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nexport function renderScreenshot(container, messages) {\n  const root = createRoot(container);\n  root.render(createElement(Component, { t: messages }));\n}\n";
+
+//#endregion
+//#region src/templates/render-svelte-screenshot.js?raw
+var render_svelte_screenshot_default = "import Component from \"/@fs/{{path}}\";\nimport { mount } from \"svelte\";\n\nexport function renderScreenshot(container, messages) {\n  console.log(\"svelte\", container);\n\n  const app = mount(Component, {\n    target: container,\n    props: { t: messages },\n  });\n  console.log(app);\n}\n";
 
 //#endregion
 //#region src/utils.ts
@@ -86,7 +98,13 @@ const VIRTUAL_LOCALES_FILTER = { id: [/viteshot-virtual\/locales/] };
 function applyTemplateVars(template, vars) {
 	return Object.entries(vars).reduce((template, [key, value]) => template.replaceAll(`{{${key}}}`, value), template);
 }
-const RENDER_SCREENSHOT_JS_TEMPLATES = { ".html": render_html_screenshot_default };
+const RENDER_SCREENSHOT_JS_TEMPLATES = {
+	".html": render_html_screenshot_default,
+	".vue": render_vue_screenshot_default,
+	".tsx": render_react_screenshot_default,
+	".jsx": render_react_screenshot_default,
+	".svelte": render_svelte_screenshot_default
+};
 const resolverPlugin = (config) => [
 	{
 		name: "viteshot:resolve-favicon",
@@ -164,7 +182,7 @@ const resolverPlugin = (config) => [
 		load: {
 			filter: { id: [/^\/viteshot-virtual\/render-screenshot/] },
 			handler: (id) => {
-				const screenshotId = decodeURIComponent(id.slice(36));
+				const screenshotId = decodeURIComponent(id.slice(36, -3));
 				if (!screenshotId) throw Error(`Required query param "id" not provided for ${id}`);
 				const ext = extname(screenshotId);
 				const path = join(config.designsDir, screenshotId);
@@ -193,7 +211,7 @@ function defineConfig(config) {
 	return config;
 }
 async function importConfig(root) {
-	const configFileUrl = pathToFileURL(join(root, "viteshot.config")).href;
+	const configFileUrl = pathToFileURL(join(root, "viteshot.config.ts")).href;
 	try {
 		return (await import(configFileUrl)).default ?? {};
 	} catch (err) {
@@ -203,15 +221,15 @@ async function importConfig(root) {
 }
 async function resolveConfig(dir = process.cwd()) {
 	const root = resolve(dir);
-	const { localesDir: _localesDir, designsDir: _designsDir, screenshotsDir: _screenshotsDir, screenshotsConcurrency: _screenshotsConcurrency, ...vite } = await importConfig(root);
-	const designsDir = _designsDir ? resolve(root, _designsDir) : join(root, "designs");
-	const screenshotsDir = _screenshotsDir ? resolve(root, _screenshotsDir) : join(root, "screenshots");
+	const { screenshots: _screenshots, ...vite } = await importConfig(root);
+	const designsDir = _screenshots?.designsDir ? resolve(root, _screenshots.designsDir) : join(root, "designs");
+	const screenshotsDir = _screenshots?.screenshotsDir ? resolve(root, _screenshots.screenshotsDir) : join(root, "screenshots");
 	const config = {
 		root,
-		localesDir: _localesDir ? resolve(root, _localesDir) : join(root, "locales"),
+		localesDir: _screenshots?.localesDir ? resolve(root, _screenshots.localesDir) : join(root, "locales"),
 		designsDir,
 		screenshotsDir,
-		screenshotsConcurrency: _screenshotsConcurrency || 1,
+		renderConcurrency: _screenshots?.renderConcurrency || 4,
 		vite: {
 			...vite,
 			configFile: false
@@ -251,16 +269,22 @@ async function generateScreenshots(dir) {
 		server = await createServer(config.vite);
 		server.listen();
 		const { port } = server.config.server;
-		browser = await puppeteer.launch({ executablePath: process.env.VITESHOT_CHROME_PATH });
+		browser = await puppeteer.launch({
+			executablePath: process.env.VITESHOT_CHROME_PATH,
+			...config.puppeteer?.launchOptions
+		});
 		const screenshotMutex = new Mutex();
 		await pMap(screenshots.flatMap((screenshot) => locales.map((locale) => ({
 			screenshot,
 			locale
 		}))), async ({ screenshot, locale }) => {
-			const outputId = (locale ? `${locale.language}/` : "") + screenshot.id.slice(0, -screenshot.ext.length) + ".webp";
+			const outputId = (locale ? `${locale.language}/` : "") + screenshot.name + ".webp";
 			const outputPath = join(config.screenshotsDir, outputId);
 			await mkdir(dirname(outputPath), { recursive: true });
-			const page = await browser.newPage({ background: true });
+			const page = await browser.newPage({
+				background: true,
+				...config.puppeteer?.newPageOptions
+			});
 			await page.goto(`http://localhost:${port}/screenshot/${locale?.id ?? "null"}/${screenshot.id}`, {
 				waitUntil: "networkidle0",
 				timeout: 5e3
@@ -269,21 +293,22 @@ async function generateScreenshots(dir) {
 				await page.bringToFront();
 				await page.screenshot({
 					captureBeyondViewport: true,
+					type: "webp",
+					quality: 100,
+					...config.puppeteer?.screenshotOptions,
 					clip: {
 						x: 0,
 						y: 0,
 						width: screenshot.width,
 						height: screenshot.height
 					},
-					type: "webp",
-					quality: 100,
 					path: outputPath
 				});
 			});
 			console.log(`  ✅ \x1b[2m./${relative(cwd, config.screenshotsDir)}/\x1b[0m\x1b[36m${outputId}\x1b[0m`);
-			await page.close();
+			await page.close({ runBeforeUnload: false });
 		}, {
-			concurrency: config.screenshotsConcurrency,
+			concurrency: config.renderConcurrency,
 			stopOnError: true
 		});
 	} catch (err) {

package/dist/index.d.mts

@@ -1,11 +1,25 @@
 import { InlineConfig as InlineConfig$1, UserConfig as UserConfig$1, ViteDevServer } from "vite";
+import { CreatePageOptions, LaunchOptions, ScreenshotOptions } from "puppeteer-core";
 
 //#region src/core/config.d.ts
+type PuppeteerOptions = {
+  launchOptions?: LaunchOptions;
+  newPageOptions?: CreatePageOptions;
+  screenshotOptions?: Omit<ScreenshotOptions, "clip" | "path">;
+};
 type UserConfig = UserConfig$1 & {
-  localesDir?: string;
-  designsDir?: string;
-  screenshotsDir?: string;
-  screenshotsConcurrency?: number;
+  screenshots?: {
+    /** @default "locales" */localesDir?: string; /** @default "designs" */
+    designsDir?: string; /** @default "screenshots" */
+    screenshotsDir?: string;
+    /**
+     * How many screenshots can be generated concurrently.
+     *
+     * @default 4
+     */
+    renderConcurrency?: number; /** Override the options passed into puppeteer. */
+    puppeteer?: PuppeteerOptions;
+  };
 };
 type InlineConfig = UserConfig & {
   root: string;
@@ -15,7 +29,8 @@ type ResolvedConfig = {
   localesDir: string;
   designsDir: string;
   screenshotsDir: string;
-  screenshotsConcurrency: number;
+  renderConcurrency: number;
+  puppeteer?: PuppeteerOptions;
   vite: InlineConfig$1;
 };
 declare function defineConfig(config: UserConfig): UserConfig;
@@ -40,4 +55,4 @@ type Screenshot = {
 };
 declare function getScreenshots(designsDir: string): Promise<Screenshot[]>;
 //#endregion
-export { InlineConfig, ResolvedConfig, Screenshot, UserConfig, createServer, defineConfig, generateScreenshots, getScreenshots, resolveConfig };
+export { InlineConfig, PuppeteerOptions, ResolvedConfig, Screenshot, UserConfig, createServer, defineConfig, generateScreenshots, getScreenshots, resolveConfig };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { a as getScreenshots, i as resolveConfig, n as createServer, r as defineConfig, t as generateScreenshots } from "./generate-screenshots-bbolMzf5.mjs";
+import { a as getScreenshots, i as resolveConfig, n as createServer, r as defineConfig, t as generateScreenshots } from "./generate-screenshots-W20DkMBq.mjs";
 
 export { createServer, defineConfig, generateScreenshots, getScreenshots, resolveConfig };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aklinker1/viteshot",
-  "description": "Build and generate store screenshots and promo images with code, powered by Vite",
-  "version": "0.1.0",
+  "description": "Generate store screenshots and promo images with code, powered by Vite",
+  "version": "0.2.0",
   "type": "module",
   "packageManager": "bun@1.3.9",
   "scripts": {
@@ -11,6 +11,8 @@
     "build": "tsdown src/index.ts src/cli.ts"
   },
   "dependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.5",
     "async-mutex": "^0.5.0",
     "natural-compare-lite": "^1.4.0",
     "p-map": "^7.0.4",
@@ -18,12 +20,18 @@
     "puppeteer-core": "^24.37.5"
   },
   "peerDependencies": {
-    "vite": "^5 || ^6 || ^7"
+    "vite": ">=5",
+    "vue": ">=3",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "svelte": ">=5"
   },
   "devDependencies": {
     "@aklinker1/check": "^2.2.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@types/bun": "latest",
     "@types/natural-compare-lite": "^1.4.2",
+    "@types/react": "^19.2.14",
     "@typescript/native-preview": "^7.0.0-dev.20260223.1",
     "oxlint": "^1.50.0",
     "prettier": "^3.8.1",
@@ -31,8 +39,7 @@
     "publint": "^0.3.17",
     "puppeteer": "^24.37.5",
     "tsdown": "^0.20.3",
-    "typescript": "^5",
-    "vite": "^7.3.1"
+    "typescript": "^5"
   },
   "types": "dist/index.d.mts",
   "module": "dist/index.mjs",
@@ -42,8 +49,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.mjs"
     }
   },
   "license": "MIT",