Svelte Component Extensions(Svelte・コンポーネント・エクステンションズ)

SvelteがアプリをマウントしてFramework7を初期化すると、Framework7の初期化されたインスタンスや、framework7-svelteパッケージからインポートできるいくつかの便利なプロパティにアクセスできるようになります。

f7ready

これは、Framework7が完全に初期化されたときに実行されるコールバック関数です。コンポーネントでFramework7のAPIにアクセスする必要があるときに、準備ができていることを確認するのに便利です。このコールバック関数には、Framework7に関連するすべてのロジックを入れても問題ありません。引数として、初期化されたFramework7のインスタンスを受け取ります。例えば、以下のようになります。

...
<script>
  import { onMount } from 'svelte';
  import { f7ready } from 'framework7-svelte';

  onMount(() => {
    f7ready(() => {
      // Framework7が初期化された
      f7.dialog.alert('Component mounted');
    })
  })
</script>

f7

メインのFramework7の初期化されたインスタンスです。これにより、Framework7の任意のAPIを使用することができます。

もし、Framework7のインスタンスにアクセスしたときに、すでに初期化されていることが確認できれば、それを直接インポートして使うことができます。

<script>
  import { f7 } from 'framework7-svelte';

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...
</script>

theme（テーマ

これは、現在使用されているテーマ（iOS、MD、Aurora）に関する情報を持つ、ブール値のプロパティを持つオブジェクトです： theme.ios, theme.md, theme.aurora.

<script>
  import { theme } from 'framework7-svelte';

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
</script>

f7route と f7router です。

ルーターのインスタンスと現在のルートは、プロップを介してルーターコンポーネントに渡されます。

このプロパティは、ルーターで読み込まれるコンポーネント（ページ、ルーティング可能なモーダル、ルーティング可能なタブなど）でのみ利用できます。もし「より深い」子コンポーネントでこのプロパティにアクセスする必要があるなら、propsを使ってそれを渡す必要があります。

<script>
  import { onMount } from 'svelte';
  // コンポーネントがpropsを受け取れるようにpropsを定義します。
  export let f7route;
  export let f7router;

  onMount(() => {
    console.log(f7route.url)
  });

  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
</script>

f7route は現在のルートで、次のようなプロパティを持つオブジェクトです。

• url - ルートのURL
• path - ルートのパス
• query - ルートのクエリを持つオブジェクトです。もしURLが /page/?id=5&foo=bar であれば、次のようなオブジェクトが含まれます {id: '5', foo: 'bar'} 。
• params - ルートのパラメータです。もし、/page/user/:userId/post/:postId/というパスでマッチングしたルートがあり、ページのURLが/page/user/55/post/12/であれば、以下のようなオブジェクトになります {userId: '55', postId: '12'}
• name - ルート名
• hash - ルートのURLハッシュ
• route - 利用可能なルートからマッチするルートを持つオブジェクト

スロット

すべてのFramework7 Svelteコンポーネントは、コンポーネント構造全体に子を分配するために、スロットを使用します。しかし、Svelteの制限により、カスタムコンポーネントにスロットを使用することはできません。そのため、ダミーのHTML要素でラップするか、代わりにHTMLレイアウトを使用する必要がある場合があります。

例えば

<Page>
  <List>
    <ListItem title="Toggle">
      <!-- 追加要素でラップ -->
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
</Page>

イベント

Framework7のSvelteコンポーネントは全てイベントに対応しています。しかし、Svelteがイベントを処理する方法(CustomEventの発行)は、イベントの引数を(event.detailを介して)取得する必要がある場合や、特に引数が少ない場合には不便です。

そこで、Framework7のSvelteコンポーネントは、引数を配列にしてイベントを発行します。

<Page on:pageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit イベントは、ページデータを含む1つの引数を持ちます。
  function onPageInit(event) {
    // それは event.detail 配列で利用可能です。
    const pageData = event.detail[0]
    console.log(pageData);
  }
</script>

これを回避するために、すべてのFramework7 Svelte コンポーネントイベントは、同じ `on${Event}` プロップコールバックを持ちます。

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit イベントは、ページデータを持つ1つの引数を持ちます。
  function onPageInit(pageData) {
    console.log(pageData);
  }
</script>