HTMLrewriter functions folder setup

I’m trying to set up a simple example for the HTMLrewriter in my pages site.

My project is a static website with one page index.html located at the root. The site loads fine as a static site.

The page contains a div with the id of “message”.

It is my understanding that a file located in the functions folder called index.js will be invoked when loading the root of the site. However, this does not seem to do anything.

Is this now how HTMLRewriter works?

This is the contents of my /functions/index.js file:

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })
  
  class ElementHandler {
    element(element) {
      // An incoming element, such as `div`
      if(element.getAttribute('id') === 'message') {
        element.setInnerContent('hello world')
      }
    }
  }
  
  async function handleRequest(request) {
    const response = await fetch(request)
    return new HTMLRewriter().on('div', new ElementHandler()).transform(response)
  }
  

The function you have here is for a worker. Pages functions don’t use fetch (unless using Advanced Mode and then you need to use Module Worker Syntax) rather pages functions use onRequest et.al.