npm - create-addfox-app - Versions diffs - 0.1.1-beta.7 → 0.2.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"
+  }
+}

package/templates/template-preact-js/public/icons/icon_128.png ADDED Viewed

Binary file

package/templates/template-preact-js/public/welcome.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Preact</title>
+  <style>
+    body { font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #fafafa; color: #1a1a1a; }
+    h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
+    p { font-size: 1rem; color: #666; margin: 0; }
+    .welcome-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; border-radius: 12px; }
+  </style>
+</head>
+<body>
+  <img class="welcome-icon" src="/icons/icon_128.png" alt="" width="96" height="96" />
+  <h1>Addfox + Preact</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>

package/templates/template-preact-ts/AGENTS.md ADDED Viewed

@@ -0,0 +1,61 @@
+# 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.ts)
+### 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:
+- `app/background/` → Service Worker (index.ts)
+- `app/content/` → Content Script (index.ts)
+- `app/popup/` → Popup page (index.tsx + App.tsx)
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+## Framework-Specific Notes
+### Preact
+- JSX-based (`.tsx` files)
+- React-compatible API with smaller bundle size
+- TypeScript support enabled
+### 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-ts/addfox.config.ts ADDED Viewed

@@ -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-ts/app/background/index.ts ADDED Viewed

@@ -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-ts/app/content/index.ts ADDED Viewed

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

package/templates/template-preact-ts/app/options/App.tsx ADDED Viewed

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

package/templates/template-preact-ts/app/options/index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/app/popup/App.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { h } from "preact";
+export default function App() {
+  const popupStyle = {
+    width: 320,
+    minHeight: 200,
+    padding: 16,
+    boxSizing: "border-box" as const,
+    display: "flex",
+    flexDirection: "column" as const,
+    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-ts/app/popup/index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/app/sidepanel/App.tsx ADDED Viewed

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

package/templates/template-preact-ts/app/sidepanel/index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-preact-ts/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "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",
+    "typescript": "^5.9.3",
+    "@types/chrome": "^0.1.38"
+  }
+}

package/templates/template-preact-ts/public/icons/icon_128.png ADDED Viewed

Binary file

package/templates/template-preact-ts/public/welcome.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + Preact</title>
+  <style>
+    body { font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #fafafa; color: #1a1a1a; }
+    h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
+    p { font-size: 1rem; color: #666; margin: 0; }
+    .welcome-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; border-radius: 12px; }
+  </style>
+</head>
+<body>
+  <img class="welcome-icon" src="/icons/icon_128.png" alt="" width="96" height="96" />
+  <h1>Addfox + Preact</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>

package/templates/template-preact-ts/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": [
+      "chrome"
+    ]
+  },
+  "include": [
+    "app"
+  ]
+}

package/templates/template-react-js/AGENTS.md ADDED Viewed

@@ -0,0 +1,66 @@
+# AI Agent Guide - React Addfox Extension
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+## Project Overview
+React-based browser extension using Addfox build tool. Uses `@rsbuild/plugin-react` for JSX support and React Fast Refresh.
+## Key Configuration Fields (addfox.config.js)
+### Required Fields
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants for browser-specific differences
+  - Addfox auto-injects entry paths - don't hardcode them
+- **`plugins`** - Rsbuild plugins array
+  - Must include `pluginReact()` for JSX support
+### Optional Fields (use when needed)
+- **`appDir`** - Source directory (default: "app")
+- **`outDir`** - Build output directory (default: ".addfox/extension")
+- **`entry`** - Manual entry mapping (when auto-discovery fails)
+- **`hotReload`** - Dev server settings (port, auto-refresh)
+- **`debug`** - Enable debug logging
+- **`zip`** - Output zip configuration
+- **`rsbuild`** - Override Rsbuild configuration
+## Entry Structure
+Entries auto-discovered from `appDir` subdirectories:
+- `app/background/` → Service Worker
+- `app/content/` → Content Script
+- `app/popup/` → Popup page
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+- `app/devtools/` → DevTools page
+Each needs `index.jsx` as entry point.
+## Framework-Specific Notes
+### React/JSX
+- Files use `.jsx` extension
+- React Fast Refresh enabled in dev mode
+- JSX transform automatic
+### Browser Extension APIs
+- Install `webextension-polyfill` for cross-browser compatibility
+- Import: `import browser from "webextension-polyfill"`
+### Styling
+- Supports CSS Modules
+- Supports Tailwind if configured
+- Content scripts: use `@addfox/utils` with Shadow DOM for isolation
+## Resources
+- Addfox docs: https://addfox.dev
+- Rsbuild React plugin: https://rsbuild.dev/plugins/list/plugin-react
+- WebExtension API: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API

package/templates/template-react-js/addfox.config.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { defineConfig } from "addfox";
+import { pluginReact } from "@rsbuild/plugin-react";
+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: [pluginReact()],
+});

package/templates/template-react-js/app/background/index.js ADDED Viewed

@@ -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-react-js/app/content/index.js ADDED Viewed

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

package/templates/template-react-js/app/options/App.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>Hello from React</div>;
+}

package/templates/template-react-js/app/options/index.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-react-js/app/popup/App.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+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 React</div>
+      <a
+        href="https://addfox.dev/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ fontSize: 13, color: "#2563eb" }}
+      >
+        addfox.dev
+      </a>
+    </div>
+  );
+}

package/templates/template-react-js/app/popup/index.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-react-js/app/sidepanel/App.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>Hello from React</div>;
+}

package/templates/template-react-js/app/sidepanel/index.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<App />);

package/templates/template-react-js/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "0.1.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-react": "2.0.0"
+  }
+}

package/templates/template-react-js/public/icons/icon_128.png ADDED Viewed

Binary file

package/templates/template-react-js/public/welcome.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome - Addfox + React</title>
+  <style>
+    body { font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #fafafa; color: #1a1a1a; }
+    h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
+    p { font-size: 1rem; color: #666; margin: 0; }
+    .welcome-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; border-radius: 12px; }
+  </style>
+</head>
+<body>
+  <img class="welcome-icon" src="/icons/icon_128.png" alt="" width="96" height="96" />
+  <h1>Addfox + React</h1>
+  <p>Your extension is ready. Happy building!</p>
+  <p style="margin-top: 1rem;"><a href="https://addfox.dev/" target="_blank" rel="noopener noreferrer">addfox.dev</a></p>
+</body>
+</html>

package/templates/template-react-ts/AGENTS.md ADDED Viewed

@@ -0,0 +1,93 @@
+# AI Agent Guide - React Addfox Extension
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+## Project Overview
+React-based browser extension using Addfox build tool. Uses `@rsbuild/plugin-react` for JSX/TSX support and React Fast Refresh.
+## Key Configuration Fields (addfox.config.ts)
+### Required Fields
+- **`manifest`** - Extension manifest.json content
+  - Supports `chromium` and `firefox` variants for browser-specific differences
+  - Addfox auto-injects entry paths (popup, background, etc.) - don't hardcode them
+- **`plugins`** - Rsbuild plugins array
+  - Must include `pluginReact()` for JSX/TSX support
+  - Add other Rsbuild plugins as needed
+### Optional Fields (use when needed)
+- **`appDir`** - Source directory (default: "app")
+  - Change if source files are in a different folder
+- **`outDir`** - Build output directory (default: ".addfox/extension")
+  - Change for custom output location
+- **`entry`** - Manual entry point mapping
+  - Only needed when auto-discovery fails or custom structure
+- **`hotReload`** - Dev server settings
+  - `port`: WebSocket port (default: 23333)
+  - `autoRefreshContentPage`: Auto-refresh on content changes
+- **`debug`** - Enable debug logging (default: false)
+- **`zip`** - Output zip configuration for distribution
+- **`rsbuild`** - Override Rsbuild configuration directly
+## Entry Structure
+Entries auto-discovered from `appDir` subdirectories:
+- `app/background/` → Service Worker
+- `app/content/` → Content Script
+- `app/popup/` → Popup page
+- `app/options/` → Options page
+- `app/sidepanel/` → Side panel
+- `app/devtools/` → DevTools page
+Each needs `index.tsx` as entry point.
+## Framework-Specific Notes
+### React/JSX
+- Files use `.tsx` extension
+- React Fast Refresh enabled in dev mode
+- JSX transform automatic (no need to import React)
+### Browser Extension APIs
+- Install `webextension-polyfill` for cross-browser compatibility
+- Import: `import browser from "webextension-polyfill"`
+### Styling
+- Supports CSS Modules: `import styles from "./App.module.css"`
+- Supports Tailwind if configured
+- For content scripts: use `@addfox/utils` with Shadow DOM for isolation
+## Common Tasks
+Adding a new entry:
+1. Create `app/<entry-name>/index.tsx`
+2. Addfox auto-detects - no config change needed
+3. Reference in manifest if needed (paths auto-injected)
+Adding permissions:
+1. Edit `manifest.permissions` in config
+2. Firefox may need different permission format
+Cross-browser manifest differences:
+- Use `manifest.chromium` and `manifest.firefox` objects
+- Common fields go in both, differences separated
+## Resources
+- Addfox docs: https://addfox.dev
+- Rsbuild React plugin: https://rsbuild.dev/plugins/list/plugin-react
+- WebExtension API: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API