Proper echo context handling (#183)

* Proper echo context handling

* Update runtime structure

* Update clear() to echo.clear()

* Add observable notebook-kit attribution

* Update test filename

* Fix top-level async function

* Update comments

* Update comments

* Resolve foo conflict to __foo__

* Normalize arraw function first

* Fix arrow function rewrites

* Fix example corpora-art-isms

* Fix API reference

* Handle echo as a param

* Handle default params

Author: pearmini

LICENCE

@@ -12,4 +12,23 @@ FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
 OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
 TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
-THIS SOFTWARE.
+THIS SOFTWARE.
+
+---
+
+Portions of this software are derived from Observable Notebook Kit, which is
+released under the ISC license.
+
+Copyright 2025 Observable, Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

app/docs/animations-authoring.recho.js

@@ -120,7 +120,7 @@ echo("~".repeat(x) + "(๑•̀ㅂ•́)و✧");
   const loop = () => {
     const x = 40 - (i++ % 40);
     const turtle = "🐢".padStart(x);
-    clear(); // Clear the output of the current block.
+    echo.clear(); // Clear the output of the current block.
     echo(turtle);
   };
 

app/docs/api-reference.recho.js

@@ -83,7 +83,7 @@ const array1000 = echo(recho.inspect(new Array(1000).fill(0), {limit: Infinity})
 
 /**
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- *                                clear()
+ *                              echo.clear()
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  *
  * Clear the output of the current block.
@@ -93,7 +93,7 @@ const array1000 = echo(recho.inspect(new Array(1000).fill(0), {limit: Infinity})
 
 {
   echo("Hello, World!");
-  setTimeout(() => clear(), 1000);
+  setTimeout(() => echo.clear(), 1000);
 }
 
 /**
@@ -113,7 +113,7 @@ const array1000 = echo(recho.inspect(new Array(1000).fill(0), {limit: Infinity})
   const timer = setInterval(() => {
     if (count-- <= 0) clearInterval(timer);
     else {
-      clear();
+      echo.clear();
       echo(count);
     }
   }, 1000);

app/docs/inline-echoing.recho.js

@@ -229,13 +229,13 @@ const array1000 = echo(recho.inspect(new Array(1000).fill(0), {limit: 80}));
  *                           Clearing Output
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  *
- * You can call `clear` to clear the output of the current block. For example,
- * click the 🔁 button to see the output being cleared after 1 second.
+ * You can call `echo.clear()` to clear the output of the current block. For 
+ * example, click the ▶️ button to see the output being cleared after 1 second.
  */
 
 {
   echo("hello world");
-  setTimeout(() => clear(), 1000);
+  setTimeout(() => echo.clear(), 1000);
 }
 
 /**

app/docs/reactive-blocks.recho.js

@@ -123,7 +123,7 @@ const random = echo(Math.random());
   const timer = setInterval(() => {
     if (count-- <= 0) clearInterval(timer);
     else {
-      clear();
+      echo.clear();
       echo(count);
     }
   }, 1000);

app/examples/corpora-art-isms.recho.js

@@ -27,7 +27,9 @@ const response = await fetch("https://raw.githubusercontent.com/dariusk/corpora/
 //➜   description: "A list of modernist art isms.",
 //➜   isms: [ "abstract expressionism", "academic", "action painting", "aestheticism", "art deco", "art nouveau", "avant-garde", "barbizon school", "baroque", "bauhaus", "biedermeier", "caravaggisti", "carolingian", "classicism", "cloisonnism", "cobra", "color field painting", "conceptual art", "cubism", "cubo-futurism", "dada", "dadaism", "de stijl", "deformalism", "der blaue reiter", "die brücke", "divisionism", "eclecticism", "ego-futurism", "existentialism", "expressionism", "fauvism", "fluxus", "formalism", "futurism", "geometric abstraction", "gothic art", "gründerzeit", "hard-edge painting", "historicism", "hudson river school", "humanism", "hyperrealism", "idealism", "illusionism", "immagine&poesia", "impressionism", "incoherents", "installation art", "international gothic", "intervention art", "jugendstil", "kinetic art", "land art", "les nabis", "lettrism", "lowbrow", "luminism", "lyrical abstraction", "mail art", "manierism", "mannerism", "maximalism", "merovingian", "metaphysical art ", "minimalism", "modern art", "modernism", "monumentalism", "multiculturalism", "naturalism", "neo-classicism", "neo-dada", "neo-expressionism", "neo-fauvism", "neo-geo", "neo-impressionism", "neo-minimalism", "neoclassicism", "neoism", "neue slowenische kunst", "new media art", "new objectivity", "nonconformism", "nouveau realisme", "op art", "orphism", "ottonian", "outsider art", "performance art", "perspectivism", "photorealism", "pointilism", "pop art", "post-conceptualism", "post-impressionism", "post-minimalism", "post-painterly abstraction", "post-structuralism", "postminimalism", "postmodern art", "postmodernism", "pre-raphaelites", "precisionism", "primitivism", "purism", "rayonism", "realism", "relational art", "remodernism", "renaissance", "rococo", "romanesque", "romanticism", "russian futurism", "russian symbolism", "scuola romana", "secularism", "situationist international", "social realism", "socialist realism", "sound art", "street art", "structuralism", "stuckism international", "stuckism", "superflat", "superstroke", "suprematism", "surrealism", "symbolism", "synchromism", "synthetism", "systems art", "tachism", "tachisme", "tonalism", "video art", "video game art", "vorticism", "young british artists" ]
 //➜ }
-const data = echo(await response.json(), {indent: 2, limit: Infinity});
+const data = await response.json();
+
+echo(recho.inspect(data, {indent: 2, limit: Infinity}));
 
 //➜ "academic"
 echo(data.isms[frame % data.isms.length]);

app/examples/ml5-handpose.recho.js

@@ -84,7 +84,7 @@ handPose.detectStart(video, (hands) => {
     for (let j = 0; j < width; ++j) output += buffer[i * width + j];
     output += i === height - 1 ? "" : "\n";
   }
-  clear();
+  echo.clear();
   echo(output);
 });
 

editor/completion.js

@@ -27,7 +27,7 @@ const builtinFunctions = [
     type: "function",
     detail: "()",
     info: "Clears the output of the current block.",
-    apply: toApplyCompletion("clear()"),
+    apply: toApplyCompletion("echo.clear()"),
   },
   {
     label: "invalidation",

package.json

@@ -69,6 +69,7 @@
     "@observablehq/runtime": "^6.0.0",
     "@uiw/codemirror-theme-github": "^4.25.2",
     "acorn": "^8.15.0",
+    "acorn-walk": "^8.3.4",
     "cheerio": "^1.1.2",
     "codemirror": "^6.0.2",
     "d3-array": "^3.2.4",