Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove React #51

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Remove React #51

wants to merge 4 commits into from

Conversation

Miraj98
Copy link

@Miraj98 Miraj98 commented Jul 20, 2024

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 :)

@Miraj98 Miraj98 marked this pull request as ready for review July 20, 2024 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace React with something simple
1 participant