spot_img
HomeEducationI've made an Categorical.js primarily based supply viewer Acquire US

I’ve made an Categorical.js primarily based supply viewer Acquire US

It is unsurprising that all of us use Express.js once we want an internet server. On this article, I will present you the way I constructed a supply viewer. It is distributed as a npm bundle view-source and it might render the content material of a listing in a pleasant tree-view type.

The inspiration behind this small library was the necessity to present one among my personal initiatives by the online. I did not need to give entry to my GitHub repository, so I figured that constructing a device for that might be good.

Here is the top consequence:

First I began with the thought of writing an Categorical.js handler. One thing like this:

const  viewSource  = require('view-source');

app.get('/undertaking', viewSource(__dirname + '/path/to/code'));

Nevertheless, I rapidly realized that I wanted to do a few different issues:

  • I will want some fundamental HTML
  • There will likely be some property that must be served statically (icons + JavaScript and types for the syntax highlighter)
  • There will likely be some client-side JavaScript for the tree view on the left.

So, I am unable to use a handler. I want entry to the Categorical.js utility occasion. That is why I ended up with the next API:

const specific = require('specific');
const  viewSource  = require('view-source');

const app = specific();

viewSource(
  appTitle: 'My App Title',
  app,
  route: '/code',
  supply: __dirname + '/../'
);

The place the route is the trail at which my little app will likely be served, and the supply is the precise bodily path to the information.

Internally, the viewSource perform registers two paths for static sources utilizing specific.static helper. The primary one is for all of the property the viewer wants, and the second is for the precise information we need to present.

After that, the perform recursively goes over the supplied supply path. It builds a JSON construction with all of the information and folders. That construction is later despatched to the consumer instantly with the HTML code of the viewer. It is vital to notice right here that the traversing of the supply occurs solely as soon as at first when the server begins. Here is the code that does that:

perform buildTree() 
  const root = 
    identify: appTitle ;
  perform traverseDirectory(dirPath, parentNode) 
    const information = fs.readdirSync(dirPath);
    information.forEach(file => 
      const filePath = path.be a part of(dirPath, file);
      const stats = fs.statSync(filePath);
      const node = 
        identify: file,
        path: filePath.exchange(ROOT_DIR, ''),
        kind: stats.isDirectory() ? 'listing' : 'file',
        youngsters: []
      ;

      if (stats.isDirectory()) 
        traverseDirectory(filePath, node);
      

      parentNode.youngsters.push(node);
    );
  
  traverseDirectory(ROOT_DIR, root);

  return root;

(To get extra context it’s possible you’ll must open the entire file. It is here)

On the consumer, I made a decision to go easy and wrote ~80 strains of JavaScript controlling the display screen’s left facet (the tree view). On the back-end facet, the JSON that’s getting constructed comprises data if the entry is a file or a listing. That is so the consumer might increase and collapse folders. If the person clicks on a file, that file is getting loaded through fetch as a textual content and proven on the correct facet of the display screen.

I used to be tempted to stick all of the code, however possibly that may very well be extra attention-grabbing. You may see it here. The highlighting is value mentioning. I made a decision to make use of Prism. Normally, the library works on web page load, that means the code that must be coloured exists on the web page. Nevertheless, right here that is not the case. Fortunately Prism has an API for such circumstances:

perform renderCode(code, ext = 'js') 
  doc.querySelector('#code').innerHTML = `
  <pre><code class="language-$ext">$encodeHTMLTags(code)</code></pre>
  `;
  setTimeout(() => Prism.highlightAll(), 10);

(The setTimeout is to make it possible for every thing is correctly set within the HTML)


So, for those who ever want to point out somebody your code and also you need to do it utilizing your Categorical.js server contemplate view-source bundle.

#Ive #Categorical.js #primarily based #supply #viewer

RELATED ARTICLES
Continue to the category

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -spot_img

Most Popular

Recent Comments