Panda seems really nice. As someone who does a lot of "creative" CSS work, writing styles quickly is important to me. I find writing styles as Javascript objects kinda cumbersome. I wish there was a way to use Imba's CSS system within a React or other Javascript app. https://imba.io/docs/css/syntax
Imba allows you to write CSS anywhere in a component definition using CSS-like syntax (rather than Javascript object syntax).
The syntax for adding a quick inline style is so simple:
<div [width:20px]>
You can even do hover states in an inline style:
<div [color:red @hover:blue]>
And interpolation is easy too:
<div [width:{someValue}px]>
Putting a CSS block at any level of your tag hierarchy scopes it to that tag.
<div.foo>
<div.bar>
css color:red # this applies to div.bar
em color:blue # this applies to div.bar em
"hello"
<em> "world"
CSS blocks declared in a component definition but outside of the markup, apply to the whole tag. CSS declared in a file, outside of a component definition, apply to all components defined in that file. There is also a global keyword to apply styles globally.
and there's a whole range of other useful features, a favorite of mind is the shorthand syntax for things like this:
c:red # same as color:red
d:vtc # same as display:flex flex-direction:column justify-content:center
x:10px rotate:30deg # same as transform:translateX(10px), rotate(30deg)
I understand that Imba is not appropriate for everyone and every project but I encourage you not to dismiss it. One are where it is clearly valuable is in building prototypes and side projects.
How will it work if I put 2 counter components on one page?
If it’s just using global variable for state then it will be shared between component. You can do the same thing in React, it’s just a bad idea.
If it does some magic under the hood to convert regular variables into something different like Svelte pre-5.0 (which Svelte decided to make more explicit in 5.0), then could you point me to docs describing it, I’m curious which approach they took with this.
If you look on the linked page under the "Styling Evolved" section. It appears variables are scoped to the component instance. In the example given each clock has its own variables, even though it is individually set to a different UTC.
In that case the count variable should be moved into a property of the tag. I just like putting it outside the tag because it really drives home "its just a variable".
tag Counter
count = 0
<self @click=(count++)> "count: {count}"
it doesn't have to be anything. You're free to organize your code as you wish: colocate, in a different file ... the compiler doesn't transform the variable in any way, nor does it track its "mutation", it "just" "rerenders" on every change. And it's super fast too!
I'm not aware of any easier way to build something like this than what I presented in the article, but I'd be interested to learn if there was. I did create a full-fledged prototyping/animation tool called Flinto.com, but it can't quite do this interaction with all of its details
Can confirm, it works well in Brave on Android. You do have to tap to initialize the line -- and then tap on the line and drag -- in early examples, but the completed example works well.
Imba is the only sane framework (and mithril used to be) because it actually uses "events" as the driver of state which makes sense since the web is event driven and allows you to avoid runes, horcruxes and incantations.
It's not a true Astro integration, but Imba works with Vite, and I was able to use that to include Imba code in my Astro site. A real integration would allow for server-side rendering of Imba components, which would be great.
If you look at my other work you'll see that I'm like the polar opposite of a designer that does things that look cool and fancy rather than optimizing for usability.
This was meant as a study in how to do certain types of fluid animations.
Imba allows you to write CSS anywhere in a component definition using CSS-like syntax (rather than Javascript object syntax).
The syntax for adding a quick inline style is so simple:
You can even do hover states in an inline style: And interpolation is easy too: Putting a CSS block at any level of your tag hierarchy scopes it to that tag. CSS blocks declared in a component definition but outside of the markup, apply to the whole tag. CSS declared in a file, outside of a component definition, apply to all components defined in that file. There is also a global keyword to apply styles globally.and there's a whole range of other useful features, a favorite of mind is the shorthand syntax for things like this: