commaai / flash

https://flash.comma.ai
5 stars 14 forks source link

Remove React #51

Open Miraj98 opened 1 month ago

Miraj98 commented 1 month ago

This PR tries to close #42 (Replace React with something simple). I have migrated the stack to just use Typescript, HTML and CSS. NO FRAMEWORKS.

Basic setup

Fastboot functionality is refactored into a class that extends EventTarget. EventTarget basically allows you to attach event listeners. Here is an example:

const fb = new FastbootManager()
fb.on("progress", (newState) => updateUI(newState))

Almost all of the UI is now part of index.html and those parts of frontend that have some kind of interactivity (ex: progress indicator, device connection status, buttons, etc) are in src/main.ts file. Here is an example of how progress indicator is handled:

function setupProgressIndicatorView(initialState: FastbootManagerStateType) {
  renderProgressIndicator(initialState);
  fb.on("progress", renderProgressIndicator);
}

function renderProgressIndicator(state: FastbootManagerStateType) {
  const el = document.getElementById("linear-progress")!;
  const ctnEl = document.getElementById("linear-progress-ctn")!;

  const { progress, step } = state;
  el.style.transform = `translateX(${progress - 100}%)`;
  el.className = `absolute top-0 bottom-0 left-0 w-full transition-all ${fbSteps[step].bgColor}`;
  ctnEl.style.opacity = progress === -1 ? "0" : "1";
}

This setup should simplify the stack and hopefully is exactly what @adeebshihadeh was expecting.

Pending steps

I still have to migrate a couple of tests to this new setup. However, the project runs locally. I will need help from someone who owns an actual device to try and flash the device just to make sure everything is working fine.

@adeebshihadeh let me know if anything else is required to Lock the bounty. Thanks! Was fun working on this :)