snowpackで遊んでみたいと思い、試すことに。
snowpackについてはこちら
が読みやすかったです。
FWに何を選ぼうかなーと思った時に、
凝ったことをしようとすると
結局トランスパイルやバンドラーの話が出てくるため、
preactを選ぶことに。
(ちなみにpreactも初体験ですが、コード自体はReactとほぼ大差がありませんでした)
preactには疎いため、
とりあえず以下のものも合わせて入れました。
JSX(ライク)
-> htm
CSS in JS
-> picostyle
ルータ
-> preact-router
Store
-> unistore
引っかかりポイントとしては、
snowpackはそのままだと、ディレクトリ構造まで把握して
jsファイルに出力はしてくれないようで。
preact/hooks
のようなものを使いたい場合は、
package.jsonに次のような記載が必要な模様。
(ただしこの記載を行うと、今度は都度指定しないとweb_modulesには出力されなくなる)
入会申込
ログイン
"snowpack": {
"webDependencies": [
"preact/hooks"
]
}
あとはpreactとの戦いでした。
遊び程度なので深く追っていないのですが、
htm + picostyleを同時に使用することは叶わず、
次のような感じで書くことに。
import { h } from '/web_modules/preact.js';
import { html } from '/web_modules/htm/preact.js';
import picostyle from '/web_modules/picostyle.js';
const ps = picostyle(h);
const Child = ps('div')({
// style
});
const Parent props = html`
...
`;
うーん、キモい。
なんとかならないだろうか。
