Toilet EvolutionのフロントエンドをPolymer3対応する(2)

Friday, April 26, 2019 04:47:00 PM

Polymer WebComponents IoT ToiletEvolution

この記事はToilet EvolutionのフロントエンドをPolymer3対応する(1)の続編です。

今回からはmozlier適用だけでは動かないので、ローカルで動作するように修正というコミットにおける試行錯誤を書いていきます。

うまく動作させるために試行錯誤して変更したファイル、実に110。1回では書ききれない予感が…

不要になったファイルを削除

bower.json や .bowerrc ファイルは、Polymer3でnpmに移行したので、削除します。

linterを追加

lintは polymer-cli にも付いているのですが、エディタで編集中にも状況は知りたいので、eslintを導入します。 Polymer1のころはHTMLファイルだったので、特に不要でしたね。

ビルドを変更

これまでbuildは独自にgulpで実装していたのですが、Polymer3対応をするに伴いpolymer-buildを使うようにしました。これは polymer CLI でも使っているビルドライブラリです。ビルドについては、この連載で触れていきます。

polymer.jsonの変更

shell や fragments で指定したファイルの拡張子を html から js に変更します。これは自動的に変換されないので注意しましょう。 extraDependencies や、そのほかの定義も変わっていますが、このあたりはpolymer.json specificationを参考にPolymer3形式に1から記述するぐらいの気持ちでいましょう。

変換された自作のカスタムエレメントを修正する

まずmodulizerで変換すると、Polymer本体のimportが

import '../bower_components/polymer/polymer-legacy.js';

のようになっているので、これを

import '@polymer/polymer/polymer-legacy.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

のように変更しました。

なお、公式ドキュメントによると

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

にしていますが、これは PolymerElement 使っている場合なので、ハイブリッドモードの書き方の場合は、私のようにlegacyを使ってください。

続いてテンプレートが以下のように Polymer.html を参照するようになっています。

Polymer({
  _template: Polymer.html`

この記述は利用できないので、以下のように import した html を利用するように変更します。

Polymer({
  _template: html`

bower_components を使わないようにする

変換されたjsファイルは、bower_components上に変換されたモジュールを参照しにいきます。そこで各々のパッケージがnpmに公開されているか調べて、npmに移行していきます。

すでに上記で bower_components/polymer を変更していますが、これを例に説明します。

まずwebcomponents.orgのサイトでWebComponentsを検索します。
この例では polymer を入力して検索すると、該当のものが見つかるので、詳細ページを開きます。
もし ES Modiles に対応していれば、左側に View on NPM が表示されます。
INSTALLED VIA NPM のリンクをクリックすると npm install --save Polymer/polymer のように表示されるので、CLIからインストールします。
bower_componentsから、参照しなくなったjsファイルを削除します。

WebComponents V1対応に追従する

自分が記述したCustomElementsには利用していなかった <content> も、依存関係のタグでは利用している場合があります。例えば@polymer/app-layoutは、レイアウトないのコンポーネントを識別するときに利用しているので、slot対応を行います。たとえば以下のドロワー記述は

      <app-drawer>

次のように slot 識別を追加します。

      <app-drawer  slot="drawer">

このあたりの修正ポイントは、タグが表示されなくなることで気がつきますが、アップデートしたら最新のドキュメントを一読することをオススメします。他にも修正箇所があるかもしれませんので。

importHref を修正する

iron-pages でページを切り替えるとき、Polymer1では動的に HTML import を実行していました。

  _pageChanged: function(page) {
    this.importHref('/elements/te-' + page + '.html', null, null, true);

ES Moduleを使うPolymer3では以下のように書き換えます。

    switch (page) {
      case 'admin':
        import('./te-admin.js');
        break;
      case 'devices':
        import('./te-devices.js');
        break;
      case 'login':
        import('./te-login.js');
        break;
      case 'about':
        import('./te-about.js');
        break;
    }

import の引数には変数が利用できないので注意してください。

Polyfillを変更する。

HTMLファイルではpolyfillLをインポートしています。 Polymer1では /bower_components/webcomponentsjs/webcomponents-lite.min.js を使いましたが、Polymer3では以下のpolyfillに変更します。これもnpmを使ってインストールするように変更します。

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

このように修正を重ねていくことで、徐々に動作するエレメントが増えてきます。ここまでは多くのアプリケーションや、カスタムエレメントで実施しなければならない共通的な修正箇所です。 Toilet Evolutionでは、まだまだ修正箇所がありましたので、続きは次回で。