Polyfillとドライバーをnpmパッケージに移行する #68

kou029w · 2019-07-30T06:18:39Z

chirimen-raspi3 環境のPolyfillと、chirimen環境に対応したそれぞれのデバイス用ドライバーをnpmパッケージにして、依存管理システムを導入する

リポジトリを配置する
- https://github.com/chirimen-oh/chirimen-drivers
gcディレクトリ以下のそれぞれのサンプルコード群に package.json を置く
node_modules をローカル版 (releases/env/gc.zip) にも同梱する

kou029w · 2019-07-30T07:04:53Z

リポジトリ chirimen-oh/chirimen-raspi3 パッケージ @chirimen-raspi/polyfill
- /polyfill.js … いまの gc/polyfill/polyfill.js
リポジトリ chirimen-oh/chirimen-drivers パッケージ chirimen-drivers-**
- /**/**.js ... いまの gc/drivers/**.js

kou029w · 2019-07-30T10:47:02Z

TODO:

https://www.npmjs.com/org/chirimen-raspi を作成
https://www.npmjs.com/package/@chirimen-raspi/polyfill をデプロイ
@chirimen-raspi/polyfill に移行
- gc/gpio
- gc/i2c
- gc/testSet
chirimen-drivers-** に移行
- ~~gc/gpio~~
- gc/i2c
- gc/testSet

dynamis · 2019-07-30T13:19:02Z

index.html から script src=node_modules/... で polyfill/drivers 読み込めると思ったら出来ない問題について少し整理した:

container テンプレート (node など) にする

./node_modules 配下にアクセスするには container テンプレートが必要 codesandbox/codesandbox-client#1757

サンプル: https://codesandbox.io/s/2p8ylq3rwr

メリット
- なんでもできる
- example に polyfill/drivers のコピーを保持する必要はない
デメリット
- read-only editor になってしまう
- コンソールが出てきたりサーバ・ビルド環境を意識することになりかねない
- 単なる example ホスト + editor に対して大げさすぎる

node_modules ごとコミットする

example だしまぁまるごと突っ込んでしまうという方法

メリット
- github repo コピーするだけで npm i あるいは drivers のダウンロードとか考える必要がない
デメリット
- polyfill/drivers 更新の度に examples リポジトリの更新が必要
  - post-commit hook などで自動化する余地はあるか？

import にする

module は import するのが本来の使い方であり、import をちゃんと使えば node_modules 配下もちゃんと percel さんがよしなにやってくれる。

メリット
- まぁシンプル
- モジュールベースなので strict モード実行になるのはいい話
- example に polyfill/drivers のコピーを保持する必要はない
デメリット
- polyfill/drivers 側の書き換え (export 対応) が必要
- ブラウザで動作させるには script タグで type="module" として読み込む必要がある

dynamic import にする

type=module 付けたくないなら dynamic import

メリット
- とてもシンプルかもしれない？
- type=module は付けなくても良い
デメリット
- まだ標準化されていない。Edge で使えない、Firefox も 67 で入ったばかり
- 認知が低い機能をいきなり使うのは初心者向きとは言えない

まぁちょっとやりすぎ。

external resource にする

polyfill/drivers は適当に github pages でも何でも良いから

メリット
- 超シンプル。
デメリット
- オンラインでなければ動作しなくなる
  - オフライン動作時は src のパスを変えてもらうだけ？その時のパスは何処？
- drivers を add dependencies から検索して読み込むことは出来ない
  - まぁ使っているサンプルを見れば分かるので単純だけど

補足

codesandbox の vanilla などの client template が percel 使ってくれたり static template ですら static ではないというのが大元のワナだった。percel 使うのも安直に使って dist をホストしているわけではないようだし...

kou029w · 2019-07-31T01:10:48Z

比較的利用者への影響が少なそうなので「node_modules ごとコミットする」でとりあえず2019 Q3リリースは良いかなと考えます

ref. #68

kou029w · 2019-07-31T08:06:48Z

パッケージ一覧: https://www.npmjs.com/org/chirimen-raspi

Polyfill

リポジトリ: ここ https://github.com/chirimen-oh/chirimen-raspi3
パッケージ: @chirimen-raspi/polyfill

ドライバー

リポジトリ: https://github.com/chirimen-oh/chirimen-drivers
パッケージ一覧: https://github.com/chirimen-oh/chirimen-drivers/blob/f29c5945f4a4bac3dc61e49164142bcd60ba2110/README.md

その他

gc 配下のサンプルコードを全て npm に移行したものに差し替えました

satakagi · 2019-08-05T14:05:48Z

https://github.com/chirimen-oh/chirimen-raspi3/wiki/Contrib
の手順書に、npm移行後の、新しいドライバ・examplesのcontribの仕方（作法）をどなたか記載していただければと思います。

https://github.com/chirimen-oh/chirimen-raspi3/wiki/Release
こちらのwikiにも関係しそうですね。

特にこの手順の説明書が必要に思います。

npm module にして package.json を用意

satakagi · 2019-08-09T02:27:53Z

以前はI2Cのドライバが一か所のディレクトリにまとまっていましたが、今はExamplesの中に入り込んでしまっている感じですよね？　またpolyfillもExamplesの中にコピーが入り込んでる感じ。
CHIRIMEN with micro:bitからも、これらドライバを直リンクしていたのですが、直リンク先のドライバのURLがかなり冗長・煩雑になってしまった感じがするのも気になります。（今頑張ってCHIRIMEN with micro:bitのExamplesの内容を修正中・・）
ちなみに、gc/polyfillはそのままあり、これがオリジナルという位置づけのようにみえますが、これと同じように、I2CのドライバもExamplesにばらけさせず、オリジナルの蓄積場所を設けたほうが良いと思います、

kou029w · 2019-08-09T03:49:00Z

説明不足な部分で申し訳ないですが、それぞれのドライバーのリポジトリとしては https://github.com/chirimen-oh/chirimen-drivers を作成してオリジナルを集約してnpmにデプロイ、個別のサンプルは npm を介してローカルに保存(現在のExamples)か https://unpkg.com/ を利用する、という想定で考えていました

kou029w · 2019-08-09T04:15:58Z

移動したことによって参照に失敗している問題があるのは意図して無かったです
ミスってしまいました、すみません。。。

消さずにもとの場所に置いておいても不都合無いような気もします
いかがしましょうか

ただ、相対パスで実ファイルを参照するという利用方法に関しては、非常にシンプルである一方で、ファイル構造に密結合になってしまっており、たとえばある対象のサンプルコードのあるディレクトリを別のディレクトリの階層に移動しただけで参照に失敗するという問題があります
そのため、npm によってバージョン管理と依存関係の解決ができる、というのはメリットあると考えます

また、GitHub Pagesを介して参照するというのは、同じくリポジトリのパスの構造に依存するので、おっしゃるとおり「URLがかなり冗長・煩雑に」なりがちという問題があります
そのため、https://unpkg.com/ を介して npm にアクセスするという方法が良いと考えます

ドライバー自体のパッケージ名に関しては、冗長なので直したい気持ちです。。。

Polyfill を参照するためのURL: https://unpkg.com/@chirimen-raspi/[email protected]/polyfill.js
Polyfill を参照するためのコマンド:

npm i @chirimen-raspi/pilyfill
# ./node_modules/@chirimen-raspi/polyfill/polyfill.js が得られる

ドライバーを参照するためのURL

Verified official drivers

Contributed drivers

ドライバーを参照するためのコマンド

Verified official drivers

npm i @chirimen-raspi/chirimen-driver-i2c-ads1015

npm i @chirimen-raspi/chirimen-driver-i2c-adt7410

npm i @chirimen-raspi/chirimen-driver-i2c-gp2y0e03

npm i @chirimen-raspi/chirimen-driver-i2c-grove-accelerometer

npm i @chirimen-raspi/chirimen-driver-i2c-grove-gesture

npm i @chirimen-raspi/chirimen-driver-i2c-grove-light

npm i @chirimen-raspi/chirimen-driver-i2c-grove-oled-display

npm i @chirimen-raspi/chirimen-driver-i2c-grove-touch

npm i @chirimen-raspi/chirimen-driver-i2c-pca9685

npm i @chirimen-raspi/chirimen-driver-i2c-s11059

npm i @chirimen-raspi/chirimen-driver-i2c-veml6070

npm i @chirimen-raspi/chirimen-driver-i2c-vl53l0x

Contributed drivers

npm i @chirimen-raspi/chirimen-driver-i2c-ads1x15

npm i @chirimen-raspi/chirimen-driver-i2c-ak8963

npm i @chirimen-raspi/chirimen-driver-i2c-amg8833

npm i @chirimen-raspi/chirimen-driver-i2c-arduino-stepping-motor

npm i @chirimen-raspi/chirimen-driver-i2c-bme280

npm i @chirimen-raspi/chirimen-driver-i2c-bmp180

npm i @chirimen-raspi/chirimen-driver-i2c-bmp280

npm i @chirimen-raspi/chirimen-driver-i2c-canzasi-blink

npm i @chirimen-raspi/chirimen-driver-i2c-mpu6050

npm i @chirimen-raspi/chirimen-driver-i2c-mpu6500

npm i @chirimen-raspi/chirimen-driver-i2c-neopixel-i2c

npm i @chirimen-raspi/chirimen-driver-i2c-pca9685-pwm

npm i @chirimen-raspi/chirimen-driver-i2c-pcf8591

dynamis · 2019-08-14T11:14:35Z

polyfill / driver short urls (動かなくなった jsbin 修正ついでに見やすい短い小文字の URL で用意した):

https://r.chirimen.org/polyfill.js

https://r.chirimen.org/ads1015.js
https://r.chirimen.org/adt7410.js
https://r.chirimen.org/gp2y0e03.js
https://r.chirimen.org/grove-accelerometer.js
https://r.chirimen.org/grove-gesture.js
https://r.chirimen.org/grove-light.js
https://r.chirimen.org/grove-oleddisplay.js
https://r.chirimen.org/grove-touch.js
https://r.chirimen.org/pca9685.js
https://r.chirimen.org/s11059.js
https://r.chirimen.org/veml6070.js
https://r.chirimen.org/vl53l0x.js

https://r.chirimen.org/ads1115.js
https://r.chirimen.org/amg8833.js
https://r.chirimen.org/arduino-steppingmotor.js
https://r.chirimen.org/bme280.js
https://r.chirimen.org/bmp180.js
https://r.chirimen.org/bmp280.js
https://r.chirimen.org/canzasi.js
https://r.chirimen.org/mpu6050.js
https://r.chirimen.org/ak8963.js
https://r.chirimen.org/mpu6500.js
https://r.chirimen.org/neopixel.js
https://r.chirimen.org/pcf8591.js

リダイレクト先を取りあえず github pages にしてしまっているけど Verified official drivers の URL にした方が良いかな。そのあたりの URL 一覧・説明をするページが欲しいかも知れない？初心者は何も考えず r.chirimen.org/xxx.js 使ってもらってモジュール分かる人だけ分かれば良い？

dynamis · 2019-10-01T03:00:43Z

移行済みなのでクローズします (残作業があればまた別途 isseu 立てましょう)

dynamis · 2019-12-12T21:31:23Z

残件処理: r.chirimen.org/polyfill.js が github pages のままだったことで p5 Editor で次のように HTML から読み込もうとすると CORS エラーが出ていたので、ちゃんと Access-Control-Allow-Origin: * を付与してくれる unpkg.com へとリダイレクト先を変更:

<script src="https://r.chirimen.org/polyfill.js"></script>

chirimen-oh/r.chirimen.org@daa5eff

kou029w · 2020-11-18T09:48:04Z

もともとの問題は解決済みだと思うのでクローズしますね。
もし問題があるようでしたら別Issueを起票するなどお願いします。 > @dynamis

kou029w self-assigned this Jul 30, 2019

kou029w added a commit that referenced this issue Jul 31, 2019

include node_modules

5e87df3

ref. #68

dynamis mentioned this issue Jul 31, 2019

オンライン Example を CodeSandbox にも対応させる (jsbin からの移行準備) #71

Closed

kou029w closed this as completed Jul 31, 2019

kou029w mentioned this issue Jul 31, 2019

npm 移行に伴う変更 chirimen-oh/chirimen.org#50

Closed

dynamis mentioned this issue Jul 31, 2019

2019Q3 リリースビルドを作る #63

Closed

5 tasks

satakagi reopened this Aug 5, 2019

dynamis mentioned this issue Aug 14, 2019

jsbinのexamplesのpolyfill.js及びデバイスドライバ.jsの参照先を決める #47

Closed

dynamis closed this as completed Oct 1, 2019

dynamis reopened this Dec 12, 2019

kou029w closed this as completed Nov 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polyfillとドライバーをnpmパッケージに移行する #68

Polyfillとドライバーをnpmパッケージに移行する #68

kou029w commented Jul 30, 2019 •

edited

Loading

kou029w commented Jul 30, 2019

kou029w commented Jul 30, 2019 •

edited

Loading

dynamis commented Jul 30, 2019

kou029w commented Jul 31, 2019

kou029w commented Jul 31, 2019

satakagi commented Aug 5, 2019 •

edited

Loading

satakagi commented Aug 9, 2019 •

edited

Loading

kou029w commented Aug 9, 2019

kou029w commented Aug 9, 2019

Verified official drivers

Contributed drivers

Verified official drivers

Contributed drivers

dynamis commented Aug 14, 2019 •

edited

Loading

dynamis commented Oct 1, 2019

dynamis commented Dec 12, 2019 •

edited

Loading

kou029w commented Nov 18, 2020 •

edited

Loading

Polyfillとドライバーをnpmパッケージに移行する #68

Polyfillとドライバーをnpmパッケージに移行する #68

Comments

kou029w commented Jul 30, 2019 • edited Loading

kou029w commented Jul 30, 2019

kou029w commented Jul 30, 2019 • edited Loading

dynamis commented Jul 30, 2019

container テンプレート (node など) にする

node_modules ごとコミットする

import にする

dynamic import にする

external resource にする

補足

kou029w commented Jul 31, 2019

kou029w commented Jul 31, 2019

Polyfill

ドライバー

その他

satakagi commented Aug 5, 2019 • edited Loading

satakagi commented Aug 9, 2019 • edited Loading

kou029w commented Aug 9, 2019

kou029w commented Aug 9, 2019

Verified official drivers

Contributed drivers

Verified official drivers

Contributed drivers

dynamis commented Aug 14, 2019 • edited Loading

dynamis commented Oct 1, 2019

dynamis commented Dec 12, 2019 • edited Loading

kou029w commented Nov 18, 2020 • edited Loading

kou029w commented Jul 30, 2019 •

edited

Loading

kou029w commented Jul 30, 2019 •

edited

Loading

satakagi commented Aug 5, 2019 •

edited

Loading

satakagi commented Aug 9, 2019 •

edited

Loading

dynamis commented Aug 14, 2019 •

edited

Loading

dynamis commented Dec 12, 2019 •

edited

Loading

kou029w commented Nov 18, 2020 •

edited

Loading