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

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

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

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

package/templates/template-react-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-react-ts/app/popup/App.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+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 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-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-react-ts/app/sidepanel/App.tsx ADDED Viewed

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

package/templates/template-react-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-react-ts/package.json ADDED Viewed

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

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

Binary file

package/templates/template-react-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 + 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/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-solid-js/AGENTS.md ADDED Viewed

@@ -0,0 +1,54 @@
+# AI Agent Guide - Solid Addfox Extension
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+## Project Overview
+SolidJS browser extension using Addfox build tool. Uses `@rsbuild/plugin-solid` for Solid 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 `pluginSolid()` for Solid 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
+### SolidJS
+- JSX-based (`.jsx` files)
+- Fine-grained reactivity with signals
+### 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 Solid plugin: https://rsbuild.dev/plugins/list/plugin-solid
+- Solid docs: https://www.solidjs.com

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

@@ -0,0 +1,28 @@
+import { defineConfig } from "addfox";
+import { pluginBabel } from "@rsbuild/plugin-babel";
+import { pluginSolid } from "@rsbuild/plugin-solid";
+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: [pluginBabel({ include: /\.(?:jsx|tsx)$/ }), pluginSolid()],
+});

package/templates/template-solid-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-solid-js/app/content/index.js ADDED Viewed

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

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

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

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

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => App(), root);

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

@@ -0,0 +1,34 @@
+export default function App() {
+  const popupStyle = {
+    width: "320px",
+    "min-height": "200px",
+    padding: "16px",
+    "box-sizing": "border-box",
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+    "justify-content": "center",
+    gap: "12px",
+    "font-family": 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+  const titleStyle = {
+    "font-size": "18px",
+    "font-weight": "600",
+  };
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={titleStyle}>AddFox Solid</div>
+      <a
+        href="https://addfox.dev/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ "font-size": "13px", color: "#2563eb" }}
+      >
+        addfox.dev
+      </a>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => App(), root);

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

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

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

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => App(), root);

package/templates/template-solid-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",
+    "solid-js": "^1.9.11"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-babel": "^1.2.0",
+    "@rsbuild/plugin-solid": "1.2.0"
+  }
+}

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

Binary file

package/templates/template-solid-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 + Solid</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 + Solid</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-solid-ts/AGENTS.md ADDED Viewed

@@ -0,0 +1,61 @@
+# AI Agent Guide - Solid Addfox Extension
+> **Priority**: Follow `.agents/skills/` first, then this guide, then [official docs](https://addfox.dev)
+## Project Overview
+SolidJS browser extension using Addfox build tool. Uses `@rsbuild/plugin-solid` for Solid 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 `pluginSolid()` for Solid 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
+### SolidJS
+- JSX-based (`.tsx` files)
+- Fine-grained reactivity with signals
+- 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 Solid plugin: https://rsbuild.dev/plugins/list/plugin-solid
+- Solid docs: https://www.solidjs.com

package/templates/template-solid-ts/addfox.config.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { defineConfig } from "addfox";
+import { pluginBabel } from "@rsbuild/plugin-babel";
+import { pluginSolid } from "@rsbuild/plugin-solid";
+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: [pluginBabel({ include: /\.(?:jsx|tsx)$/ }), pluginSolid()],
+});

package/templates/template-solid-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-solid-ts/app/content/index.ts ADDED Viewed

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

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

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

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

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => <App />, root);

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

@@ -0,0 +1,34 @@
+export default function App() {
+  const popupStyle = {
+    width: "320px",
+    "min-height": "200px",
+    padding: "16px",
+    "box-sizing": "border-box",
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+    "justify-content": "center",
+    gap: "12px",
+    "font-family": 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  };
+  const titleStyle = {
+    "font-size": "18px",
+    "font-weight": "600",
+  };
+  return (
+    <div style={popupStyle}>
+      <img src="/icons/icon_128.png" alt="" width={64} height={64} />
+      <div style={titleStyle}>AddFox Solid</div>
+      <a
+        href="https://addfox.dev/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ "font-size": "13px", color: "#2563eb" }}
+      >
+        addfox.dev
+      </a>
+    </div>
+  );
+}

package/templates/template-solid-ts/app/popup/index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => <App />, root);

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

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

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

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App";
+const root = document.getElementById("root");
+if (root) render(() => <App />, root);

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

@@ -0,0 +1,21 @@
+{
+  "name": "my-extension",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "addfox dev",
+    "build": "addfox build"
+  },
+  "dependencies": {
+    "@addfox/utils": "0.1.1",
+    "solid-js": "^1.9.11"
+  },
+  "devDependencies": {
+    "addfox": "0.1.1",
+    "@rsbuild/plugin-babel": "^1.2.0",
+    "@rsbuild/plugin-solid": "1.2.0",
+    "typescript": "^5.9.3",
+    "@types/chrome": "^0.1.38"
+  }
+}

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

Binary file

package/templates/template-solid-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 + Solid</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 + Solid</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-solid-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"
+  ]
+}