@kernocal/viteshot 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aaron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @kernocal/viteshot
+
+Generate store screenshots and promo images with HTML, powered by Vite.
+
+> Fork of [@aklinker1/viteshot](https://github.com/aklinker1/viteshot)
+
+
+## lots of stuff is hardcoded for me, sorry!
+
+you can probably change it in `src/core/config.ts`
+
+also it uses pnpm now careful

package/assets/dashboard.ts

@@ -0,0 +1,197 @@
+/** Main JS module for displaying the different screenshots */
+import screenshots from "viteshot-virtual/screenshots";
+import locales from "viteshot-virtual/locales";
+
+declare const app: HTMLDivElement;
+
+// 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>`;
+
+// Language management
+
+const LANGUAGE_STORAGE_KEY = "viteshot:language";
+
+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;
+
+  return prevId;
+}
+function setLanguage(languageId: string): void {
+  currentLanguageId = languageId;
+  localStorage.setItem(LANGUAGE_STORAGE_KEY, languageId);
+}
+
+// Theme
+
+const THEME_STORAGE_KEY = "viteshot:theme";
+
+let currentTheme: string = getStoredTheme() ?? "dark";
+
+function getStoredTheme() {
+  const prevTheme = localStorage.getItem(THEME_STORAGE_KEY);
+  if (prevTheme !== "light" && prevTheme !== "dark") return;
+
+  return prevTheme;
+}
+function toggleTheme(): void {
+  const theme = currentTheme === "dark" ? "light" : "dark";
+
+  currentTheme = theme;
+  updateTheme();
+  localStorage.setItem(THEME_STORAGE_KEY, theme);
+}
+function updateTheme() {
+  document.documentElement.setAttribute("data-theme", currentTheme);
+}
+
+// UI Rendering
+
+type Child = string | HTMLElement | SVGElement | false | undefined | null;
+
+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);
+    }
+  }
+
+  if (children) {
+    for (const child of children) {
+      if (child != null && child !== false) el.append(child);
+    }
+  }
+
+  return el;
+}
+
+function svg(outerHtml: string): SVGElement {
+  const temp = document.createElement("div");
+  temp.innerHTML = outerHtml;
+  return temp.firstElementChild as SVGElement;
+}
+
+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),
+      ]),
+    ]),
+  );
+}
+
+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)}.html`,
+            },
+            [],
+          ),
+        ]),
+      ]),
+    ),
+  );
+
+  if (existingUl) {
+    existingUl.replaceWith(newUl);
+  } else {
+    app.append(newUl);
+  }
+}
+
+updateTheme();
+renderHeader();
+renderScreenshots();

package/dist/capture-extension-screenshots-DQWqq69W.mjs

@@ -0,0 +1,180 @@
+import { t as getLocales } from "./get-locales-DgKRepYE.mjs";
+import { join, relative, resolve } from "node:path";
+import { readdir } from "node:fs/promises";
+import natsort from "natural-compare-lite";
+import { styleText } from "node:util";
+import puppeteer from "puppeteer-core";
+
+//#region src/core/get-screenshots.ts
+const FILENAME_REGEX = /^(?<name>.*?)@(?<size>(?<width>[0-9]+)x(?<height>[0-9]+)).(?<ext>.*)$/;
+async function getScreenshots(designsDir) {
+	return (await readdir(designsDir, {
+		recursive: true,
+		withFileTypes: true
+	})).filter((file) => file.isFile()).map((file) => {
+		const match = FILENAME_REGEX.exec(file.name);
+		if (!match) return;
+		const path = join(file.parentPath, file.name);
+		const name = match.groups.name;
+		const size = match.groups.size;
+		const width = Number(match.groups.width);
+		const height = Number(match.groups.height);
+		const ext = match.groups.ext;
+		return {
+			id: relative(designsDir, path),
+			path,
+			ext,
+			name,
+			size,
+			width,
+			height
+		};
+	}).filter((file) => file != null).toSorted((a, b) => natsort(a.id, b.id));
+}
+async function logInvalidDesignFiles(designsDir) {
+	const invalid = (await readdir(designsDir, {
+		recursive: true,
+		withFileTypes: true
+	})).filter((file) => file.isFile()).map((file) => FILENAME_REGEX.exec(file.name) ? void 0 : file).filter((file) => file != null).map((file) => file.name);
+	if (invalid.length > 0) console.warn(`${styleText(["bold", "yellow"], "Invalid design file names:")}\n  - ${invalid.join("\n  - ")}`);
+}
+
+//#endregion
+//#region src/core/capture-extension-screenshots.ts
+/**
+* Capture popup/sidebar/options screenshots for a single locale.
+* Pass `language: "_default"` (or omit) to capture without `--lang`.
+*/
+async function captureLocale(options) {
+	const language = options.language ?? "_default";
+	const waitSelector = options.waitSelector ?? "body";
+	const settleDelay = options.settleDelay ?? 300;
+	if (language !== "_default") console.log(`  \x1b[1m[${language}]\x1b[0m Capturing extension screenshots...`);
+	else console.log(`  Capturing extension screenshots...`);
+	let browser;
+	try {
+		browser = await puppeteer.launch({
+			executablePath: options.chromePath,
+			headless: false,
+			args: [
+				`--disable-extensions-except=${options.extensionPath}`,
+				`--load-extension=${options.extensionPath}`,
+				"--window-size=1280,800",
+				...language !== "_default" ? [`--lang=${language}`] : []
+			]
+		});
+		const page = (await browser.pages())[0] ?? await browser.newPage();
+		await page.goto("data:text/html,<h1>viteshot</h1>");
+		const client = await page.createCDPSession();
+		const extensionId = await new Promise((resolve, reject) => {
+			const timeout = setTimeout(() => reject(/* @__PURE__ */ new Error("Timed out waiting for extension to load")), 2e4);
+			const poll = async () => {
+				const { targetInfos } = await client.send("Target.getTargets");
+				const ext = targetInfos.find((t) => t.url.startsWith("chrome-extension://"));
+				if (ext) {
+					clearTimeout(timeout);
+					resolve(new URL(ext.url).hostname);
+				} else setTimeout(poll, 200);
+			};
+			poll();
+		});
+		await client.detach();
+		console.log(`  Extension ID: ${extensionId}`);
+		await page.goto("https://example.com", {
+			waitUntil: "domcontentloaded",
+			timeout: 2e4
+		});
+		await new Promise((r) => setTimeout(r, 1e3));
+		const captured = {};
+		let hasPopup = false;
+		let hasSidebar = false;
+		try {
+			const worker = await (await browser.waitForTarget((target) => target.type() === "service_worker" && target.url().includes(`chrome-extension://${extensionId}`), { timeout: 1e4 })).worker();
+			if (!worker) throw new Error("Service worker not available");
+			await worker.evaluate("chrome.action.openPopup()");
+			const popupPage = await (await browser.waitForTarget((target) => target.type() === "page" && target.url().includes(`chrome-extension://${extensionId}`), { timeout: 5e3 })).asPage();
+			await popupPage.waitForSelector(waitSelector);
+			await new Promise((r) => setTimeout(r, settleDelay));
+			captured.popup = await popupPage.screenshot({
+				type: "png",
+				fullPage: true
+			});
+			hasPopup = true;
+			console.log(`  ✅ popup captured`);
+		} catch {
+			console.log("  ⚠ No popup action found");
+		}
+		try {
+			const sidebarPage = await browser.newPage();
+			const sidePanelUrl = `chrome-extension://${extensionId}/sidepanel.html`;
+			const response = await sidebarPage.goto(sidePanelUrl, {
+				waitUntil: "domcontentloaded",
+				timeout: 5e3
+			});
+			if (!response || !response.ok()) throw new Error("No sidebar");
+			await sidebarPage.waitForSelector(waitSelector);
+			await new Promise((r) => setTimeout(r, settleDelay));
+			captured.sidebar = await sidebarPage.screenshot({
+				type: "png",
+				fullPage: true
+			});
+			hasSidebar = true;
+			console.log(`  ✅ sidebar captured`);
+		} catch {
+			console.log("  ⚠ No sidebar found");
+		}
+		if (!hasPopup && !hasSidebar) console.warn("\n  \x1B[33m⚠⚠⚠ WARNING: Extension has neither a popup nor a sidebar!\x1B[0m\n");
+		try {
+			const optionsPage = await browser.newPage();
+			const optionsUrl = `chrome-extension://${extensionId}/options.html`;
+			const response = await optionsPage.goto(optionsUrl, {
+				waitUntil: "domcontentloaded",
+				timeout: 5e3
+			});
+			if (response && response.ok()) {
+				await optionsPage.waitForSelector(waitSelector);
+				await new Promise((r) => setTimeout(r, settleDelay));
+				captured.options = await optionsPage.screenshot({
+					type: "png",
+					fullPage: true
+				});
+				console.log(`  ✅ options captured`);
+			}
+		} catch {
+			console.log("  ⚠ No options found");
+		}
+		return captured;
+	} catch (err) {
+		if (err?.message === "An `executablePath` or `channel` must be specified for `puppeteer-core`") throw new Error("Chromium not detected. Set the VITESHOT_CHROME_PATH env var to your Chromium executable.");
+		else throw err;
+	} finally {
+		await browser?.close().catch(() => {});
+	}
+}
+/**
+* Capture popup/sidebar/options screenshots for all locales (batch).
+* Used by the `export` command.
+*/
+async function captureExtensionScreenshots(options) {
+	const cwd = process.cwd();
+	const extensionPath = resolve(cwd, options.extensionPath);
+	const locales = options.localesDir ? await getLocales(resolve(cwd, options.localesDir)) : [];
+	const languages = locales.length > 0 ? locales.map((l) => l.language) : ["_default"];
+	console.log(`\n\x1b[1mCapturing extension screenshots${locales.length > 0 ? ` for ${locales.length} locales` : ""}...\x1b[0m\n`);
+	const result = /* @__PURE__ */ new Map();
+	for (const language of languages) {
+		const captured = await captureLocale({
+			extensionPath,
+			chromePath: options.chromePath,
+			language,
+			waitSelector: options.waitSelector,
+			settleDelay: options.settleDelay
+		});
+		result.set(language, captured);
+	}
+	console.log("");
+	return result;
+}
+
+//#endregion
+export { logInvalidDesignFiles as i, captureLocale as n, getScreenshots as r, captureExtensionScreenshots as t };

package/dist/cli.mjs

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+import { styleText } from "node:util";
+
+//#region src/cli.ts
+const DEFAULT_DIR = "store";
+const [command, ...args] = process.argv.slice(2);
+const showHelp = process.argv.includes("--help") || process.argv.includes("-h");
+function getFlag(name) {
+	const prefix = `--${name}=`;
+	return args.find((a) => a.startsWith(prefix))?.slice(prefix.length);
+}
+switch (command) {
+	case "dev": {
+		const { DEV_HELP_MESSAGE } = await import("./help-messages-B_-FA6OE.mjs");
+		if (showHelp) {
+			console.log(DEV_HELP_MESSAGE);
+			process.exit(0);
+		}
+		const { createServer } = await import("./create-server-DwNGwEEV.mjs");
+		const server = await createServer(args[0] ?? DEFAULT_DIR);
+		await server.listen();
+		server.printUrls();
+		break;
+	}
+	case "export": {
+		const { EXPORT_HELP_MESSAGE } = await import("./help-messages-B_-FA6OE.mjs");
+		if (showHelp) {
+			console.log(EXPORT_HELP_MESSAGE);
+			process.exit(0);
+		}
+		const dir = args[0] ?? DEFAULT_DIR;
+		const { resolveConfig } = await import("./config-Cs-Dm27M.mjs");
+		const config = await resolveConfig(dir);
+		config.chromePath = getFlag("chromePath") ?? config.chromePath;
+		const { exportScreenshots } = await import("./export-screenshots-B77VFVWT.mjs");
+		await exportScreenshots(config);
+		process.exit(0);
+	}
+	case "popup": {
+		const { POPUP_HELP_MESSAGE } = await import("./help-messages-B_-FA6OE.mjs");
+		if (showHelp) {
+			console.log(POPUP_HELP_MESSAGE);
+			process.exit(0);
+		}
+		const { exportPopupScreenshot } = await import("./export-popup-screenshot-Dp7G2Ylf.mjs");
+		await exportPopupScreenshot({
+			extensionPath: getFlag("extension-path") ?? ".output/chrome-mv3",
+			chromePath: getFlag("chromePath"),
+			outputDir: getFlag("output"),
+			waitSelector: getFlag("wait-selector"),
+			settleDelay: getFlag("settle-delay") ? Number(getFlag("settle-delay")) : void 0
+		});
+		process.exit(0);
+	}
+	case "init": {
+		const { INIT_HELP_MESSAGE } = await import("./help-messages-B_-FA6OE.mjs");
+		if (showHelp) {
+			console.log(INIT_HELP_MESSAGE);
+			process.exit(0);
+		}
+		const { init } = await import("./init-BUrgR61N.mjs");
+		await init(args[0] ?? DEFAULT_DIR);
+		process.exit(0);
+	}
+	default: {
+		const { GENERAL_HELP_MESSAGE } = await import("./help-messages-B_-FA6OE.mjs");
+		if (showHelp) {
+			console.log(GENERAL_HELP_MESSAGE);
+			process.exit(0);
+		}
+		console.log(`${GENERAL_HELP_MESSAGE}\n\nUnknown command: ${styleText("yellow", command || "<none>")}`);
+		process.exit(1);
+	}
+}
+
+//#endregion
+export {  };