lambdaway :: story3

8 | list | login |load

| |

{center [[story]] | [[story2]] | story3}

_h1 coding in a web browser

_p Inside the body of any HTML document writing

{center
{textarea {@ style="width:300px; height:50px; "}
<pre class="mini">
  any LT code
</pre><pre></pre> 
}}

_p displays a grey frame where can be written some functional programming code followed by its evaluation in real time. For example, using only lambda expressions:

<pre class="mini">
// swapping two words
((lambda (:a :b) :b :a) Hello World)

// the Towers of Hanoi
((lambda (:n :from :to :via)
(((lambda (:g) (:g :g)) 
   (lambda (:g :n :from :to :via)
  (((lambda (:a :b :c) (:a :b :c))
    ((lambda (:c) (:c 
      (lambda (:a :b) 
       (lambda (:a :b) :b)))) :n)
        (lambda (:g :n :from :to :via) )
         (lambda (:g :n :from :to :via) (:g :g 
         ((lambda (:c) (:c 
           (lambda (:a :b) :b))) :n) :from :via :to) (br) move 
           ((lambda (:c) (:c 
             (lambda (:a :b) :a))) :n) from tower :from to tower :to (:g :g
             ((lambda (:c) (:c 
               (lambda (:a :b) :b))) :n) :via :to :from) )) :g :n :from :to :via))) :n :from :to :via))
               ((lambda (:a :b :c) (:c :a :b)) Disk_1
               ((lambda (:a :b :c) (:c :a :b)) Disk_2
               ((lambda (:a :b :c) (:c :a :b)) Disk_3
               ((lambda (:a :b :c) (:c :a :b)) Disk_4 
                 (lambda (:a)
                  (lambda (:a :b) :a)))))) A B C)
</pre>
<pre></pre>

_p See explanations on "Towers of Hanoi" in [[hanoi]] and in [[coding]], section 9.

_p At this level the evaluation needs {b 61} lines of javascript implementing a single special form, {b lambda}:

{pre °°
var MINI = (function() {
  var DICT = {}, 
    regexp = /$([^\s()]*)(?:[\s]*)([^()]*)$/g,
  evaluate = function(s) {
    return eval_lambdas(s) 
  },
  eval_applications = function(s) {
    while (s !== (s = s.replace(regexp,
     function() {
       var f = arguments[1] || "", r = arguments[2] || "";
       return DICT.hasOwnProperty(f)?
              DICT[f].apply(null, [r]) : "[" + f + " " + r + "]"; })));
    return s;
  },
  eval_lambdas = function(s) {
    while (s !== (s = s.replace(catch_abstraction(s,"lambda"), eval_lambda)));
    return s
  },
  catch_abstraction = function(s,symb) {
    var start = s.indexOf("("+symb);
    if (start == -1) return "none";  
    var nb = 1, index = start; 
    while (nb > 0) {
      index++;
           if (s.charAt(index) == "(") nb++;
      else if (s.charAt(index) == ")") nb--; 
    } 
    return s.substring(start, index+1)     
  }, 
  eval_lambda = function(s) {
    s = s.trim().replace(/\s+/g, " ").substring(8).replace( /\)$/, "");
    var index = s.indexOf(")"),
       argStr = s.substring(1, index).trim(),
         args = argStr === "" ? [] : argStr.split(" "),
         body = s.substring( argStr.length+2 ).trim(),
         name = "#" + Math.random();    // caution!!
    body = eval_lambdas(body);
    DICT[name] = function() {
      var valStr = arguments[0].trim().replace(/\s+/g, " "),
            vals = valStr === "" ? [] : valStr.split(" "),
             bod = body.trim();
      if (vals.length < args.length) { 
          for (var i = 0; i < vals.length; i++)
            bod = bod.replace(RegExp(args[i], "g"), vals[i]);
          var _args_ = args.slice(vals.length).join(" ");
          bod = eval_lambda("(lambda (" + _args_ + ") " + bod + ")");
      } else if (vals.length === args.length) { 
          for (var i=0; i < args.length; i++)
            bod = bod.replace( RegExp(args[i], "g"), vals[i] );
      } else {                                  
          var _vals_ = vals.slice(0,args.length);
          _vals_[args.length-1] = vals.slice(args.length-1,vals.length).join(' ');
          for (var i=0; i < args.length; i++)
            bod = bod.replace( RegExp(args[i], "g"), _vals_[i] ); 
      } 
      return eval_applications(bod); 
    };
    return name
  };
  return { DICT, evaluate }
})();
°°}

_p In fact these 61 lines are the deepest foundations of a small functional programming language, {b LT}, a reduced fork of {b [[lambdatalk|?view=coding]]}, out of its native wiki environmemnt, {b [[lambdatank|?view=coding3]]}, and working in any HTML document.

_p {b LT} comes with four special forms, {b lambda, def, if, quote|'}, and a {b DICT}ionary containing an extendable set of primitives working on HTML/CSS, Math, words, sentences and arrays. For instance:

<pre class="mini">
(div 
 (@ style="font:italic 3.0em papyrus; 
           text-align:center; 
           color:#f00;")
 hello brave new world)

It is said that the father of LISP, John McCarthy, 
lamented the W3C's choice of SGML as the basis for HTML : 
« (i An environment where the markup, styling and scripting 
is all s-expression based would be nice.) »

The (a (@ href="?view=start")lambdaway project) could be an answer, small and simple.

'(sqrt (+ (* 3 3) (* 4 4)))
-> (sqrt (+ (* 3 3) (* 4 4)))

'(def hypo
 (lambda (:a :b)
  (sqrt (+ (* :a :a) (* :b :b)))))
-> (def hypo (lambda (:a :b) (sqrt (+ (* :a :a) (* :b :b)))))

'(hypo 3 4)
-> (hypo 3 4)
'(hypo 1 1)
-> (hypo 1 1)

'(def fac 
 (lambda (:n) 
  (if (< :n 1)
   then 1 
   else (long_mult :n (fac (- :n 1))))))
-> (def fac 
 (lambda (:n) 
  (if (< :n 1)
   then 1 
   else (long_mult :n (fac (- :n 1))))))

'(fac 50) 
-> (fac 50)

'(def hanoi
 (lambda (:n :from :to :via)
  (if (= :n 0)
   then 
   else (hanoi (- :n 1) :from :via :to)
        (br)move Disk_:n from tower :from to tower :to 
        (hanoi (- :n 1) :from :via :to))))
-> (def hanoi
 (lambda (:n :from :to :via)
  (if (= :n 0)
   then 
   else (hanoi (- :n 1) :from :via :to)
        (br)move Disk_:n from tower :from to tower :to 
        (hanoi (- :n 1) :from :via :to))))

'(hanoi 4 A B C)
-> (hanoi 4 A B C)
</pre><pre></pre>

_p Much more explanations and examples are given in [[story2]].

_p And yes, {b You can freely edit the code in grey frames.}

_h2 requirements

_p The above can be done in any HTML document provided that the following CSS rules and Javascript code are added.

_h3 1) css

_p Here are {b LT}'s css rules

{pre °°
pre {
 box-shadow:0 0 8px #000;
 padding:10px; 
}
.mini {
 box-shadow:0 0 0;
 background:#444;
 color:#fff;
 margin:0 0 -10px 0;
 opacity:0.5
}
.mini:hover {
 opacity:1; 
}
°°}

_h3 2) javascript

_p Here is {b LT}'s javascript code

{pre °° 
// INTERFACE with the HTML document

setTimeout(  
  function() {
    var minis = document.getElementsByClassName('mini');
    for (var i=0; i< minis.length; i++) {
      mini( minis[i] );
      minis[i].setAttribute( 'contenteditable', true );
      minis[i].addEventListener ( 'keyup', function() { return mini(this) } )  
    } 
  }, 1);

var mini = function (obj) {
  var s = obj.innerText,   
    bal = MINI.balance(s);
  obj.nextElementSibling.innerHTML =
    (bal.left === bal.right) ? MINI.evaluate( s ) : 
    'unbalanced expression [' + bal.left + '|' + bal.right + ']'
};

// EVAL

var MINI = (function() {

var DICT = {};
  var regexp = /$([^\s()]*)(?:[\s]*)([^()]*)$/g;

var evaluate = function(s) {
    s = preprocessing(s);
    s = eval_quotes(s);
    s = eval_lambdas(s);
    s = eval_defs(s);
    s = eval_ifs(s);
    s = eval_applications(s);
    s = postprocessing(s);
    return s 
  };

var eval_applications = function(s) { // nested (first rest)
    while (s !== (s = s.replace(regexp, eval_application)));
    return s;
  };

var eval_application = function() {
    var f = arguments[1] || "", r = arguments[2] || "";
    return DICT.hasOwnProperty(f)?
           DICT[f].apply(null, [r]) : "[" + f + " " + r + "]";
  };

var eval_lambdas = function(s) {
    while (s !== (s = s.replace(catch_abstraction(s,"lambda"), eval_lambda)));
    return s
  };

var eval_defs = function(s) {
    while (s !== (s = s.replace(catch_abstraction(s,"def"), eval_def)));
    return s   
  };

var eval_ifs = function(s) {
    while (s !== (s = s.replace(catch_abstraction(s,"if"), eval_if)));
    return s   
  };

var eval_quotes = function(s) {
    while (s !== (s = s.replace(catch_abstraction(s,"quote"), eval_quote)));
    return s   
  };

var catch_abstraction = function(s,symb) { // (symbol ...)
    var start = s.indexOf("("+symb);
    if (start == -1) return "none";  
    var nb = 1, index = start; 
    while (nb > 0) {
      index++; if (index > 100000) alert( "oops catch_index > 10000" )
           if (s.charAt(index) == "(") nb++;
      else if (s.charAt(index) == ")") nb--; 
    } 
    return s.substring(start, index+1)     
  }; 
 
  var eval_lambda = function(s) {       // "(lambda (args) body)"
    s = s.trim()
         .replace(/\s+/g, " ")
         .substring(8)                  // "(lambda "
         .replace( /\)$/, "");          //         "(args) body"
    var index = s.indexOf(")"),
       argStr = s.substring(1, index).trim(),
         args = argStr === "" ? [] : argStr.split(" "),
         body = s.substring( argStr.length+2 ).trim(),
         name = "#" + Math.random();    // caution!!

body = eval_lambdas(body);

DICT[name] = function() {
      var valStr = arguments[0].trim().replace(/\s+/g, " "),
            vals = valStr === "" ? [] : valStr.split(" "),
             bod = body.trim();
      if (vals.length < args.length) {          // 1) partial call
          for (var i = 0; i < vals.length; i++)
            bod = bod.replace(RegExp(args[i], "g"), vals[i]);
          var _args_ = args.slice(vals.length).join(" ");
          bod = eval_lambda("(lambda (" + _args_ + ") " + bod + ")");
      } else if (vals.length === args.length) { // 2) total call
          for (var i=0; i < args.length; i++)
            bod = bod.replace( RegExp(args[i], "g"), vals[i] );
      } else {                                  // 3) extra -> the last one
          var _vals_ = vals.slice(0,args.length);
          _vals_[args.length-1] = vals.slice(args.length-1,vals.length).join(' ');
          for (var i=0; i < args.length; i++)
            bod = bod.replace( RegExp(args[i], "g"), _vals_[i] ); 
      } 
      bod = eval_ifs(bod);
      return eval_applications(bod); 
    };

return name
  };

var eval_def = function(s) {     // "(def name body)"
    s = s.trim()
         .replace(/\s+/g, " ")
         .substring(5)             // "(def "
         .replace( /\)$/, "");     //      "name body"
    var index = s.indexOf(" ");
    var name = s.substring(0, index).trim();
    var body = s.substring(index).trim();

body = eval_defs(body);

if (body.charAt(0) === "#") {
      DICT[name] = DICT[body];
    } else {
      body = eval_applications(body);
      DICT[name] = function() {
        return body;
      };
    }
    return (name.charAt(0) === "_")? "" : name  
  };

var eval_if = function(s) {      // (if bool then one else two)
    s = s.trim()
         .replace(/\s+/g, " ")
         .substring(4)             // "(if "
         .replace( /\)$/, "");     //    "bool then one else two"
    s = eval_ifs(s);
    var index1 = s.indexOf( 'then' ),
        index2 = s.indexOf( 'else' ),
        bool   = s.substring(0,index1).trim(),
        one    = s.substring(index1+5,index2).trim(),
        two    = s.substring(index2+5).trim(); 
    return (eval_applications(bool) === 'true')? one : two
  };

var eval_quote = function(s) {   //  (quote ...)
    s = s.trim()
         .substring(7)             // "(quote "
         .replace( /\)$/, "");     //        "..."
    var name = '_¥_' + Math.random(); // _¥_ some umprobable word
    DICT[name] = s;
    return name
  };

var preprocessing = function(s) {  // '(+ 1 2) -> (quote (+ 1 2))
    s = s.replace(/'\(/g, "(quote ");
    return s
  };

var postprocessing = function(s) {
    s = s.replace( /_¥_[^\s]*/g, function(s) {   
           return '(' + DICT[s] + ')' } )   
    return s
  };

var balance = function(s) {
    var strt = s.match(/$/g),
        stop = s.match(/$/g);
    strt = strt ? strt.length : 0;
    stop = stop ? stop.length : 0;
    return { left:strt, right:stop };
  };

return { DICT, evaluate, balance }

})();  // en MINI

// DICTIONARY

var htmltags = [ 
'div', 'span', 'a', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 
'table', 'tr', 'td', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 
'p', 'b', 'i', 'u', 'center', 'br', 'hr', 'blockquote', 
'del', 'sup', 'sub', 'code', 'img', 'pre', 
'audio', 'source', 'svg', 'path', 'circle', 'animateMotion', 'mpath' ];

MINI.DICT['@'] = function() { return '@@' + arguments[0].trim() + '@@' } ;

for (var i=0; i< htmltags.length; i++) {        // (div (@ attributs)texte)
  MINI.DICT[htmltags[i]] = function(tag) {      // tag = div
    return function() {                         
      var args = arguments[0].trim();           // args = @@attributs@@texte, don't supertrim for pre
      var attr = args.match( /@@[\s\S]*?@@/ );  // attr[0] = @@attributs@@
      if (attr == null) {                       // args = texte
        return '<'+tag+'>'+args+'</'+tag+'>';   // < div>texte< /div>
      } else {
        args = args.replace( attr[0], '' ).trim();             // args = texte
        attr = attr[0].replace(/^@@/, '').replace(/@@$/, '');  // attr = attributs
        return '<'+tag+' '+attr+'>'+args+'</'+tag+'>';         // < div attributs>texte< /div>
      }
    } 
  }(htmltags[i]);
}

MINI.DICT['prewrap'] = function () {
  var args = arguments[0];
  return '(pre (@ style="word-wrap: break-word; white-space:pre-wrap;")' + args + ')'
};

MINI.DICT["="] = function() {
    var a = arguments[0].trim().replace(/\s+/g, " ").split(" "),
        x = Number(a[0]), y = Number(a[1]); 
  return (!(x < y) && !(y < x))
};
MINI.DICT["<"] = function() {
    var a = arguments[0].trim().replace(/\s+/g, " ").split(" "),
        x = Number(a[0]), y = Number(a[1]); 
  return (x < y)
};
MINI.DICT["<="] = function() {
    var a = arguments[0].trim().replace(/\s+/g, " ").split(" "),
        x = Number(a[0]), y = Number(a[1]); 
  return (x <= y)
};
MINI.DICT[">"] = function() {
    var a = arguments[0].trim().replace(/\s+/g, " ").split(" "),
        x = Number(a[0]), y = Number(a[1]); 
  return (x > y)
};

MINI.DICT['+'] = function() {
  return arguments[0].trim().replace(/\s+/g, " ").split(' ')
                     .reduce( (a,b) => Number(a)+Number(b) , 0 ) }; 
MINI.DICT['*'] = function() { 
  return arguments[0].trim().replace(/\s+/g, " ").split(' ')
                     .reduce( (a,b) => a*b , 1 ) }; 
MINI.DICT['-'] = function() { 
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' ');
  return args[0]-args[1] 
}; 
MINI.DICT['/'] = function() { 
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' ');
  return args[0]/args[1] 
};

MINI.DICT['sqrt'] = function() { 
  return Math.sqrt( arguments[0].trim() ) };

MINI.DICT['long_add'] = function () {
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '),
         a = args[0].split("").reverse(),
         b = args[1].split("").reverse(),
         n = Math.max(a.length, b.length), 
         c = [], 
         d = 0;
  for (var i=0; i < n; i++) {
    c[i] = (a[i] | 0) + (b[i] | 0) + d;
    if (c[i] > 9) {
      c[i] -= 10;
      d = 1;
    } else {
      d = 0;
    }
  } 
  if (d === 1) c.push(1);
  return c.reverse().join('') 
};

MINI.DICT['long_mult'] = function () {
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '),
         a = args[0].split("").reverse(),
         b = args[1].split("").reverse(),
         c = [];
  for ( var i1 = 0; i1 < a.length; i1++ ) {
    for ( var i2 = 0; i2 < b.length; i2++ ) {
      var j = i1 + i2;
      c[j] = a[i1] * b[i2] + (c[j] | 0);
      if ( c[j] > 9 ) { 
        var f = Math.floor( c[j] / 10 );
        c[j] -= f * 10;
        c[j+1] = f + (c[j+1] | 0);
      }
    }   
  }
  return c.reverse().join("")
};

MINI.DICT['turtle'] = function () {
  var draw = function(str) { // {turtle x0 y0 a0 M100 T90 M50 T-45 ...}
    var args = str.split(' ');
    var x0 = parseFloat(args[0]),
        y0 = parseFloat(args[1]),
        a0 = parseFloat(args[2]),
        poly = [];
    poly.push( [x0, y0, a0] );
    for (var i=3; i < args.length; i++) {
      var act = args[i].charAt(0),
          val = parseFloat(args[i].substring(1));
      if (act === 'M') {
        var p = poly[poly.length-1],
            a = p[2] * Math.PI / 180.0,
            x = p[0] + val * Math.sin(a),
            y = p[1] + val * Math.cos(a);
        poly.push( [x,y,p[2]] )
      } else {
        var p = poly.pop();
        poly.push( [p[0],p[1],p[2]+val] ) 
      }
    }
    for (var pol = '', i=0; i < poly.length; i++)
      pol += Math.round(poly[i][0]) + ' ' +  Math.round(poly[i][1]) + ' ';
    return pol
  };
  return draw( arguments[0].trim().replace(/\s+/g, " ") ); 
};

// WORDS

MINI.DICT["W.equal?"] = function() {
    var a = arguments[0].trim().replace(/\s+/g, " ").split(' ');
    return a[0] === a[1];
};
MINI.DICT['W.empty?'] = function() {
  var a = arguments[0].trim();
  return (a === ''); 
};
MINI.DICT['W.slice'] = function() {
  var a = arguments[0].trim().replace(/\s+/g, " ").split(' '),
      w = a[2],
      i0 = parseInt(a[0]),
      i1 = parseInt(a[1]);
  i1 = (i1 > 0) ? i1 : w.length+i1;
  return w.slice(i0,i1); 
};

// SENTENCES

MINI.DICT['S.empty?'] = function() {
  var a = arguments[0].trim();
  return (a === ''); 
};

MINI.DICT['S.slice'] = function() { 
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '),
      i0 = parseInt(args.shift()),
      i1 = parseInt(args.shift()),
      s  = args;
  i1 = (i1 > 0) ? i1 : args.length+i1;
  return s.slice(i0,i1).join(' '); 
};

// ARRAYS
// should be embedded in an IIFE to avoid pollution

var ARR = {}

MINI.DICT['A.new'] = function () {  // (A.new a b c d)
  var args = arguments[0].trim().replace(/\s+/g, " "),
      name = '#' + Math.random();
  ARR[name] = (args != '')? args.split(' ') : [];
  return name;
};

var isARR = function (z) {
  return (z !== '' && z.charAt(0) === '#') 
};

MINI.DICT['A.disp'] = function () { 
  var args = arguments[0].trim(), str = ''; 
  var rdisp = function( a ) {
    for (var i=0; i< ARR[a].length; i++) {
      if (isARR(ARR[a][i])) {
        str += '[';
        rdisp( ARR[a][i] );
        str = str.substring(0, str.length-1) + '],';
      } else
        str += ARR[a][i] + ',';
    }
    return str.substring(0, str.length-1) ;
  };
  return (isARR(args))? '[' + rdisp( args ) + ']' : args;
};

MINI.DICT['A.empty?'] = function () {
  var args = arguments[0].trim();
  return (ARR[args].length < 1);
};

MINI.DICT['A.length'] = function () { // {#.length z}
  var args = arguments[0].trim(); // z
  return (isARR(args))? ARR[args].length : 0;
};

MINI.DICT['A.get'] = function () { // {#.item i z}
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '); 
  return (isARR(args[1]))? ARR[args[1]][args[0]] : args[1];
};

MINI.DICT['A.set!'] = function () { // {#.set! i v z}
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '); 
  ARR[args[2]][args[0]] = args[1];
  return args[2];
};

MINI.DICT['A.addfirst!'] = function () { // {#.unshift! v z}
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' ');
  ARR[args[1]].unshift( args[0] );
  return args[1];
};

MINI.DICT['A.slice'] = function () { // (A.slice i0 i1 array)
  var args = arguments[0].trim().replace(/\s+/g, " ").split(' '),
      i0 = parseInt(args.shift()),
      i1 = parseInt(args.shift()),
      name = '#' + Math.random();
  i1 = (i1 > 0) ? i1 : ARR[args].length+i1;
  ARR[name] = ARR[args].slice(i0,i1); 
  return name; 
};

// and so on, extendable on demand.
°°}

_p {i Alain Marty | 2022/03/08}
_p [[HN|https://news.ycombinator.com/item?id=30597097]]

{style 
pre { box-shadow:0 0 8px #000; padding:10px; overflow-x:scroll; }
.mini { box-shadow:0 0 0; background:#444; color:#fff; margin: 0 0 -10px 0; opacity:0.5}
.mini:hover { opacity:1; }
.brace:hover { color:#f00; }
}

{script

// INTERFACE integrable in any HTML document