supercharged-html v0.2.8

Supercharged HTML

Pure HTML files with statically rendering components.

What is the use of it?

In traditional HTML, you cannot split HTML codes into multiple files. If you want to update header component, you must also update the other 10+ page files. supercharged-html gives you the opportunity to make static HTML components.

Most of the features are inspired from VueJS.

What is "static components"

Unlike Vue or React components, static components cannot be updated in runtime, so only use of them is to split HTML codes in order to reduce complexity of a single page file.

For an example; lets say you have a button element, which basically includes a content, icon and a text.

<button class="button">
  <span class="button-content">
    <svg class="button-icon"></svg>
    Button
  </span>
</button>

If you want to use it, you must copy and paste this HTML code to everywhere you use the button.

In supercharged-html, you can create a components/button.html:

<button class="button">
  <span class="button-content">
    <slot name="icon" class="button-icon"></slot>
    <slot></slot>
  </span>
</button>

Now, you can just use it like:

<s-button>
  <template #icon>
    <svg></svg>
  </template>
  Button
</s-button>

The slot functionality of supercharged-html is similar to VueJS slots. One difference is, you cannot pass attributes to slots in Vue, but supercharged-html does.

<!-- component -->
<div>
  <slot></slot>
  <slot name="slotName" class="slot-name"></slot>
  <slot name="otherSlotName"></slot>
</div>

<!-- page -->
<s-component>
  Default slot
  <template #slotName>
    <div>slotName</div>
  </template>
  <template name="otherSlotName">
    otherSlotName
  </template>
</s-component>

<!-- output -->
<div>
  Default slot
  <div class="slotName">slotName</div>
  otherSlotName
</div>

Get started

To get started, you need to install supercharged-html:

npm install supercharged-html --dev

yarn add -D supercharged-html

Now, you can add these scripts:

{
  "scripts": {
    "dev": "supercharged-html",
    "build": "supercharged-html build"
  }
}

dev command can be used for watching HTML files and rebuilding them when they are changed.

build command can be used for building the HTML files, it also beautifies the output files.

Page structure

Before running the scripts, you must have these directories:

- src
--- pages
--- components

/src/components

• All the files in components directory will be regarded as a "component" and won't be seen as an individual file in dist.
• In order to use a component, you should use the "s" prefix: <s-{componentName}>
• Each component tag must be closed:

<!-- INVALID -->
<s-button>

<!-- INVALID -->
<s-button />

<!-- VALID -->
<s-button></s-button>

• Each component file must have a single root element.

/src/pages

• All the files in pages directory will be regarded as a "page" and will be compiled onto dist folder.
• Pages cannot be nested (for example, you cannot have a src/pages/shop/single-product.html file).

Component props

Like Vue, you can pass props to components.

• The use of props is also similar to VueJS, you can use a prop like {{ propName }}
• If you don't use the passed props in template, it will be passed as an HTML attribute. For example:

<!-- component -->
<button>
  Button
</button>

<!-- page -->
<s-button label="title"></s-button>

<!-- output -->
<button label="title">Button</button>

But if you use a prop in template, it won't be passed as an HTML attribute.

<!-- component -->
<button>
  {{ label }}
</button>

<!-- page -->
<s-button label="title"></s-button>

<!-- output -->
<button>title</button>

• You can also use props as renderer conditions.

<!-- component -->
<div class="s-test">
  <div s-if="testNumber === 2">Is 2</div>
  <div s-else-if="testNumber > 2">More than 2</div>
  <div s-else>1 or less</div>
</div>

<!-- page -->
<s-test test="4"></s-test>

<!-- output -->
<div class="s-test">
  <div>More than 3</div>
</div>

The values of s-if and s-else-if attributes are javascript expressions that are evaluated with the component attributes.

• Inside brackets you can use Javascript expressions, like {{ propName === "case" ? "case1": "case2" }}

• You should define attributes kebab-case, but inside brackets you must use their camelCase version.

<!-- page -->
<s-test></s-test>

## Examples
Simple component
```html
<!-- component -->
<button class="button button-{{size}} button-{{type}} button-{{theme}}">
  <div class="button-content">
    <slot></slot>
  </div>
</button>

<!-- page -->
<s-button
  size="small" 
  type="outline" 
  theme="secondary"
>
  Button
</s-button>

<!-- output -->
<button class="button button-small button-outline button-secondary">
  <div class="button-content">Button</div>
</button>

A layout (for sharing the style and script imports)

<!-- component -->
<html>
  <head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="assets/main.css">
  </head>
  <body>
    <slot></slot>

    <script src="assets/main.js"></script>
  </body>
</html>


<!-- page -->
<s-layout title="Login page">
  Login to your account
  <s-login-form></s-login-form>
</s-layout>

<!-- output -->
<html>
  <head>
    <title>Login page</title>
    <link rel="stylesheet" href="assets/main.css">
  </head>
  <body>
    Login to your account
    <form class="login-form"></form>

    <script src="assets/main.js"></script>
  </body>
</html>