add REPL tracking

jcubic · Oct 11, 2024 · 0a8b7c6 · 0a8b7c6
1 parent 97e9800
commit 0a8b7c6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/docs/src/components/Interpreter/index.tsx b/docs/src/components/Interpreter/index.tsx
@@ -15,6 +15,9 @@ export interface TerminalProps extends CSSProperties {
   '--size': string;
 }
 
+type PiwikTrack = Array<Array<string>>;
+export type JQueryTerminal = ReturnType<typeof globalThis.terminal>;
+
 const replReady = () => {
     return (
         globalThis.jQuery &&
@@ -24,7 +27,22 @@ const replReady = () => {
     );
 }
 
+// monkey patch keymap added by LIPS terminal
+function trackCommands(term: JQueryTerminal) {
+  const _paq = globalThis._paq as PiwikTrack
+  let command: string;
+  term.option('onCommandChange', (cmd: string) => {
+    command = cmd;
+  });
+  const ENTER = term.cmd().keymap('ENTER');
+  term.cmd().keymap('ENTER', function(e: KeyboardEvent, orig: () => any) {
+    _paq.push(['trackEvent', 'REPL', 'command', command]);
+    return ENTER(e, orig);
+  });
+}
+
 export default function Interpreter(): JSX.Element {
+  const _paq = globalThis._paq as PiwikTrack
   const [activeSnippet, setActiveSnippet] = useState(0);
   const [size, setSize] = useState(1);
   const ref = useRef<HTMLDivElement>();
@@ -43,7 +61,8 @@ export default function Interpreter(): JSX.Element {
   useLayoutEffect(() => {
     (function loop() {
       if (replReady() && styleReady()) {
-        initTerminal();
+        const term = initTerminal();
+        trackCommands(term);
       } else {
         setTimeout(loop, 100);
       }
@@ -53,10 +72,13 @@ export default function Interpreter(): JSX.Element {
 
   function execSnippet(selector = '.example:visible') {
     const $ = globalThis.jQuery;
-    const code = $(selector).text();
+    const $snippet = $(selector);
+    const code = $snippet.text();
+    const index = $snippet.closest('li').index();
     const term = $('.term').terminal();
     term.echo(term.get_prompt(), { formatters: false });
     term.exec(code, true);
+    _paq.push(['trackEvent', 'REPL', 'snippet', index + 1]);
     if (typeof screen.orientation === 'undefined') {
       setTimeout(() => term.focus(), 0);
     }

diff --git a/docs/src/components/Interpreter/terminal.ts b/docs/src/components/Interpreter/terminal.ts
@@ -2,6 +2,7 @@ let original: string;
 
 export function initTerminal() {
   const $ = globalThis.$;
+
   $.terminal.syntax('scheme');
   const $term = $('.term');
   if (!original) {
@@ -14,6 +15,7 @@ export function initTerminal() {
     name: 'demo',
     lips: globalThis.lips
   });
+
   term.tooltips($('.example'), ($node: any) => $node.text(), function($node: any) {
     const offset = $node.offset();
     const top = offset.top;
@@ -35,6 +37,8 @@ to display list of matched names in environment.`
   }), {
     formatters: false
   });
+
+  return term;
 };
 
 export function destroyTerminal() {