Hyperapp: ⚡️ Ideas for useful mixins

[lukejacksonn]

Presuming _mixin_ functionality remains as we know it today.. what are they most useful for? Can we think of any low level implementations like the Logger that would be useful in many projects?

Some inspiration:

• InternalLinker - handles the routing of internal views
• MouseTrap - maps mouse events to the app state
• WindowScroller - maps window scroll position to the state
• MediaPlayer - wraps native audio/video element state and actions
• FirebaseStore - connects to realtime db and emits stream events

There are no _wrong_ answers here! Any responses that get many positive reactions will get added to the inspiration list above for others to make note.

📦 Bonus points for extra creative naming

[jorgebucaran]

@lukejacksonn Good question! Let's see what kind of response do you get.

By the way, mixins (formerly known as plugins) were introduced when we decided to decouple the previously built-in router from app.js into its own file.

[Swizz]

Here a starter for hyperapp package shameless based on the @hyperapp/router : Swizz/hyperapp-package

I dont know the @jbucaran thoughts about it, but I think I will personally use this to quick start hyperapp package with ease :tada:
(Ill be glad to gift it to the org)

[jorgebucaran]

@Swizz That is cool, but please notice @lukejacksonn is trying to collect ideas for mixins.

Ideas for useful mixins

:)

[Swizz]

Ow sorry, I thinked he was asking for Mixins (and alike) creation. I can remove my comment as you wish.

[zaceno]

Inspired by the firebase-store-idea: something that lets you control and react to PouchDB replication
PouchDBInterface maybe? (I know, I'm not getting bonus points for that one)

[jorgebucaran]

@Swizz No need to do that. 😄

Another example are mixins that wrap views to provide something similar to what we were trying to achieve with components.

Here is a simple one:

const Component = mixin => (props, children) =>
  "view" in props ? mixin : mixin.view(props.state, props.actions, children)

[jorgebucaran]

@lukejacksonn Isn't MediaPlayer more like a component (prev. known as custom tags)?

[zaceno]

@jbucaran: but if you want to keep the player controls in sync with the app (perhaps to implement a custom player-controls-bar) you'll need more than just the vtree. Youll need the state, events, and actions too. Seems like the perfect candidate for a mixin to me

[jorgebucaran]

@zaceno I see what you mean. 👍

[lukejacksonn]

What @zaceno said! This would work especially well with https://github.com/MatejMazur/hyperapp-mixin

[FlorianWendelborn]

I'm basically using mixins for these things:

1. share code across hyper app apps (we have one project on @attach-live that has 4-5 instances of HyperApp running in a single website, lol)
2. scope code by category (Similar to what router does, but for stuff like WebRTC and iframe management/postMessage)
3. generic logger functionality that I plug into every HyperApp project I have.

To reduce "spam" in my email inbox I unsubscribe from most threads. @mention me if you want to respond.

[lukejacksonn]

Thanks for the feedback y'all.. closing this for now!