The epic event-driven, front-end only, reactive JavaScript framework 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?

Last update: Dec 30, 2022

Overview

Active CSS

Power-up your CSS with actions! Is the CSS of the future a full-on programming language?

Active CSS is a JavaScript plugin that adds event-driven actions to CSS. It acts as a front-end only tool. It gives you the power of a reactive framework, but you can use whatever back-end you want. It will work will static or pre-rendered HTML files and has smart ajax SPA routing and tooling built into the front-end for ultra-fast handling of pre-rendered or HTML generated on the server. It can breathe new life into PHP, basic Node or any simple back-end driven website. It is designed to make interactivity on the front-end easier than ever before.

It is not a complete solution - you still need a back-end, even if only a minimal one.

Active CSS commands are NOT CSS commands. This is not a straight expansion of CSS. They live in their own file - separate to styling. Putting Active CSS into CSS files will only give you browser styling errors. They could be handled on the front-end and extracted by the Active CSS core, but it would still give you CSS errors obviously - so Active CSS commands are intentionally always kept in separate files.

You won't need a computer science degree to write in Active CSS if you already know CSS, HTML and JavaScript well. It looks like CSS and the commands are modelled on JavaScript.

It works dynamically with the contents of the DOM at any given time.

This is a one man project and if anyone wants to get involved then there is a discussions section on this repo.

Easy to install and setup: Active CSS is just a plugin. You can write your own Active CSS files or use it in inline styles, just like CSS. You can quickly download a regular JavaScript plugin for use in a script tag, or use an NPM version. No pre-processing or complicated setups - Active CSS works in runtime. The code you write in comparison to regular JavaScript is tiny, so runtime performance is practical even for a large site. You don't have to worry about performance at all. Test it in Lighthouse if you want to compare.
Works with plugins out-of-the-box: The new tinymce <tinymce-editor></tinymce-editor> shadow DOM tag? Works with that. Photoswipe? Works with that. JQuery? Of course. All these amazingly crafted pieces of JS should all work with Active CSS, because Active CSS works dynamically with the DOM at any one time. Change the DOM externally? All the Active CSS events still work. It works dynamically with the DOM at any snapshot in time, just like CSS. It's a benefit of not using a virtual DOM. Just set up your events and commands. Things will just work. No mucking about with event listeners - nothing to maintain.
Fast to learn: Active CSS is quick to learn, as it looks like CSS. Just learn some new commands like "add-class", "remove-class", etc., plus a few new concepts that turn CSS into a proper programming language.
Fast, intuitive to write: Active CSS converts common JavaScript actions to a higher-level one-liner CSS syntax. Around 100 new commands and pseudo-selectors for all common website building tasks.
Easy to debug: Active CSS is easy to debug, even easier than CSS. All declarations are cumulative which means that there are no cascading commands - no hierarchical rules to slow you down trying to get things to work.
A true reactive framework: Active CSS has the simplest method of automatically updating drawn content based on variable changes. Why suffer with unnecessarily complicated frameworks, when you can set up easy to read CSS-style declarations for components and write your code in one-liners?
Responsive events: Because Active CSS supports CSS media queries, you can have different events happening at different screen sizes. How easy is that with other frameworks without things getting messy?
Apply CSS variables dynamically: Active CSS can dynamically apply standard CSS variables to the document, element or shadow DOM scope without fuss.
Sequential commands: When you code in Active CSS, commands happen one after the other in sequence. But it still looks like CSS.
No virtual DOM: Active CSS targets content for replacement directly, without using a virtual DOM. This means that it will work with existing plugins, jQuery, etc. right away. You remember all those amazing plugins that you had to stop using, you know - when things started getting weirdly complex for basic things in web development and everyone had to start using reactive content when they really didn't need to? Well, you can use all those native or jQuery plugins with Active CSS right now out-of-the-box. In Active CSS you can get blazingly-fast without loss of creativity and without the tie-in to a framework, as any plugins that you write will just work with Active CSS just as they would natively. Just don't inadvertently overwrite any reactive content in the DOM that you set up :) In versions prior to 2.4.0, we used DOM placeholders to remember where to update reactive content on the page. Since the 2.4.0 branch, all those placeholders are gone and elements are mapped to reactive variables internally.
Mirrors the DOM: All Active CSS commands are based on their JavaScript equivalent, so if you know JavaScript already then you can quickly find the command you need (or just request it be supported and we'll add it in). Plus Active CSS sets up actual native browser custom element components and ties into native events such as lifecycle callbacks (and some more handy Active CSS-only events). It supports all standard CSS selectors and native DOM events. Event handling bubbles according to DOM rules despite using event delegation and yes, there is a stop-propagation command, etc. It follows CSS syntax rules as closely as it can. In short - where it can utilize and support native functionality, it does.
Supports modern web components: As well as supporting the regular DOM, you can more easily build web components with shadow DOM containers or non-shadow DOM areas having private variables or shared variables that span multiple areas. Events can be isolated to any component to save on having to use IDs and classes. Using state is majorly simplified, as Active CSS variables are just variables and are automatically shared within a specific component area, so you don't have to use "this" or declare an internal state object or anything like that. (Of note though, coding with components is currently under investigation and upgrade - not to change how it works currently, but to add techniques that have been found to be useful in other frameworks - so stay tuned for new releases with future tutorials and comparisons with other frameworks.)
Build SPAs: Active CSS includes an easy front-end method of single page application routing (with tutorial) to make your site faster, more scalable, and more friendly to use. No more clunk-fest website! Now you can have that radio station on your site that you always wanted without melting your brain trying to work out how to keep it on the page.
Extendable: Write your own Active CSS in native JavaScript on-the-fly in your code. Prototype new commands so you can try out your own styling and action concepts as one-liner commands.
Write more stuff: With your code leaving a smaller footprint, you don't have to worry any more about adding more functionality to websites. You can tweak more to make it look and do awesome things. Want to quickly add an event to a class? No problem. It's like tweaking CSS - you don't have to think about it.
Future-proof: Active CSS is future-proofed so that even if browsers replicated and altered Active CSS commands, your websites will still work as they used to.
Dynamic CSS: Include regular CSS alongside Active CSS commands, for dynamic event CSS that can additionally benefit from the delay and interval features of Active CSS.
Truly event-driven: Active CSS is a pure event-driven programming style. It is the missing language in the browser's object-oriented programming platform that makes things quick and easy to code. Now you can add "methods" to objects directly. All DOM events and CSS selectors are supported.
A framework that could end up in the browser: Active CSS could be incorporated natively into the browser without any change to existing future specifications of HTML or CSS. It is the only easy-to-grasp framework that bridges the gaps between HTML, CSS and JavaScript to give you truly higher-level scripting ability. Active CSS has the simplest and most direct method of handling events of all the frameworks, bar none.
Optimized and simple by design: Simple architecture of the core for optimal performance. Fast start-up. No fush. No compromise. No over-engineering.

For best results, start building a website with no plugins or JavaScript and see how far you can get by only using HTML, CSS and Active CSS.

Active CSS works on modern browsers that are ES6-compliant.

Active CSS should work fine on desktop Firefox, Chrome, Opera, Safari and the latest Edge; iOs Safari and Chrome, Android Chrome and Firefox. IE support is not planned. There is basic support for the original Edge in the main production core, but the shadow DOM and shadow web component features in Active CSS won't work (being a native implementation). Just avoid using the shadow DOM if you want to support the old Edge.

Installation

The Active CSS installation instructions are on the website.

If you are looking for the core script to download, check out the dist folder and then find the version(s) you need. There are also npm versions - links on the website.

The production (live) version will look like this:
activecss-2-5-0.min.js

The development (offline) version (which supports the upcoming DevTools extention) will look like this:
activecss-dev-2-5-0.min.js

Documentation

You can find comprehensive documentation on the website.

Examples

There are loads of examples on the concept examples page.

Here's a taster:

#clickMe:click {
    body {
        add-class: .hello;
    }
}

Want to see it work? Go to the website.

You'll notice that the syntax looks like CSS. There are lots of features in Active CSS. It is truly epic! You can even use it in-line like CSS, in a style tag!

It puts back the fun in functionality! Yeah, sorry about that.

License

Active CSS is MIT licensed.

Comments

observe event not always working when declared inside components - proposal for @observe for syntax clarity

Workaround until fixed is to move the observe outside of the component. That workaround will work for document scoped components only.

Investigating...
weirdness proposal docs done

opened by bob2517 93
Set up reactive (non-user interaction) events that use the ACSS conditionals (the "observe" event)
Thank you for your hard work!

I am attempting to emulate native CSS :has() behavior with the below rule but it is not working. Seems pretty straight forward. What am I missing?

Passively (without end-user interaction) watch for:

Rule = TRUE Add the .loading class to <body>.

Rule = FALSE Remove .loading class from <body>.

#component div:if-empty { body {add-class: '.loading';} }

CodePen here

Please advise.

Thanks again!
enhancement done on branch docs done crazy idea
opened by dragontheory 84
Allow HTML & CSS file imports for components

As an alternative to html {} inside components, have a html() parameter in the component statement that imports html file in the html {} location without having to do manual ajax and {$STRING} rendering.
enhancement done on branch docs done

opened by bob2517 66
Allow regular CSS inside ACSS

This may be useful to someone. There would be a slight delay where the CSS would kick in, but if the developer wanted to test CSS with ACSS without having to write in separate files it would be useful to that degree.

Then when the person was happy, the CSS could be extracted out into a separate file for putting on a production site. Could even have a plugin for it so it would happen on a build flow, if so that would get a separate issue. Actually, that would be a great build tool. For now, just allow regular CSS in with ACSS.

The good thing about ACSS is that all the events are distinguishable by the fact that all the declarations start with an event selector, which is the primary reason it's compatible with CSS syntax if ever implemented by the browser, as these events can be isolated easily and moved somewhere else prior to CSS hitting the rendering engine.

Implementation notes: We keep track of all potential colon endings, like :hover, :not, etc. up to CSS Level 4 in the core. So that will need to be employed to differentiate the event selectors from the regular CSS. As part of this, see what else is coming up in CSS as it's been a couple years since the CSS level 4 stuff was looked at.
enhancement done on branch docs done testing needed

opened by bob2517 42
New pause command
With the synchronous "await" evolution for 2.6.0, in practice, chaining regular action commands using await can get a little bit confusing.

So I'm creating a pause command, which separates the delay into an actual command.

Essentially, the test code looks easier to read with a pause command, like:

div:draw { background-color: blue; pause: 1s; background-color: green; pause: 1s; background-color: blue; }

when compared to:

div:draw { background-color: blue; background-color: green after 1s await; background-color: blue after 1s; }

which does the same thing, but requires more brainpower to work out what's going on, even if it is quicker to type.

This can also be written like:

div:draw { background-color: blue, green after 1s await, blue after 1s; }

So the await command has power, but can arguably be a bit harder to read.

The await option therefore could make more sense for ajax-type commands. But it is handy for one-off delays, so I'm keeping it in the core.

The pause command will internally be asynchronous, like await, but from a developer viewpoint will be synchronous within a specific event declaration. Pausing shouldn't require the whole universe to stop, like in JavaScript, when it is used, even if JS uses the excuse of being single-threaded. The monitoring of time is done on a single entity or particle anyway, and so doing it this way more mirrors the way time is used in the physical universe, and so more accurately matches developer intent when they want to pause. Ie., when you want to stop moving your hand, the rest of your body doesn't have to stop. Having synchronous pauses within a specific event/element time stream therefore makes sense.

A step further on from this would be a way to asynchronously chain the same action command, so the same action command can run multiple times being chained, but allow other multiple chained commands to run at same time in the same event. Eg. color can also change at the same time something changes position, within the same event. It can be done with the existing syntax using "after", but a proper syntax for it would be cool. Maybe like a "chain" option which chains the same command if it is followed by the same command, instead of "await". Would need to work that out though. Like:

div:draw { background-color: blue, green after 1s chain, blue after 1s; color: green, blue after 1s chain, green after 1s;

In this case both commands would start at the same time, but each command is chained, something like that. Still not easy to read like that though...

I'll get this evolution wrapped up first and then ponder that last one for a future release.
enhancement done on branch docs done
opened by bob2517 36
Allow wildcards in @pages for SPA routing, and document

For generating the @pages list, it could happen that an e-commerce site has a lot of individual product pages:

"/product/1": ... "/product/2": ... "/product/3": ...

It's not practical in that case to list them all out in @pages. Instead it needs something like this to handle all cases of a certain type: "/product/*": ...

For this sort of wildcard handling, page title references, special classes per page, etc would need to come from the link itself or from somewhere else when the page was called, but for something like an e-commerce site the links would usually come from a database of some kind anyway so it's no biggie. We just need the wildcard aspect so that we don't need a gazillion @page entries.
enhancement done on branch docs to do

opened by bob2517 34
Component host auto-creation and the introduction of component event hierarchy

Whilst playing around with events and components, it has become clear that assigning a scoped attribute on a host element in order to handle event references within a defined area has brought up a few issues.

For example, let's say you want to render 4 divs one after the other inside one component. You then render this component after a button.

The 4 divs do not have a host. Active CSS needs a host for components, so it assigns the parent element as the host. That way any events that are set up can be limited to the component without needing ids or classes. But the parent element is the body tag.

But because the scope is on the body, the body has now become the component host, so this means that the button is now inside the component. So any events referencing the button in the document scope are no longer found.

So something needs changing on this. I don't particular want to have the rule that every component must have a host, as this adds complexity when coding and is going to stump some people. One framework I know does this, but it shouldn't be necessary. Gonna ponder it.
enhancement in progress docs done

opened by bob2517 31
Set up relative URL handling for ajax commands per CSS spec

This came up as a result of the new component syntax where relative URLs in ajax requests were discovered not to work as expected.

ACSS uses relative URLs in the same way as JavaScript, because it was written in JavaScript.

However, it should be working like CSS (for consistency reasons), and CSS handles "../" a bit differently to JavaScript. So there's an issue.

ACSS should be following the CSS spec, so per this: http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

... the "../" should be based on the path of the stylesheet, like CSS.

According to HTML the spec for the base element: "The base element allows authors to specify the document base URL for the purposes of parsing URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information."

So it appears that the base element in HTML shouldn't affect the way CSS works, therefore it will not have any effect on ACSS ajax urls. It's possible there may be other areas in ACSS that need to work per the CSS rules, but I can't think of any ATM.

I don't see the point of "./", so I'm leaving it out completely. I'll put it in later if anyone insists. It adds nothing to the syntax tho, AFAICS.

This is essentially a bug fix to get ACSS more aligning to the CSS spec. I don't think this will be a breaking change for anyone, but I'm going to flag it as a breaking change just in case.

Note that this is a handling for ajax requests in ACSS only.
enhancement invalid done on branch docs done

opened by bob2517 27
Outstanding issues before 2.7.0 release
This is a placeholder for my benefit as I test things before 2.7.0 release, for things that are not necessary quick fixes.

Just discovered that reactive array variables aren't working when the inner bracket content is a variable, so this needs fixing:

@for n from 0 to 3 { render-after-end: "<custom-square len=\"{{theLen[n]}}\" col=\"{{theCol[n]}}\"></custom-square>"; }

The fix for this is to resolve the inner brackets fully before the reactive reference is stored, rather than storing the inner bracket variable which I suspect is being done. The reactivity needs to happen on the exact variable that is rendered.
next release
opened by bob2517 23
Make docs site downloadable / set up a template-based SPA option

Add a button to download a zip containing a searchable docs site. All the files are statically generated anyway so it's not going to be much work to implement. Make an auto-generated JavaScript file that runs with the offline website grunt that contains the map of keywords and the search functionality. In the config, instead of using ajax, run the function instead. Just use a global window variable for storing the search object, or local storage, and the function can just return straight html to render..
done on branch docs to do

opened by bob2517 22
Next release - sequential target selectors, sequential action commands and nested loops

In CSS it doesn't matter which commands are run in which sequence (mostly - the animation method is slightly different and has sequential commands). Active CSS was built on that premise of static declarations. Most of the time you can get away with commands not being sequential, and actually it does run things sequentially up to a point, but you can end up using a lot of "after stacks" to make sure of sequentiality, which can make the code seem a bit hacky.

With that in mind, and in the interests of keeping things simple, the solution is simply to make all target selector and action commands sequential. This decision still means that Active CSS can be incorporated into the browser, which is the point of the project, as all Active CSS declarations are labelled clearly by their event and so thus can be distinguished to have commands to run sequentially.

So the next minor release will introduce sequential target selectors and sequential action commands. It won't break what config works already, but will enable developers to write code in sequence. This will additionally quash any related consideration on Active CSS not being a "proper" programming language because the commands aren't currently sequential, not that anyone has done this yet.

(It's going to seriously break the extension for that particular release and introduce all sorts of issues with editing live config which will be tackled after the core has been handled.)
enhancement proposal

opened by bob2517 22
Add option to component syntax to start component up only when visible.

It might be worth doing this with intersection observer. Seems a waste to run an animation component when no one can see it. If it can be done easily it should be on the branch by the end of tomorrow as I could use it for a work project next week.

This will be a full rendering, starting with beforeComponentOpen, only when the element becomes visible on the page. Until then it will just look like a container element, it won't contain a shadow DOM, or anything else.
enhancement done on branch docs to do crazy idea

opened by bob2517 9
External triggers on scoped component elements are not fetching component details

This is using the JS external command ActiveCSS.trigger(el, "myEvent");

The visible effect on my example is that it pulls private vars out into the main document scope, which is no good. That example was based on calling an event outside the component, but yet still needed to inherit the variable scoping.

The solution, without re-writing how component details are fetched in the event loop, is to fetch the component details in the external trigger command and call the event loop with those details. This is perhaps more performant anyway, bearing in mind the way the event loop is currently structured. It's maybe worth revisiting the event loop structure now that the core is stable and seeing if there is or isn't a better way to organise it.

This solution should also solve the problem of accessing inner component events when externally called.
bug done on branch more to do

opened by bob2517 1
@pages SPA handling needs a solution for scroll position

The only thing that ACSS doesn't handle automatically with @pages is remembering the scroll position when going back to a page. This should be implemented as best as possible.

There will be an issue for things like the intentionally delayed rendering of manually drawn lists, or manual page transition routines, but there's not much that can be done about that automatically without remembering the actions taken to get to that scroll point, which wouldn't be desired behaviour, and that issue would be there natively anyway.

To solve that problem too, allow access to fetch the scroll position of that page so that it can be used manually once it has been automatically stored per the first fix needed.
enhancement

opened by bob2517 0
Set up {@$var} syntax

Being able to substitute a variable into an attribute reference is needed, and it's not currently possible. It can be worked around in various ways using regular variables but it's not very intuitive.

Syntax will be {@$variable}.
enhancement

opened by bob2517 0
Bump engine.io and socket.io
Bumps engine.io and socket.io. These dependencies needed to be updated together. Updates engine.io from 6.1.3 to 6.2.1

Release notes

Sourced from engine.io's releases.

6.2.1

:warning: This release contains an important security fix :warning:

A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

Error: read ECONNRESET at TCP.onStreamRead (internal/stream_base_commons.js:209:20) Emitted 'error' event on Socket instance at: at emitErrorNT (internal/streams/destroy.js:106:8) at emitErrorCloseNT (internal/streams/destroy.js:74:3) at processTicksAndRejections (internal/process/task_queues.js:80:21) { errno: -104, code: 'ECONNRESET', syscall: 'read' }

Please upgrade as soon as possible.

Bug Fixes

catch errors when destroying invalid upgrades (#658) (425e833)

6.2.0

Features

add the "maxPayload" field in the handshake details (088dcb4)

So that clients in HTTP long-polling can decide how many packets they have to send to stay under the maxHttpBufferSize value.

This is a backward compatible change which should not mandate a new major revision of the protocol (we stay in v4), as we only add a field in the JSON-encoded handshake data:

0{"sid":"lv_VI97HAXpY6yYWAAAC","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000,"maxPayload":1000000}

Links

Diff: https://github.com/socketio/engine.io/compare/6.1.3...6.2.0

Client release: 6.2.0

ws version: ~8.2.3

Changelog

Sourced from engine.io's changelog.

6.2.1 (2022-11-20)

:warning: This release contains an important security fix :warning:

A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

Error: read ECONNRESET at TCP.onStreamRead (internal/stream_base_commons.js:209:20) Emitted 'error' event on Socket instance at: at emitErrorNT (internal/streams/destroy.js:106:8) at emitErrorCloseNT (internal/streams/destroy.js:74:3) at processTicksAndRejections (internal/process/task_queues.js:80:21) { errno: -104, code: 'ECONNRESET', syscall: 'read' }

Please upgrade as soon as possible.

Bug Fixes

catch errors when destroying invalid upgrades (#658) (425e833)

3.6.0 (2022-06-06)

Bug Fixes

add extension in the package.json main entry (#608) (3ad0567)

do not reset the ping timer after upgrade (1f5d469), closes socketio/socket.io-client-swift#1309

Features

decrease the default value of maxHttpBufferSize (58e274c)

This change reduces the default value from 100 mb to a more sane 1 mb.

This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

increase the default value of pingTimeout (f55a79a)

... (truncated)

Commits

24b847b chore(release): 6.2.1

425e833 fix: catch errors when destroying invalid upgrades (#658)

99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...

d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)

7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)

535a01d ci: add Node.js 18 in the test matrix

1b71a6f docs: remove "Vanilla JS" highlight from README (#656)

917d1d2 refactor: replace deprecated String.prototype.substr() (#646)

020801a chore: add changelog for version 3.6.0

ed1d6f9 test: make test script work on Windows (#643)

Additional commits viewable in compare view

Updates socket.io from 4.4.1 to 4.5.3

Release notes

Sourced from socket.io's releases.

4.5.3

Bug Fixes

typings: accept an HTTP2 server in the constructor (d3d0a2d)

typings: apply types to "io.timeout(...).emit()" calls (e357daf)

Links:

Diff: https://github.com/socketio/socket.io/compare/4.5.2...4.5.3

Client release: 4.5.3

engine.io version: ~6.2.0

ws version: ~8.2.3

4.5.2

Bug Fixes

prevent the socket from joining a room after disconnection (18f3fda)

uws: prevent the server from crashing after upgrade (ba497ee)

Links:

Diff: https://github.com/socketio/socket.io/compare/4.5.1...4.5.2

Client release: 4.5.2

engine.io version: ~6.2.0

ws version: ~8.2.3

4.5.1

Bug Fixes

forward the local flag to the adapter when using fetchSockets() (30430f0)

typings: add HTTPS server to accepted types (#4351) (9b43c91)

Links:

Diff: https://github.com/socketio/socket.io/compare/4.5.0...4.5.1

Client release: 4.5.1

engine.io version: ~6.2.0

ws version: ~8.2.3

4.5.0

Bug Fixes

typings: ensure compatibility with TypeScript 3.x (#4259) (02c87a8)

Features

add support for catch-all listeners for outgoing packets (531104d)

This is similar to onAny(), but for outgoing packets.

... (truncated)

Changelog

Sourced from socket.io's changelog.

4.5.3 (2022-10-15)

Bug Fixes

typings: accept an HTTP2 server in the constructor (d3d0a2d)

typings: apply types to "io.timeout(...).emit()" calls (e357daf)

4.5.2 (2022-09-02)

Bug Fixes

prevent the socket from joining a room after disconnection (18f3fda)

uws: prevent the server from crashing after upgrade (ba497ee)

2.5.0 (2022-06-26)

Bug Fixes

fix race condition in dynamic namespaces (05e1278)

ignore packet received after disconnection (22d4bdf)

only set 'connected' to true after middleware execution (226cc16)

prevent the socket from joining a room after disconnection (f223178)

4.5.1 (2022-05-17)

Bug Fixes

forward the local flag to the adapter when using fetchSockets() (30430f0)

typings: add HTTPS server to accepted types (#4351) (9b43c91)

4.5.0 (2022-04-23)

Bug Fixes

typings: ensure compatibility with TypeScript 3.x (#4259) (02c87a8)

... (truncated)

Commits

945c84b chore(release): 4.5.3

d3d0a2d fix(typings): accept an HTTP2 server in the constructor

19b225b docs(examples): update dependencies of the basic CRUD example

8fae95d docs: add jsdoc for each public method

e6f6b90 docs: add deprecation notice for the allSockets() method

596eb88 ci: upgrade to actions/checkout@3 and actions/setup-node@3

e357daf fix(typings): apply types to "io.timeout(...).emit()" calls

10fa4a2 refactor: add list of possible disconnection reasons

8be95b3 chore(release): 4.5.2

ba497ee fix(uws): prevent the server from crashing after upgrade

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Releases(v2.11.2)

v2.11.2(Oct 30, 2022)

BUG FIX: Sometimes the mixing of ACSS conditionals with JS failed when placed in a certain order in the line. BUG FIX: Evaluate empty attributes as empty strings in @ references that are actually present, instead of undefined. BREAKING CHANGE: {JSON} variable renamed to $JSON to align to dollar syntax and allow better manipulation.
Source code(tar.gz)
Source code(zip)
v2.11.1(Oct 12, 2022)

BUG FIX: Fix to special combinator breakage. More tests to do, but this should fix the existing breakage to do with the closest combinator. Please report to GitHub any errors holding anything up.
Source code(tar.gz)
Source code(zip)
v2.11.0(Oct 9, 2022)

NEW FEATURE: New variable type with a dollar prefix, to make things simpler and more predictable. It is highly recommended to switch all variables to this new syntax. NEW FEATURE: New previous adjacent sibling combinator for selectors on targets (-). NEW FEATURE: New previous general sibling combinator for selectors on targets (-~). NEW FEATURE: New escapeHTML function for inline JS to convert string into HTML entities for safe display. NEW FEATURE: New unEscapeHTML function for inline JS to convert HTML-entitied string into raw string. NEW FEATURE: New getVar function for inline JS to fetch a scoped variable based on string name. Variable substitution will eventually get its own proper syntax at some point in order for it to be available everywhere, so this is a stopgap. NEW FEATURE: Enhancements to console-log to allow saner output of variables and elements via the new dollar-prefixed variable type. NEW FEATURE: Pause command now allows variables. NEW FEATURE: Afterajax events added for custom element components to handle ajax errors. NEW FEATURE: Inline JS can now handle object prototypes via dollar-prefixed variables. NEW FEATURE: Ajax returned JSON now gets stored in a general {JSON} object variable - FIXME - should be $JSON. NEW FEATURE: Set up relative path handling for ajax commands. NEW FEATURE: Added JSON option to component syntax to load JSON prior to rendering in order to avoid display flicker. NEW FEATURE: Add afterAjax events for components with failed file loads.

DOCUMENTATION REMOVAL: Scoped variables that do not have a dollar prefixing the main variable will no longer be documented and no further bug fixes will occur for those variable types. Window-scoped variables with no dollar prefix are not included in this deprecation. The new dollar-prefixed syntax for ACSS scoped variables is the way forward, because it simplifies syntax and fixes some usage and core issues at the same time. The core code to handle the old variable types is not scheduled to be removed any time soon, but the documentation will no longer show the older way of using variables.

POTENTIAL BREAKING CHANGE: "click-on-..." commands now also focus by default. May run related ACSS focus events twice if a focus command is also manually set. POTENTIAL BREAKING CHANGE: New dollar variable syntax may or may not have affected the usage of the old variable style. No backward-compatibility errors are known at the time of release, but if you do find any errors with previously working code, you can report them via GitHub. The solution that will be recommended is a switch to the new dollar variable syntax, because trying to fix core errors with those variable types is very hard on the brains. A switch to dollar syntax should be done anyway because the new syntax is more predictable and easier to work with, for the developer as well as the core developer.

BREAKING CHANGE: Non-chromium Edge is no longer supported for the render command.

DEPRECATION NOTICE: load-images will be removed in version 3. Setting the src attribute with set-attribute does the same thing.

BUG FIX: Allow CSS transition command to maintain its own comma-delimited structure rather than using the chaining syntax of ACSS. BUG FIX: Fix to form submit/check not including custom elements with name/value pairs.
Source code(tar.gz)
Source code(zip)
v2.10.0(May 1, 2022)

NEW FEATURE: Components can now load HTML and CSS directly from files or template elements, as opposed to embedding structure in config. (Not that there is anything wrong with that older way - this is just another way of using components and gives you more options.)

NEW FEATURE: Components and all ajax requests now allow ACSS variables, with the accept-vars option. By default, any ACSS variables in external files will not be evaluated when loaded unless the accept-vars option is specifically specified, for security reasons. ACSS variables hidden inside user content should be escaped on the server with a backslash, by the developer, to avoid variable evaluation when loaded.

NEW FEATURE: Custom element components now have a intuitive and easy way to get loading indicators whilst waiting to render. The child elements of custom elements get removed by default when the component is loaded.

NEW FEATURE: New toggle-attribute action command. NEW FEATURE: New fullscreen action command. NEW FEATURE: New empty action command. NEW FEATURE: New innerhtmlchange event. NEW FEATURE: New cross-DOM if-has conditional. NEW FEATURE: Allow attribute referencing {@attr} in delay labels NEW FEATURE: Allow variables in delay time syntax for action commands. NEW FEATURE: New header options added to ajax commands. NEW FEATURE: New csrf option added to ajax commands so forms work easily with back-ends like Laravel.

BUG FIX: Fix to, and clarification of, the purpose of the closest combinator <, so it works intuitively as part of a complex selector.

BUG FIX: Fixed a bug to do with set-attribute/set-property with regard handling spaces, double-quotes and backslashes. BUG FIX: Fixed an error that was caused by external JS changing the URL in an SPA context, if the URL changed to an incomplete URL.

BUG FIX: Functions should now work in embedded JavaScript, such as in the run command. Note that // for comments is still not supported anywhere in ACSS, including JavaScript embedded in config.

BUG FIX: Fixed selector drilling into a shadow DOM, eg. #myShadowHost -> shadow -> div. BUG FIX: Fixed weird barfness caused by pause and after stack being used in the same event flow. BUG FIX: Fixed cancel-timer not always working in context of private components. BUG FIX: Forms no longer send disabled fields to server on ajax form submit.

DEPRECATION: The fullscreen-on and fullscreen-exit have now been deprecated and will be removed at some point. Replace with the new fullscreen action command.

BREAKING CHANGE: The child elements of custom element components now get removed by default when the component is loaded. Use the {$CHILDREN} variable to redraw children in the component itself if necessary.

BREAKING CHANGE: Events such as afterBackgroundColor, afterFunc, etc. have been removed as functionality, because ACSS action commands run sequentially now and as such these events are no longer necessary. The afterAjax family of events have not been removed, as they are still very much needed. This removal has given the core a good performance boost. There are alternatives to doing the same thing. If you are using these types of events currently, simply take the action commands from the "after" event and place them in sequence immediately after your main action command to fix things. If that isn't possible to do, trigger your existing "after" event as a custom event immediately after your main action command and call your "after" event that way. Eg. "background-color: green; #myDiv { trigger: afterBackgroundColor; }". In other words, the afterBackgroundColor event can stay as it is in your config, but it becomes a custom event which is triggered from where you need it to trigger. It will just need the additional trigger command to work. Note: Do not touch your afterAjax events because none of the ajax events are planned for removal.
Source code(tar.gz)
Source code(zip)
v2.9.1(Apr 23, 2022)

Fix to a infinite loop problem with the observe event in some scenarios.
Source code(tar.gz)
Source code(zip)
v2.9.0(Jan 2, 2022)

NEW FEATURE: New fade-in, fade-out and fade-to commands. NEW FEATURE: New observe event. NEW FEATURE: New {JSON} special variable for auto-wrapping of JSON results for handy iteration. NEW FEATURE: New print command. NEW FEATURE: New if-empty-trimmed conditional. NEW FEATURE: Allow attributes to be fetched hierarchically from triggered custom events. NEW FEATURE: Add scope option to take-class command. NEW FEATURE: Allow certain ACSS conditionals to have default option of self where self can be implied. NEW FEATURE: Internal optimizations made to the event flow to offset necessary improvements to the core. BUG FIX: Consolidated internal selector parsing for target selectors and action commands, to allow "<" and "->" to work anywhere in a chain within a selector. Note: if you discover anything to do with selectors that is not yet working as expected, please let us know. BUG FIX: Allow host attributes to be fetched from anywhere in a component. BUG FIX: Allow reactive variables to work if undefined at first use. BUG FIX: Fix to variable assignment of window variables, as that wasn't always working as expected. BUG FIX: Fix to HTML variables that look like this: myVar.$myHTMLVariable, which had stopped working at some point. BUG FIX: Get the focus-on/click-on action commands correctly working in components/shadow DOMs. BUG FIX: Various other minor fixes.
Source code(tar.gz)
Source code(zip)
v2.8.0(Sep 19, 2021)

NEW FEATURE: Allow regular CSS rules inside ACSS config. CSS at-rules that are experimental or make no sense for a dynamic context have not been included in this upgrade. DOCS FIX: Replace all references to "inline ACSS" with the correct term, "embedded ACSS". BREAKING CHANGE: inlineTag:loaded event now becomes embedded:loaded. BUG FIX: Allow empty embedded ACSS style tags but show a warning in the developer core edition. Previously an empty tag would simply stop valid config from loading.
Source code(tar.gz)
Source code(zip)
v2.7.0(Aug 3, 2021)

NEW FEATURE: @if, @else if, @else, @while, @for control flow statements. NEW FEATURE: break, continue, exit and exit-target commands. NEW FEATURE: Allow all control flow statements to wrap around action commands as well as target selectors.

(PS. check out the contributors below. Ha!)
Source code(tar.gz)
Source code(zip)
v2.6.1(Jun 8, 2021)

BUG FIX: Fix to ACSS router handling conflicting with "div" when used on its own as a target selector.
Source code(tar.gz)
Source code(zip)
v2.6.0(Jun 7, 2021)

NEW FEATURE: New pause command. NEW FEATURE: New await option for all delayed action commands, including ajax commands. BUG FIX: Fix to ignore template tag contents when processing events.
Source code(tar.gz)
Source code(zip)
v2.5.2(May 22, 2021)

NEW FEATURE: Added general ajax error event (afterAjaxError, etc.) which runs after an ajax error coded event. BUG FIX: Fixed issue to do with rendering inner table tags from render command sometimes not working due to preceding whitespace.
Source code(tar.gz)
Source code(zip)
v2.5.1(May 12, 2021)

NEW FEATURE: Downloadable docs. NEW FEATURE: Bookmarkable SPA hash support. NEW FEATURE: New add-hash, remove-hash and load-as-ajax commands. NEW FEATURE: html-entity-decode option added to set-attribute and set-property commands. NEW FEATURE: starting-from selector option added to click-on-next, etc. commands. NEW FEATURE: If-var conditional now supports array comparison and whether array is empty or not if no second parameter specified. BUG FIX: Clean removal and addition of inline ACSS between pages. BUG FIX: Internally escape variable for rendering only at the point of rendering and not before, plus fixes to auto-escaping issues. BUG FIX: Allow target selector actions to continue running to the end after the target selector has been removed from the DOM, if the command isn't intended to affect the target selector itself. The prior workaround was to set off a custom event instead, but it isn't needed now. BUG FIX: Allow vars commands in JS to handle $ prefix variables. BUG FIX: Allow reactivity to be set up on attributes when the attribute hasn't been setup yet. BUG FIX: Fix to ajax-pre-get sometimes getting content twice from the server. BUG FIX: Display fix to component table rendering.
Source code(tar.gz)
Source code(zip)

v2.5.0(Mar 17, 2021)

NEW FEATURE: New strictlyPrivateEvents option for total component event encapsulation (replaces prior "privateEvents" option).
NEW FEATURE: New session-storage and local-storage options added to var action command, with complex variable support and full DOM reactivity.
NEW FEATURE: New var-delete action command.
NEW FEATURE: New end-of-field option added to focus-on action commands to allow putting the cursor at the end of the line on focus.
NEW FEATURE: New {$RAND...} variables for handling different types of random strings with optional varying lengths.
NEW FEATURE: New element property variable type {@@property} to complement existing {@attribute} variable type for when you need dynamic values.
NEW FEATURE: New options added to console-log action command - target and variables to help with debug actions.
NEW FEATURE: Added proper support for variable referencing within array items.
BREAKING CHANGE: Change prior privateEvents behaviour so that inner component elements can be targeted from outside the component.
To upgrade from the latest version of the core, in your config @component lines, replace privateEvents to strictlyPrivateEvents. The new strictlyPrivateEvents option has the same behaviour as the prior privateEvents option.
See the Components section of the docs to get the full info on why this is an improvement and what you can now do because of the change.
BREAKING CHANGE: There were lots of fixes to do with using complex variables (arrays inside objects, etc.) in this release. Hopefully these have all been solved now. There shouldn't be too much breakage, if anything, but if you do use variables you should test your code and check how they are being used in your config. Any breaking changes will be in the area of how double-quotes are being used with variables. If you need some visual references on how variables are used, you can check out the Concept Examples in the docs - specifically the new "Todo" example to see how variables are used in there. If you do find anything strange with variables that you cannot resolve, please do file a bug report as it will get addressed promptly.
SECURITY FIX: Disallow dynamic DevTools insertion of Active CSS in production core.
SECURITY FIX: Remove possibility of double evaluation with variables due to progressive substitution when evaluating for render and at other times.
BUG FIX: Fix for the issue of delayed actions not running after component is removed.
BUG FIX: Fix to custom triggering of events in and out of components when chained.
BUG FIX: Fix to clickoutside event as it wasn't working when set on inner shadow DOM elements.
BUG FIX: Fix to custom event trigger delays so they work as expected in components.
BUG FIX: Fix config lazy-loading.
BUG FIX: Memory clean-up and loads of stability fixes and optimizations.
BUG FIX: Fix variable scoping issues with the run, create-command and create-conditional commands.
BUG FIX: Fix to ensure document title setting always removes HTML entities correctly.
BUG FIX: Fix several issues to do with handling complex variables, variable re-assignment and using variables in components.

Source code(tar.gz)
Source code(zip)

v2.4.3(Jan 24, 2021)

BUG FIX: Fix to the multiple renders in same target selector related to implementation of {$CHILDREN}. BUG FIX: Fix to var command for assigning a value to an array item.
Source code(tar.gz)
Source code(zip)
v2.4.2(Jan 20, 2021)

Support for setting native CSS variables dynamically.
Source code(tar.gz)
Source code(zip)
v2.4.1(Dec 28, 2020)

Re-introduce native templates and slots support.
Source code(tar.gz)
Source code(zip)
v2.4.0(Dec 27, 2020)

Release focusing on stability, speed and optimization improvements. See the docs website for the full release notes.
Source code(tar.gz)
Source code(zip)
v2.3.0(Aug 25, 2020)

This should be a fully backward-compatible upgrade. No changes required, but you can now optimize if you want (see below).

NEW FEATURE: Nested loops. NEW FEATURE: Sequential target selector execution. NEW FEATURE: Sequential action command execution. (Note that these changes will work with old config and allows optimization. To optimize, remove "after stack" or "after 0s" and place commands and target selectors sequentially if they aren't already in the right sequence. Only do this with synchronous commands though. You still need the afterAjax event for ajax commands.) PERFORMANCE UPGRADE: Faster initialization.
Source code(tar.gz)
Source code(zip)