Polymer.co-edo meetup #26を開催しました
Sunday, June 30, 2019 11:36:00 AM
2019年5回目となる Polymer.co-edo ミートアップ を開催しました。
まず最初に私から、先日の合宿に参加してKARAKURIを作ったについて共有しました。 edo-karakuriの仕組みやできることなど、edo-blogcardとの関連など。
lit-loaderのコンパイルがエラーになる?
で、そのあとはedo-blogcardとedo-karakuriをつないで、動かそうとしたところ、lit-loaderというかBabelでエラーになります。 どうもコンストラクターがダメらしい。lit-loaderの公式では以下のような例です。
export default class CounterElement {
static get properties() { return {
clicks: Number,
value: Number
}};
constructor() {
super();
this.clicks = 0;
this.value = 0;
}
これを見てパッとは気づかなかったのですが、よく考えると extends
してない(親クラスない)のに、 constructor
で super
呼んだらダメじゃね?と。
まぁ厳密には lit-loader
を使ってコンパイルされると、以下のように LitElement
を継承するので、コンパイル後であれば問題はないです。
export default class CounterElement extends LitElement {
static get properties() { return {
clicks: Number,
value: Number
}};
constructor() {
super();
this.clicks = 0;
this.value = 0;
}
あれ?でもこれ lit-loader-exampleでうまく動作していなかったっけ?と思ったわけです。
そして、確かにリポジトリをcloneしてから yarn install
して yarn build
してもエラーになりません。
そのときと現状
当時のパッケージバージョンと、現在のパッケージバージョンを比較してみました。
$ npm outdated
Package Current Wanted Latest Location
@babel/core 7.2.2 7.2.2 7.4.5 lit-loader-example
@babel/preset-env 7.3.0 7.3.0 7.4.5 lit-loader-example
babel-loader 7.1.5 7.1.5 8.0.6 lit-loader-example
lit-element 2.0.0-rc.3 2.0.0-rc.3 2.2.0 lit-loader-example
webpack 4.16.1 4.16.1 4.35.0 lit-loader-example
webpack-cli 3.0.8 3.0.8 3.3.5 lit-loader-example
xo 0.21.1 0.21.1 0.24.0 lit-loader-example
babel新しくなってるな。確かに新しくするとES6のチェックが厳密になっている。 まぁあるべき姿なんですけどね。
どうするか?
ただしく解決するなら constructor
が定義されている場合のみ、最初の行に super()
を差し込むような lit-loader
にすれば良いのかなと。
で、 lit-loader
は jscodeshift を使っているので、JavaScriptのASTとか調べながら、jscodeshiftでどうやってソースコードを変換できるかを調べました。
で、修正コードは作れたので、PR出すかなーと思っています。
今のところ通過するようにするためには Babel のバージョンを 7.2.2
にしておくと良いです。
次回
Polymer Japanのイベントが同じ週に計画されているので、次回は8月の予定です。
引き続きEdoエレメントの開発ともくもくを進めていきます。 皆様の参加をお待ちしております。
Recent Articles
- GAE gen1 で動いている PHP5.5 で作った個人開発サービスを gen2 PHP8.2 へ移行した1年記 〜 その 2 2024/03/20
- GAE gen1 で動いている PHP5.5 で作った個人開発サービスを gen2 PHP8.2 へ移行した1年記 〜 その 1 2024/03/20
- マルチプルレポをモノレポへコミットログを残しながら移行する 2023/09/27
- tsyringe を TypeScript 5 で使う方法 2023/05/02
- LocalStack を使って aws-sdk の Integration Test を実行する 2023/04/19
- AWS SDK v3 のモジュールと利用方法 2023/04/18
- ts-jest が esbuild/swc をトランスフォーマーに使って高速化していた 2023/04/13
- aws-sdk v3 を使うライブラリを作ったときは、なるべく peerDependencies に設定しよう 2023/04/11
- aws-sdk v2 が 2023 年中にメンテナンスモードになる 2023/04/06
- Node.js v18 / aws-sdk v3 の Lambda アプリが突然動かなくなる 2023/04/05