PBOML Parser (English)

Description

This project takes the form of a web component that can render PBOML formatted content (the renderer). The Web component also includes an optionally loaded visual editor (the editor).

This project is under active development, and several concepts are set to change and evolve. It is not recommended for production use at this time.

The PBOML language

YAML based, the PBOML language is used to serialize PBO reports, notes and election costings for storage, machine based edition and just in time rendering to multiple formats (HTML, Docx, PDF). To learn more about the PBOML language, visit this project's Wiki.

Demo

Sandbox

The sandbox lets you visualize and interact with the various slices and their renderers.

• Sandbox
• Source code

Renderer examples

Some existing publications have already been converted to the PBOML format and are rendered from this format on the OPBO fallback site. This is notably the case for the following publications:

• A Distributional Analysis of the Clean Fuel Regulations
• Personnel Expenditure Analysis — Update
• Cost estimate of Employment Insurance Board of Appeal

Use the Web component

Retrieve the current version of the script

The following script allows you to retrieve the latest version of the script by consulting the manifest produced when it was compiled, and inject it on a given page.

const PARSER_DOMAIN = "https://pboml.opbo-bdpb.ca/";

function loadPbomlParser() {
    window.pboml_parser_loaded = true;
    fetch(`${PARSER_DOMAIN}manifest.json`)
        .then((response) => response.json())
        .then((data) => {
            for (const property in data) {
                if (data[property].isEntry) {
                    const script = document.createElement('script');
                    script.src = `${PARSER_DOMAIN}${data[property].file}`;
                    script.type = "module";
                    document.head.appendChild(script);
                }
            }
        });
}
if (!window.pboml_parser_loaded)
    loadPbomlParser()

Embed the renderer

❗ Only trusted content should be passed to the component, as it will (mostly) not be sanitized prior to rendering.

The renderer can then be inserted as follows:

<pboml-parser payload="data:text/yaml;base64,{pboml}"></pboml-parser>

Where {pboml} is a base64 encoded PBOML document. The payload attribute can also be fed raw PBOML content, as long as it's encoded correctly. For example, a Vue.js app could embed the component as such:

<pboml-parser :payload="pbomlString"></pboml-parser>

Where pbomlDocument is a raw PBOML document.

Embed the editor

The visual editor can be embeded by adding and edit attribute set to true.

<pboml-parser edit="true" payload="data:text/yaml;base64,{pboml}"></pboml-parser>

Develop and build locally

1. Project setup

npm install

2. Compilation with Vite

Compiles and hot-reloads for development

npm run dev

Run tests

npm run test

Compiles and minifies for production

npm run build