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

Test 2.5.1 on a non-SPA site before putting live #139

Closed bob2517 closed 3 years ago

bob2517 commented 3 years ago

Putting this here so I don't forget.

bob2517 commented 3 years ago

On docs site, adding \<marquee>Hi there\</marquee> as a todo item, when entered is pressed, populates the item with &lt;marquee&gt;Hi&lt;/marquee&gt; for the actual display.

So there's double escaping going on. I spotted this when updating an older production site with the latest core so definitely needs fixing, and it's replicable on the latest docs site.

[edit] This is fixed offline. The error was escaping during variable assignment and also prior to attaching to textContent, and neither of those are necessary. Now on branch.

bob2517 commented 3 years ago

Additionally, I've upgrade the if-var command to compare empty and populated array values. It used to compare empty arrays, but I tightened up the conditional code and broke this, so I've added this in officially so array comparisons can now be made. Now on branch.

bob2517 commented 3 years ago

Issue with adding double quotes into the todos example now. WIll have to do the fix for that on Wednesday. That also slipped through the net and isn't related to 2.5.1 changes as it's repeatable on 2.5.0.

bob2517 commented 3 years ago

Back on this. Need to sort out this key escaping issue today.

bob2517 commented 3 years ago

Almost there with this. Just this to sort out:

render-after-end: "<input class=\"edit\" value=\"{toDoItems[thisID].title}\">";

Double-quotes in the title variable are not getting escaped at the point of render, so it draws the DOM object incorrectly. I'm trying to avoid the developer have to muck around with escaping manually, hence this issue while I try and get an automatic solution. It's an issue in programming terms due to the nature of the DOM object model - ie. how attributes are drawn.

Setting the attribute separately is a work-around that works, but I don't like it.

bob2517 commented 3 years ago

Note to self: Prior to rendering temporary DOM location, the string above renders thusly: <input class="edit" value=""hi""> So it looks like we can get away with escaping the inner quotes with some regex. Essentially, look between < and > for ="" and escape any quotes in . Entities should already be escaped in quotes.

bob2517 commented 3 years ago

That seems to work now. Next is backslashes entered from user input and used from variables.

bob2517 commented 3 years ago

All escaping seems to be handled now, so that's double-quotes, html chars like < and > and backslash. Those are all key internal characters used for parsing the config correctly in various places, so I'm not surprised there were implications once these started getting assigned to variables in examples. Dunno how it's gotten this far without me spotting it earlier. I think I tightened up one bolt as a fix and loosened another in the process, so to speak... Anyhoo, everything seems to work now. I also spotted that the SPA stuff was doing an extra trigger on refresh when it wasn't needed sometimes (on 2.5.1 - it's fine on 2.5.0), so fixed that, and that's brought everything back to being really fast offline. I got a 99% offline on the front page, and I usually get a faster response on the live server, so that's a promising stat. The offline standalone docs site looks awesome too, and that's got bookmarkable modals too, not that anyone would actually want to bookmark the horse photo, though no disrespect is addressed to any horses who happen to be reading this.

Just the docs to update now and that should be that. Will commit these changes tomorrow. Going to be moving house next week and not sure about internet connection from Tuesday, so may be a bit delayed getting this all released as I want to make sure the docs have a good section on how to do SPAs. The new modal SPA refresh functionality is really good, so I want to get a good example for it, like a gallery with next and forward buttons (using the click-on-next-cycle functionality to trigger a modal open on the underlying page, which of course leaves the modal open and you get a nice transition) with bookmarkable modals, which is impossible when just using old-school CSS. Once the drag and drop stuff is implemented for 2.6.0, I'll convert that example into something like photoswipe. That would be amazing and would certainly be a lot smaller in size. I do love photoswipe though - used it a lot for projects.

If anyone needs the escaping functionality fixed and needs it now, the 2.5.1 branch should be stable once I've done my commit tomorrow.

bob2517 commented 3 years ago

As I'm going to be spending the next week moving house, I've put 2.5.1 onto the live docs site to fix the "escaping" bugs on the todo app, with the file masquerading as 2.5.0. Highly unprofessional, but only an idiot would care about that on a one-man project and I'm more of a moron than an idiot. Seems to work ok, although I do also have to make a minor change to the todo config itself to fix a disappearing backslash on edit - but that will have to wait until I've finished the docs as I can't be bothered to dick about with the innards of config on files that are already live. Will do a commit of the core though in a sec as it does seem stable for production use. Then back onto this mid next week.

bob2517 commented 3 years ago

Fixes now on branch. Closing issue.