Framework7 v5からの移行

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

Framework7コア

まず、コアバージョンで何が変わったのかを確認しましょう。

パッケージ

コアバージョンでは、新しいパッケージ構造が採用されており、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 ライブラリの import は 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 の beforeEnter, beforeLeave, redirect, async メソッドが、以下のプロップを持つ単一のオブジェクトを受け取るようになりました。

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

詳細や例については、更新された Routes ドキュメント をご覧ください。

Framework7 Svelte

Appコンポーネント

メインの <App> コンポーネントが、Framework7 のすべてのパラメータを個別のプロップとして受け取るようになりました。

<!-- v5では -->
<App params={{ id: 'app-id', name: 'app-name' }}> ... </App>

<!-- V6では -->
<App id="app-id" name="app-name"> ... </App>

アプリのdataとmethodsについて

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

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

View/Router

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

<!-- V5では -->
<View pushState pushStateSeparator=""> ... </View>

<!-- v6では -->
<View browserHistory browserHistorySeparator=""> ... </View>

モーダルとパネル

すべてのモーダルコンポーネント(Popup, Popover, LoginScreen, Actions, Sheet)とPanelには、.open()と.close()のメソッドがありません。これらの状態は、ブーリアンの opened プロップによってコントロールされるべきです。

スワイパー

Framework7 v6では、すべての新しいSwiper v6とその公式Svelteコンポーネントを使用しており、API、使用方法、いくつかの新機能が少し異なっています。完全な新しいAPIのドキュメントとより多くの例については、公式のSwiper for Svelte documentationをチェックしてください。

スケルトン要素

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