Skip to content

donate-static vanilla js rewrite

This is a ticket that should've been written around a month ago, but I didn't think to do it then, so I'm writing it now!

The donate.tpo frontend is currently written in a mix of react and lektor (mostly react). Since nobody at TPI knows react very well, we want to rewrite it in vanilla javascript to make it easier for us to maintain, and hopefully allow us to reuse some of the loogic for the upcoming donate.tpo rewrite (#29 (moved)).

Plan

Here are the steps I've taken and plan to take to move to vanilla javascript (in no particular order):

  • Move all the JSON configuration from settings.js to lektor databags
  • Move the countries.json and regions.json files to lektor databags, re-structured to make working with them a bit more pythonic
  • Write a script to regenerate the countries.json/regions.json databags from the existing json files
  • Scaffold a new tor-donate-js/ npm project with esbuild, eslint, and jsdoc
  • Render the cryptocurrency page statically with lektor, with a small amount of javascript to add an event listener to the anonymous donation checkbox, and copy-to-clipboard support for the wallet addresses (defined in tor-donate-js/src/cryptocurrency.js)
  • Move as many of the react components as possible to jinja2 macros and statically render them with lektor
  • Rewrite the donate-form.html template to use the jinja macros and render the donation form statically
  • Rewrite the donate form validation logic, interactivity/reactivity, and submit handlers in a vanilla es6 class (eslint and esbuild are using es2021)
    • Event handler reactivity:
      • Donation frequency selection buttons
      • Donation amount buttons
      • Other donation amount text box
      • No perk checkbox
      • Perk selection tiles
      • Donation method selection button
      • Credit card fields
      • Donation amount label
      • Gift selection label
    • Form field validation
    • Stripe API submit handler
    • Paypal API submit handler
      • Render Paypal buttons
      • Paypal button callback functions
        • onApprove
        • onCancel
        • createBillingAgreement
        • [ ] createOrder
  • Implement the giving form class on the donation pages
    • Main donation page (the index page)
    • Monthly giving page
    • Champions of privacy page
  • There are a few TODOs (mostly relating to form validation) that need to be cleaned up
  • jsdoc comments on all classes, methods, and top-level functions
  • Documentation describing the new JS architecture, with a guide to editing, and the build system/contribution process
  • Set up translations/l10n in lektor
  • Set up a staging site for my fork

The rewrite is mostly finished. I don't have a timeframe for when it should be complete; Paypal, Stripe, and the reactivity each took a bit longer than I expected. I'm hoping to have this done within the next week or so.

Motivations for the new build system (esbuild, eslint, jsdoc)

esbuild is a fairly new tool, so I want to explain why I chose that instead of parcel, webpack, or rollup.

The main reason is simplicity. Other bundlers I've used usually require a fiarly complex configuration file, and tend to be slow and come with a lot of dependencies. esbuild is a single native binary with no dependencies, and works with a simple cli configuration.

jsdoc was added because the main issue I had with the react site was the complexity and lack of documentation. eslint is used for linting, and also to enforce jsdoc comments.

Edited by Kez