Songhay.Modules.Bolero 6.3.0

Songhay.Modules.Bolero

shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼

NuGet package 📦: Songhay.Modules.Bolero

These are the main concerns of this work:

• Utility, mostly sharing functions for Remoting and IJSRuntime
• Visuals, a deliberately incomplete coverage of HTML, CSS and Bulma by Jeremy Thomas
• Models (Primitives), F♯ primitive obsession, supporting the Visuals

Utility

There are four utilities:

1. a utility for Bolero [src]
2. a utility for JSON documents [src]
3. a utility for IJSRuntime [src]
4. a utility for IRemoteService [src]

Visuals and Models

Here is my first attempt at building a <acronym title="Domain-Specific Language">DSL</acronym> for HTML, CSS and Bulma CSS on top of Bolero. For example, here is an expression [GitHub], rendering Bulma tabs, overriding the Bolero ElmishComponent<_,_>:

override this.View model dispatch =
    concat {

        let tabs = [
            (text "README", ReadMeTab)
            (concat { text "Bolero "; code { text "IJsRuntime" } }, BoleroJsRuntimeTab)
            (text "Bulma Visuals", BulmaVisualsTab)
        ]

        bulmaTabs
            (HasClasses <| CssClasses [ ColorEmpty.BackgroundCssClassLight; "is-toggle"; "is-fullwidth"; SizeLarge.CssClass ])
            (fun pg -> model.tab = pg)
            (fun pg _ -> SetTab pg |> dispatch)
            tabs

        cond model.tab <| function
        | ReadMeTab ->
            if model.readMeData.IsNone then
                text "loading…"
            else
                bulmaContainer
                    ContainerWidthFluid
                    NoCssClasses
                    (bulmaNotification
                        (HasClasses <| CssClasses [ ColorPrimary.CssClass ])
                        (rawHtml model.readMeData.Value))

        | BoleroJsRuntimeTab ->
            bulmaContainer
                ContainerWidthFluid
                NoCssClasses
                (BoleroJsRuntimeElmishComponent.EComp model dispatch)

        | BulmaVisualsTab ->
            bulmaContainer
                ContainerWidthFluid
                NoCssClasses
                (BulmaVisualsElmishComponent.EComp model dispatch)
    }

Warning

This approach to the <acronym title="Domain-Specific Language">DSL</acronym> is wrapping functions around <acronym title="Computation Expression">CE</acronym>s instead of wrapping <acronym title="Computation Expression">CE</acronym>s with <acronym title="Computation Expression">CE</acronym>s. Research in this direction is underway… on and off…

The preference here (at the moment) is to have more types than functions for the <acronym title="Domain-Specific Language">DSL</acronym>. These types are grouped into four models of primitives:

1. Bulma Primitives [src]
2. CSS Primitives [src]
3. HTML Primitives [src]
4. SVG Primitives [src]

These models support the functions of the Visuals:

1. HTML Body Visuals [src]
2. CSS Declarations [src]
3. HTML Head Elements [src]
4. Bulma Component Visuals [src]
5. Bulma CSS Class names [src]
6. Bulma Element Visuals [src]
7. Bulma Layout Visuals [src]

The coverage of HTML is quite limited because Bulma itself has its own, excellent HTML <acronym title="Domain-Specific Language">DSL</acronym> on which this work depends heavily. The generic <acronym title="Cascading Style Sheets">CSS</acronym> coverage is starting off with typography. The Bulma-specific coverage is the most extensive but lacking in the following areas:

• the Bulma form
• Bulma pagination

I look forward to working a bit more on this Bulma coverage, likely starting with Bulma pagination.

custom JavaScript is needed for the Bulma Navbar

In order to toggle the Bulma Navbar burger and its dropdown menu, the following JavaScript is needed:

(() => {

    window.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const nav = document.querySelector(`#${burger.dataset.target}`);
        const isActiveCssClass = 'is-active';

        burger.addEventListener('click', () => {
            burger.classList.toggle(isActiveCssClass);
            nav.classList.toggle(isActiveCssClass);
        });
    });

})();

This JavaScript is similar to the code provided in the Bulma documentation.

setting up a Typescript pipeline for JavaScript edge cases

The whole point of this work is to avoid using JavaScript. However, this Microsoft-sponsored WebAssembly journey is a work in progress which means some JavaScript is still needed. The Songhay.StudioFloor.Client in this Solution [GitHub] features a Typescript pipeline that should provide guidelines around how to deal with what is needed from JavaScript.

@BryanWilhite