From af1ff662f5822940ae3893fcbd399b2ace13368c Mon Sep 17 00:00:00 2001 From: Timothy Dodd Date: Wed, 13 Mar 2024 14:50:09 -0400 Subject: [PATCH] Added Javascript Formatter --- README.md | 3 ++ src/app/_services/route.service.ts | 13 +++---- .../_services/javascript-format.service.ts | 16 +++++++++ .../f-javascript/f-javascript.component.css | 5 +++ .../f-javascript/f-javascript.component.ts | 17 ++++++++++ src/app/pages/welcome/welcome.component.ts | 34 ++++++++++++++----- 6 files changed, 74 insertions(+), 14 deletions(-) create mode 100644 src/app/formatters/_services/javascript-format.service.ts create mode 100644 src/app/formatters/f-javascript/f-javascript.component.css create mode 100644 src/app/formatters/f-javascript/f-javascript.component.ts diff --git a/README.md b/README.md index be27377..50f1548 100644 --- a/README.md +++ b/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 diff --git a/src/app/_services/route.service.ts b/src/app/_services/route.service.ts index cc1e61b..58ca250 100644 --- a/src/app/_services/route.service.ts +++ b/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; + component?: Type; loadComponent?: () => Type | Observable | DefaultExport>> | Promise | DefaultExport>>; } \ No newline at end of file diff --git a/src/app/formatters/_services/javascript-format.service.ts b/src/app/formatters/_services/javascript-format.service.ts new file mode 100644 index 0000000..bfefe9d --- /dev/null +++ b/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 { + + return from(prettier.format(input, { parser: "babel", plugins: [babel, estree] })); + } +} diff --git a/src/app/formatters/f-javascript/f-javascript.component.css b/src/app/formatters/f-javascript/f-javascript.component.css new file mode 100644 index 0000000..39ebd68 --- /dev/null +++ b/src/app/formatters/f-javascript/f-javascript.component.css @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + flex-grow: 1; +} \ No newline at end of file diff --git a/src/app/formatters/f-javascript/f-javascript.component.ts b/src/app/formatters/f-javascript/f-javascript.component.ts new file mode 100644 index 0000000..6fa0c49 --- /dev/null +++ b/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: ``, + styleUrl: './f-javascript.component.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FJavascriptComponent { } diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts index a34b11a..d46d466 100644 --- a/src/app/pages/welcome/welcome.component.ts +++ b/src/app/pages/welcome/welcome.component.ts @@ -14,14 +14,32 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';

Util Plex is a web-based platform designed to assist developers and coders by providing tools for formatting programming code and converting data formats.

-

Code Formatting Features

-

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.

-

How to Use:

-
    -
  1. Select the Code Format: Choose the programming language or format for the code you are working with.
    2. -
  2. Input Your Code: Paste the code into the designated input box on the left side of the page.
    3. -
  3. Receive Formatted Code: Click the 'Format' button to process your code. The formatted code will appear in the output box on the right, ready for use.
    4. -
+

Code Formatting Features

+

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.

+ +

Supported Languages

+
    +
  • CSS
    • +
  • JavaScript
    • +
  • JSON
    • +
  • SQL
    • +
+ +

How to Use

+
    +
  1. + Select the Code Format +

    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.

    +
    2. +
  2. + Input Your Code +

    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.

    +
    3. +
  3. + View Formatted Code +

    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.

    +
    4. +

Data Conversion Tools