UI friendly JavaScript. Part I.

Let’s agree that JS is used mostly on the Web (in browser or node/deno) – most of the time JS code works in context of HTML and CSS.

But for now JavaScript is a general purpose scripting language that does not take specifics of HTML and CSS into consideration – many HTML/CSS concepts and data types cannot be naturally represented in JS.

Proposals below are based on script used in Sciter that was designed to better (than JS) serve “language-behind- UI” role. Note that the ideas are 100% backward compatible – existing JS code will work as it is if to apply them.

CSS friendly JavaScript

Ideally It would be nice for JS to allow to write CSS “directly” – so for JS syntax to include CSS syntax, at least partially.

All below is based on Sciter‘s script that was designed to better (than JS) serve “language-behind- UI” role. Yet below ideas are 100% backward compatible – existing code will work as it is.

Proposal #1, object literals, syntax-only

In object literals allow ';' to be used as ',' name/value pairs separators. So this:

{
   font: "system";
   opacity:0.5;
}

will be a valid object literal. The change will not break existing code.

Proposal #2, object literals , syntax-only

To use CSS’s ident-token production in field names. CSS’s ident-token matches JS name token but also allows '-' inside names. So this

{
   font-family: "system";
   opacity:0.5;
}

will be a direct equivalent of

{
   "font-family": "system";
   opacity:0.5;
}

Proposal #3, Tuple type, syntax & runtime

Tuple is a) tagged and b) immutable array. Tuple literals look close to array literals :

[ ident-token ':' element1, element2, ...]

Motivation: CSS uses “functions” in its notation but that are actually tuples – not functions – pure data constructs.

So this CSS declaration:

{
   background-color: rgb(255,0,0) ;
}

Can be expressed in “JS.UI” as

{
   background-color: [rgb:255,0,0];
}

or with some helper CSS namespace object as:

{
   background-color: css.rgb(255,0,0);
}

Tuple class is essentially Array class a) without mutating methods and b) with .tag:string property.

In principle we don’t need special Tuple type if to drop mutability requirement – just allow “tagged array literals” so this [rgb:255,0,0] will be an instance of Array with tag property set additionally.

Note: that Tuples introduction may open bunch of other FP-oriented options in JS.

Proposal #4, numbers with units, syntax only.

For parser to support units, so this JS.UI construct

{
   border-width: 0.5em;
}

will be translated either to tuple as:

{
   border-width: [em:0.5];
}

or to new Length data type as it is done in Sciter’s Length or Angle types. But adding new data type will be a major JS runtime update.

Proposal #5, array literal values

Allow white-space to be treated as element separators in array/tuple literals, object literal values and function calls.

So this JS.UI construct:

{
   margin: 1em 2em;
}

will be treated as JS:

{
   margin: [[em:1],[em:2]];
}

… to be continued …