Added Javascript Formatter

README.md

@@ -8,6 +8,7 @@ UtilPlex is a collection of utility tools for developers, designed to simplify c
 ## Table of Contents
 
 - [UtilPlex - Developer Utilities](#utilplex---developer-utilities)
+- [Live Version](#live-version)
   - [Table of Contents](#table-of-contents)
   - [Features](#features)
   - [Getting Started](#getting-started)
@@ -22,7 +23,9 @@ UtilPlex provides the following features:
 - **JSON to YAML Conversion:** Easily convert JSON data to YAML format.
 - **SQL Formatter:** Format SQL queries for better readability.
 - **JSON Formatter:** Format JSON data with proper indentation and line breaks.
+- **Javascript Formatter:** Format Javascript for better readability.
 - **Time Zone Conversion:** Convert time from one time zone to another.
+
 ## Getting Started
 
 ### Prerequisites

src/app/_services/route.service.ts

@@ -1,4 +1,4 @@
-import { Type } from "@angular/core";
+import { Component, Type } from "@angular/core";
 import { DefaultExport, Routes } from "@angular/router";
 import { Observable } from "rxjs";
 
@@ -32,7 +32,8 @@ export class RouteService{
             routes: [
                 { name: 'SQL', title:'SQL Formatter',  url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) },
                 { name: 'JSON', title: 'JSON Formatter', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent)  },
-                { name: 'CSS', title: 'CSS Formatter', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) }
+                { name: 'CSS', title: 'CSS Formatter', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) },
+                { name: 'JavaScript', title: 'JavaScript Formatter', url: '/format/javascript', loadComponent: () => import('../formatters/f-javascript/f-javascript.component').then(mod => mod.FJavascriptComponent) }
             ]
         },
         {
@@ -50,13 +51,13 @@ export class RouteService{
     ]
 }
 export interface RouteCategory{
-    name:string | any;
+    name:string ;
     routes: UpRoute[];
 }
 export interface UpRoute{
-    name: string | any;
-    url: string | any;
+    name: string ;
+    url: string;
     title:string ;
-    component?: Type<any>;
+    component?: Type<Component>;
     loadComponent?: () => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>;
 }

src/app/formatters/_services/javascript-format.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import * as prettier from "prettier";
+import * as babel from "prettier/plugins/babel";
+import * as estree from "prettier/plugins/estree";
+import { Observable, from } from "rxjs";
+import { FormatViewService } from "./sql-format.service";
+
+@Injectable()
+export class JavascriptFormatProvider extends FormatViewService {
+    override title = 'JavaScript Formatter';
+    override language = 'javascript';
+    override format(input: string): Observable<string> {
+
+        return from(prettier.format(input, { parser: "babel", plugins: [babel, estree] }));
+    }
+}

src/app/formatters/f-javascript/f-javascript.component.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

src/app/formatters/f-javascript/f-javascript.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from "@angular/forms";
+import { JavascriptFormatProvider } from "../_services/javascript-format.service";
+import { FormatViewService } from "../_services/sql-format.service";
+import { FormatViewComponent } from "../format-view/format-view.component";
+
+@Component({
+  selector: 'app-f-javascript',
+  providers: [{ provide: FormatViewService, useClass: JavascriptFormatProvider }],
+  standalone: true,
+  imports: [CommonModule, FormsModule, FormatViewComponent],
+  template: `<app-format-view></app-format-view>`,
+  styleUrl: './f-javascript.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FJavascriptComponent { }

src/app/pages/welcome/welcome.component.ts

@@ -14,14 +14,32 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
             <p>Util Plex is a web-based platform designed to assist developers and coders by providing tools for formatting programming code and converting data formats.</p>
         </section>
         <section>
-            <h2>Code Formatting Features</h2>
-            <p>Our code formatter allows users to input unstructured or unformatted code into a text box and receive well-formatted, readable code in return. This feature supports multiple programming languages, including CSS, and adheres to best practices for code structure and readability.</p>
-            <h3>How to Use:</h3>
-            <ol>
-                <li><strong>Select the Code Format:</strong> Choose the programming language or format for the code you are working with.</li>
-                <li><strong>Input Your Code:</strong> Paste the code into the designated input box on the left side of the page.</li>
-                <li><strong>Receive Formatted Code:</strong> Click the 'Format' button to process your code. The formatted code will appear in the output box on the right, ready for use.</li>
-            </ol>
+        <h2>Code Formatting Features</h2>
+        <p>Our Code Formatter instantly enhances the structure and readability of your code as you type. It supports multiple programming languages, allowing for the input of unstructured or poorly formatted code and transforming it into a well-structured, readable format. This tool adheres to best practices for code structure and readability across the supported languages.</p>
+
+        <h3>Supported Languages</h3>
+        <ul>
+            <li>CSS</li>
+            <li>JavaScript</li>
+            <li>JSON</li>
+            <li>SQL</li>
+        </ul>
+
+        <h3>How to Use</h3>
+        <ol>
+            <li>
+                <strong>Select the Code Format</strong>
+                <p>First, select the programming language or format of your code from the available options. This ensures that the formatting rules applied are appropriate for the type of code you're working with.</p>
+            </li>
+            <li>
+                <strong>Input Your Code</strong>
+                <p>Begin typing or paste your code into the designated input box. The formatter will automatically start processing your input, applying the necessary formatting rules as you go.</p>
+            </li>
+            <li>
+                <strong>View Formatted Code</strong>
+                <p>As you input your code, watch it transform in real-time. The output box will display the formatted code, which is ready for use or further editing immediately.</p>
+            </li>
+        </ol>
         </section>
         <section>
             <h2>Data Conversion Tools</h2>