Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

Add break and continue commands for loop structures. #168

Closed bob2517 closed 3 years ago

bob2517 commented 3 years ago

The "break" and "continue" commands will have the ability to jump to different positions in the looping structure. You can do a similar thing with break and JS labels, but you don't see it very much so it probably isn't as well known as it could be. Labels are perhaps better from a code upgrading point of view if you have a lot of nested loops, but in practice the use of labels with break can be a bit strange to read - looking more like a continue statement as it goes up the written declaration rather than breaking out underneath - and it isn't actually very hard to count how many loops you are inside, especially for implementing in ACSS as loops are inside specific event declarations and not scattered around a code base. I've needed to use a JS label in the core only once. Control flow numeric pointers are a similar concept and nothing new in the realm of languages - I've used the same syntax in another language before, but I can't remember which one off the top of my head. The continue pointer might be new, I dunno.

A number after the command when used with a colon will determine how many loops the command navigates. This pointer saves having to write additional @if statements to manage loop position.

Breaking out of one loop (going down the code) (no need for a colon):

break;

Break out of 2 loops:

break: 2;

Halt current flow and resume back at the top of the same loop (going up the code) (no need for a colon):

continue;

Halt current flow and resume back at the top of the next outer loop:

continue: 2;

As the numbers increment, they refer to progressively outer loops.

It's not a lot of code to add this and not particularly complicated to implement, so I'm starting this today. Better to do this now rather than later as I can build it with a handling based on the number and default to 1 when parsing these unusual un-coloned commands. Having loops with the @if statement is more powerful with these commands.

bob2517 commented 3 years ago

I could get the "break" pointer working with @if statements, but I think that might be a bit too radical and change the collective concept of @if, so these commands will only affect the control flow in loops. Another reason for not doing that - if you want to break out of a loop from inside an @if statement, it would require starting from "2" as a break pointer, and that's a bit weird.

bob2517 commented 3 years ago

Break numeric pointers that are higher than the number of actual loops will break out of all the loops available. Continue numeric pointers that are higher than the number of actual loops will also break out of all the loops available, as there isn't a higher loop to continue from. I think that's probably the most predictable handling for continue.

More options can be added to these commands, but that's probably enough to get on with. I could add labels if anyone finds a use-case that's simpler than just counting the number of loops.

bob2517 commented 3 years ago

Basic "break" works in @for loop within an @if. Will test "break: 2" and "break: 3" and the other loops after lunch. In theory these all should just work seeing as there's not a lot of code there doing the logic, and the logic is only decrementing a break counter, but we'll see.

bob2517 commented 3 years ago

Nested breaks with loop-counter based breaks work fine. Will write the official tests next. When I get onto implementing @else these will be needed as a quick test in case I break something.

bob2517 commented 3 years ago

Nested continues with loop-counter based continues work fine. Will write the official tests next. When I get onto implementing @else these will be needed as a quick test in case I break something.

bob2517 commented 3 years ago

Closing, live.