# Frontend development

## Javascript

Tausi uses [ES6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
The file `tausi/js/app.js` is the top-level entrypoint, used to import all other scripts.
Tausi uses [Webpack](https://webpack.js.org/) to import dependencies and compile the ES6 modules
into a single javascript file.

Javascript which must be compiled is stored in `tausi/js` since it doesn't need to be sent directly
to the user. Javascript libraries sent to the user, such as jQuery and the compiled Tausi app, are
stored in `tausi/static/js`.

### Code style

Tausi uses ESLint to enforce the [Standard JS](https://github.com/standard/standard) code formatting style,
with the modification to require semicolons.

### Helpers

Tausi has some helper code that makes certain common functions simpler.

#### data-confirm

Forms, links and buttons that have a `data-confirm="message"` attribute will ask
the user to confirm that the operation should continue when clicked or submitted. If the user
says no, the action is cancelled.

#### data-component

When a page loads, Tausi looks for HTML elements that have a `data-component="MyComponent"` attribute.
It searches for the corresponding ES6 class from the `tausi/js/components/` directory and,
if present, creates it, passing the HTML element as the first parameter.

This provides a simple mechanism for attaching certain Javascript behaviour to an HTML element.

To create a new component called `FunComponent`:

1. create a new file `tausi/js/components/fun.js` and in it declare a class `export class FunComponent { ... }`
2. edit `tausi/js/components/index.js` to export the new class: `export { FunComponent } from './fun';`
3. use the component in HTML: `<div data-component="FunComponent">...</div>`

### CSRF

Tausi always sends a CSRF token in AJAX POST requests, taken from the `<meta name="csrf-token">` tag.

## Making changes to Javascript

If you make changes to the Javascript, you must install dependencies and run webpack to recompile the application.
This will updated `js/app-prod.js`, which is the file used in production.

First, download and install [Node.js](https://nodejs.org/en/download/). Use version 14. (We recommend using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) for Node version management.)

Some of the node dependencies are private Laws.Africa packages hosted on GitHub. You must configure npm
to authenticate with GitHub by creating a `~/.npmrc` file and include an authentication token, as described
in the [GitHub documentation](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#authenticating-to-github-packages).

Then install dependencies:

```bash
npm install
```

Now run webpack. Webpack automatically watches for changes to files and re-compiles when necessary. To stop
webpack, use `ctrl-c`.

```bash
npx webpack -w
```

Once you have made your changes, you need to commit both the changed files and the new `static/js/app-prod.js` file.