feat: trunucate inline console logs if the number of logs is over 50

env.js

@@ -1,2 +1,3 @@
 export const ENABLE_SW = true;
 export const USE_SHAREDWORKER = true;
+export const PRODUCTION_MODE = true;

package.json

@@ -44,7 +44,7 @@
         "prettier": "^2.5.1",
         "pretty-bytes": "^6.0.0",
         "resolve.exports": "^1.1.0",
-        "solid-js": "^1.3.8",
+        "solid-js": "^1.3.9",
         "typescript": "^4.5.5",
         "web-animations-js": "^2.3.2",
         "workbox-window": "^6.5.0"

src/css/components/_monaco.scss

@@ -2,8 +2,8 @@
     @apply w-full relative block;
     @apply flex gap-1;
 
-    height: 350px;
-    min-height: 350px;
+    height: 335px;
+    min-height: 335px;
 
     @apply lt-sm:flex-col;
 }

src/pug/index.pug

@@ -22,20 +22,23 @@ block content
 
       .search-results-container
 
-  .container.editor-section(class="!max-w-screen-lg relative !pt-0 pb-6")
-    .container.info-pane
-      .tab-btns.flex.flex-nowrap
-        .action-btns
-          button.btn.tab-style.input-btn.active(type="button") Input
-          button.btn.tab-style.output-btn(type="button") Output
-
-
-      .action-btns-overflow.flex.flex-grow
+  .container.editor-section(class="!max-w-screen-lg relative !pt-0 pb-12")
+    mixin code-info(classValue="")
+      .action-btns-overflow.flex.flex-grow(class=classValue)
         .flex-grow
         .action-btns.justify-end
           button.btn#run(type='button') Run
           button.btn.btn-share#share(type='button') Share
           .file-size(title="Ungzipped Bundled size -> Gzipped Bundle size") Wait...
+
+    .container.info-pane
+      .tab-btns.flex.flex-nowrap
+        .action-btns
+          button.btn.tab-style.input-btn.active(type="button") Input
+          button.btn.tab-style.output-btn(type="button") Output 
+
+      +code-info("lt-sm:hidden")
+
     .flex-wrapper
       mixin editor-btns
         .editor-btns&attributes(attributes)
@@ -106,6 +109,11 @@ block content
     .drag-section.vertical#handle-2
       .drag-handle
 
+    .info-pane(class="!pt-0")
+      +code-info("sm:hidden")
+
+  br
+  br
   .container  
     h2#usage Usage
     blockquote When bundling packages that also export CSS and other external files, #[strong bundle.js.org] now checks the gzip size of these external files, even though it won't output any code. Keep this in mind this isn't a bug, however, if it causes confusion I am willing to change this behaviour.

src/ts/components/Console.tsx

@@ -3,7 +3,32 @@ import { For, render } from "solid-js/web";
 import { Accordion, detailsEls } from "../modules/accordion";
 import { debounce } from "../util/debounce";
 
-export const [getLogs, setLogs] = createSignal<{ title: string | any, message: string | any, type?: "error" | "warning" }[]>([]);
+let accLength = 0;
+type TypeLog = {
+  title: string | any;
+  message?: string | any;
+  type?: "error" | "warning";
+};
+
+export const MAX_LOGS = 50;
+export const [getLogs, setLogs] = createSignal<TypeLog[]>([]);
+export const addLogs = (logs: TypeLog[] = []) => { 
+  accLength += logs.length;
+
+  let newLogs = [...getLogs(), ...logs];
+  if (newLogs.length > MAX_LOGS) { 
+    newLogs = [{
+      title: `Logs have been truncated, showing only ${MAX_LOGS} of ${accLength - MAX_LOGS} logs...\nCheck the devtools console for a fully detailed log.`,
+    }, ...newLogs.slice(newLogs.length - MAX_LOGS)];
+  }
+  setLogs(newLogs);   
+}
+
+export const clearLogs = () => { 
+  accLength = 0;
+  setLogs([]);
+}
+
 export const Console = ({ parentEl }: { parentEl: HTMLElement }) => {
   let len = createMemo(() => getLogs().length);
   let [stickToBottom, setStickToBottom] = createSignal(true);
@@ -22,13 +47,13 @@ export const Console = ({ parentEl }: { parentEl: HTMLElement }) => {
 
   return (
     <For each={getLogs()} fallback={
-      <div class={"py-3 "}>
+      <div class="py-3">
         <div class="content">
           <p class="px-4 hljs-literal">No logs...</p>
         </div>
       </div>
     }>
-      {({ title, message, type }, index) => {
+      {({ title, message = "", type }, index) => {
         let styleType = {
           "error": "bg-red-400/20 border border-red-400/70 text-red-500/90 dark:text-red-300/90 rounded-md",
           "warn": "bg-yellow-400/20 border border-yellow-400/70 text-yellow-500/90 dark:text-yellow-300/90 rounded-md"