• Code Refactor: Improved organization of extensions and streamlined context handling for better usability.
• Graphics Enhancements: Extra padding in framed mode, grid lines added (limited to Automatic for now).
• 3D Plots: Progress made towards full support for ticks and labels.

const balloonContainer = document.getElementById("balloon-container");

function random(num) {
  return Math.floor(Math.random() * num);
}

function getRandomStyles() {
  var r = random(255);
  var g = random(255);
  var b = random(255);
  var mt = random(200);
  var ml = random(50);
  var dur = random(5) + 5;
  return `
  background-color: rgba(${r},${g},${b},0.7);
  color: rgba(${r},${g},${b},0.7); 
  box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
  margin: ${mt}px 0 0 ${ml}px;
  animation: float ${dur}s ease-in infinite
  `;
}

function createBalloons(num) {
  for (var i = num; i > 0; i--) {
    var balloon = document.createElement("div");
    balloon.className = "balloon";
    balloon.style.cssText = getRandomStyles();
    balloonContainer.append(balloon);
  }
}

function removeBalloons() {
  balloonContainer.style.opacity = 0;
  setTimeout(() => {
    balloonContainer.remove()
  }, 500)
}

createBalloons(10);
setTimeout(removeBalloons, 15000);

return '';

Massive Code-base Refactor​

We reorganized all extensions and the main repository, rewired connections, and reorganized all defined contexts. It should be much more friendly for the developers as well as for the end users. If one needs to see all public symbols from this or that extension, it should be as easy as calling Names on it. No more context hell!

Context[FrontSubmit]

"CoffeeLiqueur`Extensions`Communication`"

Names["CoffeeLiqueur`Extensions`Communication`*"]

{"CurrentWindow","FrontEndInstanceGroup","FrontEndInstanceGroupDestroy","FrontFetch","FrontFetchAsync","FrontInstanceGroup","FrontInstanceReference","FrontSubmit","WindowObj"}

Here is how to list all contexts from the extensions (if you want to use them later in your external package)

Select[$Packages, StringMatchQ[#, "CoffeeLiqueur`Extensions`*"]&] // TableForm 

(*GB[*){{"CoffeeLiqueur`Extensions`MarkdownCells`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`RevealCells`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`WLXCells`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Video`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`PrintRedirect`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`NeuralNet`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Manipulate`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`SlidesTools`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Sound`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`InputsOutputs`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Graphics`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Plotly`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Graphics3D`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`FrontProxy`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`RuntimeTools`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`System`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Rasterize`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Autocomplete`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`MetaMarkers`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Notifications`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`NotebookStorage`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`FrontendObject`MissingFetcher`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Communication`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`RemoteCells`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`NotebookDirectory`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`OffloadTools`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`Boxes`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`EditorView`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`FrontendObject`"}(*||*),(*||*){"CoffeeLiqueur`Extensions`WLJSInterpreter`"}}(*]GB*) 

Tutorials on making WLJS Extensions​

We have prepared such section in the documentation!

Objects Compression​

We have probably noticed, that saving a notebook with a lot of 3D objects, or raster images might take ages. However, this is no longer an issue! Using basic compression for frontend objects allows to reduce the files size ==by 10 times==. For example

You don't have to do anything extra. A compression is acting like a wrapper and sends compressed object to Javascript side, where it is decompressed using a tiny subset of fflate library. Compression is applied only for the objects larger than 0.5 Megabytes.

It also works with exported notebook (HTML, MDX and etc)!

Safer and easier Javascript API​

The API used to communicate from JS to Kernel is now finally shaped. The old way is still be valid, but we don't recommend to use it

New API allows seamless convertion from JS objects to Wolfram Expression

cell = EvaluationCell[];

EventHandler["test", 
  CellPrint[
    ToString[#, StandardForm]
  , "After" -> cell]&
];

<|"array"->{1,2,3,4},"value"->"Hello World"|>

Now run the script

.js

server.kernel.io.fire('test', {
  array: [1,2,3,4],
  value: "Hello World"
});

Markdown and Slides are Interchangeable​

There is full compatibility between slides and markdown cells. If you want to turn your slides into continuous pages in the notebook, simply replace .slide with .md.

Graphics improvements​

We added extra padding in framed mode and grid lines

Plot[{Sin[x], Cos[x]}, {x,0,10}, Frame->True, GridLines->Automatic]

(*VB[*)(FrontEndRef["fe3afc3f-4df7-46e7-ae78-8c3a58f76ba9"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKp6UaJ6YlG6fpmqSkmeuamKWa6yammlvoWiQbJ5papJmbJSVaAgCa8hZ/"*)(*]VB*)

GridLines option is limited to Automatic for now.

We are somewhat closed to fully support ticks and labels in 3D plots

(*VB[*)(FrontEndRef["20d99c9e-9ddc-4af4-9db3-170b2023cdf0"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKGxmkWFomW6bqWqakJOuaJKaZAFlJxrqG5gZJRgZGxskpaQYAjOQV/w=="*)(*]VB*)

Ballon animation by Jemima (codepen)