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 documentationをご覧ください。

Framework7 Vue

Vue.js 3

Framework7 Vue v6は新しいVue.js v3にしか対応していないので、まずアプリをVue 3に移行する必要があります。Official Vue.js migration guideを参照してください。

アプリのコンポーネント

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

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

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

アプリの data と methods 。

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

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

View/Router

`push-state "パラメータが "browser-history "に名称変更。

<!-- V5では -->
<View push-state push-state-separator=""> ... </View>

<!-- V6では -->
<View browser-history browser-history-separator=""> ... </View>

Vueコンポーネントの拡張

Framework7 Vue v6はVueの機能的なコンポーネントで書き換えられ、すべてのVueコンポーネントのプロトタイプ拡張は削除されました。

• this.$$
• this.$f7
• this.$f7ready (このコンポーネントはレディ)
• this.$f7route (英語)
• this.$f7router
• this.$utils
• this.$device
• this.$theme (テーマ)
• this.$request (リクエスト)

これで、Framework7のインスタンスであるf7readyとthemeは、framework7-vueパッケージから直接インポートできるようになりました。

import { f7, f7ready, theme } from 'framework7-vue';

f7ready(() => {
  if (theme.ios) {
    f7.dialog.alert('It is iOS theme');
  }
});

f7route と f7router は、ルーターコンポーネントのプロップで利用できます。

<template>
  <f7-page>
    ...
  </f7-page>
</template>

<script>
  export default {
    props: {
      f7route: Object,
      f7router: Object,
    },
    setup(props) {
      const { f7route, f7router } = props;

      console.log(f7route.url);

      const goBack = () => {
        f7router.back();
      }

      //...
    }
  }
</script>

utils, device, request は framework7 から直接インポートできます。

import { utils, getDevice, request } from 'framework7';

// ...

モーダルとパネル

すべてのモーダルコンポーネント（Popup、Popover、LoginScreen、Actions、Sheet）とPanelは、.open()と.close()のメソッドを持ちません。これらの状態は、boolean opened propで制御されます。

スワイパー

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

スケルトン要素

Skeleton Elements は、スタンドアロンのライブラリとしても統合されました。APIの詳細な説明やその他の例については、公式のSkeleton Elements for Vue documentationをご覧ください。