60 lines
2.9 KiB
Markdown
60 lines
2.9 KiB
Markdown
# YellowJacket Frontend
|
|
|
|
This directory contains the frontend for YellowJacket.
|
|
|
|
## Dependencies
|
|
|
|
There are a couple of tools that are required to build and use the frontend.
|
|
|
|
- [`vite`](https://vite.dev/) for
|
|
- transpiling typescript
|
|
- bundling the final "package" that is useb by the webview
|
|
- running a dev server with hot-reloading
|
|
- configured with the [`vite.config.ts`](./vite.config.ts) file in this directory
|
|
- [`pnpm`](https://pnpm.io/) for managing frontend dependency packages
|
|
|
|
There are a handful of dependency packages that we use directly in the frontend.
|
|
|
|
- [`picocss`](https://picocss.com) for basic CSS while developing
|
|
- [`lit`](https://lit.dev) for a simple but powerful wrapper around [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
|
|
Lastly, there are some dependencies that only benefit development
|
|
|
|
- `tsserver` comes bundled with vscode and can be used as an LSP with other editors using [`typescript-language-server`](https://github.com/typescript-language-server/typescript-language-server)
|
|
- Used for autocomplete, syntax highlighting, etc.
|
|
- This can be configured with the `tsconfig.json` file in the root of the project
|
|
- NOTE: your configuration should align with the `vite` config so you get in-editor feedback that aligns with how the build will be done.
|
|
|
|
## Development
|
|
|
|
Ideally, you would use the frontend in the wails app as the frontend depends on the Go bindings generated by Wails.
|
|
You can do this by running `wails dev` in the root of the YellowJacket repo.
|
|
|
|
If you want to run the frontend standalone, make sure the Wails go bindings have been generated with `wails generate modules`.
|
|
Then, you can run `pnpm dev` to run the vite dev server.
|
|
For more information on what commands are available, refer to `package.json`.
|
|
|
|
## Code
|
|
|
|
### Web Components
|
|
|
|
Our frontend is based off of Web Components, a standard that provides native browser encapsulation of components that can include HTML, CSS and Javascript all together.
|
|
Instead of writing these components manually in Javascript, we utilize `lit` as a wrapper library.
|
|
|
|
### Typescript
|
|
|
|
To better integrate with our tooling and to provide a better developer experience with strong typing, we have written all functional frontend code in Typescript.
|
|
Vite serves as our Typescript transpiler.
|
|
|
|
### Important Files and Directories
|
|
|
|
NOTE: most of these directories have aliases defined in `tsconfig.json` and `vite.config.ts` so that we may refer to them by shorthand when importing.
|
|
|
|
- `index.html` and `index.js` is the entrypoint for the frontend. The first page that loads.
|
|
- `wailsjs/go` Go code bindings generated by wails reside here
|
|
- `wailsjs/runtime` the Wails runtime code needed to use Wails features
|
|
- `src` all app code resides here
|
|
- `src/assets` static assets like fonts, images and icons
|
|
- `src/components` lit components that are used to compose the application
|
|
- `src/pages` pages that serve as other entrypoints for the application that can be navigated to
|