Spear のコンポーネント

Spear はコンポーネントをサポートしています。これは他の Vue や Astro と似た機能です。

簡単な使い方例

簡単なコンポーネントの例です。

  • /src/components/test-component.spear
<div>
  <h1>This is test component</h1>
</div>
  • /src/index.html
<body>
  <test-component></test-component>
</body>

生成された HTML は以下のようになります。

  • /dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{projectName}}</title>
</head>
<body>
  <div>
    <h1>This is test component</h1>
  </div>
</body>
</html>

コンポーネントの基本

Spear のコンポーネントの拡張子は .spear です。そして、このコンポーネントファイルは src/components ディレクトリに保存する必要があります。
プロジェクト構造を変更するには spear.config.mjs を変更する必要があります。

設定ファイルの詳細については、インストールガイドを参照してください。

コンポーネントスロット

Spear はスロット機能を提供しています。

スロットとは？

スロットは親ページとコンポーネント間でコミュニケーションをする手段です。例えば、イメージギャラリーを表示する事を想像してみてください。

各画像で表示すべき HTML はほとんど同じものになります。

<div>
  <figure>
    <image src="/galleries/image-1.png" alt="image 1">
  </figure>
</div>

もし10個の画像を表示する場合、この同じような HTML を10回実装する必要があります。このような場合で、スロット機能を使うことができます。

もし以下のようなコンポーネントを実装すれば、重複するコードを削減することができます。

  • /src/components/gallery-image.spear
<div>
  <figure>
    <slot>
  </figure>
<div>
  • /src/galleries.html
...
<div>
  <gallery-image><image src="/garraries/image-1.png" alt="image 1"></gallery-image>
  <gallery-image><image src="/garraries/image-2.png" alt="image 2"></gallery-image>
...  <gallry-image><image src="/garraries/image-10.png" alt="image 10"></gallery-image>
</div>

名前付きスロット

簡単なサイトであれば、1つのスロットで十分かもしれません。しかし、現実世界は複雑です。
Spear は1つのコンポーネント内に複数スロットをサポートしています。この場合、渡ってきたスロットの HTML はどこに挿入すべきか分からなくなるため、各スロットに名前をつける必要があります。

  • /src/components/multi-slot.spear
<div>
  <ul>
    <li><slot name="first"></slot></li>
    <li><slot name="second"></slot></li>
    <li><slot name="third"></slot></li>
  </ul>
</div>
  • /src/index.html
<div>
  <main-component>
    <div slot="first">This is first description</div>
    <div slot="second">This is second description</div>
    <div slot="third">This is third description</div>
  </main-component>
</div>

上記サンプルでは、 スロットの name 属性値と親ページの slot 属性値はリンクしています。

開発予定の機能 🚀

Props

  • 現在、Spear はコンポーネントの属性値の Props をサポートしていません。
    • 詳細については、この Issue を参照してください。