Skip to content

joelnet/html-lang

Repository files navigation

HTML is a Programming Language!

HTML is now a Turing complete programming language with the html-lang library.

html-lang is experimental and currently in development. So that means don't go slipping this into your production site! Proceed at your own risk!

html-lang features no build step, no bundling, no webpack configs. Open up your HTML, include the script and start writing HTML.

At only 5.7kB (gzip) in size, html-lang is a tiny but powerful framework.

Why?

Most frameworks are designed to be template engines. These typically mix their template language and JavaScript. Meaning you write and tie together both.

While html-lang is similar to quite a bit of existing tech out there, the focus of this library is to bring that programming feel to HTML.

This allows you to stay inside the framework.

Install

Include the script tag into the <head></head> section of your HTML.

<script src="https://unpkg.com/@joelnet/[email protected]/umd/html-lang.js"></script>

Variables

Variables are globally scoped.

<!-- String -->
<val message="Hello World"></val>

<!-- Number -->
<val x:number="888"></val>

<!-- Boolean -->
<val test:bool="true"></val>

<!-- Object -->
<val y:object="{ x: 1, y: 2 }"></val>

<!-- Array -->
<val z:object="['A', 'B', 'C']"></val>

Computed Values

The computed value syntax has a :? at the end of the Variable name.

<!-- Set name -->
<val name="World"></val>

<!-- Compute Message -->
<val message:?="'Hello ' + name"></val>

Output

Display a Variable

<!-- set message to "Hello World" -->
<val message="Hello World"></val>

<!-- Display message -->
<span #text="message"></span>

If / Conditional

<if test="x > 10">X is GREATER than 10!</if>

An else can follow an if element.

<if test="x > 10">X is GREATER than 10!</if>
<else>X is NOT GREATER than 10!</else>

Loops

A for-of loop will loop through all the items in the collection, setting the item to the variable specified.

<!-- Array -->
<val todos:object="['Be nice to others', 'Drink water']"></val>

<!-- todo in todos -->
<ul todo:for:of="todos">
  <li #text="todo"></li>
</ul>
<!-- <ul> -->
<!--   <li>Be nice to others</li> -->
<!--   <li>Drink water</li> -->
<!-- </ul> -->

A for-in loop will loop through all the items in the collection, setting the index to the variable specified.

<!-- Array -->
<val todos:object="['Be nice to others', 'Drink water']"></val>

<!-- set i to 1 -->
<ul index:in="todos">
  <li #text="index"></li>
</ul>
<!-- <ul> -->
<!--   <li>0</li> -->
<!--   <li>1</li> -->
<!-- </ul> -->

for-of and for-in can be combined together if they both point to the same collection.

<!-- Array -->
<val todos:object="['Be nice to others', 'Drink water']"></val>

<!-- set i to 1 -->
<ul index:for:in="todos" todo:for:of="todos">
  <li><span #text="index+1"></span>. <span #text="todo"></span></li>
</ul>
<!-- <ul> -->
<!--   <li>1. Be nice to others</li> -->
<!--   <li>2. Drink water</li> -->
<!-- </ul> -->

Subroutines

A Subroutine can be created to run common tasks. Subroutines take no arguments and return no values, but do have access to the variables.

Fetching Data

<!-- fetch data -->
<val response:fetch="'https://swapi.dev/api/people/1'"></val>

<!-- destructure response into loading, error, data -->
<val
  loading:?="response.loading"
  error:?="response.error"
  data:?="response.json"
></val>

<!-- Show when Loading -->
<if test="loading">Loading...</if>

<!-- Show if Error -->
<if test="error"> Error: <span #text="error"></span> </if>

<!-- Display Data -->
<if test="data">
  <div>name: <span #text="data.name"></span></div>
  <div>gender: <span #text="data.gender"></span></div>
  <div>height: <span #text="data.height"></span>cm</div>
</if>

Examples

FizzBuzz

<!-- loop through 1 to 100 -->
<div num:for:of="range(1, 100)">
  <!-- set fizz and buzz Booleans -->
  <val fizz:?="num % 3 === 0" buzz:?="num % 5 === 0"></val>

  <div>
    <!-- Fizz Buzz -->
    <if test="fizz">Fizz</if><if test="buzz">Buzz</if>

    <!-- no match -->
    <if test="!fizz && !buzz">
      <span #text="num"></span>
    </if>
  </div>
</div>

TODO List

<val todos:object="['Be nice to others', 'Drink water']"></val>

<input type="text" bind:value="newtodo" />
<button on:click:todos="[...todos, newtodo]">add</button>

<hr />

<div watch="todos">
  <ul todo:for:of="todos">
    <li>
      <button on:click:todos="todos.filter((item) => item !== todo)">X</button>
      <span #text="todo"></span>
    </li>
  </ul>
</div>

Dialog

<val open:bool="false"></val>

<div watch="open">
  <button on:click:open="!open" #text="open ? 'Close' : 'Open'"></button>

  <dialog #open="open">
    <h2>Hello Dialog!</h2>
  </dialog>
</div>

More Examples

Alternatives

  • Alpine.js — Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

About

HTML is a Programming Language!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •