DEV Community

Discussion on: VibeJS - A Small JavaScript Library for Composing User Interfaces and Apps

Collapse
hugekontrast profile image
Ashish Khare😎 • Edited

Looks like a derivative of Vuejs, just more focused and tiny. Thanks for sharing!
Just need to know that does it works on the shadow dom concept or just a simple element creator from pure js.

Collapse
bretgeek profile image
bretgeek Author

Hey there thanks for reading and taking the time to comment!

No shadow dom needed! You can create any element you want.

However I recommend using standard elements. The reason is, custom elements will not pass validators (at least I do not know of a way). This is not Vibe's fault though:).

Also instead of using the shadow dom to prevent things like css bleed, each component can set it's own CSS with something like:

myRef.$css('position: absolute; display: inline-block;') etc.

You can even use string templates to pass in variables:

myRef.$css(height: ${num}px; display: inline-block; ).

And of course you could create style tags as components with rules to style components that match data-attributes that you define. But the $css method is just easier in my opinon.

It's also not a derivative of Vuejs. It is its own thing. There are no vue-if type of attributes for the elements or anything like that.

You are right, it is small but it I think it gives you the freedom to do what you want especially if you just want to drop in Vanilla JS to your components!

Heck ,you don't even have to create components at all if you don't want since you can "vibe" any element:)

I hope you give it a try. If you do, let me know how it goes!

Collapse
hugekontrast profile image
Ashish Khare😎

String template for CSS is good. I'll try it.

Thread Thread
bretgeek profile image
bretgeek Author

Awesome!

You could even store your complete CSS in something like:

const cssvar = color: blue; display: block; width: 50px; ;

Which can span multiple lines if you want (because of the backticks).

then do:

myRef.$css(${cssvar})

Thread Thread
bretgeek profile image
bretgeek Author

Be sure to put backticks around the grey areas above.. for some reason Dev.to is removing them from my reply.

Thread Thread
hugekontrast profile image
Ashish Khare😎

Don't worry I know that. Plus, that is markdown.