AddFox
  • 한국어

      • Preact

      Addfox는 Preact를 사용하여 확장을 개발할 수 있도록 지원하며, 더 작은 패키지 크기를 제공합니다.

      설치

      프로젝트 생성 시 Preact 템플릿 선택:

      pnpm create addfox-app --framework preact

      또는 기존 프로젝트에 설치:

      pnpm
      npm
      yarn
      bun
      pnpm add @rsbuild/plugin-preact

      구성

      // addfox.config.ts
import { defineConfig } from "addfox";
import { pluginPreact } from "@rsbuild/plugin-preact";

export default defineConfig({
  plugins: [pluginPreact()],
});

      프로젝트 구조

      app/
├── background/
│   └── index.ts
├── content/
│   └── index.tsx
├── popup/
│   ├── App.tsx
│   ├── index.html
│   └── index.tsx
└── manifest.json

      예시 코드

      // app/popup/index.tsx
import { render } from 'preact';
import { App } from './App';
import './index.css';

render(<App />, document.getElementById('root')!);
      // app/popup/App.tsx
import { useState } from 'preact/hooks';

export function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold">Hello Preact!</h1>
      <button 
        onClick={() => setCount(c => c + 1)}
        className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Count: {count}
      </button>
    </div>
  );
}

      Hooks

      Preact는 React와 호환되는 Hooks를 제공합니다:

      import { useState, useEffect, useCallback } from 'preact/hooks';

      관련 링크