Custom renderer class properties

Hey guys! I’m still new to the framework (moving over from Barba), and I’m running into a bit of an issue with my custom renderer class. I’m using v2.1.2, on the ES6 version of the library, and I’m using Webpack to compile and bundle my scripts.

I need to add a property to the renderer class that holds my main controller for my page scripts, so I can initialize and destroy them properly as pages are loaded and unloaded. However, if I add a constructor to the renderer, I get an Uncaught TypeError: Cannot set property 'mainController' of undefined error.

If I add a super() call before I set the property, I get this error: Uncaught TypeError: Cannot read property 'transition' of undefined at DefaultRenderer.Renderer (highway.js:2575) at new DefaultRenderer (DefaultRenderer.js:6), so obviously that doesn’t work.

Do you know how I can extend the Highway.Renderer class and add class properties?

Here’s my full custom renderer file:

import Highway from '@dogstudio/highway';
import MainController from './MainController';

class DefaultRenderer extends Highway.Renderer {
    constructor() {
        this.mainController = new MainController();
    }
    // Hooks/methods
    onEnter() {
        this.mainController.init();
    }
    onLeave() {
        this.mainController.destroy();
    }
    onEnterCompleted() {
        
    }
    onLeaveCompleted() {
        
    }
}

// Don`t forget to export your renderer
export default DefaultRenderer;

[Anthodpnt]

You could follow your logic…

const H = new Highway.Core({
	renderers: {
		'home': HomeRenderer
		'default': DefaultRenderer
	}
});

… But then you have to define default as the value of data-router-view for all views that should use that renderer. Doing so, the renderer will be used but you won’t be able to add extra code for a specific page.

<div data-router-wrapper>
	<div data-router-view="default">
		<!-- [...] -->
	</div>
</div>

For this reason, when you need to add extra code to DefaultRenderer for a specific view, you have to extend it and thus create another renderer that extends DefaultRenderer and add your extra code.

Let’s say your contact page needs all the code from DefaultRenderer AND some extra code for this specific page. You would create a ContactRenderer that would extend DefaultRenderer to inherit all the code from DefaultRenderer and you could add some extra code for your contact page.

import DefaultRenderer from 'path/to/default.js'

class ContactRenderer extends DefaultRenderer {
	onEnter() {
		// Inherit the code from the `onEnter` method of `DefaultRenderer` if it exists
		super.onEnter();
		
		// Extra Code
		console.log('This is some extra code');
	}
}

export default ContactRenderer;

Finally, to use this ContactRenderer you have to attach it to a view name and use that name for the data-router-view HTML attribute like so:

const H = new Highway.Core({
	renderers: {
		'home': HomeRenderer,
		'contact': ContactRenderer,
		'default': DefaultRenderer
	}
});

<div data-router-wrapper>
	<div data-router-view="contact">
		<!-- [...] -->
	</div>
</div>

I hope that will help you @tiansial!

Best regards, Anthodpnt

[tiansial]

It did, thank you!