search

chirimen-oh / chirimen

CHIRIMEN for Raspberry Pi
https://chirimen.org/chirimen/
13 stars 17 forks source link

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

Closed kou029w closed 3 years ago

kou029w commented 4 years ago

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

kou029w commented 4 years ago
kou029w commented 4 years ago

TODO:

dynamis commented 4 years ago

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

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

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

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

node_modules ごとコミットする

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

import にする

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

dynamic import にする

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

まぁちょっとやりすぎ。

external resource にする

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

補足

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

kou029w commented 4 years ago

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

kou029w commented 4 years ago

パッケージ一覧: 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 commented 4 years ago

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 commented 4 years ago

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

kou029w commented 4 years ago

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

kou029w commented 4 years ago

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

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

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

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

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

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

npm i @chirimen-raspi/pilyfill
# ./node_modules/@chirimen-raspi/polyfill/polyfill.js が得られる
ドライバーを参照するためのURL ## Verified official drivers https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-ads1015@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-adt7410@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-gp2y0e03@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-grove-accelerometer@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-grove-gesture@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-grove-light@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-grove-oled-display@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-grove-touch@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-pca9685@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-s11059@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-veml6070@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-vl53l0x@1.0.0 ## Contributed drivers https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-ads1x15@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-ak8963@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-amg8833@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-arduino-stepping-motor@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-bme280@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-bmp180@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-bmp280@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-canzasi-blink@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-mpu6050@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-mpu6500@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-neopixel-i2c@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-pca9685-pwm@1.0.0 https://unpkg.com/@chirimen-raspi/chirimen-driver-i2c-pcf8591@1.0.0
ドライバーを参照するためのコマンド ## Verified official drivers ```sh npm i @chirimen-raspi/chirimen-driver-i2c-ads1015 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-adt7410 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-gp2y0e03 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-grove-accelerometer ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-grove-gesture ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-grove-light ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-grove-oled-display ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-grove-touch ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-pca9685 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-s11059 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-veml6070 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-vl53l0x ``` ## Contributed drivers ```sh npm i @chirimen-raspi/chirimen-driver-i2c-ads1x15 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-ak8963 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-amg8833 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-arduino-stepping-motor ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-bme280 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-bmp180 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-bmp280 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-canzasi-blink ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-mpu6050 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-mpu6500 ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-neopixel-i2c ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-pca9685-pwm ``` ```sh npm i @chirimen-raspi/chirimen-driver-i2c-pcf8591 ```
dynamis commented 4 years ago

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 commented 4 years ago

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

dynamis commented 4 years ago

残件処理: 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>

https://github.com/chirimen-oh/r.chirimen.org/commit/daa5eff7d5f993624fab868fbbd7d5f455d6fbfb

kou029w commented 3 years ago

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