AddFox
  • Español

      • Solid

      Addfox soporta usar SolidJS para desarrollar extensiones, proporcionando una experiencia reactiva de alto rendimiento.

      Instalación

      Seleccionar plantilla Solid al crear el proyecto:

      pnpm create addfox-app --framework solid

      O instalar en proyecto existente:

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

      Configuración

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

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

      Código de ejemplo

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

      Primitivas reactivas

      Solid usa reactividad de grano fino:

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

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

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

      Enlaces relacionados