Svelte

Addfox は Svelte を使用した拡張機能開発をサポートし、コンパイル時に最適化された軽量な体験を提供します。

インストール

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

pnpm create addfox-app --framework svelte

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

pnpm

npm

yarn

bun

pnpm add @rsbuild/plugin-svelte

設定

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

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

プロジェクト構造

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

サンプルコード

<!-- app/popup/App.svelte -->
<script lang="ts">
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<div class="p-4">
  <h1 class="text-xl font-bold">Hello Svelte!</h1>
  <button 
    on:click={increment}
    class="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
  >
    Count: {count}
  </button>
</div>

<style>
  h1 {
    color: #333;
  }
</style>

// app/popup/index.ts
import App from './App.svelte';
import './index.css';

new App({
  target: document.getElementById('root')!,
});

Store

Svelte Store を使用した状態管理：

// app/stores/count.ts
import { writable } from 'svelte/store';

export const count = writable(0);

export function increment() {
  count.update(n => n + 1);
}

<script>
  import { count, increment } from '../stores/count';
</script>

<button on:click={increment}>
  Count: {$count}
</button>

#Svelte

#インストール

#設定

#プロジェクト構造

#サンプルコード

#Popup

#Store

#関連リンク

Svelte

インストール

設定

プロジェクト構造

サンプルコード

Popup

Store

関連リンク