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!
- 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
- 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
[ ] createOrder
- Event handler reactivity:
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.