From afdcd420393706667637c1b9dd18735670bc0d3d Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Fri, 28 Feb 2025 19:48:58 -0500
Subject: [PATCH] atomify log

---
 packages/tidal/package.json                   |  2 +-
 .../src/repl/components/panel/ConsoleTab.jsx  | 45 +++----------------
 website/src/repl/components/panel/Panel.jsx   |  2 +
 website/src/repl/components/useLogger.jsx     | 33 ++++++++++++++
 4 files changed, 41 insertions(+), 41 deletions(-)
 create mode 100644 website/src/repl/components/useLogger.jsx

diff --git a/packages/tidal/package.json b/packages/tidal/package.json
index 94507aa9..1758732d 100644
--- a/packages/tidal/package.json
+++ b/packages/tidal/package.json
@@ -5,7 +5,7 @@
   "module": "tidal.mjs",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/felixroos/hs2js.git"
+    "url": "git+https://github.com/tidalcycles/strudel/tree/main/packages/tidal"
   },
   "keywords": [
     "haskell",
diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index fdc07d88..c6a2403a 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -1,45 +1,14 @@
-import { logger } from '@strudel/core';
-import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
-import { nanoid } from 'nanoid';
-import { useCallback, useState } from 'react';
 import { useSettings } from '../../../settings.mjs';
+import { useStore } from '@nanostores/react';
+import { $strudel_log_history } from '../useLogger';
 
-function getUpdatedLog(log, event) {
-  const { message, type, data } = event.detail;
-  const lastLog = log.length ? log[log.length - 1] : undefined;
-  const id = nanoid(12);
-  // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
-  if (type === 'loaded-sample') {
-    // const loadIndex = log.length - 1;
-    const loadIndex = log.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
-    log[loadIndex] = { message, type, id, data };
-  } else if (lastLog && lastLog.message === message) {
-    log = log.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
-  } else {
-    log = log.concat([{ message, type, id, data }]);
-  }
-  return log.slice(-20);
-}
-
-//ensures that the log state persists when component is remounted
-let logSaved = [];
 export function ConsoleTab() {
-  const [log, setLog] = useState(logSaved);
+  const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
-
-  useLogger(
-    useCallback((event) => {
-      setLog((log) => {
-        const newLog = getUpdatedLog(log, event);
-        logSaved = newLog;
-        return newLog;
-      });
-    }, []),
-  );
   return (
-    <div id="console-tab" className="break-all  first-line:text-sm p-2  h-full" style={{ fontFamily }}>
-      <div className="bg-background h-full overflow-auto space-y-1 p-2 rounded-md">
+    <div id="console-tab" className="break-all w-full  first-line:text-sm p-2  h-full" style={{ fontFamily }}>
+      <div className="bg-background h-full w-full overflow-auto space-y-1 p-2 rounded-md">
         {log.map((l, i) => {
           const message = linkify(l.message);
           const color = l.data?.hap?.value?.color;
@@ -82,7 +51,3 @@ function linkify(inputText) {
 
   return replacedText;
 }
-
-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
-}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 81fcacf7..b26c2ede 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -5,6 +5,7 @@ import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
 import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
+import { useLogger } from '../useLogger';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
 import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
@@ -115,6 +116,7 @@ function PanelNav({ children, className, settings, ...props }) {
 }
 
 function PanelContent({ context, tab }) {
+  useLogger();
   switch (tab) {
     case tabNames.patterns:
       return <PatternsTab context={context} />;
diff --git a/website/src/repl/components/useLogger.jsx b/website/src/repl/components/useLogger.jsx
new file mode 100644
index 00000000..fdd56606
--- /dev/null
+++ b/website/src/repl/components/useLogger.jsx
@@ -0,0 +1,33 @@
+import useEvent from '@src/useEvent.mjs';
+import { logger } from '@strudel/core';
+import { nanoid } from 'nanoid';
+import { atom } from 'nanostores';
+
+export const $strudel_log_history = atom([]);
+
+function useLoggerEvent(onTrigger) {
+  useEvent(logger.key, onTrigger);
+}
+
+function getUpdatedLog(log, event) {
+  const { message, type, data } = event.detail;
+  const lastLog = log.length ? log[log.length - 1] : undefined;
+  const id = nanoid(12);
+  if (type === 'loaded-sample') {
+    const loadIndex = log.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
+    log[loadIndex] = { message, type, id, data };
+  } else if (lastLog && lastLog.message === message) {
+    log = log.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
+  } else {
+    log = log.concat([{ message, type, id, data }]);
+  }
+  return log.slice(-20);
+}
+
+export function useLogger() {
+  useLoggerEvent((event) => {
+    const log = $strudel_log_history.get();
+    const newLog = getUpdatedLog(log, event);
+    $strudel_log_history.set(newLog);
+  });
+}