Convert Blabber's Dialogue Editor to Svelte

[Pyrofab]

Also gave it the name Parlour because I felt like it

Basics

The new Svelte app exists as an NPM project inside svelt_sprinkles. This project is intended to be extensible, to allow building and exporting other highly dynamic "sprinkles" in the future. For now, the only "sprinkles" are the dark mode toggle button, a new Settings page with more information about said dark mode toggle, and Parlour, a rewritten version of the Blabber Dialogue Editor.

Build

The project is exported as a library, directly in the Jekyll output. I also added a Jekyll plugin to automatically build the svelte_sprinkles project whenever jekyll build or jekyll serve is run.

TODO list

• Set up project
• Parlour:
  • Convert dialogue state to Svelte stores
  • Convert landing view
  • Convert main view
  • Convert graph view
  • Clean up
  • Add predicate editor
• Dark mode toggle:
  • Convert dark mode state to a Svelte store
  • Convert the button to a Svelte component
  • Clean up
• Settings page
  • Add information about our data storage (that is, we store nothing outside the browser)
  • Add a "clear all settings" button
  • Add a dark mode select with equivalent functionality to the toggle

Alternatives

1. Keeping things as they are

This would be bad for my sanity. The Blabber Dialogue Editor is a decently advanced application, and trying to tie the JS to a single mass of HTML without a proper component structure has led to nothing but headaches and spaghetti.

2. Using HTML Custom Elements

It is possible to build a Web Component system using native browser features, and with Jekyll's include_relative tag it is even possible to organize them into tidy files and folders. Here is what this could look like :

my-component.liquid

<template id="my-component">
  <p class="my-component-value">Value goes here</p>
</template>
<script type="module" src="./my-component.js"></script>
<link rel="stylesheet" href="./my-component.css" />

my-component.js

import { dataStore } from '../dataStores.js';

customElements.define(
  "my-component",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("my-component");
      this.appendChild(template.content.cloneNode(true));
      this.value = this.querySelector('.my-component-value');
      this.updater = (value) => this.value.textContent = value;
    }

    connectedCallback() {
      dataStore.subscribe(this.updater);
    }

    disconnectedCallback() {
      dataStore.unsubscribe(this.updater);
    }
  }
);

index.html

{% include_relative my-component.liquid %}
{% include_relative my-container.liquid %}
{% include_relative my-title.liquid %}
<my-container>
  <my-title>Hello, World!</my-title>
  <my-component></my-component>
</my-container>

This ends up looking fairly similar to the Svelte structure, so I believe we would be able to switch decently easily if we wanted to remove our dependency on a second framework, or get a tighter integration with Jekyll. The main drawbacks of this approach are :

• we could not get the optimizations from Svelte's compiler, like the bundling and the minifying
• there would be some boilerplate to write for every component

3. Using another framework

Potayto potahto, svelte seemed good and Up was lobbying for it

4. Going full sveltekit

We could convert the entire website to sveltekit + markdown, rendered with the static adapter. It would most likely be an upgrade from Jekyll and would avoid dealing with two separate frameworks, but this kind of full revamp is way outside the scope of this PR.