lambdaway :: hyperscript

2 | list | login |load

| |

_h1 hyperscript

_p [[hyperscript|https://hyperscript.org/]] is an experimental scripting language designed for the web, inspired by [[HyperTalk|https://hypercard.org/HyperTalk%20Reference%202.4.pdf]]. We compare hyperscript and lambdatalk on the {b toggle} example.

_h2 1) hyperscript

{pre
1) adding the hyperscript code to the HTML page:

< script src="https://unpkg.com/hyperscript.org@0.0.9"></script>

2) writing some hyperscript syntax to the HTML code:

< button _="on click toggle .red-border on #toggle-target-3">
  Toggle Class
< /button>
< div id="toggle-target-3">
  Toggle Target
< /div>

3) with the red-border class defined this way:

< style>
.red-border '{
  padding:5px;
  border:2px solid re; 
  transition:ease 1s;
< /style>
}

}

_p Note: HTML tags are deactivated to be displayed.

_h2 2) lambdatalk

_h3 2.1) using vanilla JS without classList

{prewrap
'{pre {invert}        // pre or any other container
Et l'autre reste là, 
le meilleur ou le pire, 
le doux ou le sévère
Cela n'importe pas, 
celui des deux qui reste 
se retrouve en enfer 
}
-> {pre {invert}
Et l'autre reste là, 
le meilleur ou le pire, 
le doux ou le sévère
Cela n'importe pas, 
celui des deux qui reste 
se retrouve en enfer 
}

where

1) {b invert} is a lambdatalk constant:

'{def invert {@ class="invert" onclick="INVERT.action(this)"}}
-> {def invert {@ class="invert" onclick="INVERT.action(this)"}}

2) {b INVERT} is a javascript IIFE returning a function {b action()}:

'{script 
var INVERT = (function() {
    var flag = false;
    var action = function(el) {  
        flag = !flag;  
        if (flag) {
            el.style.color = "#fff";
            el.style.background = "#000";
        } else {
            el.style.color = "#000";
            el.style.background = "#fff";
        }
    };
    return {action}
})();
}

3) and the {b invert} class is defined this way:

'{style 
.invert {
  padding:5px;
  background:#fff;
  color:#000; 
  cursor:grab; 
  transition:ease 1s;
}
.invert:hover { background:#eee; }
}
}

{script 
var INVERT = (function() {
    var flag = false;
    var action = function(el) {  
        flag = !flag;  
        if (flag) {
            el.style.color = "#fff";
            el.style.background = "#000";
        } else {
            el.style.color = "#000";
            el.style.background = "#fff";
        }
    };
    return {action}
})();
}

_h3 2.2) using classList

{pre
'{pre {invert2}        // pre or any other container
Et l'autre reste là, 
le meilleur ou le pire, 
le doux ou le sévère
Cela n'importe pas, 
celui des deux qui reste 
se retrouve en enfer 
}  
-> {pre {invert2}
Et l'autre reste là, 
le meilleur ou le pire, 
le doux ou le sévère
Cela n'importe pas, 
celui des deux qui reste 
se retrouve en enfer 
}

where

1) {b invert2} is a lambdatalk constant

'{def invert2 {@ onclick="this.classList.toggle('invert2')"}}
-> {def invert2 {@ onclick="this.classList.toggle('invert2')"}}

2) and the {b invert2} class is defined this way:

'{style 
.invert2 {
  padding:5px;
  background:#000;
  color:#fff; 
  transition:ease 1s;
}
}

Notes: 
1) doesn't need any script,
2) doesn't accept .invert2:hover '{ background:#eee; }  nor cursor:grab,
3) doesn't return to previous state using transition 
}

{style 
.invert {
  padding:5px;
  background:#fff;
  color:#000; 
  cursor:grab; 
  transition:ease 1s;
}
.invert:hover { background:#eee; }

.invert2 {
  padding:5px;
  background:#000;
  color:#fff; 
  transition:ease 1s;
}

}