feat: add event handlers of HTML through addEventListener (#62)

poppinss · Jan 15, 2025 · 961aac2 · 961aac2
1 parent 0b8141b
commit 961aac2
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 11 deletions.
diff --git a/src/public/error_stack/script.js b/src/public/error_stack/script.js
@@ -40,3 +40,40 @@ function toggleFrameSource(event, parentId) {
     frame.classList.add('expanded')
   }
 }
+
+document
+  .getElementById('formatted-frames')
+  ?.addEventListener(
+    'click',
+    function(){
+      showFormattedFrames(this)
+    }
+  )
+document
+  .getElementById('raw-frames')
+  ?.addEventListener(
+    'click',
+    function(){
+      showRawFrames(this)
+    }
+  )
+document
+  .querySelectorAll("[id^='stack-frame-location-']")
+  .forEach((sfl) => {
+    sfl.addEventListener(
+      'click',
+      function(e){
+        toggleFrameSource(e, this.id.replace('stack-frame-location-', 'frame-'))
+      }
+    )
+  })
+document
+  .querySelectorAll("[id^='stack-frame-toggle-indicator-']")
+  .forEach((sfti) => {
+    sfti.addEventListener(
+      'click',
+      function(e){
+        toggleFrameSource(e, this.id.replace('stack-frame-toggle-indicator-', 'frame-'))
+      }
+    )
+  })
diff --git a/src/public/header/script.js b/src/public/header/script.js
@@ -7,3 +7,12 @@ function toggleTheme(input) {
     localStorage.setItem('youch-theme', 'light')
   }
 }
+
+document
+  .getElementById("toggle-theme-checkbox")
+  ?.addEventListener(
+    'change',
+    function() {
+      toggleTheme(this)
+    }
+)
diff --git a/src/templates.ts b/src/templates.ts
@@ -199,6 +199,7 @@ export class Templates {
         })
         const cause = await this.#tmplToHTML('errorCause', props)
         const metadata = await this.#tmplToHTML('errorMetadata', props)
+
         return `${header}${info}${stackTrace}${cause}${metadata}`
       },
     })

diff --git a/src/templates/error_stack/main.ts b/src/templates/error_stack/main.ts
@@ -91,7 +91,7 @@ export class ErrorStack extends BaseComponent<ErrorStackProps> {
   /**
    * Returns the HTML fragment for the frame location
    */
-  #renderFrameLocation(frame: StackFrame, id: string, ide: string) {
+  #renderFrameLocation(frame: StackFrame, ide: string, index: number) {
     const { text, href } = this.#getEditorLink(ide, frame)
 
     const fileName = `<a ${href ? `href="${href}"` : ''} class="stack-frame-filepath" title="${text}">
@@ -107,7 +107,7 @@ export class ErrorStack extends BaseComponent<ErrorStackProps> {
     const loc = `<span>at line <code>${frame.lineNumber}:${frame.columnNumber}</code></span>`
 
     if (frame.type !== 'native' && frame.source) {
-      return `<button class="stack-frame-location" onclick="toggleFrameSource(event, '${id}')">
+      return `<button class="stack-frame-location" id="stack-frame-location-${index}">
         ${fileName} ${functionName} ${loc}
       </button>`
     }
@@ -126,19 +126,21 @@ export class ErrorStack extends BaseComponent<ErrorStackProps> {
     expandAtIndex: number,
     props: ErrorStackProps
   ) {
-    const id = `frame-${index + 1}`
+    const frameIndex = index + 1
+    const id = `frame-${frameIndex}`
     const label = frame.type === 'app' ? '<span class="frame-label">In App</span>' : ''
     const expandedClass = expandAtIndex === index ? 'expanded' : ''
-    const toggleButton =
-      frame.type !== 'native' && frame.source
-        ? `<button class="stack-frame-toggle-indicator" onclick="toggleFrameSource(event, '${id}')">
+    let toggleButton = ''
+
+    if (frame.type !== 'native' && frame.source) {
+      toggleButton = `<button class="stack-frame-toggle-indicator" id="stack-frame-toggle-indicator-${frameIndex}">
           ${CHEVIRON}
         </button>`
-        : ''
+    }
 
     return `<li class="stack-frame ${expandedClass} stack-frame-${frame.type}" id="${id}">
       <div class="stack-frame-contents">
-        ${this.#renderFrameLocation(frame, id, props.ide)}
+        ${this.#renderFrameLocation(frame, props.ide, frameIndex)}
         <div class="stack-frame-extras">
           ${label}
           ${toggleButton}
@@ -204,8 +206,8 @@ export class ErrorStack extends BaseComponent<ErrorStackProps> {
           </div>
           <div>
             <div class="toggle-switch">
-              <button onclick="showFormattedFrames(this)" class="active"> Pretty </button>
-              <button onclick="showRawFrames(this)"> Raw </button>
+              <button id="formatted-frames" class="active"> Pretty </button>
+              <button id="raw-frames"> Raw </button>
             </div>
           </div>
         </div>

diff --git a/src/templates/header/main.ts b/src/templates/header/main.ts
@@ -31,7 +31,7 @@ export class Header extends BaseComponent<ComponentSharedProps> {
     return `<header id="header">
       <div id="header-actions">
         <div id="toggle-theme-container">
-          <input type="checkbox" id="toggle-theme-checkbox" onchange="toggleTheme(this)" />
+          <input type="checkbox" id="toggle-theme-checkbox" />
           <label id="toggle-theme-label" for="toggle-theme-checkbox">
             <span id="light-theme-indicator" title="Light mode">${LIGHT_MODE_SVG}</span>
             <span id="dark-theme-indicator" title="Dark mode">${DARK_MODE_SVG}</span>

diff --git a/tests/templates.spec.ts b/tests/templates.spec.ts
@@ -31,6 +31,58 @@ test.group('Templates', () => {
     expect(window.document.querySelector('#error-message')?.textContent?.trim()).toEqual(
       'Something went wrong'
     )
+    expect(window.document.querySelector('#header-script')?.textContent?.trim()).toEqual(
+      expect.stringContaining(
+        'document\n' +
+          '  .getElementById("toggle-theme-checkbox")\n' +
+          '  ?.addEventListener(\n' +
+          "    \'change\',\n" +
+          '    function() {\n' +
+          '      toggleTheme(this)\n' +
+          '    }\n' +
+          ')'
+      )
+    )
+    expect(window.document.querySelector('#errorStack-script')?.textContent?.trim()).toEqual(
+      expect.stringContaining(
+        'document\n' +
+          "  .getElementById('formatted-frames')\n" +
+          '  ?.addEventListener(\n' +
+          "    'click',\n" +
+          '    function(){\n' +
+          '      showFormattedFrames(this)\n' +
+          '    }\n' +
+          '  )\n' +
+          'document\n' +
+          "  .getElementById('raw-frames')\n" +
+          '  ?.addEventListener(\n' +
+          "    'click',\n" +
+          '    function(){\n' +
+          '      showRawFrames(this)\n' +
+          '    }\n' +
+          '  )\n' +
+          'document\n' +
+          `  .querySelectorAll("[id^='stack-frame-location-']")\n` +
+          '  .forEach((sfl) => {\n' +
+          '    sfl.addEventListener(\n' +
+          "      'click',\n" +
+          '      function(e){\n' +
+          "        toggleFrameSource(e, this.id.replace('stack-frame-location-', 'frame-'))\n" +
+          '      }\n' +
+          '    )\n' +
+          '  })\n' +
+          'document\n' +
+          `  .querySelectorAll("[id^='stack-frame-toggle-indicator-']")\n` +
+          '  .forEach((sfti) => {\n' +
+          '    sfti.addEventListener(\n' +
+          "      'click',\n" +
+          '      function(e){\n' +
+          "        toggleFrameSource(e, this.id.replace('stack-frame-toggle-indicator-', 'frame-'))\n" +
+          '      }\n' +
+          '    )\n' +
+          '  })'
+      )
+    )
     expect(window.document.querySelector('#error-hint')).toEqual(null)
   })
-Original file line number
+Diff line change
@@ Expand Up / @@ -199,6 +199,7 @@ export class Templates { @@
             })
             const cause = await this.#tmplToHTML('errorCause', props)
             const metadata = await this.#tmplToHTML('errorMetadata', props)
             return `${header}${info}${stackTrace}${cause}${metadata}`
           },
         })
@@ Expand Down @@