rill-js/rill

Universal web application framework.

Dylan Piercey

@DylanPiercey

One other thing to note though is that with @rill/delegate you need to bind the event handler for each request because all event handlers get reset (so that if you navigate to a new page it doesn't take all the old handlers). Let me know if that doesn't make sense.

Lon Ilesanmi

@lon-io

Okay, I think it makes sense, I'll take note of that and get back to you if I have any issues

Dylan Piercey

@DylanPiercey

Sounds good :).

Just curious, what module bundler are you using? Webpack/Browserify/Rollup/Lasso?

Lon Ilesanmi

@lon-io

Webpack

Dylan Piercey

@DylanPiercey

Cool, and which front end framework? React?

Or @rill/html?

Lon Ilesanmi

@lon-io

None, just rendering dust templates

Dylan Piercey

@DylanPiercey

Gotcha, are you using @rill/html to do that?

Sorry, just trying to get an idea of how people are using Rill :).

Lon Ilesanmi

@lon-io

Nah, dustjs-helpers :)

Dylan Piercey

@DylanPiercey

Oh interesting. Thanks for the info!

Didn't know dust did client side rendering.

Lon Ilesanmi

@lon-io

Sure, thanks for communicating often

Dylan Piercey

@DylanPiercey

Np 👍

Lon Ilesanmi

@lon-io

Hi @DylanPiercey , I have errors (http://take.ms/hwExX
, http://take.ms/wWJt5)

Dylan Piercey

@DylanPiercey

Do you have any more info? The error stack trace is a bit cryptic without source maps.

What are you doing when this happens?

Lon Ilesanmi

@lon-io

Just these:
const delegate = require('@rill/delegate')
app.use(delegate())

Dylan Piercey

@DylanPiercey

Gotcha, I think I know the issue, I'll dig into it now.

Lon Ilesanmi

@lon-io

Thanks, it looks like it can't find ctx.req.original.socket.server within this:

function delegate (options) {
  return function delegateMiddleware (ctx, next) {
    // Store reference to server for later.
    _server = ctx.req.original.socket.server
    // Clear all listeners.
    for (var type in _listeners) _listeners[type] = []
    // Continue request.
    return next()
  }
}

Dylan Piercey

@DylanPiercey

What version of Rill are you using?

Because that should work as far as I can tell atm

Lon Ilesanmi

@lon-io

2.5.1

Dylan Piercey

@DylanPiercey

Ah, ctx.req.original.socket.server was added after that version I believe, let me find what version exactly.

Any reason you are tied to the old version?

Lon Ilesanmi

@lon-io

So, there's several people working on the project and we lock-down versions and whenever we need to update package versions there are discussions and a general agreement :)

Dylan Piercey

@DylanPiercey

Gotcha.

I'd definitely recommend upgrading if possible.

If it's not possible quickly you can use the following patch.

const server = rill()
  .use(({ req }, next) => {
    req.original.socket.server = server
    return next()
  })
  // Rest of middleware.
  .use(...)
  .listen()

Also FTR all 'breaking' changes of Rill since 2x have been because of @rill/http so unless you (or some of the middleware) are relying on @rill/http it won't be an issue.

And most of the middleware do not rely on @rill/http, delegate is a rare exception.

Lon Ilesanmi

@lon-io

I think what is actually undefined is socket, so this won't work. But I'd discuss an upgrade with my colleagues

Dylan Piercey

@DylanPiercey

Oh my bad, then you would just change line 3 to req.original.socket = { server }. I'd probably wrap it in an if (process.browser) check as well.

Lon Ilesanmi

@lon-io

Thanks so much @DylanPiercey it works now. So, delegate would be available as ctx.delegate, right?

Dylan Piercey

@DylanPiercey

It's actually on the exported properties of the module.

You can simply import { on, once } from '@rill/delegate'

I did this because some in template engines it is a pain to pass the Rill context to, but with this it's more easy to include.

Svelte and Marko are good examples of where it makes it easier.

Lon Ilesanmi

@lon-io

Thanks @DylanPiercey it all works fine now

Dylan Piercey

@DylanPiercey

👍

Lon Ilesanmi

@lon-io

Hi @DylanPiercey I get this error on calling go within delegate.on('some_action', (ev, go) => {...}):

index.js:161 Uncaught TypeError: @rill/delegate: Could not navigate because Rill server was missing.
    at assert (index.js:161)
    at go (index.js:147)
    at catalog.js:58
    at HTMLDocument.onEvent (index.js:128)

Apparently, it relates back to the previous error where socket was undefined. Now, socket is defined, but _server is not defined on socket like this line expects:

function delegate (options) {
  return function delegateMiddleware (ctx, next) {
    // Store reference to server for later.
    _server = ctx.req.original.socket.server
    // Clear all listeners.
    for (var type in _listeners) _listeners[type] = []
    // Continue request.
    return next()
  }
}

function go (url, options) {
  assert(_server, 'Could not navigate because Rill server was missing.')
  fetch(_server, url, options)
}

I know it's all tied to using an outdated Rill version, but any work around for this?

Dylan Piercey

@DylanPiercey

When you are setting the server on the context are you using the rill app or the result of calling rill().listen()? The latter is a @rill/http server which is what is needed.

Lon Ilesanmi

@lon-io

Ah, I see, I've been using just rill(), I'll change to rill().listen(). Thanks

Dylan Piercey

@DylanPiercey

Let me know if that works :)

Lon Ilesanmi

@lon-io

Yeah it works, Sorry to bother you man @DylanPiercey , but I've got another question. I need to override the onpopstate handler you have registered

function onHistory () {
  fetch(this, { url: location.href, scroll: false, history: false })
}

in version 2.5.1, it's registered specifically as:

function onPopState () {
  this.navigate(location.href, { popState: true })
}

I registered my own handler, called e.preventDefault() and e.stopImmediatePropagation(), but your handler gets called first.

Dylan Piercey

@DylanPiercey

What's the use case here? Not 100% sure how we'd achieve this

Lon Ilesanmi

@lon-io

The use case is to prevent a complete route but rather update the html using state from the previous page. Before routing, I call history.replaceState() to set the state of the current page to the html inside my wrapper element

Then I add a listener on for onpopstate to get the html of the last page and set it as the innerHTML of my wrapper element

Dylan Piercey

@DylanPiercey

Why not add a rill middleware that does this and attach it first?

Where communities thrive

People

Repo info

Activity