JS universal library (widget, component) based on hyperapp (v1 or v2)

[dmitry-kurmanov]

Just a little bit history:
I think it is the same problem created by @mindplay-dk #672 (comment)
@rbiggs talks about local state #672 (comment)
and then @jorgebucaran talks about just create separate hyperapp's app : #672 (comment)

And I want to discuss @jorgebucaran's approach with creating separate app for component. We can wrap it in UMD build (by webpack, rollup or another tool). And we get a universal component that works in the any web framework via the some API. For example sortablejs it is just library created with JavaScript. And we can use it elsewhere (community of framework could create popular wrapper-component for that library). Why don't we create same component with Hyperapp? Hyperapp's size allows us just include it in library's code (or dependency may be).

I think that main question is intepopability. Users of that library may wants to call some methods (actions) to get/set something outside of hyperapp app and they wants to add event handlers (for example before and after every action)

So what about creating the universal library based on hyperapp? Does hyperapp support this use case?

[selfup]

I think this will be solved with subscriptions and middleware in V2.

Currently HA V1 exposes actions so you can call them outside of the app instance.

const {
  someAction,
  anotherAction,
} = app(...);

One way to get current state is to have an action that just returns state. So like:

appState: () => state => ({ ...state });

In V2, the middleware approach would mean that we can do stuff before or after. However I am unclear which point as of yet, but V2 source is up on a branch.

@jorgebucaran can clarify at which point the middleware(s) get(s) called

Otherwise this is an interesting question 🙏

[dmitry-kurmanov]

This is an experimental repo with treeview based on hyperapp: https://github.com/dmitrykurmanov/hypertree
It has several problems, main of them is How to call event after the action? (the code)

I will try to change hyperapp to v2 and leave feedback asap.

[zaceno]

@dmitrykurmanov

The way (currently) to dispatch an event bar after an action foo (which sets state), is to rename foo to _foo, and then make another foo-action where you: first call actions._foo(), then dispatchEvent(“bar”)

In v2 you can (if I understand correctly) have an “effect” which dispatches bar-events, and the new syntax will probably allow you to chain an effect after an action without requiring a secondary action.

... but I haven’t really understood effects so I’m not 100% sure this use case will be simplified by them.

[dmitry-kurmanov]

@zaceno we will see, I don't totally understand hyperapp v2 too. But I hope 😌

[jorgebucaran]

@dmitrykurmanov AMA! 😄

Feel free to open all the issues you want with specific V2 questions and I'll do my best to answer them.

[dmitry-kurmanov]

I've tried hyperapp2 and I think that subscribe don't allow us to call something after the dom update, because it calls before the patch https://github.com/hyperapp/hyperapp/blob/2b3d85625321038ed2369ddb4ecc320a9e20984e/src/index.js#L576-L582

@jorgebucaran What is the correct way to do it? dispatch?

[jorgebucaran]

@dmitrykurmanov Two questions:

1. What is the correct way of doing what exactly?
2. What were/are you trying to do?

[dmitry-kurmanov]

@jorgebucaran

1. Call some function after the action (after the dom update)
2. For now it is just interest. I am trying to create widget based on hyperapp. And I want to add listener ouside of hyperapp app that is calling every time when hyperapp state updated. Like the subscribe, but after patch the DOM.

I am sorry. Maybe I did not explain it clearly, I'll update the example repo with heperapp2.0 maybe it will help.

[jorgebucaran]

@dmitrykurmanov Maybe we can change exactly when subscriptions are updated in the code, but as a rule of thumb, subscriptions and DOM updates are completely unrelated business and neither should interfere or influence the other.

[dmitry-kurmanov]

@jorgebucaran, ok I understand. I will also try to play with effects. May be this is what I need. Thank you. Anyway I think that now I understand hyperapp better.

[dmitry-kurmanov]

@jorgebucaran I've created an example with the treeview component based on hyperapp.v1.
http://plnkr.co/edit/LXrlHj0DNeKe86s76sGA?p=preview.

[jorgebucaran]

@dmitrykurmanov Looks cool! So, this is what you had in mind.

Everything looks great until you start using the component via imperative method calls like addActionHandler and changeTitle.

In V2 (also in V1) you can create and share a tree-view-like component, but it should be used declaratively, within other Hyperapp apps and not like a jQuery widget.

[dmitry-kurmanov]

@jorgebucaran

So, this is what you had in mind.

yes 👍

Everything looks great until you start using the component via imperative method calls like addActionHandler and changeTitle.

Yes, that's why I asked about the internal dispatch export.

In V2 (also in V1) you can create and share a tree-view-like component, but it should be used declaratively, within other Hyperapp apps and not like a jQuery widget.

The main idea is creating universal component (not only for jQuery or Hyperapp). I will create a few examples for Hyperapp, React, Vue and jQuery. And I'll post links to them here.

I'm better at creating examples than writing in English 😆

[dmitry-kurmanov]

@jorgebucaran here an example of declarative using hypertree component with hyperapp under the hood in a hyperapp project: https://github.com/dmitrykurmanov/hypertree-hyperapp/blob/master/src/index.js

For now components/HyperTree.js in the src folder but in the future in will be come from the npm as dependency. So you can just skip components/HyperTree.js 's code.

To see example in action, please clone the repo and run npm i and then npm start

Next I will create an example with Vuejs.

[dmitry-kurmanov]

@jorgebucaran Here an example with vuejs: https://github.com/dmitrykurmanov/hypertree-vue

As for examples for React and jQuery I think we don't need it to demonstrate the universal component based on Hyperapp. In React we get practiacally the same example as hyperapp. And Jquery example will be almost the same as plnkr example above.

That's what I meant by the universal component, based on Hyperapp.

[jorgebucaran]

👋 @dmitrykurmanov Thank you for the examples and asking all the difficult questions!

I'll create a new issue later to discuss interoperability strategies in V2. In the meantime there is always the V1 documentation on interoperability.