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());
});

      Связанные ссылки