Spear Component

Spear support component. This is similar to other web framework like Vue, Astro.

Simple usage

This is most simple component example:

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

The generated HTML is :

  • /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>

Component basic

Spear's component extension is .spear, and you should put component files under src/components directory.
You can change this project structure via spear.config.mjs.

For detail of configuration file, see Installation Guide.

Component Slot

Spear's component allow the slot feature.

What is slot?

Slot is communication way that parent to child component.
Imagine the situation that we want display image galleries.

The almost HTML is same in each images:

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

If we have 10 pictures, we should implement same HTML 10 times. In this case, we can use slot feature.

If we implement the following component, we can reduce same code.

  • /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>

Named slot

In simple site, it's enough to use a one slot in page. However, real world is complex.
Spear allow the multiple slot in page. In this case, we add name each slot, because the passed slot html doesn't know where should be injected.

  • /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>

In above sample, name attribute value of slot is linked to parent's slot attribute value.

Comming features 🚀

Props

  • Now, spear doesn't support props via component attributes.