No listeners for <event> in DOMContentLoaded

[timsim00]

Expected behavior

Expecting listeners to bet ready when DOMContentLoaded is fired.

Actual behavior

Getting warning "No listeners for myevent"

Steps to reproduce behavior

index.js

app.use(require('./stores/app'))
app.use(require('./stores/user'))

app.js

  emitter.on('DOMContentLoaded', function () {
    // Do app-level stuff
    emitter.emit('user:myevent', {})

user.js

emitter.on(`user:myevent`, function (data) {...})

Have to wait a bit before the listener is registered.
setTimeout(() => {emitter.emit('user:myevent', {})}, 10)

[yoshuawuyts]

That's bizarre. Our DOMContentLoaded library is always async https://github.com/bendrucker/document-ready/blob/master/index.js#L11. This should always work unless a browser is somehow capable of caling DOMContentLoaded synchronously - which would be a MAJOR bug, so I doubt that'd be the case - but not outside the realm of possibilities either.

Ghmmmmmm, is there more going on here? I wonder what's happening. Perhaps more context might be useful.

Refs

• https://github.com/choojs/choo/blob/master/index.js#L162-L165
• https://github.com/bendrucker/document-ready/blob/master/index.js#L11

[timsim00]

Here's how the app is started:

var tree = app.start();
document.body.appendChild(mainView());
var mainWrapper = document.getElementById('approot');
mainWrapper.appendChild(tree);

Using this pattern because 3rd party script is attaching an iframe to body.

[yoshuawuyts]

@timsim00 hmm, you might want to be careful there that the document is ready when you call document.getElementById. But yeah. Ghmmmm, I think that's unrelated.

How are you loading the stores? I think that might be relevant too.

[timsim00]

@yoshuawuyts Here's my index.js. Does anything look suspect?

const html = require('choo/html')
var css = require('sheetify')
var choo = require('choo')


// VIEWS
var landingView = require('./views/landing')
var loginView = require('./views/auth/login')
var registerView = require('./views/auth/register')
var resetPasswordView = require('./views/auth/reset-password')
var appView = require('./views/app') //dashboard

// var appStartView = require('./views/app/start')
var fourOhFourView = require('./views/404')

css('tachyons')
css('./assets/styles.css')

//var app = choo({ history: false, href: false })
var app = choo()

if (process.env.NODE_ENV !== 'production') {
  app.use(require('choo-devtools')())
} else {
  // Enable once you want service workers support. At the moment you'll
  // need to insert the file names yourself & bump the dep version by hand.
  // app.use(require('choo-service-worker')())
}

// STORES
app.use(require('./stores/app'))
app.use(require('./stores/user'))
app.use(require('./stores/message'))
app.use(require('./stores/payments'))


// CLIENT ROUTES

const defaultAnonView = loginView;
const authWrapper =
    (loggedView, anonView = defaultAnonView) => (state, emit) => (
        state.user.loggedIn
            ? loggedView(state, emit)
            : anonView(state, emit)
);


app.route('/', landingView)
app.route('/login', loginView)
app.route('/register', registerView)
app.route('/reset-password', resetPasswordView)
app.route('/app', authWrapper(appView))

// app.route('/app/start', authWrapper(appStartView))
app.route('/*', fourOhFourView)

var tree = app.start();
document.body.appendChild(mainView());
var mainWrapper = document.getElementById('approot');
mainWrapper.appendChild(tree);


function mainView (state, emit) {
  return html`
      <div id="approot" class="avenir"></div>
  `
}

[yoshuawuyts]

I'm not sure what's going on. Code looks good to me. I created a repro: https://github.com/yoshuawuyts/repro-choo-619/blob/master/index.js#L16-L29

Could you try running it, and tell me if it does work for you there? Thanks!

[timsim00]

Looks good:

Navigated to https://localhost:49624/
index.js:17 first store: loaded
index.js:25 second store: loaded
index.js:19 first store: dom loaded!
index.js:27 second store: foo emitted!
index.js:147 20:15:53 ✨ choo DOMContentLoaded 245ms to interactive
index.js:147 20:15:53 ✨ choo foo 1ms
index.js:147 20:15:53 ✨ choo initial render 60fps 3ms
index.js:147 20:15:53 ✨ bankai:reload connected

[yoshuawuyts]

@timsim00 alright, phew. Yeah, I'm not sure what's going on in your project then. It might just be a question of debugging it. I'm not sure how I can help with that - is there anything I can do for you from here?

[NetOpWibby]

I'm actually having the same issue. Not sure if it makes sense to create a new issue so I'll just post here. I'm using both fastify and choo. Here is client.js (choo):

"use strict";



//  P A C K A G E S

const async = require("choo-async");
const bundles = require("choo-bundles");
const choo = require("choo");
const data = require("choo-data");
const devtools = require("choo-devtools");
const ssr = require("choo-ssr");

//  V A R I A B L E S

const html =    require("./views/components/html");
const layout =  require("./views/components/layout");

const head =      require("./views/partials/head");
const noscript =  require("./views/partials/noscript");



//  P R O G R A M

function main () {
  const app = async(choo());

  app.use(ssr());
  app.use(data());
  app.use(bundles());

  app.use(require("./modules/chewit/choo")("df89ds7fg98ds7fg98fg7")); // my plugin

  if (process.env.NODE_ENV !== "production") app.use(devtools());

  const page = content => (html(
    ssr.head(
      head(),
      bundles.assets()
    ),
    ssr.body(
      async.catch(
        layout(content),
        require("./views/pages/_error")(app)
      ),
      noscript(),
      ssr.state(),
    )
  ));

  app.route("/", page(require("./views/pages/home")(app)));
  app.route("/about", page(require("./views/pages/about")(app)));
  app.route("*", page(require("./views/pages/_404")(app)));

  return app;
}

if (typeof window !== "undefined") {
  const app = main();
  app.mount("html");
}



//  E X P O R T

module.exports = exports = main;

This is the code for my plugin in progress:

function cool (something) {
  return _chewThis;

  function _chewThis (state, emitter, app) {
    state.chew = "hi";

    console.log("——————————");

    // console.log(state);
    // console.log("——————————");
    // console.log(emitter);
    // console.log("——————————");
    // console.log(app);

    emitter.on("navigate", () => {
      console.log("hello");
    });

    emitter.on("DOMContentLoaded", () => {
      console.log("yo");
    });
  }
}

module.exports = exports = cool;

I can modify state and see my console messages but not inside the emitters. I based my plugin code on a choo plugin to see if I could get this working so there's probably something wrong...I just don't know what it is.

The idea for my plugin is to provide server-side analytics. It works for Express, I just want this to work for choo as well.

[NetOpWibby]

@yoshuawuyts Do you have any insight on my issue?

[NetOpWibby]

Alright, I figured something out by looking at the source of some choo plugins.

emitter.prependListener("DOMContentLoaded", () => {
  log("ooga booga");
});

emitter.prependListener("render", () => {
  log("ooga booga");
});

emitter.prependListener("navigate", () => {
  log("ooga booga");
});

Then, when I console.log(emitter), I see the listeners I just added inside of Nanobus. None of my logs inside the prepended listeners show up though.