Breaking changes / updates on WLX/Slides

[JerryI]

It's been a long time we started to work on WLX (Wolfram Language XML) syntax extension. For now it entered into its final form.

Let me remind you, what you can do with it

.wlx
<h1><RandomWord/></h1>

or in slides

.wlx

Columns[Col1_, Col2_] := With[{},
    <div style="display: flex">
        <div style="width: 50%"><Col1/></div>
        <div style="width: 50%"><Col2/></div>
    </div>                       
]

.slide

# Title

<Columns>
  <div>
    
## Subtitle 1

And some content
    
  </div>
  <div>

## Subtitle 2

And some content

  </div>
</Columns>

Now you have a component to make two columns

👉 See more on slides in the advanced section of docs (SLIDES)

Animations

In general all visuals can be done in the same way as in regular cells, since it uses the same approach

layout

.slide

# Animation example

<Figure id={"routed-event-fragment-1"}/>

The figure will be changed, when the fragment below is revealed

<span style="color:red">Magic</span> <!-- .element: class="fragment" data-fragment-index="1" -->

<SlideEvent id={"routed-event"}/>

This is a typical approach I (@JerryI ) use for my reports on a work. Here we have an graphics component Figure with a parameter that specifies an uid for events, on which it is subscribed. And the event listener SlideEvent, that captures what happens on a slide (a slide got revealed or a fragment popped up) and sends them to an event object labelled as "routed-event".

Now the actual code for all functions we used

Figure[OptionsPatten[]] := With[{event = EventClone[OptionValue["id"]]},
   (* clean up, if the cell got destroyed *)
    EventHandler[EvaluationCell[], {"destroy" -> Function[Null, Delete[event]]}];
    
    LeakyModule[{points},
        (* initial state *)
        points = RandomReal[{-1,1}, {40,2}];
        
        EventHandler[event, Function[Null, 
            (* act when the event happend *)
            points = {Sin[#], Cos[#]} &/@ Range[40]
        ]];
        
        Graphics[{Red, Line[points // Offload]}]
    ]
]

Options[Figure] = {"id"->""}

This little script will plot randomly distributed points as lines for its initial state. When the event is fired, it changes the distribution of points to a circle. The result will look like

What was broken?

We have changed the way, how parmeters or options are provided. See on the example below

.wlx

<Heading Title={"Some title"}/>

where
before

.wlx
Heading := With[{},
  <dummy>
    <h1><Title/></h1>
    Some repetative text you need
  </dummy>
] 

after

.wlx
Heading[OptionsPattern[]]] := With[{Title = OptionValue["Title"]},
  <dummy>
    <h1><Title/></h1>
    Some repetative text you need
  </dummy>
] 

Options[Heading] = {"Title"->"Nope"}

Basically, before all parameters were passed as global variables, which is not obvious from the code structure. However, now it works as if it was usual Options of a symbol. Which is also great for WL ecosystem, since it bridges two languages nicer and provides clear view on what code does (comes handy if you many many of those pieces).

Cheers,
Kirill (@JerryI)

[JerryI]

UPD: All examples, packages and tutorials were updated accordingly