Skip to content

Commit

Permalink
Rename private states field with underscore prefix (#1760)
Browse files Browse the repository at this point in the history 
Related #1120

This is non-functional change.

Notes

* Pattern matched: `this\.states(?=\W)`
    Replaced with: `this._states`
* Pattern matched: `(?<=\s)states =`
    Replaced with: `_states =`


<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1760"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>
  • Loading branch information
@jdeanwallace
jdeanwallace authored Mar 28, 2024
1 parent 09f8900 commit 515598f
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 49 deletions.
14 changes: 7 additions & 7 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ Strangely, it's uncommon for web applications to use web components directly as

It's common for a component to change its appearance based on its internal state. For example, a dialog might be in an "initializing" state when it first opens and then reach a "ready" state when it's ready for user input.

In a framework like React or Vue, we'd use conditional rendering to change the UI depending on the component's internal state. With raw web components, conditional rendering is not possible. Instead, TinyPilot's convention is to add a `_state` attribute to the root element with getter and setter methods that look like this:
In a framework like React or Vue, we'd use conditional rendering to change the UI depending on the component's internal state. With raw web components, conditional rendering is not possible. Instead, TinyPilot's convention is to add a `state` attribute to the root element with getter and setter methods that look like this:

```javascript
get _state() {
Expand All @@ -330,21 +330,21 @@ set _state(newValue) {
}
```

We enumerate all possible state values in the states property on the web component class, like so:
We enumerate all possible state values in the `_states` property on the web component class, like so:

```javascript
class extends HTMLElement {
states = {
_states = {
INITIALIZING: "initializing",
FETCH_FROM_URL: "fetch-from-url",
VIEW: "view",
};
```
The class attribute `states` can then be used in the JavaScript component code:
The class property `_states` can then be used in the JavaScript component code:
```javascript
this._state = this.states.FETCH_FROM_URL;
this._state = this._states.FETCH_FROM_URL;
```
We then use CSS rules based on the `state` attribute to control the component's appearance:
Expand Down Expand Up @@ -388,12 +388,12 @@ These particular states are listed in the `statesWithoutDialogClose` class prope
```javascript
class extends HTMLElement {
states = {
_states = {
INITIALIZING: "initializing",
FETCH_FROM_URL: "fetch-from-url",
VIEW: "view",
};
statesWithoutDialogClose = new Set([this.states.INITIALIZING]);
statesWithoutDialogClose = new Set([this._states.INITIALIZING]);
```
Note: for consistency, we always use a `Set` here, even if it only contains a single element.
Expand Down
14 changes: 7 additions & 7 deletions app/templates/custom-elements/change-hostname-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,14 @@ <h3>Changing Hostname</h3>
customElements.define(
"change-hostname-dialog",
class extends HTMLElement {
states = {
_states = {
INITIALIZING: "initializing",
PROMPT: "prompt",
CHANGING: "changing",
};
statesWithoutDialogClose = new Set([
this.states.CHANGING,
this.states.INITIALIZING,
this._states.CHANGING,
this._states.INITIALIZING,
]);

connectedCallback() {
Expand Down Expand Up @@ -165,13 +165,13 @@ <h3>Changing Hostname</h3>

initialize() {
this._elements.inputError.hide();
this._state = this.states.INITIALIZING;
this._state = this._states.INITIALIZING;
determineHostname()
.then((hostname) => {
this.initialHostname = hostname;
this._elements.hostnameInput.value = hostname;
this._onInputChanged(hostname);
this._state = this.states.PROMPT;
this._state = this._states.PROMPT;
this._elements.hostnameInput.focus();
})
.catch((error) => {
Expand Down Expand Up @@ -207,15 +207,15 @@ <h3>Changing Hostname</h3>
.then((redirectURL) => {
this._elements.futureLocation.innerText = redirectURL;
this._elements.futureLocation.href = redirectURL;
this._state = this.states.CHANGING;
this._state = this._states.CHANGING;
return this._waitForReboot(redirectURL);
})
.catch((error) => {
if (error.code === "INVALID_HOSTNAME") {
// Display validation errors inline in order to make it more
// convenient for the user to correct them.
this._elements.inputError.show();
this._state = this.states.PROMPT;
this._state = this._states.PROMPT;
return;
}
this.dispatchEvent(
Expand Down
8 changes: 4 additions & 4 deletions app/templates/custom-elements/debug-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ <h3>Debug Logs</h3>
customElements.define(
"debug-dialog",
class DebugDialog extends HTMLElement {
states = {
_states = {
LOGS_LOADING: "logs-loading",
LOGS_SUCCESS: "logs-success",
};
statesWithoutDialogClose = new Set([this.states.LOGS_LOADING]);
statesWithoutDialogClose = new Set([this._states.LOGS_LOADING]);

constructor() {
super();
Expand Down Expand Up @@ -147,15 +147,15 @@ <h3>Debug Logs</h3>
}

retrieveLogs() {
this._state = this.states.LOGS_LOADING;
this._state = this._states.LOGS_LOADING;
getDebugLogs()
.then((text) => {
this._logText = {
original: text,
redacted: redactSensitiveData(text),
};
this._renderLogDisplayText();
this._state = this.states.LOGS_SUCCESS;
this._state = this._states.LOGS_SUCCESS;
})
.catch((error) => {
this.dispatchEvent(
Expand Down
12 changes: 6 additions & 6 deletions app/templates/custom-elements/share-logs-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
customElements.define(
"share-logs-button",
class extends HTMLElement {
states = {
_states = {
INITIAL: "initial",
LOADING: "loading",
DISPLAY_LINK: "display-link",
Expand All @@ -145,13 +145,13 @@
this._handleCopyToClipboard();
});

this._state = this.states.INITIAL;
this._state = this._states.INITIAL;
}

set _state(newValue) {
this.setAttribute("state", newValue);
this._elements.getUrlButton.disabled =
newValue === this.states.LOADING;
newValue === this._states.LOADING;
}

/**
Expand All @@ -164,11 +164,11 @@
*/
initialize(getLogsTextCb) {
this.getLogsText = getLogsTextCb;
this._state = this.states.INITIAL;
this._state = this._states.INITIAL;
}

async _handleRequestShareableUrl() {
this._state = this.states.LOADING;
this._state = this._states.LOADING;

try {
const url = await textToShareableUrl(this.getLogsText());
Expand All @@ -189,7 +189,7 @@
return;
}

this._state = this.states.DISPLAY_LINK;
this._state = this._states.DISPLAY_LINK;
}

_handleCopyToClipboard() {
Expand Down
16 changes: 8 additions & 8 deletions app/templates/custom-elements/shutdown-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,16 @@ <h3>Shutdown Complete</h3>
customElements.define(
"shutdown-dialog",
class extends HTMLElement {
states = {
_states = {
PROMPT: "prompt",
RESTARTING: "restarting",
SHUTTING_DOWN: "shutting-down",
SHUTDOWN_COMPLETE: "shutdown-complete",
};
statesWithoutDialogClose = new Set([
this.states.RESTARTING,
this.states.SHUTTING_DOWN,
this.states.SHUTDOWN_COMPLETE,
this._states.RESTARTING,
this._states.SHUTTING_DOWN,
this._states.SHUTDOWN_COMPLETE,
]);

constructor() {
Expand All @@ -91,7 +91,7 @@ <h3>Shutdown Complete</h3>
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
this._state = this.states.PROMPT;
this._state = this._states.PROMPT;

this.shadowRoot
.getElementById("confirm-shutdown")
Expand Down Expand Up @@ -128,13 +128,13 @@ <h3>Shutdown Complete</h3>
.then(() => {
this._emitShutdownStartedEvent(restart);
if (restart) {
this._state = this.states.RESTARTING;
this._state = this._states.RESTARTING;
} else {
this._state = this.states.SHUTTING_DOWN;
this._state = this._states.SHUTTING_DOWN;
// We can't tell when the system has fully shut down, but assume
// that it's done after 30 seconds.
setTimeout(() => {
this._state = this.states.SHUTDOWN_COMPLETE;
this._state = this._states.SHUTDOWN_COMPLETE;
}, 30 * 1000);
}
})
Expand Down
20 changes: 10 additions & 10 deletions app/templates/custom-elements/update-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ <h3>Update Complete</h3>
customElements.define(
"update-dialog",
class extends HTMLElement {
states = {
_states = {
CHECKING: "checking",
UPDATE_AVAILABLE: "update-available",
LATEST: "latest",
Expand All @@ -144,9 +144,9 @@ <h3>Update Complete</h3>
UPDATE_FINISHED: "update-finished",
};
statesWithoutDialogClose = new Set([
this.states.CHECKING,
this.states.UPDATING,
this.states.RESTARTING,
this._states.CHECKING,
this._states.UPDATING,
this._states.RESTARTING,
]);

connectedCallback() {
Expand Down Expand Up @@ -208,15 +208,15 @@ <h3>Update Complete</h3>
}

checkVersion() {
this._state = this.states.CHECKING;
this._state = this._states.CHECKING;

Promise.all([getVersion(), getLatestRelease()])
.then(([localVersion, latestRelease]) => {
if (localVersion.version === latestRelease.version) {
this._state = this.states.LATEST;
this._state = this._states.LATEST;
} else {
this._renderPrompt(latestRelease);
this._state = this.states.UPDATE_AVAILABLE;
this._state = this._states.UPDATE_AVAILABLE;
}
})
.catch((error) => {
Expand Down Expand Up @@ -265,7 +265,7 @@ <h3>Update Complete</h3>
_performRestart() {
return shutdown(/*restart=*/ true)
.then(() => {
this._state = this.states.RESTARTING;
this._state = this._states.RESTARTING;
this._elements.updateLogs.textContent +=
"Restarting to complete update...\n";
})
Expand All @@ -287,7 +287,7 @@ <h3>Update Complete</h3>
timeout: 180 * 1000,
})
.then(() => {
this._state = this.states.UPDATE_FINISHED;
this._state = this._states.UPDATE_FINISHED;
this._elements.updateLogs.textContent +=
"Update is now complete.\n";
})
Expand Down Expand Up @@ -323,7 +323,7 @@ <h3>Update Complete</h3>
}

async _doUpdate() {
this._state = this.states.UPDATING;
this._state = this._states.UPDATING;

const updateLogsStreamer = new UpdateLogsStreamer();
// Let the user know that the update logs are loading.
Expand Down
14 changes: 7 additions & 7 deletions app/templates/custom-elements/video-settings-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,14 +216,14 @@ <h3>Applying Video Settings</h3>
customElements.define(
"video-settings-dialog",
class extends HTMLElement {
states = {
_states = {
LOADING: "loading",
EDIT: "edit",
SAVING: "saving",
};
statesWithoutDialogClose = new Set([
this.states.LOADING,
this.states.SAVING,
this._states.LOADING,
this._states.SAVING,
]);

constructor() {
Expand Down Expand Up @@ -364,7 +364,7 @@ <h3>Applying Video Settings</h3>
}

initialize() {
this._state = this.states.LOADING;
this._state = this._states.LOADING;

// Reset all transient view state.
this._elements.h264StunValidationError.hide();
Expand Down Expand Up @@ -411,7 +411,7 @@ <h3>Applying Video Settings</h3>
this._defaultSettings.h264StunPort = defaultH264StunPort;

this._refreshButtons();
this._state = this.states.EDIT;
this._state = this._states.EDIT;
}
)
.catch((error) => {
Expand Down Expand Up @@ -542,7 +542,7 @@ <h3>Applying Video Settings</h3>
}

_saveSettings() {
this._state = this.states.SAVING;
this._state = this._states.SAVING;

const { h264StunServer, h264StunPort } =
this._elements.h264StunSettings.getValue();
Expand Down Expand Up @@ -579,7 +579,7 @@ <h3>Applying Video Settings</h3>
// Display validation errors inline in order to make it more
// convenient for the user to correct them.
this._elements.h264StunValidationError.show();
this._state = this.states.EDIT;
this._state = this._states.EDIT;
return;
}
this.dispatchEvent(
Expand Down

0 comments on commit 515598f

Please sign in to comment.