Skip to content

Components of Rnbw

Jump to bottom
Atul Bhatt edited this page Feb 23, 2024 · 4 revisions

Here we will discuss about the components in rnbw. Here you will get to know different parts of rnbw that combine to make it a visual code editor.

But before jumping onto that let's discuss about the tech stack we chose for rnbw. Here are the core packages and libraries that we have used to develop rnbw.

  • React JS- (frontend library for faster development)
  • Typescript - (for detecting type errors during development)
  • Redux - (for global state management)
  • parse5 - (for parsing the html string and creating a html tree out of it)
  • react-complex-tree - (for creating tree like fileview, nodeview, etc)

The entry point of rnbw execution is the file index.tsx in the root directory. Here we just simply wrap our main component (which I believe is the actual entry point we need to focus on) App.tsx with redux store provider.

Let's discover what happens once our app is loaded.

  • We make our app ready for nohost(running rnbw without any server by using service workers to have offline functionality), basically making it a PWA.
  • Once our app is nohost ready we render our project inside a router to determine how the route or url handling will happen in our project. Ultimately we will display another components which is MainPage.tsx.

That's all that happens in our App.tsx

MainPage.tsx is the file where all the components of rnbw are present. And a lot of stuff happens here, which is all responsible for setting up everything about the app.

Rnbw is basically split into 4 parts.

  • Actions Panel (sidebar)
  • CodeView (Code editor allowing to edit content of the supported files)
  • StageView (Visual representation of the files that can be rendered. Currently only .html is supported.)
  • Command Dialog or cmdk (A dialog box which open with some shortcuts such as `J:jumpstart, A:add something, W:do something)

Action Panel, CodeView and StageView are all resizable panels.

ActionsPanel further has currently 3 more components:

  • NavigatorPanel (Displays the title of the project and works as a toggle for WorkspaceTreeView expand and collapsing)
  • WorkspaceTreeView (Displays all the content of the project folder in a tree view)
  • NodeTreeView (Displays the all the nodes of the html file currently opened in the tree view)

There are some miscellaneous components for a good ux.

  • Loader (to show the progress of various operations like file loading, file saving, etc)
  • Notification (to provide user with updates on some warnings, error, etc)
Clone this wiki locally