{@attach} - 新しいDOM操作パターン

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  // アタッチメント関数を定義
  const myAttachment: Attachment = (element) => {
    console.log('マウントされた:', element.nodeName);

    // クリーンアップ関数を返す
    return () => {
      console.log('アンマウントされた');
    };
  };
</script>

<div {@attach myAttachment}>
  コンテンツ
</div>

<div {@attach attachment1} {@attach attachment2}>
  コンテンツ
</div>

<script lang="ts">
  import type { Action } from 'svelte/action';

  let content = $state('Hello');

  // アクションは更新時にupdate関数を明示的に呼び出す必要がある
  const tooltip: Action<HTMLElement, string> = (node, initialContent) => {
    let currentContent = initialContent;

    function show() {
      node.title = currentContent;
    }

    show();

    return {
      // contentが変更されたらupdate関数が呼ばれる
      update(newContent) {
        currentContent = newContent;
        show();
      },
      destroy() {
        node.title = '';
      }
    };
  };
</script>

<button use:tooltip={content}>ホバーしてね</button>

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  let content = $state('Hello');

  // contentが変更されると自動的に再実行される
  function tooltip(text: string): Attachment {
    return (element) => {
      element.title = text;

      return () => {
        element.title = '';
      };
    };
  }
</script>

<!-- contentの変更を自動追跡 -->
<button {@attach tooltip(content)}>ホバーしてね</button>

<script lang="ts">
  import tippy from 'tippy.js';
  import type { Attachment } from 'svelte/attachments';

  let content = $state('こんにちは！');

  // Attachment factory: contentを引数に取り、Attachmentを返す
  function tooltip(content: string): Attachment<HTMLElement> {
    return (element) => {
      const instance = tippy(element, { content });

      // クリーンアップでtippyインスタンスを破棄
      return instance.destroy;
    };
  }
</script>

<input bind:value={content} placeholder="ツールチップの内容" />

<!-- contentが変更されると、アタッチメントが再実行される -->
<button {@attach tooltip(content)}>
  ホバーしてね
</button>

<script lang="ts">
  let color = $state('#ff3e00');
</script>

<canvas
  width={200}
  height={200}
  {@attach (canvas) => {
    const ctx = canvas.getContext('2d');

    // このエフェクトはcolorの変更時のみ再実行
    $effect(() => {
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    });
  }}
></canvas>

<input type="color" bind:value={color} />

<!-- Button.svelte -->
<script lang="ts">
  import type { HTMLButtonAttributes } from 'svelte/elements';

  // propsにはアタッチメントも含まれる
  let { children, ...props }: HTMLButtonAttributes = $props();
</script>

<!-- propsをスプレッドするとアタッチメントも適用される -->
<button {...props}>
  {@render children?.()}
</button>

<!-- App.svelte -->
<script lang="ts">
  import tippy from 'tippy.js';
  import Button from './Button.svelte';
  import type { Attachment } from 'svelte/attachments';

  let content = $state('ボタンのツールチップ');

  function tooltip(content: string): Attachment<HTMLElement> {
    return (element) => {
      const instance = tippy(element, { content });
      return instance.destroy;
    };
  }
</script>

<input bind:value={content} />

<!-- コンポーネントにアタッチメントを適用 -->
<Button {@attach tooltip(content)}>
  ホバーしてね
</Button>

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  let bar = $state('initial');

  // 高価な初期化処理を含むアタッチメント
  function foo(bar: string): Attachment {
    return (node) => {
      // 毎回実行される高価な処理
      veryExpensiveSetupWork(node);
      update(node, bar);
    };
  }
</script>

<!-- barが変更されるたびに高価な処理が再実行される -->
<div {@attach foo(bar)}>...</div>

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  let bar = $state('initial');

  // 引数を関数として受け取る
  function foo(getBar: () => string): Attachment {
    return (node) => {
      // 初期化は一度だけ
      veryExpensiveSetupWork(node);

      // barの変更時はこのエフェクトだけが再実行される
      $effect(() => {
        update(node, getBar());
      });
    };
  }
</script>

<!-- 関数として渡す -->
<div {@attach foo(() => bar)}>...</div>

<script lang="ts">
  import { createAttachmentKey } from 'svelte/attachments';

  // オブジェクトにアタッチメントを含める
  const props = {
    class: 'button',
    onclick: () => alert('クリック！'),
    // アタッチメントとして認識されるキーを作成
    [createAttachmentKey()]: (node: HTMLElement) => {
      node.dataset.attached = 'true';
      console.log('アタッチされた:', node);
    }
  };
</script>

<!-- propsをスプレッドするとアタッチメントも適用される -->
<button {...props}>クリック</button>

<script lang="ts">
  import { fromAction } from 'svelte/attachments';
  import { someLibraryAction } from 'some-library';

  let options = $state({ theme: 'dark' });
</script>

<!-- use:アクションの場合 -->
<div use:someLibraryAction={options}>...</div>

<!-- アタッチメントに変換（引数は関数で渡す） -->
<div {@attach fromAction(someLibraryAction, () => options)}>...</div>

import type { Attachment } from 'svelte/attachments';

// 基本的なアタッチメント
const basicAttachment: Attachment = (element) => {
	// element は Element 型
	console.log(element.tagName);
};

// 特定の要素型を指定
const buttonAttachment: Attachment<HTMLButtonElement> = (element) => {
	// element は HTMLButtonElement 型
	console.log(element.disabled);
};

// Attachment factory
function createTooltip(content: string): Attachment<HTMLElement> {
	return (element) => {
		element.title = content;
		return () => {
			element.title = '';
		};
	};
}

<script lang="ts">
  import { fromAction } from 'svelte/attachments';
  import { existingAction } from './actions';

  let value = $state('hello');
</script>

<!-- 変更前 -->
<div use:existingAction={value}>...</div>

<!-- 変更後 -->
<div {@attach fromAction(existingAction, () => value)}>...</div>

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  let value = $state('hello');

  // 新しいアタッチメント関数
  function myAttachment(value: string): Attachment<HTMLElement> {
    return (element) => {
      // 初期化処理
      element.dataset.value = value;

      return () => {
        // クリーンアップ
        delete element.dataset.value;
      };
    };
  }
</script>

<div {@attach myAttachment(value)}>...</div>

<script lang="ts">
  import type { Attachment } from 'svelte/attachments';

  let position = $state({ x: 0, y: 0 });

  function draggable(): Attachment<HTMLElement> {
    return (element) => {
      let startX = 0;
      let startY = 0;
      let initialX = 0;
      let initialY = 0;

      function handleMouseDown(e: MouseEvent) {
        startX = e.clientX;
        startY = e.clientY;
        initialX = position.x;
        initialY = position.y;

        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
      }

      function handleMouseMove(e: MouseEvent) {
        position.x = initialX + (e.clientX - startX);
        position.y = initialY + (e.clientY - startY);
      }

      function handleMouseUp() {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      }

      element.addEventListener('mousedown', handleMouseDown);
      element.style.cursor = 'grab';

      return () => {
        element.removeEventListener('mousedown', handleMouseDown);
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };
    };
  }
</script>

<div
  {@attach draggable()}
  style="
    position: absolute;
    left: {position.x}px;
    top: {position.y}px;
    padding: 1rem;
    background: #ff3e00;
    color: white;
    border-radius: 8px;
  "
>
  ドラッグして移動
</div>