Framework7 v5からの移行

この記事では、Framework7 v5からFramework7 v6へアプリを移行するために必要なことを確認するために、ほとんどの変更点を説明します。

パッケージ

コアバージョンでは新しいパッケージ構造が採用されており、liteやbundleのインポートを微調整する必要があります。

• framework7/framework7.esm.js が framework7 になりました。
• framework7/framework7.esm.bundle.js は framework7/bundle になります。
• framework7/framework7-lite.esm.js は現在の framework7/lite です。
• framework7/framework7-lite.esm.bundle.js は framework7/lite-bundle になります。

v5.でこのようなものがあった場合、次のように変更します。

import Framework7 from 'framework7/framework7-lite.esm.bundle.js'

に変更する必要があります。

import Framework7 from 'framework7/lite-bundle'

Dom7

Framework7 v6は新しいDom7 v3を使用しており、.each()や.map()などのすべての "反復 "メソッドが変更されています。具体的には、ネイティブなJavaScriptの配列イテレータに合わせて、引数の順序が入れ替わっています。

// in v5 (Dom7 v2)
$('p').each((index, el) => {
  // ...
})

// v6 (Dom7 v3) では、引数が入れ替わり、要素は常に最初の引数になりました。
$('p').each((el, index) => {
  // ...
})

テンプレート7

Template7 テンプレートライブラリは、Framework7 から完全に削除されました。まだ必要な場合は、手動でインストールしてください。

npm i template7

import Template7 from 'template7';

Template7.compile('...');

リクエスト

Requestライブラリのインポートは、Requestからrequestに名前が変更されました。また、すべてのメソッドにPromisesが使用されるようになりました。更新された Request ドキュメント をご覧ください。

// インポート名の変更
import { request } from 'framework7/lite';

// 常にPromisesを使用するわけではありません
request.get('some-url').then((res) => {
  console.log(res.data);
});

デバイスとサポート

Device & Supportのインポートも変更されました。インポートで使用できるのはゲッター関数のみです。

v5ではこのようになっていた。

import { Device, Support } from 'framework7';

if (Device.android) {
  console.log('it is Android');
}

if (Support.touch) {
  console.log('touch is supported');
}

v6では別のアプローチをとるべきだ。

import { getDevice, getSupport } from 'framework7';

const device = getDevice();
const support = getSupport();

if (device.android) {
  console.log('it is Android');
}

if (support.touch) {
  console.log('touch is supported');
}

便利な関数

Utils のインポートが Utils から utils に名称変更されました。

// v5では
import { Utils } from 'framework7';

// v6では
import { utils } from 'framework7';

View/Router

Routeのコールバックコンテクスト

Route の beforeEnter, beforeLeave, redirect, async メソッドが、以下のプロップを持つ単一のオブジェクトを受け取るようになりました。

• to
• from
• resolve (解決)
• reject (拒絶)
• direction (v6の新機能。forwardまたはbackwardを指定できます。)
• router (v6の新機能 - 現在のルーターインスタンス)
• app (v6の新機能 - f7アプリのインスタンス)

詳細や例については、更新された Routes documentation をご覧ください。

pushState -> browserHistory (プッシュステート)

pushState のパラメータが browserHistory に名称変更。

// v5では
app.views.create('.view-main', {
  pushState: true,
  pushStateSeparator: '',
});

// バージョン6では
app.views.create('.view-main', {
  browserHistory: true,
  browserHistorySeparator: '',
});

ルートのコンテキストについて

Route の options.context プロパティが削除され、options.props が使用されるようになりました。詳細や例については、Routees documentationをご覧ください。

ルートの template と templateUrl について

Template7 の廃止に伴い、template と templateUrl で読み込まれるルートはサポートされなくなりました。このようなルートは、Router Componentに移行してください。

アプリの data と methods について

グローバル」なアプリの状態を保存するためのApp dataとmethodsのパラメータは完全に削除されました。

Framework7には、アプリの状態を管理するための新しいライブラリ「Store」が用意されています。新しい Store のドキュメントと、Framework7 Vue での使用方法を確認してください。

アプリルートについて

App root パラメータ (アプリのルート要素を渡す) の名前が el に変更された。

// V5では
const app = new Framework7({
  root: '#app'
})

// V6では
const app = new Framework7({
  el: '#app'
})

app.root プロパティは Dom7 のルート要素のインスタンスを渡すもので、app.$el に名前が変更された。

バーチャルリスト

Template7 の廃止に伴い、Template7 のテンプレートでバーチャルリストのアイテムをレンダリングする itemTemplate 機能はサポートされなくなりました。これは renderItem コールバックに移行されるべきです。

プリローダー

MDテーマのプレローダのレイアウトが新しいSVGレイアウトに変更されました。詳細や例については、更新された Preloader documentation をご覧ください。

スケルトン要素

Skeleton Elementsがスタンドアロンのライブラリとして統合されました。API の完全なドキュメントやその他の例については、公式の Skeleton Elements for HTML & CSS documentation をご覧ください。

新しいルーターコンポーネント

Framework7 v6では、Router Componentの構文と機能が完全に新しくなりました。そのため、Template7を使用していたv5バージョンはサポートされなくなり、すべてのコンポーネントを新しいRouter Componentの構文に移行する必要があります。

例えば、v5の場合。

<template>
  <div class="page">
    <p>Value is: {{foo}}</p>
    <p>
      <a href="#" @click="changeValue">Change value</a>
    </p>
    <ul>
      {{each items}}
      <li>{{title}}</li>
      {{/each}}
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        foo: 'bar',
        items: [
          {
            title: 'Item 1'
          },
          {
            title: 'Item 2'
          },
        ]
      }
    },
    methods: {
      changeValue() {
        this.foo = 'bar 2';
        this.$update();
      },
    },
    on: {
      pageInit() {
        this.$app.dialog.alert('page init')
      }
    }
  }
</script>

v6ではこのように変更する必要があります。

<template>
  <div class="page">
    <p>Value is: ${foo}</p>
    <p>
      <a href="#" @click=${changeValue}>Change value</a>
    </p>
    <ul>
      ${items.map((item) => $h`
      <li>${item.title}</li>
      `)}
    </ul>
  </div>
</template>
<script>
  export default (props, { $f7, $on, $update }) => {
    let foo = 'bar';
    const items = [
      {
        title: 'Item 1'
      },
      {
        title: 'Item 2'
      },
    ];

    const changeValue = () => {
      foo = 'bar 2';
      $update();
    }

    $on('pageInit', () => {
      $f7.dialog.alert('page init')
    })

    return $render;
  }
</script>