create-addfox-app 0.1.1-beta.7 → 0.1.1

package/README.md

@@ -15,4 +15,4 @@ Interactive scaffolder: generates a addfox-based extension project from options
 
 ## Templates
 
-Scaffold templates live at **repo root** in **`templates/`** (e.g. `template-vanilla-ts`, `template-react-ts`). The CLI downloads the chosen template from the GitHub repo tarball, so the repo must have `templates/` at root and committed. The npm package does not bundle templates; it fetches from GitHub at scaffold time.
+Scaffold templates ship inside this package under **`templates/`** (e.g. `template-vanilla-ts`, `template-react-ts`). They are included in the published npm tarball; the CLI copies the chosen folder into your new project (no remote download). The template’s **`addfox.config`** (including `manifest`) is **preserved**; the CLI only **merges** Rsbuild Less/Sass plugins when those style engines are selected. If no config file exists, a full fallback config is generated.

package/dist/cli.js

@@ -1,82 +1,93 @@
 #!/usr/bin/env node
-import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
-import { dirname, join, relative, resolve } from "node:path";
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve as external_node_path_resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createRequire } from "node:module";
 import { execSync } from "node:child_process";
 import prompts from "prompts";
 import { blue, cyan, dim, gray, green, lightBlue, magenta, red, trueColor, yellow } from "kolorist";
 import minimist from "minimist";
-import { gunzipSync } from "node:zlib";
+import { cp, mkdir } from "node:fs/promises";
 import { detectPackageManager, getExecCommand, getInstallCommand, getRunCommand } from "@addfox/pkg-manager";
-const GITHUB_REPO = "addfox/addfox";
 const TEMPLATE_BASE = "templates";
-function getRepoRoot() {
-    const fromDist = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "..");
-    return fromDist;
-}
-function tryLocalTemplates(templateName, destDir) {
-    const repoRoot = getRepoRoot();
-    const templatePath = join(repoRoot, TEMPLATE_BASE, templateName);
-    if (!existsSync(templatePath)) return false;
-    mkdirSync(destDir, {
+function getPackageRoot() {
+    return external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..");
+}
+function getBundledTemplatesDir() {
+    return join(getPackageRoot(), TEMPLATE_BASE);
+}
+function hasLocalTemplate(templateName) {
+    return existsSync(join(getBundledTemplatesDir(), templateName));
+}
+const SKIP_RELATIVE_SEGMENTS = new Set([
+    "node_modules",
+    ".git",
+    ".pnpm"
+]);
+function shouldCopyLocalTemplatePath(src, templateRoot) {
+    const root = external_node_path_resolve(templateRoot);
+    const rel = relative(root, external_node_path_resolve(src));
+    if (rel.startsWith("..")) return true;
+    for (const part of rel.split(/[/\\]/))if (SKIP_RELATIVE_SEGMENTS.has(part)) return false;
+    return true;
+}
+async function copyBundledTemplate(templateName, destDir) {
+    const templatePath = join(getBundledTemplatesDir(), templateName);
+    if (!existsSync(templatePath)) throw new Error(`Bundled template "${templateName}" not found under create-addfox-app. Reinstall the package.`);
+    await mkdir(destDir, {
         recursive: true
     });
-    cpSync(templatePath, destDir, {
-        recursive: true
+    const resolvedTemplate = external_node_path_resolve(templatePath);
+    await cp(resolvedTemplate, destDir, {
+        recursive: true,
+        filter: (src)=>shouldCopyLocalTemplatePath(src, resolvedTemplate)
     });
-    return true;
-}
-function parseTarHeader(buf) {
-    if (buf.every((b)=>0 === b)) return null;
-    const rawName = buf.subarray(0, 100).toString("utf8").replace(/\0+$/, "");
-    const sizeStr = buf.subarray(124, 136).toString("utf8").replace(/\0+$/, "").trim();
-    const type = String.fromCharCode(buf[156]);
-    const prefix = buf.subarray(345, 500).toString("utf8").replace(/\0+$/, "");
-    return {
-        name: prefix ? `${prefix}/${rawName}` : rawName,
-        size: parseInt(sizeStr, 8) || 0,
-        type
-    };
 }
-function extractMatchingFiles(tarBuffer, templatePrefix, destDir) {
-    let offset = 0;
-    while(offset + 512 <= tarBuffer.length){
-        const header = parseTarHeader(tarBuffer.subarray(offset, offset + 512));
-        offset += 512;
-        if (!header) break;
-        const dataBlocks = 512 * Math.ceil(header.size / 512);
-        const idx = header.name.indexOf(templatePrefix);
-        if (-1 !== idx) {
-            const relativePath = header.name.substring(idx + templatePrefix.length).replace(/^\//, "");
-            if (relativePath) {
-                const destPath = join(destDir, relativePath);
-                const isDir = "5" === header.type || relativePath.endsWith("/");
-                if (isDir) mkdirSync(destPath, {
-                    recursive: true
-                });
-                else if ("0" === header.type || "\0" === header.type) {
-                    mkdirSync(dirname(destPath), {
-                        recursive: true
-                    });
-                    writeFileSync(destPath, tarBuffer.subarray(offset, offset + header.size));
-                }
-            }
-        }
-        offset += dataBlocks;
-    }
+const FRAMES = [
+    "⠋",
+    "⠙",
+    "⠹",
+    "⠸",
+    "⠼",
+    "⠴",
+    "⠦",
+    "⠧",
+    "⠇",
+    "⠏"
+];
+const INTERVAL_MS = 80;
+function clearSpinnerLine() {
+    process.stdout.write("\r\x1b[K");
 }
-async function downloadTemplate(templateName, destDir, branch = "main") {
-    const url = `https://codeload.github.com/${GITHUB_REPO}/tar.gz/${branch}`;
-    const templatePrefix = `${TEMPLATE_BASE}/${templateName}/`;
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    const compressed = Buffer.from(await response.arrayBuffer());
-    const tarBuffer = gunzipSync(compressed);
-    mkdirSync(destDir, {
-        recursive: true
+function sleep(ms) {
+    return new Promise((resolve)=>{
+        setTimeout(resolve, ms);
     });
-    extractMatchingFiles(tarBuffer, templatePrefix, destDir);
+}
+async function runWithTemplateSpinner(label, fn, options) {
+    const minVisibleMs = options?.minVisibleMs ?? 0;
+    if (!process.stdout.isTTY) {
+        console.log(yellow(`\n  ${label}\n`));
+        return fn();
+    }
+    let frameIndex = 0;
+    process.stdout.write("\n");
+    const timer = setInterval(()=>{
+        const frame = FRAMES[frameIndex % FRAMES.length];
+        frameIndex += 1;
+        process.stdout.write(`\r  ${yellow(frame)} ${label}`);
+    }, INTERVAL_MS);
+    const startedAt = Date.now();
+    try {
+        const result = await fn();
+        const elapsed = Date.now() - startedAt;
+        if (elapsed < minVisibleMs) await sleep(minVisibleMs - elapsed);
+        return result;
+    } finally{
+        clearInterval(timer);
+        clearSpinnerLine();
+        process.stdout.write("\n");
+    }
 }
 const STYLE_ENGINES = [
     {
@@ -233,7 +244,7 @@ function getStylePlugin(engine) {
     };
     return null;
 }
-const MINIMAL_MANIFEST = '  name: "My Extension",\n  version: "1.0.0",\n  manifest_version: 3,\n  description: "Browser extension built with addfox",\n  permissions: ["storage", "activeTab"],';
+const MINIMAL_MANIFEST = '  name: "My Extension",\n  version: "1.0.0",\n  manifest_version: 3,\n  description: "Browser extension built with addfox",\n  permissions: ["activeTab"],\n  icons: {\n    "16": "icons/icon_128.png",\n    "48": "icons/icon_128.png",\n    "128": "icons/icon_128.png",\n  },\n  action: {\n    default_icon: {\n      "16": "icons/icon_128.png",\n      "48": "icons/icon_128.png",\n      "128": "icons/icon_128.png",\n    },\n  },';
 function generateAddfoxConfig(framework, _language, styleEngine) {
     const importLines = [];
     const fwImport = getFrameworkPluginImport(framework);
@@ -261,6 +272,67 @@ function generateAddfoxConfig(framework, _language, styleEngine) {
     ];
     return parts.filter(Boolean).join("\n");
 }
+const MANIFEST_LINE = "  manifest: { chromium: manifest, firefox: { ...manifest } },";
+function findMatchingArrayClose(source, openBracketIdx) {
+    if ("[" !== source[openBracketIdx]) return -1;
+    let depth = 0;
+    for(let i = openBracketIdx; i < source.length; i++){
+        const c = source[i];
+        if ("[" === c) depth++;
+        else if ("]" === c) {
+            depth--;
+            if (0 === depth) return i;
+        }
+    }
+    return -1;
+}
+function hasImportFromModule(source, modulePath) {
+    return source.includes(`from "${modulePath}"`) || source.includes(`from '${modulePath}'`) || source.includes(`from \`${modulePath}\``);
+}
+function insertImportAfterLastImport(source, importLine) {
+    const trimmed = importLine.trim();
+    const moduleMatch = /from\s+["']([^"']+)["']/.exec(trimmed);
+    if (moduleMatch && hasImportFromModule(source, moduleMatch[1])) return source;
+    const lines = source.split("\n");
+    let lastImportIdx = -1;
+    for(let i = 0; i < lines.length; i++)if (lines[i].trim().startsWith("import ")) lastImportIdx = i;
+    if (-1 === lastImportIdx) return `${importLine}\n${source}`;
+    const next = [
+        ...lines
+    ];
+    next.splice(lastImportIdx + 1, 0, importLine);
+    return next.join("\n");
+}
+function pluginCallPresent(inner, call) {
+    const fn = call.replace(/\(\)$/, "");
+    return inner.includes(`${fn}(`);
+}
+function mergeCallsIntoPluginsArray(source, calls) {
+    const pluginsIdx = source.indexOf("plugins:");
+    if (-1 === pluginsIdx) return addPluginsBlockAfterManifest(source, calls);
+    const bracketStart = source.indexOf("[", pluginsIdx);
+    if (-1 === bracketStart) return source;
+    const bracketEnd = findMatchingArrayClose(source, bracketStart);
+    if (-1 === bracketEnd) return source;
+    let inner = source.slice(bracketStart + 1, bracketEnd).trim();
+    for (const c of calls)if (!pluginCallPresent(inner, c)) inner = inner ? `${inner}, ${c}` : c;
+    return source.slice(0, bracketStart + 1) + inner + source.slice(bracketEnd);
+}
+function addPluginsBlockAfterManifest(source, calls) {
+    const idx = source.indexOf(MANIFEST_LINE);
+    if (-1 === idx) return source;
+    const insertPos = idx + MANIFEST_LINE.length;
+    return `${source.slice(0, insertPos)}\n  plugins: [${calls.join(", ")}],${source.slice(insertPos)}`;
+}
+function mergeScaffoldIntoAddfoxConfig(source, styleEngine) {
+    const st = getStylePlugin(styleEngine);
+    if (!st) return source;
+    let out = insertImportAfterLastImport(source, st.importLine);
+    out = mergeCallsIntoPluginsArray(out, [
+        st.call
+    ]);
+    return out;
+}
 const UTF8_BOM = "\uFEFF";
 function stripUtf8Bom(text) {
     return text.startsWith(UTF8_BOM) ? text.slice(UTF8_BOM.length) : text;
@@ -346,10 +418,10 @@ function generateRstestConfig(language, testKinds) {
 }
 function writeUnitSample(root, language) {
     const ext = getTestExt(language);
-    mkdirSync(resolve(root, "__tests__"), {
+    mkdirSync(external_node_path_resolve(root, "__tests__"), {
         recursive: true
     });
-    const path = resolve(root, "__tests__", `example.test.${ext}`);
+    const path = external_node_path_resolve(root, "__tests__", `example.test.${ext}`);
     const body = "ts" === language ? `import { describe, expect, it } from "@rstest/core";
 
 describe("example unit tests", () => {
@@ -369,11 +441,11 @@ describe("example unit tests", () => {
 }
 function writeE2eSample(root, language) {
     const ext = getTestExt(language);
-    const dir = resolve(root, "__tests__", "e2e");
+    const dir = external_node_path_resolve(root, "__tests__", "e2e");
     mkdirSync(dir, {
         recursive: true
     });
-    const path = resolve(dir, `example.browser.test.${ext}`);
+    const path = external_node_path_resolve(dir, `example.browser.test.${ext}`);
     const body = `import { describe, expect, it } from "@rstest/core";
 import { page } from "@rstest/browser";
 
@@ -410,7 +482,7 @@ function mergeScripts(pkg, testKinds) {
 function applyTestAndReportSetup(root, language, selection) {
     const { testKinds, installRsdoctor } = selection;
     if (0 === testKinds.length && !installRsdoctor) return;
-    const pkgPath = resolve(root, "package.json");
+    const pkgPath = external_node_path_resolve(root, "package.json");
     const pkg = readJsonFile(pkgPath);
     mergeDevDeps(pkg, testKinds, installRsdoctor);
     mergeScripts(pkg, testKinds);
@@ -418,22 +490,12 @@ function applyTestAndReportSetup(root, language, selection) {
     if (testKinds.length > 0) {
         const configName = "ts" === language ? "rstest.config.ts" : "rstest.config.js";
         const content = generateRstestConfig(language, testKinds);
-        writeFileSync(resolve(root, configName), content, "utf-8");
+        writeFileSync(external_node_path_resolve(root, configName), content, "utf-8");
         if (testKinds.includes("unit")) writeUnitSample(root, language);
         if (testKinds.includes("e2e")) writeE2eSample(root, language);
     }
 }
 const RESET = "\x1b[0m";
-const ORANGE = [
-    255,
-    118,
-    38
-];
-const PINK = [
-    255,
-    92,
-    186
-];
 const LOGO_LINES = [
     " █████╗ ██████╗ ██████╗ ███████╗ ██████╗ ██╗  ██╗",
     "██╔══██╗██╔══██╗██╔══██╗██╔════╝██╔═══██╗╚██╗██╔╝",
@@ -442,13 +504,15 @@ const LOGO_LINES = [
     "██║  ██║██████╔╝██████╔╝██║     ╚██████╔╝██╔╝ ██╗",
     "╚═╝  ╚═╝╚═════╝ ╚═════╝ ╚═╝      ╚═════╝ ╚═╝  ╚═╝"
 ];
-function lerpChannel(a, b, t) {
-    return Math.round(a + (b - a) * t);
+const GRADIENT_START_256 = 208;
+const GRADIENT_END_256 = 213;
+function shouldEmitAnsiColor() {
+    return !process.env.NO_COLOR;
 }
-function rgbFg(r, g, b) {
-    return `\x1b[38;2;${r};${g};${b}m`;
+function ansi256Fg(code) {
+    return `\x1b[38;5;${code}m`;
 }
-function colorizeLine(line) {
+function colorizeLineAnsi256(line) {
     const len = line.length;
     if (0 === len) return "";
     let out = "";
@@ -459,16 +523,20 @@ function colorizeLine(line) {
             continue;
         }
         const t = len <= 1 ? 0 : i / (len - 1);
-        const r = lerpChannel(ORANGE[0], PINK[0], t);
-        const g = lerpChannel(ORANGE[1], PINK[1], t);
-        const b = lerpChannel(ORANGE[2], PINK[2], t);
-        out += rgbFg(r, g, b) + ch;
+        const code = Math.round(GRADIENT_START_256 + t * (GRADIENT_END_256 - GRADIENT_START_256));
+        out += ansi256Fg(code) + ch;
     }
     return out + RESET;
 }
+function printPlainLogo() {
+    console.log("");
+    for (const line of LOGO_LINES)console.log(line);
+    console.log("");
+}
 function printAddfoxLogo() {
+    if (!shouldEmitAnsiColor()) return void printPlainLogo();
     console.log("");
-    for (const line of LOGO_LINES)console.log(colorizeLine(line));
+    for (const line of LOGO_LINES)console.log(colorizeLineAnsi256(line));
     console.log("");
 }
 const SKIP_STYLE_ENTRIES = new Set([
@@ -671,7 +739,7 @@ function getStyleEngineChoicesColored() {
 }
 function getVersion() {
     try {
-        const pkgPath = resolve(dirname(fileURLToPath(import.meta.url)), "..", "package.json");
+        const pkgPath = external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..", "package.json");
         const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
         return pkg.version ?? "0.0.0";
     } catch  {
@@ -841,7 +909,7 @@ function resolveTestSelectionFromArgv(argv) {
     };
 }
 function updatePackageName(destDir, projectName) {
-    const pkgPath = resolve(destDir, "package.json");
+    const pkgPath = external_node_path_resolve(destDir, "package.json");
     if (!existsSync(pkgPath)) return;
     const pkg = readJsonFile(pkgPath);
     pkg.name = projectName.replace(/\s+/g, "-").toLowerCase();
@@ -856,10 +924,14 @@ async function main() {
     const cliLanguage = argv.language;
     printAddfoxLogo();
     console.log(blue("\n  Create Addfox App\n"));
-    const root = resolve(process.cwd(), targetDir);
+    const root = external_node_path_resolve(process.cwd(), targetDir);
     if (existsSync(root)) {
         const confirmed = await confirmOverwrite(targetDir);
         if (!confirmed) process.exit(0);
+        rmSync(root, {
+            recursive: true,
+            force: true
+        });
     }
     const options = cliFramework && cliLanguage ? {
         framework: cliFramework,
@@ -875,11 +947,20 @@ async function main() {
     if (!testSelection) process.exit(0);
     const pm = options.packageManager;
     const templateName = getTemplateName(options.framework, options.language);
-    console.log(yellow("\n  Downloading template...\n"));
+    const templateReady = hasLocalTemplate(templateName);
+    const templateLabel = "Copying template...";
+    const TEMPLATE_SPINNER_MIN_MS = 800;
     try {
-        tryLocalTemplates(templateName, root) || await downloadTemplate(templateName, root);
+        await runWithTemplateSpinner(templateLabel, async ()=>{
+            await new Promise((resolveSpinner)=>{
+                setImmediate(resolveSpinner);
+            });
+            await copyBundledTemplate(templateName, root);
+        }, templateReady ? {
+            minVisibleMs: TEMPLATE_SPINNER_MIN_MS
+        } : void 0);
     } catch (err) {
-        console.error(red(`\n  Failed to download template: ${err.message}\n`));
+        console.error(red(`\n  Failed to copy template: ${err.message}\n`));
         process.exit(1);
     }
     const useAllEntries = options.entries.includes("__all__");
@@ -889,8 +970,12 @@ async function main() {
     ] : options.entries.filter((e)=>"__all__" !== e && existingDirs.includes(e));
     if (!useAllEntries && effectiveEntries.length > 0) filterAppEntries(root, effectiveEntries);
     const configExt = "ts" === options.language ? "ts" : "js";
-    const configPath = resolve(root, `addfox.config.${configExt}`);
-    const configContent = generateAddfoxConfig(options.framework, options.language, options.styleEngine);
+    const configPath = external_node_path_resolve(root, `addfox.config.${configExt}`);
+    let configContent;
+    if (existsSync(configPath)) {
+        const existing = readFileSync(configPath, "utf-8");
+        configContent = existing.trim().length > 0 && existing.includes("defineConfig") ? mergeScaffoldIntoAddfoxConfig(existing, options.styleEngine) : generateAddfoxConfig(options.framework, options.language, options.styleEngine);
+    } else configContent = generateAddfoxConfig(options.framework, options.language, options.styleEngine);
     writeFileSync(configPath, configContent, "utf-8");
     updatePackageName(root, targetDir);
     applyStyleEngine(root, options.framework, options.language, options.styleEngine);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-addfox-app",
-  "version": "0.1.1-beta.7",
+  "version": "0.1.1",
   "description": "Interactive scaffolder for addfox extension projects",
   "license": "MIT",
   "type": "module",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "templates",
     "LICENSE"
   ],
   "dependencies": {
@@ -16,12 +17,15 @@
     "prompts": "^2.4.2",
     "kolorist": "^1.8.0",
     "minimist": "^1.2.8",
-    "@addfox/pkg-manager": "0.1.1-beta.4"
+    "@addfox/pkg-manager": "0.1.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   },
   "devDependencies": {
-    "@rslib/core": "^0.20.0",
-    "@rstest/core": "^0.9.4",
-    "@rstest/coverage-istanbul": "^0.3.0",
+    "@rslib/core": "^0.21.3",
+    "@rstest/core": "^0.9.9",
+    "@rstest/coverage-istanbul": "^0.3.2",
     "@types/node": "^20.0.0",
     "typescript": "^5.0.0"
   },

package/templates/README.md

@@ -0,0 +1,3 @@
+# Scaffold templates
+
+Templates used by **create-addfox-app**. Each subdirectory (e.g. `template-vanilla-ts`, `template-react-ts`) is a full project skeleton. They live under this package and ship with the published npm tarball; the CLI copies the chosen folder into the new project directory.

package/templates/template-preact-js/AGENTS.md

@@ -0,0 +1,54 @@
+# AI Agent Guide - Preact Addfox Extension
+
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+
+## Project Overview
+
+Preact browser extension using Addfox build tool. Uses `@rsbuild/plugin-preact` for JSX support.
+
+## Key Configuration Fields (addfox.config.js)
+
+### Required Fields
+
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants
+  - Addfox auto-injects entry paths
+
+- **`plugins`** - Rsbuild plugins array
+  - Must include `pluginPreact()` for JSX support
+
+### Optional Fields (use when needed)
+
+- **`appDir`** - Source directory (default: "app")
+- **`outDir`** - Build output directory
+- **`entry`** - Manual entry mapping
+- **`hotReload`** - Dev server settings
+- **`debug`** - Enable debug logging
+- **`zip`** - Output zip configuration
+- **`rsbuild`** - Override Rsbuild configuration
+
+## Entry Structure
+
+Entries auto-discovered from `appDir` subdirectories. Each needs `index.jsx` as entry.
+
+## Framework-Specific Notes
+
+### Preact
+
+- JSX-based (`.jsx` files)
+- React-compatible API with smaller bundle size
+
+### Browser Extension APIs
+
+- Install `webextension-polyfill` for cross-browser compatibility
+
+### Styling
+
+- Supports CSS Modules
+- Content scripts: use `@addfox/utils` with Shadow DOM
+
+## Resources
+
+- Addfox docs: https://addfox.dev
+- Rsbuild Preact plugin: https://rsbuild.dev/plugins/list/plugin-preact
+- Preact docs: https://preactjs.com

package/templates/template-preact-js/addfox.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginPreact } from "@rsbuild/plugin-preact";
+
+const manifest = {
+  name: "My Extension",
+  version: "1.0.0",
+  manifest_version: 3,
+  description: "Browser extension built with addfox",
+  permissions: ["activeTab"],
+  icons: {
+    "16": "icons/icon_128.png",
+    "48": "icons/icon_128.png",
+    "128": "icons/icon_128.png",
+  },
+  action: {
+    default_icon: {
+      "16": "icons/icon_128.png",
+      "48": "icons/icon_128.png",
+      "128": "icons/icon_128.png",
+    },
+  },
+};
+
+export default defineConfig({
+  manifest: { chromium: manifest, firefox: { ...manifest } },
+  plugins: [pluginPreact()],
+});

package/templates/template-preact-js/app/background/index.js

@@ -0,0 +1,8 @@
+function openWelcomePage() {
+  chrome.tabs.create({ url: chrome.runtime.getURL("welcome.html") });
+}
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === "install" || details.reason === "update") openWelcomePage();
+  console.log("Extension installed");
+});

package/templates/template-preact-js/app/content/index.js

@@ -0,0 +1 @@
+console.log("Content script loaded");

package/templates/template-preact-js/app/options/App.jsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-js/app/options/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/app/popup/App.jsx

@@ -0,0 +1,31 @@
+import { h } from "preact";
+
+export default function App() {
+  const popupStyle = {
+    width: 320,
+    minHeight: 200,
+    padding: 16,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={{ fontSize: 18, fontWeight: 600 }}>AddFox Preact</div>
+      <a
+        href="https://addfox.dev/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ fontSize: 13, color: "#2563eb" }}
+      >
+        addfox.dev
+      </a>
+    </div>
+  );
+}

package/templates/template-preact-js/app/popup/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/app/sidepanel/App.jsx

@@ -0,0 +1,5 @@
+import { h } from "preact";
+
+export default function App() {
+  return <div>Hello from Preact</div>;
+}

package/templates/template-preact-js/app/sidepanel/index.jsx

@@ -0,0 +1,5 @@
+import { render, h } from "preact";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (root) render(h(App, null), root);

package/templates/template-preact-js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "^0.1.1",
+    "preact": "^10.29.0"
+  },
+  "devDependencies": {
+    "addfox": "^0.1.1",
+    "@rsbuild/plugin-preact": "^1.7.2"
+  }
+}