Qrac

Results 93 comments of Qrac

v3のSVGスプライトの変換にはスタイルタグのインライン化機能が入っていないので `svgo` などを使う。 `svg-sprite` に `svgo` を使うオプションがあるので、それを利用する。 ついでに、既存のスプライトへの追加も業務で必要だったので実装する。 - https://www.npmjs.com/package/svg-sprite

`Image` コンポーネントのloadingなどのデフォルト設定をオプションに作る。`lazy` はGoogleの点数は上がるが体感的にはスクロール中に画像が遅れてうんざりする場合あり。

fetchはalpha-8で問題なく動作することを確認。node 18に含まれているundiciのfetchを自動的にimport不要で使用。 ```sh > build > minista build vite v5.3.5 building SSR bundle for production... ✓ 3 modules transformed. node_modules/.minista/ssr/__minista_ssg_build.mjs 1.96 kB ✓ built in 117ms vite v5.3.5 building for...

~~型が取得できない。~~ tsconfig.jsonに`"moduleResolution": "Bundler"` 書いていないだけだった。 ```ts import type { StaticData, PageProps } from "minista-plugin-ssg/client" ```

Image・PictureのpropsからoutNameを削除する。使わない割に画像生成の仕組みやキャッシュ生成の分岐が複雑になるため。AstroのImageやAstro Imagetoolsにもないので一般的に望まれている機能ではないとも思う。

v3の画像最適化はHTMLのパース・画像生成・HTMLタグの書き換えを同時におこなっていたが、v4でViteプラグインにする場合は工程を分離させる必要がある。 - SSRビルド時にコンポーネントのprops置換 - ビルドエントリー前にHTMLのパース・画像生成・キャッシュ生成 - すべての画像をViteにエントリーしてビルドプロセスに組み込む - ビルド後のHTMLをパースしてタグを書き換え

参考にしているvite-plugin-svgrのimport方法が変わっていたので準じて変更予定。ファイルが出力されてしまう問題も解決している?SVGOの最適化どうしていたかも確認する。 ```ts // Before import { ReactComponent as Logo } from "./logo.svg"; // After import Logo from "./logo.svg?react"; ``` - https://www.npmjs.com/package/vite-plugin-svgr - https://github.com/pd4d10/vite-plugin-svgr

SVGRの実装、importしないでルートパスから裏で読み取ればファイルも出力されないから良いのでは? ```tsx import { Svg } from "minista-plugin-svg" export default function () { return } ``` SVGRはJSXの状態にしないとpropsを受け取れなくなる? とりあえず、svg系のattrsとtitleタグ、viewBoxを引き継げるようにしたので、この内容で公開する。

search, delivery, storyの自動で全体のコンテンツを取得する機能を実装するには、事前に1箇所にSSGした共通フォーマットのファイルを用意しなければならない。 本番ビルドは一方通行なので簡単だが、開発モードの時に少エネで動作させ続けるには?ページレンダリング時に毎回生成するのではなく機能にアクセスした時に生成するとか?機能の補助をssgやenhanceなどに持たせずsearchのみで完結させる?

案: `minista-plugin-remote-public` - dev, build前にリモート素材をDLしてtempに追加したpublicエリアに配置するプラグイン - 追加publicのディレクトリをコンフィグのエイリアスで追加する - 配列でアセットのDL URLと本番パスを指定 - キャッシュがあればDLを迂回 改修サイトのデモを作る際にfaviconやSVGスプライトのDLが面倒だから。