[Proposal]: ルートディレクトリの指定文字の追加

mantaroh commented 10 months ago

📦 Package / パッケージ

spear-cli

📝 Describe the problem / 問題を記載

問題点

サブディレクトリのページで Spear を使用する際、assets などのディレクトリを作成した場合、ルートディレクトリを知らないと実装が難しくなるケースがあります。

例：

/src/subdirectory/index.html
```
<script src="assets/js/test.js">
```

→ /src/assets/js/test.js を参照したいが、サブディレクトリなので、 ../ をつける必要がある。

🤔 Describe your idea / アイデアを記載

{%= spear_root %} のようにトップディレクトリを知っていれば、そこからの相対パスを自動で生成することが可能となる。

📄 Additional Information

No response

vladinomo commented 9 months ago

現行だとhtml/spearのファイルから特殊なことをせずとも <script src="/assets/js/test.js">(絶対パス指定をスラッシュで始める) とすることで、トップディレクトリからのリソースが簡便に取得できるようです。また、spear-cliパッケージのソースコードを読み込む限りだとトップディレクトリはsrcで固定です。以上を総合すると特殊文字でトップディレクトリを指定できる機能は追加しないでもいい気がしています。

mantaroh commented 9 months ago

遅くなってすみません！！

現行だとhtml/spearのファイルから特殊なことをせずとも <script src="/assets/js/test.js">(絶対パス指定をスラッシュで始める) とすることで、トップディレクトリからのリソースが簡便に取得できるようです。また、spear-cliパッケージのソースコードを読み込む限りだとトップディレクトリはsrcで固定です。以上を総合すると特殊文字でトップディレクトリを指定できる機能は追加しないでもいい気がしています。

ですです！
絶対パス形式であれば、ルートから参照ができるので問題ないです！

今回、問題となるケースが、 https://foobar.com/ というアドレスを持っていて、そのサブディレクトリに Spear プロジェクトのページを配置したいとなったときです。 (https://foobar.com/sub-pages/)

/sub-pages/index.html のコードでは、 /assets/images/test.png という参照があった場合、https://foobar.com/assets/images/test.png を参照にすることになります。
実際のコード上では、/sub-pages/assets/images/test.png を参照してほしいのですが、それができないです。

.
└── src(sub-pages)
    ├── assets
    │   └── images
    │       └── test.png
    └── index.html

→このプロジェクトを https://foobar.com/sub-pages/ へデプロイしたとき問題

解決方法としては、

src/subpages を作る

.
└── src
    └── sub-pages
        ├── assets
        │   └── images
        │       └── test.png
        └── index.html

このような構造にすれば、絶対参照でも問題なく動作します。
問題として、直感的にわかりにくいかなーと思いますが、どうでしょう。。

{%= spear_root %} を用意してあげる

ルートディレクトリ名がわかれば、参照方法などわかるのではないかと。

例： https://foobar.com/sub-pages/ にプロジェクトをデプロイするとき

{%= spear_root %} = 「/sub-pages/」が入っていれば、画像参照も {%= spear_root %}/assets/images/test/png と参照できると思います。

また、このルートディレクトリは設定値 (spear.config.mjs) に入れることで、参照もしやすいかと思います。

vladinomo commented 9 months ago

@mantaroh 内容把握しました。spearのプロジェクト自体がなにかのサブディレクトリとして配信される場合ということですね。

src/subpages を作る

確かにこれは直感的でないですね。

＞ 2. {%= spear_root %} を用意してあげる

この方針の上で、spear.config.mjsの設定値は、

rootDirはプロジェクトのルートというところでこの件とは別で残しておきたい。
src/assets は外部のリソースとは別に残しておいたケースもありそう

という理由で, extraAssetsPathみたいな名前で新しく用意し、コンポーネント中の式の名前もそれに準じて {%= spear_extra_root %}というのはどうでしょうか？

mantaroh commented 9 months ago

@vladinomo

という理由で, extraAssetsPathみたいな名前で新しく用意し、コンポーネント中の四季の名前もそれに準じて {%= spear_extra_root %}というのはどうでしょうか？

その方針で問題ないと思います！

unimal-jp / spear