AddFox
  • 日本語

      • Solid

      Addfox は SolidJS を使用した拡張機能開発をサポートし、高性能なリアクティブ体験を提供します。

      インストール

      プロジェクト作成時に Solid テンプレートを選択：

      pnpm create addfox-app --framework solid

      または既存のプロジェクトにインストール：

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

      設定

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

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

      サンプルコード

      // app/popup/index.tsx
import { render } from 'solid-js/web';
import { App } from './App';
import './index.css';

render(() => <App />, document.getElementById('root')!);
      // app/popup/App.tsx
import { createSignal } from 'solid-js';

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

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

      リアクティブプリミティブ

      Solid は細粒度のリアクティブを使用：

      import { createSignal, createEffect, createMemo } from 'solid-js';

const [count, setCount] = createSignal(0);
const double = createMemo(() => count() * 2);

createEffect(() => {
  console.log('Count changed:', count());
});

      関連リンク