hyTags
hyTags – Declarative Programming in HTML
hyTags is a programming language that uses HTML tags as syntax elements. It can be used for many tasks that would normally require javascript and is optimized for creating self-contained, server side-rendered UI components.Example: Animations
<button>Start</button>
<on click>
<selection-change next-sibling="div">
<selection-change first-child="car">
<style-set name="position" value="absolute">
<style-set name="left" value="0px">
<function-delay seconds="0.2">
<style-animate duration="0.5">
<style-set name="left" value="calc(100% - 50px)">
</style-animate>
</on>
<div style="position: relative; font-size: 44px; width: 100%">
<car style="display: inline-block; transform: scaleX(-1)">🏎️</car>
</div>
Concepts
- Stack-oriented: While named variables are supported, the language is primarily stack-oriented. The return values of commands are added to the current stack and following commands read them from the stack as input for their parameters, unless parameters are provided explicitly.
- Dynamically typed: Commands always know the types of their parameters. If the current value at the top of the stack doesn't match the required type, the command searches down the stack until it finds a type that matches.
- Event based: Code is always executed in response to events. Event handlers can be attached to any element by placing an <on (event)> tag next to it.
- DOM attached: Code is always executed in the context of a DOM element (the "selection"). Initially the selection is set to the event target. It can be changed by using the <selection-change>, <selection-scope> and <selection-loop> commands.
Features
- Control flow like loops and conditional execution
- Named variables and unnamed stack variables
- Numeric calulations
- Date and time calculations
- Recursive functions and closures
- Asynchronous execution
- DOM manipulation and animations
- Network requests
- Basic reactive primitives
Example: Fibonacci Numbers
<form view="vstack" alignment="right" style="gap: 8px">
<input type="text" name="n" value="20">
<button>Calculate</button>
</form>
<on submit>
<form-get-value name="n">
<number-from-string>
<function-call name="fib"></function-call>
<debug-log>
</on>
<function name="fib" param-n="number" return="number">
<number-is-equal other="0">
<if-true>
<function-return value="0">
</if-true>
<number-is-equal other="1">
<if-true>
<function-return value="1">
</if-true>
<var-eval name="first">
<number-subtract self-var="n" value="1">
<function-call name="fib"></function-call>
</var-eval>
<var-eval name="second">
<number-subtract self-var="n" value="2">
<function-call name="fib"></function-call>
</var-eval>
<number-add self-var="first" value-var="second">
</function>