How to use the js-dom-router library?

erip2 · September 7, 2021, 9:08am

I’m using Sage 10 and I read that the old way of JS separation by page was gone and it was separated on a library (js-dom-router).

But on Github, I can’t find any way on how to use it. I import it, but it doesn’t work with the methods ‘init’ and ‘finalize’. What methods should I use with this library for the specific page scripts to works?

Is there any explanation or example somewhere?

strarsis · September 7, 2021, 9:41am

Would the test specs of that router help?

github.com

roots/js-dom-router/blob/master/src/index.spec.ts

import Router from './index';

describe('DOM router', () => {
  function makeElement(className:string) : HTMLElement {
    const el = document.createElement('div');
    el.className = className;
    document.body.append(el);
    return el;
  }

  test('it should fire an event for each class name', () => {
    const el = makeElement('kjo apray');
    const callback = jest.fn(() => el.className);

    el.addEventListener('router.kjo', callback);
    el.addEventListener('router.apray', callback);

    new Router(el).fire();

    expect(callback).toHaveBeenCalledTimes(2);

This file has been truncated. show original

erip2 · September 7, 2021, 10:03am

Nope. I had a look at it, but I don’t understand what to put on app.js and what on home.js, common.js for example.

strarsis · September 7, 2021, 10:49am

Those home.js, common.js, etc. files are ES modules that export methods/objects/variables and can be imported from inside the main script file (app.js).
The new router implementation is much more loosely coupled, you can decide yourself how to wire the components up.

Maybe also related:

erip2 · September 7, 2021, 11:08am

Yes, I saw that too but it didn’t help me.

I could always get the util file from the Sage 9 but I wanted to use the js-dom-router.

I hope the developers put a usage example here or more importantly on the GitHub readme.

Thanks for your help though @strarsis!

system · October 19, 2021, 9:08am

This topic was automatically closed after 42 days. New replies are no longer allowed.