search

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

Non-reactive vars turning reactive when rendering a string combining both #263

Closed bob2517 closed 2 years ago

bob2517 commented 2 years ago

I've been playing around with the tic-tac-toe example, testing out various methods of doing things and just discovered this doesn't work properly:

@for n from 0 to 8 {
  render-before-end: "<game-cell class='{{animClass[n]}}' val='{n}'>{{gameState[n]}}</game-cell>";
}

The val="{n}" part is turning reactive, but it only has single quotes and should be a straight render. Whenever n is getting changed, all the prior instances of val="{n}" on the page are changing too, like reactive variables. This is obviously wrong. It works fine when rendering on its own - the error appears only when reactive variables are being rendered in the same string at the same time.

bob2517 commented 2 years ago

This is done offline, but there's a related bug concerning sub-component event scoping so I'm fixing that before I commit the fix for this, just in case it's related.

bob2517 commented 2 years ago

After all that re-hashing of various things off-line, this was a red-herring. It does actually work. I was placing the rendering in beforeComponentOpen, which is not allowed in ACSS. It works fine in componentOpen. Doh. All changes have been reverted. Closing.

As an aside, I've written an AI version of Tic Tac Toe that will be on the docs site for the new release. I've set it up so the player has average intelligence by adding a few obvious tactics and not a lot of strategy.