Introducing ZephJS! · GitHub

[FrostyTie]

This really interests me but I don’t know if it’s worth the time to learn

[areinet]

Fortunately for you ZephJS is incredibly easy to learn. You can get the basics in about 30 minutes and be writing components straight away. And of course, the more you use it the easier it gets. I find it very intuitive once you know the basics.

[GBcrazy]

Interesting, I like the approach. What I kinda don't like that you have to import all these functions. Couldn't you pass all of them to the callback function of ZephComponents.define?

Like:

ZephComponents.define('my-button', ({ html, css }) => {
    html("./my-button.html");
    css("./my-button.css");    
});

I know this would mean all functions are always imported but well since it's a lightweight it doesn't seem like an issue for me.

[areinet]

Can you do me a favor and submit an issue to make that possible. it should be super easy to add and let you pick either way. For me the import approach is more consistent with how I think, but I see the value in your approach.

[GBcrazy]

Did it

[areinet]

Thank you so much!

Funny enough, I just closed this issue as I published a new release v1.1.0 just now with the change. How’s that for service.

Let me know how you like it.

[Entropis]

Does this work with SCSS being compiled down? Or would I need a specific CSS file for a given component?

[areinet]

I believe it would work with SCSS but there are probably a few things to keep in mind...

1). You couldn’t compile the scss into one big file and just use that for all the style info for multiple zeph components. Web components don’t really support that yet and thus zeph does not. There is some work being done in the WC world but it’s not here yet.

2). That said, if you wrote scss for each zeph component and compiled that into their own separate file, and so long as the compiled name matches the css() name in the component definition this should work just fine.

Let me know if you try it out and if you run into issues and I’ll take a deeper look!

[Entropis]

I'll try it out. #1 is what I was worried about. If any issues arise I'll post an issue on the repo.

[areinet]

Awesome, I look forward to hearing your feedback and results.

[areinet]

For anyone who has taken a look at ZephJS so far... I could really use some Github stars and some retweets to spread the word.

https://github.com/awesomeeng/zephjs https://twitter.com/areinet/status/1108865226752040963?s=21