Use Prettier to format all non-Python files (#1041)

* Use Prettier to format all non-Python files

* Update fix instructions

* Add comment for check-style script
pull/1049/head
Michael Lynch 2 years ago committed by GitHub
parent fa2a5fed81
commit 7adddf0a53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -22,6 +22,17 @@ jobs:
- run:
name: Run static analysis on bash scripts
command: ./dev-scripts/check-bash
check_style:
docker:
- image: circleci/node:14.17.5-stretch
steps:
- checkout
- run:
name: Install dependencies
command: npm install
- run:
name: Check code style
command: ./dev-scripts/check-style
build_python:
docker:
- image: circleci/python:3.7.3
@ -92,7 +103,7 @@ jobs:
- persist_to_workspace:
root: ./releases
paths:
- '*.deb'
- "*.deb"
build_bundle:
docker:
- image: cimg/base:2020.01
@ -177,6 +188,7 @@ workflows:
jobs:
- check_whitespace
- check_bash
- check_style
- build_python
- build_javascript
- build_debian_package:

@ -1,10 +1,9 @@
---
name: Bug report
about: Report a problem in TinyPilot
title: ''
labels: 'bug'
assignees: ''
title: ""
labels: "bug"
assignees: ""
---
## Description
@ -13,21 +12,21 @@ Briefly summarize the problem you're experiencing.
## What's the behavior that you expect?
*Your answer*
_Your answer_
## What's happening instead?
*Your answer*
_Your answer_
## What are the steps to reproduce this behavior?
1. Open TinyPilot in Chrome
2. Click on '....'
4. See error
3. See error
## Screenshots
*If applicable, add screenshots to help explain your problem.*
_If applicable, add screenshots to help explain your problem._
## Logs

@ -1,8 +1,7 @@
---
name: Feature request
about: Suggest a new TinyPilot feature
title: ''
labels: 'enhancement'
assignees: ''
title: ""
labels: "enhancement"
assignees: ""
---

@ -1,8 +1,7 @@
---
name: Question
about: Ask a question about using TinyPilot
title: ''
labels: 'question'
assignees: ''
title: ""
labels: "question"
assignees: ""
---

@ -1 +1,2 @@
app/static/third-party
venv

@ -2,15 +2,15 @@
## Overview
![TinyPilot Architecture](https://docs.google.com/drawings/d/e/2PACX-1vR48PdVelUodnzk7az1FE4pNX4WK3l3YRas8Ty8fnE-2qE-DN5AYXsHD26F4OJgmGSZkmGGJgs0RvpT/pub?w=903&h=792)
![TinyPilot Architecture](https://docs.google.com/drawings/d/e/2PACX-1vR48PdVelUodnzk7az1FE4pNX4WK3l3YRas8Ty8fnE-2qE-DN5AYXsHD26F4OJgmGSZkmGGJgs0RvpT/pub?w=903&h=792)
## TinyPilot frontend
The TinyPilot frontend runs in the user's browser. It is responsible for:
* Presenting the target computer's video stream in the browser window
* Forwarding keyboard and mouse input to the [TinyPilot backend](#tinypilot-backend)
* Offering friendly interfaces for the user to change TinyPilot's settings
- Presenting the target computer's video stream in the browser window
- Forwarding keyboard and mouse input to the [TinyPilot backend](#tinypilot-backend)
- Offering friendly interfaces for the user to change TinyPilot's settings
The TinyPilot frontend is a pure HTML/CSS/JS app. It has no build or compilation step and no framework like Vue, Angular, or React. It uses external libraries as little as possible.
@ -22,12 +22,12 @@ TinyPilot's custom elements can be found in [app/templates/custom-elements](./ap
The backend is a Flask application. It offers handles three types of requests:
* Page requests
* To serve a page like the main `/` view, TinyPilot uses Flask to pre-render a template.
* REST requests
* When the frontend makes a request to the backend to query server state or perform some action (e.g., `/api/shutdown`), the backend handles it through REST handlers.
* WebSockets requests
* To handle requests for keystrokes or mouse movements, the backend needs something faster than regular HTTP REST requests, so it uses a WebSockets channel.
- Page requests
- To serve a page like the main `/` view, TinyPilot uses Flask to pre-render a template.
- REST requests
- When the frontend makes a request to the backend to query server state or perform some action (e.g., `/api/shutdown`), the backend handles it through REST handlers.
- WebSockets requests
- To handle requests for keystrokes or mouse movements, the backend needs something faster than regular HTTP REST requests, so it uses a WebSockets channel.
The backend is responsible for sending keyboard and mouse input to the target computer via its USB gadgets (see [USB gadgets](#usb-gadgets) section, below).

@ -8,9 +8,9 @@ The steps below show you how to quickly set up a development environment for Tin
### Requirements
* Python 3.7 or higher
* Node.js 14.17.5 or higher
* [shellcheck](https://github.com/koalaman/shellcheck#installing)
- Python 3.7 or higher
- Node.js 14.17.5 or higher
- [shellcheck](https://github.com/koalaman/shellcheck#installing)
### Install packages
@ -89,20 +89,20 @@ For a high-level view of TinyPilot's architecture, see the [ARCHITECTURE](ARCHIT
TinyPilot accepts various options through environment variables:
| Environment Variable | Default | Description |
|----------------------|--------------|-------------|
| `HOST` | `127.0.0.1` | Network interface to listen for incoming connections. |
| `PORT` | `8000` | HTTP port to listen for incoming connections. |
| `DEBUG` | undefined | Set to `1` to enable debug logging. |
| Environment Variable | Default | Description |
| -------------------- | ----------- | ----------------------------------------------------- |
| `HOST` | `127.0.0.1` | Network interface to listen for incoming connections. |
| `PORT` | `8000` | HTTP port to listen for incoming connections. |
| `DEBUG` | undefined | Set to `1` to enable debug logging. |
## Code style conventions
TinyPilot follows Google code style conventions:
* [Python](https://google.github.io/styleguide/pyguide.html)
* [HTML/CSS](https://google.github.io/styleguide/htmlcssguide.html)
* [Shell](https://google.github.io/styleguide/shellguide.html)
* ~~[JavaScript](https://google.github.io/styleguide/jsguide.html)~~ - We are "loosely inspired" by the JS style guide, but don't observe it strictly
- [Python](https://google.github.io/styleguide/pyguide.html)
- [HTML/CSS](https://google.github.io/styleguide/htmlcssguide.html)
- [Shell](https://google.github.io/styleguide/shellguide.html)
- ~~[JavaScript](https://google.github.io/styleguide/jsguide.html)~~ - We are "loosely inspired" by the JS style guide, but don't observe it strictly
TinyPilot uses automated linters and formatters as much as possible to automate style conventions.
@ -139,7 +139,7 @@ class extends HTMLElement {
};
```
The class attribute `states` can then be used in the JavaScript component code:
The class attribute `states` can then be used in the JavaScript component code:
```javascript
this.state = this.states.FETCH_FROM_URL;
@ -253,7 +253,7 @@ TinyPilot's convention for this is to define CSS variables in the `:host` sectio
```css
:host {
--offset-top: 1rem;
--offset-top: 1rem;
}
h2 {
@ -264,7 +264,7 @@ h2 {
Using CSS variables means that we can parameterize these values via the `style` attribute when we include instances of the component in HTML:
```html
<my-component style="--offset-top: 3rem">
<my-component style="--offset-top: 3rem"></my-component>
```
### Referencing DOM elements
@ -308,8 +308,12 @@ For example, say that we expand our component to also delete a user:
const confirmCreateButton = document.querySelector("#confirm-create-btn");
const confirmDeleteButton = document.querySelector("#confirm-delete-btn");
const confirmCreateButtonContainer = document.querySelector("#create .btn-container");
const confirmDeleteButtonContainer = document.querySelector("#delete .btn-container");
const confirmCreateButtonContainer = document.querySelector(
"#create .btn-container"
);
const confirmDeleteButtonContainer = document.querySelector(
"#delete .btn-container"
);
```
Notice how we needed to rename both our button IDs to distinguish between the create and delete buttons.
@ -355,19 +359,19 @@ const confirmDeleteButton = document.querySelector("#delete .confirm-btn");
## Proposing changes
* If you're making a small change, submit a PR to show your proposal.
* If you're making a large change (over 100 LOC or three hours of dev time), [file an issue](https://github.com/tiny-pilot/tinypilot/issues/new/choose) first to talk through the proposed change. This prevents you from wasting time on a change that has a low chance of being accepted.
- If you're making a small change, submit a PR to show your proposal.
- If you're making a large change (over 100 LOC or three hours of dev time), [file an issue](https://github.com/tiny-pilot/tinypilot/issues/new/choose) first to talk through the proposed change. This prevents you from wasting time on a change that has a low chance of being accepted.
## How to get your PR merged quickly
* Read my guide, ["How to Make Your Code Reviewer Fall in Love with You,"](https://mtlynch.io/code-review-love/) to understand how to contribute effectively to an open source project.
* Give a clear, one-line title to your PR.
* Good: `Fix dropped keystrokes on Firefox`
* Bad: `Fix issue`
* If your PR is not ready for review, mark it as "draft."
* [Rebase your changes](https://www.atlassian.com/git/tutorials/rewriting-history/git-rebase) onto the latest `master` commit so that there are no merge conflicts.
* Your PR must pass build checks in CI before it will be considered for merge.
* You'll see a green checkmark or red X next to your PR depending on whether your build passed or failed.
* You are responsible for fixing formatting and tests to ensure that your code passes build checks in CI.
- Read my guide, ["How to Make Your Code Reviewer Fall in Love with You,"](https://mtlynch.io/code-review-love/) to understand how to contribute effectively to an open source project.
- Give a clear, one-line title to your PR.
- Good: `Fix dropped keystrokes on Firefox`
- Bad: `Fix issue`
- If your PR is not ready for review, mark it as "draft."
- [Rebase your changes](https://www.atlassian.com/git/tutorials/rewriting-history/git-rebase) onto the latest `master` commit so that there are no merge conflicts.
- Your PR must pass build checks in CI before it will be considered for merge.
- You'll see a green checkmark or red X next to your PR depending on whether your build passed or failed.
- You are responsible for fixing formatting and tests to ensure that your code passes build checks in CI.
I try to review all PRs within one business day. If you've been waiting longer than this, feel free to comment on the PR to verify that it's on my radar.

@ -16,11 +16,11 @@ Turn your Raspberry Pi into a browser-based KVM.
## Features
* Video capture (HDMI/DVI/VGA)
* Keyboard forwarding
* Mouse forwarding
* Fullscreen mode
* Paste text from clipboard
- Video capture (HDMI/DVI/VGA)
- Keyboard forwarding
- Mouse forwarding
- Fullscreen mode
- Paste text from clipboard
## Official builds
@ -34,28 +34,28 @@ Voyager 2 is TinyPilot's professional-grade KVM over IP device. Its quiet, compa
## Build your own
* [Raspberry Pi 4](https://smile.amazon.com/dp/B07TD42S27) (all variants work)
* [HDMI to USB dongle](https://smile.amazon.com/dp/B08CXWPYQ8/)
* [In smaller form factor](https://smile.amazon.com/dp/B08C9FCF2X/)
* They have no brand name, and there are several variants, but they're all built on the same MacroSilicon 2109 chip.
* They're available for $10-15 on eBay and AliExpress.
* [3 Amp power supply](https://smile.amazon.com/dp/B0728HB18G)
* [USB-C to USB-A](https://smile.amazon.com/dp/B01GGKYN0A/) cable (Male/Male)
* [microSD card](https://smile.amazon.com/dp/B073K14CVB/) (Class 10, 8 GB or larger)
* [HDMI to HDMI cable](https://smile.amazon.com/dp/B014I8SSD0/)
* Or \[other\] to HDMI, depending on how your target machine displays output.
* (Optional) [A USB-C OTG split connector](https://tinypilotkvm.com/product/tinypilot-power-connector): Supports continuous power when the target computer turns off.
* Requires two additional [USB-A to microUSB cables](https://smile.amazon.com/dp/B01JPDTZXK/) and a [3 Amp power adapter](https://smile.amazon.com/dp/B0728HB18G).
* If you're using this split connector, choose a USB-C to USB-A cable that's [12" or shorter](https://smile.amazon.com/dp/B012V56D2A/) to minimize voltage drop along the cable.
* (Optional) [VGA to HDMI Adapter](https://smile.amazon.com/dp/B07121Y1Z3/)
* If your target computer has VGA output, the above adapter is [confirmed to work](https://github.com/tiny-pilot/tinypilot/issues/76#issuecomment-664736402) with TinyPilot.
See ["TinyPilot: Build a KVM Over IP for Under $100"](https://mtlynch.io/tinypilot/#how-to-build-your-own-tinypilot) for a more detailed tutorial on how to assemble these parts to create a TinyPilot.
- [Raspberry Pi 4](https://smile.amazon.com/dp/B07TD42S27) (all variants work)
- [HDMI to USB dongle](https://smile.amazon.com/dp/B08CXWPYQ8/)
- [In smaller form factor](https://smile.amazon.com/dp/B08C9FCF2X/)
- They have no brand name, and there are several variants, but they're all built on the same MacroSilicon 2109 chip.
- They're available for \$10-15 on eBay and AliExpress.
- [3 Amp power supply](https://smile.amazon.com/dp/B0728HB18G)
- [USB-C to USB-A](https://smile.amazon.com/dp/B01GGKYN0A/) cable (Male/Male)
- [microSD card](https://smile.amazon.com/dp/B073K14CVB/) (Class 10, 8 GB or larger)
- [HDMI to HDMI cable](https://smile.amazon.com/dp/B014I8SSD0/)
- Or \[other\] to HDMI, depending on how your target machine displays output.
- (Optional) [A USB-C OTG split connector](https://tinypilotkvm.com/product/tinypilot-power-connector): Supports continuous power when the target computer turns off.
- Requires two additional [USB-A to microUSB cables](https://smile.amazon.com/dp/B01JPDTZXK/) and a [3 Amp power adapter](https://smile.amazon.com/dp/B0728HB18G).
- If you're using this split connector, choose a USB-C to USB-A cable that's [12" or shorter](https://smile.amazon.com/dp/B012V56D2A/) to minimize voltage drop along the cable.
- (Optional) [VGA to HDMI Adapter](https://smile.amazon.com/dp/B07121Y1Z3/)
- If your target computer has VGA output, the above adapter is [confirmed to work](https://github.com/tiny-pilot/tinypilot/issues/76#issuecomment-664736402) with TinyPilot.
See ["TinyPilot: Build a KVM Over IP for Under \$100"](https://mtlynch.io/tinypilot/#how-to-build-your-own-tinypilot) for a more detailed tutorial on how to assemble these parts to create a TinyPilot.
## Pre-requisites
* Raspberry Pi OS Stretch or later
* python3-venv
- Raspberry Pi OS Stretch or later
- python3-venv
## Simple installation
@ -72,16 +72,16 @@ curl \
The installation process:
* Creates a service account for TinyPilot with limited priviliges.
* Installs TinyPilot as a systemd service so it runs automatically on every boot.
* Installs and configures TinyPilot's dependencies:
* nginx, which listens on 0.0.0.0:80
* uStreamer, which listens on 127.0.0.1:8001
* Installs TinyPilot to the `/opt/tinypilot` directory.
- Creates a service account for TinyPilot with limited priviliges.
- Installs TinyPilot as a systemd service so it runs automatically on every boot.
- Installs and configures TinyPilot's dependencies:
- nginx, which listens on 0.0.0.0:80
- uStreamer, which listens on 127.0.0.1:8001
- Installs TinyPilot to the `/opt/tinypilot` directory.
When your Pi reboots, you should be able to access TinyPilot by visiting your Pi hostname in the browser. For example, if your device is named `raspberrypi`:
* [http://raspberrypi/](http://raspberrypi/)
- [http://raspberrypi/](http://raspberrypi/)
## Developer installation
@ -89,8 +89,8 @@ See the [CONTRIBUTING](CONTRIBUTING.md) file.
## Other installation options
* [Advanced installation options](https://github.com/tiny-pilot/tinypilot/wiki/Installation-Options#advanced-installation)
* [Remote installation via Ansible](https://github.com/tiny-pilot/tinypilot/wiki/Installation-Options#remote-installation)
- [Advanced installation options](https://github.com/tiny-pilot/tinypilot/wiki/Installation-Options#advanced-installation)
- [Remote installation via Ansible](https://github.com/tiny-pilot/tinypilot/wiki/Installation-Options#remote-installation)
## Updates
@ -126,35 +126,35 @@ As a free alternative, you can adjust your Nginx configuration (included by defa
If you're interested in seeing what's happening with the project at a granular level, weekly updates appear every Friday on What Got Done:
* [What Got Done: TinyPilot](https://whatgotdone.com/michael/project/tinypilot)
- [What Got Done: TinyPilot](https://whatgotdone.com/michael/project/tinypilot)
## See also
* [TinyPilot Wiki](https://github.com/tiny-pilot/tinypilot/wiki): Guides for tasks related to TinyPilot.
* [TinyPilot Ansible Role](https://github.com/tiny-pilot/ansible-role-tinypilot): Use [Ansible](https://docs.ansible.com/ansible/latest/index.html) to install TinyPilot and all dependencies as a systemd service.
- [TinyPilot Wiki](https://github.com/tiny-pilot/tinypilot/wiki): Guides for tasks related to TinyPilot.
- [TinyPilot Ansible Role](https://github.com/tiny-pilot/ansible-role-tinypilot): Use [Ansible](https://docs.ansible.com/ansible/latest/index.html) to install TinyPilot and all dependencies as a systemd service.
## Acknowledgments
TinyPilot would not be possible without the excellent and generous work from many open source projects, the most notable of which are listed below:
* [uStreamer](https://github.com/pikvm/ustreamer)
* [Flask](https://github.com/pallets/flask) and [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/)
* [vdesktop](https://github.com/Botspot/vdesktop)
* [litestream](https://litestream.io)
* [Raspberry Pi](https://www.raspberrypi.org/)
* [nginx](https://nginx.org/) and [ansible-role-nginx](https://github.com/geerlingguy/ansible-role-nginx)
- [uStreamer](https://github.com/pikvm/ustreamer)
- [Flask](https://github.com/pallets/flask) and [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/)
- [vdesktop](https://github.com/Botspot/vdesktop)
- [litestream](https://litestream.io)
- [Raspberry Pi](https://www.raspberrypi.org/)
- [nginx](https://nginx.org/) and [ansible-role-nginx](https://github.com/geerlingguy/ansible-role-nginx)
## Mailing list
For news about major TinyPilot releases and other updates about the project, sign up for the TinyPilot mailing list:
* [TinyPilot Mailing List](https://tinypilotkvm.com/about)
- [TinyPilot Mailing List](https://tinypilotkvm.com/about)
## Upgrade to Pro
TinyPilot Pro includes additional features for professional users, including:
* [Virtual drive mounting and booting](https://tinypilotkvm.com/blog/whats-new-in-1-5#boot-into-a-virtual-disk-drive)
* Password-based authentication
- [Virtual drive mounting and booting](https://tinypilotkvm.com/blog/whats-new-in-1-5#boot-into-a-virtual-disk-drive)
- Password-based authentication
Support the project and upgrade to Pro at <https://tinypilotkvm.com/product/tinypilot-pro>.

@ -14,3 +14,4 @@ set -u
./dev-scripts/check-bash
./dev-scripts/build-python
./dev-scripts/build-javascript
./dev-scripts/check-style

@ -12,12 +12,6 @@ set -u
# Location of app source files.
SOURCE_DIR="app"
# Check code style with the Prettier libary.
if ! ./node_modules/.bin/prettier --check "${SOURCE_DIR}" ; then
echo "Try running ./dev-scripts/fix-frontend-format to fix formatting" >&2
exit 1
fi
# Run unit tests.
./node_modules/.bin/mocha \
--recursive \

@ -0,0 +1,23 @@
#!/bin/bash
# Checks formatting for non-Python files.
# Exit build script on first failure.
set -e
# Echo commands to stdout.
set -x
# Exit on unset variable.
set -u
# Change directory to repository root.
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
readonly SCRIPT_DIR
cd "${SCRIPT_DIR}/.."
# Check code style with the Prettier libary.
if ! ./node_modules/.bin/prettier --check . ; then
echo "Try running ./dev-scripts/fix-style to fix formatting" >&2
exit 1
fi

@ -1,12 +0,0 @@
#!/bin/bash
# Exit build script on first failure.
set -e
# Echo commands to stdout.
set -x
# Exit on unset variable.
set -u
./node_modules/.bin/prettier --write app

@ -0,0 +1,19 @@
#!/bin/bash
# Fixes formatting for non-Python files.
# Exit build script on first failure.
set -e
# Echo commands to stdout.
set -x
# Exit on unset variable.
set -u
# Change directory to repository root.
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
readonly SCRIPT_DIR
cd "${SCRIPT_DIR}/.."
./node_modules/.bin/prettier --write .
Loading…
Cancel
Save