Testcafe - Page object structure and default class

Question

I'm modeling a web page with a lot of items on it. Coming from a Ruby background, I had one class for each, say, large item and its subitems on the page. For instance, a navbar would be its own class:

import { Selector, t } from 'testcafe';

export class NavBar {
  constructor () {
    this.home = Selector('#home')
    this.intro = Selector('#intro')
    ...
  }
}

export class HeaderSection {
  ...
}

Questions:

1. Do I need a default class? My IDE is complaining, but the test work. I believe, the answer is no, but it's a good practice(?)
2. What's the recommended way to write a complex page model in JavaScript? I'm leaning to have one-page class, say index and then have multiple child classes (Navbar and HeaderSection on my example) that inherit from the index class

This is what I think it should be:

import { Selector, t } from 'testcafe';

export default class Index {
}

export class NavBar extends Index {
  constructor () {
    super ();
    this.home = Selector('#home')
    this.intro = Selector('#intro')
    ...
  }
}

export class HeaderSection extends Index  {
  constructor () {
    super ();
    ...
  }
}

so when I import the page model into my test case, I can call import Index from ../pages/index_page.js

Answer 1

Do I need a default class? My IDE is complaining, but the test work. I believe, the answer is no, but it's a good practice(?)

It's not necessary. The default keyword determines the way of the export in JavaScript. You can organize page objects as you like.

What's the recommended way to write a complex page model in JavaScript? I'm leaning to have one page class, say index and then have multiple child classes (Navbar and HeaderSection on my example) that inherit from the index class

It depends on page complexity. If test page is simple then one page object class for one page is enough. If test page is complex, creating separate classes for complex controls is a good approach.