# HTML templating

HTML as a language is static. However, when we start to define state data separately the HTML needs to be able to include data values as variables.

Hence the use of templates. There are many options - React and Hyperapp use [JSX](https://reactjs.org/docs/introducing-jsx.html), I've so far stuck with Pug because I still like to keep the code and logic of state management separate from the display/UI.

Pug scripts are defined in the '/views' folder. These pseudo html files are used to create html either directly or via an intermediate compile process run by pug-vdom and that is fed into the hyperapp framework.

* App.pug is compiled by the start script in package.json using 'compilePug.js'.

    ○ The start script also copies key PWA files directly (e.g. sw\.js and default.html), using the utility cpx (because parcel doesn't).

    ○ Parcel is a 'bundler' which grabs ./src/index.html and interprets the required files and their associated dependencies - it is efficient because it only includes the bits of the dependencies actually used rather than everything, making the code transferred to the user smaller. It also allows us to use the `import` method for including dependencies in the browser code, which is more powerful (but note is not yet supported by Node on the server - you still need to use `require` on the server). Parcel does not really support PWA apps at this time, and tries to rename files that shouldn't be (e.g. sw\.js and default.html) which confuses the code which uses them!
* Mixins.pug is used by app.pug and provides functions (a.k.a. 'mixins') to create repeated pieces of html code. You can pass arguments to mixins to control what they do and the mixin returns Pug code which fits in directly where the mixin was called from. The Pug interpreter will then create a single complete html file based on the result of interpreting app.pug, including the result of running all its mixins. Syntax errors are reported when 'compilePug.js' is run.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://johnkazer.gitbook.io/core-web-dev-concepts/app/pug.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.