スプライトアイコンをビルトインコンポーネントに変更

[qrac]

75 後に仕様変更。スプライトアイコン（生成物）へのパス設定が直感的ではなかったため、ビルトインコンポーネントをViteに通して自動解決する。これによって使う場合に iconId だけ設定すれば良くなる。baseを変更した場合の相対パスや、別プラグインを用いたSVGファイルへの処理も可能になると思われる。

before

export default function () {
  return (
    <>
      <svg>
        <use href="/assets/images/icons.svg#plus"></use>
      </svg>
      <svg>
        <use href="/assets/images/icons.svg#heart"></use>
      </svg>
    </>
  )
}

after

import { Icon } from "minista"

export default function () {
  return (
    <>
      <Icon iconId="plus" />
      <Icon iconId="heart" />
    </>
  )
}

[qrac]

プラグインのtransformでコンポーネントをreplaceする手法は、リリース後だとキャッシュされてreplaceできないため不可。

[qrac]

SSRでない通常ビルドの場合はコンポーネントがキャッシュされないのでtransformできる。SSRでビルドしているHTML上のコンポーネント側だけ処理が効かないことになる。

[qrac]

プラグインの処理をコアよりも早くすることで解決される前にtransformできた。

• プラグインの順番を強制 | Vite

[qrac]

プラグインのtransformでコンポーネントをreplaceする手法の検証

• 開発中はministaのスクリプトがプレバンドルされコンポーネントのpathを識別できないため不能
• 開発中のプレバンドルを解除すると配下モジュールのバンドルで苦労するためプレバンドル解除は非現実的
• 本番ビルドはministaのスクリプトがプレバンドルされないので可能

故に、本番ビルド時しか処理を行わないアイコンコンポーネントの置換は動いている。ただ、Viteの仕組みが変わったら動かなくなる可能性はある。

[qrac]

実務で、スプライトアイコンをグループに分けて複数生成したい場合があった。仕様を検討。

[qrac]

アイコン以外にも使うのでSVGスプライト svgs と呼んでも良いかも。

[qrac]

名称変更は一旦保留。