Elmish Web Components

A Web App Component Framework built with Elmish on top of lit-html

Attribution 👏

• This library is using Elmish. The code was copied and converted to TypeScript by me. Elmish is again based on the Model View Update architecture made famouns by Elm

• fast-blurhash License based on Blurhash, to decode blurhash provided by Mastodon API to show a preview of images or use as background fill instead of black bars. fast-blurhash seems to offer a ✨ Performance ✨ improvement at no additional cost (although the improvement is debatable as I didn't measure it in the app)

• Open Props, because it makes styling web components with CSS variables easier

  • Setting up open props: https://stackblitz.com/edit/jit-open-props?file=index.css
  • https://youtu.be/szPNMKZazzQ
  • https://youtu.be/ohJcZW60br0

• heroicons - nice SVG icons

• https://github.com/jeffposnick/yt-playlist-notifier/tree/d038e795d2e876b178884212cabd5430971e28bb for helping me out with using typescript with service workers, getting the manifest of files to precache and allowing me to customize the service worker logic heavily myself

• https://gwfh.mranftl.com/fonts for converting Google fonts to allow self hosting

✨ Random Idea list ✨

• Look into this PNG resource https://evanhahn.com/worlds-smallest-png/
• Integrate navigation and router with subscriptions
  • when a navigation occurs, a subscription gets triggered and it is resolved client side
• Integrate attribute change on component with subscriptions
• Add cool looking console logging for tracer with slick console APIs and console CSS styling
• Learn and implement Web Accessibility https://www.w3.org/WAI/ARIA/apg/
• Add documentation "how to do x" where x could be something like "routing" and it explains that route change is just a change to the app model
• The awesome thing about elmish is that there are just a couple of base concepts and everything else fits into these concepts which makes understanding easier
• Extract token management to service worker which intercepts requests and automatically sets authorization header to bearer token. This makes calling the api easier and separates authorization concerns cleanly. Service worker is choosen because it is the only thing that can intercept requests
• Test if I can save a "snapshot" of the app model to some persistent storage and return to that state when the app is openend again
• Add settings like VS Code extensions https://code.visualstudio.com/api/references/contribution-points#contributes.configuration
• Use new Temporal API for dates https://tc39.es/proposal-temporal/docs/index.html Seeems to work in Chrome but not Firefox
• Use ETag from response header with If-None-Match request header and use caching to reduce bandwith and improve load times. See MDN
• Try out material color utiilties https://www.npmjs.com/package/@material/material-color-utilities
• Use PostCSS plugins to fix custom media queries causing dark mode to break with open props
• Use :host pseudo selector to try and style custom element for grid component
• Use :blank pseudo selector to try fix styling of outlined input when autofilled
• Follow guidelines https://docs.joinmastodon.org/api/guidelines
  • Use link header with rel="next" from mastodon api for pagination
• Add ⚖️ licenses page and find out how to include license in source code
• Try out a more functional programming approach to web components as it would better fit elmish by just defining the functions without a class and annotating them with decorators that mark them as the MVU parts of the elmish component. The decorators build the class from the marked functions and sets up the the lifecycle loop. Property changes are handled through the message type and the update functions can accept the property change notifications.
• Provide advanced permissions UI to allow users to select what OAuth scopes the app has acccess to. In the spirit of OAuth
• Try out Popover API
• Try out Edge Side bar

A Note on Performance

Performance is not my first concern but important. Much of the code I write is allocating new objects as I prefer immutability and I'll change it when required later when I have concrete measurements.

Roadmap 🛣️

• Allow easy separation of styling and markup for components ✅
• Set up GitHub Actions pipleline to automaticall publish Dim Ice App ✅
• Use container queries to hide link url parts depending on size of container
• Create new app after user wants to authorize with server for that server and persist credentials in storage
• Simplify route state management (Routing)

Backlog 🔙🪵

• Allow sharing styles between components
  • This extends "Allow easy separation of styling and markup for components"
• Separate Dim Ice App and Elmish Web Components library
  • Set up NPM package for library
  • Use library in Dim Ice App through NPM
    • Check if that doesn't create too much overhead
    • Check if you can use local path for packages
  • Set up GitHub Actions pipeline to automatically publish package
• Set up code workspace with recommended settings and extensions
• Improve performance of loading toots (probably image loading and blurhash is taking too long)
• Update time of post with timer
• Add "pull to refresh" with scroll snap as seen in Adam Argyle's "Oh Snap!" talk
• Create our own virtualizer element since we know the sizes of elements to render
• Improve image loading
  • Blurhash
    • offload blurhash image generation into service worker and use fetch event. Then write to the response stream as soon as PNG data gets available
    • use ImageElement decode() promise to find out when real image is loaded for replacement and cancel request to service worker for blurhash image
    • use /serviceworker/... as path for requests we know that are meant for service workers
  • only add loading="lazy" to images below the fold
  • use decoding="async" on media attachments
    

Why not just use Fable and F#?

I find F# to be the nicer language but TS is more practical and offers a lot of functional program functionality (hehe) too.

Why not just compile elmish to JS and import that

I wanted to know how elmish works under the hood