Hyperapp: Component libraries?

[knipferrc]

First of all absolutely love hyperapp, nice work, looking forward to 2.0. Just out of curiosity are there any component libraries built with hyperapp? Couldnt find any. Thought about making one, would there be interest in a hyperapp component lib?

[jorgebucaran]

@knipferrc There is none that I know of, no, sorry. But yes, I think a lot of people would be interested in a component library. 💯

[okwolf]

@knipferrc were you thinking of wrapping an existing component library like Bootstrap or MDC Web? Or making your own components from scratch?

[Mytrill]

Personally, I have integrated spectre.css with hyperapp relatively easily: it only contains css, no javascript, so it fits quite well, also it's seems to be fairly lightweight but still includes tons of components.

If you're interested, here are some of those components: https://github.com/hyperstart/hyperstart.io/tree/master/src/lib/components

Feel free to use this as a starting point

[knipferrc]

Awesome! Yeah I was thinking about a component lib from scratch. Maybe hyper-ui or something like that.

[knipferrc]

Got started on this, wondering though, since there is no concept of local state, how do we handle toggle for collapsible's etc. Should this all be handled by props or can I use the global store somehow without creating an "app"?

[artem-v-shamsutdinov]

This may be off-topic, but for me conceptually HA is for building apps based on 3rd party components (at least the ones that require local state). Also there may be a (possibly blasphemous) way to support local state in HA components - https://github.com/hyperapp/hyperapp/issues/672#issuecomment-383351446

Thanks, :)

[jorgebucaran]

@russoturisto Why blasphemous? 😉

[artem-v-shamsutdinov]

Cause local state is the source of all evil, and speaking of it offends God? :) JK

I guess it's just my view of current way of things in UI state management. Global state can itself be partitioned (once complexity is high enough) into an appropriate tree in which all "local" state is properly isolated, maintained and properly cleaned up when necessary. However by keeping it global you enable cross cutting concern coverage, additional notification mechanisms, etc.

Ultimately it's up to the app developer to manage their state, so who's to say that (property demarcated) global state is not local?

Thanks, :)

[artem-v-shamsutdinov]

Sorry about contributing to hijacking of this thread (and re-igniting the "state" religious war). :(

I totally agree - all is well if you have the key to lookup the state by. :)

[jorgebucaran]

It's fine. AFAIC we're discussing local state, but really talking about _emulating_ it using slices.

[artem-v-shamsutdinov]

yep

[knipferrc]

So I created a few basic components so far trying to figure out what is the preferred method of styling in hyperapp? I tried picostyle but ran into some issues with styles overriding each other. Currently using emotion anyone have any other suggestions?

[Jesspu]

So we built one for all of work projects, its far from perfect and is always being updated from project to project, but it has quite a few components and mostly up to date documentation. You can also render the docs as component to get to see what everything looks like and how it works.

https://www.npmjs.com/package/@firstfleet/hyperappcomponents

[jorgebucaran]

Hi @knipferrc! Do you have any updates for us? :)

[knipferrc]

Hi all, sorry been super busy lately and haven't had much time, definitely wanna get back to this though.

[dishuostec]

Recently I use hyperapp and cordova, both of them are awesome!
I made a pull to refresh component by fork PulltoRefresh.js, maybe it can help someone on create web page for mobile device.

https://www.npmjs.com/package/@dishuostec/hyperapp-pulltorefresh

[jorgebucaran]

Please send your Hyperapp components libraries or similar Hyperapp-based libraries to https://github.com/hyperapp/awesome. 👋