Merge pull request #8 from IPdotSetAF/4-json-xml-yaml-toml-converters

4 json xml yaml toml converters

Author: IPdotSetAF

angular.json

@@ -34,6 +34,10 @@
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ],
+            "allowedCommonJsDependencies": [
+              "fast-xml-parser",
+              "yamljs"
+            ],
             "server": "src/main.server.ts",
             "prerender": true,
             "ssr": false

package-lock.json

@@ -25,10 +25,13 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "express": "^4.18.2",
+    "fast-xml-parser": "^4.5.0",
     "marked": "^14.1.3",
     "prism-code-editor": "^4.0.0-beta.1",
     "rxjs": "~7.8.0",
+    "smol-toml": "^1.3.0",
     "tslib": "^2.3.0",
+    "yamljs": "^0.3.0",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
@@ -38,12 +41,18 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "@types/yamljs": "^0.2.34",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
   }
-}
+}

package.json

@@ -3,13 +3,15 @@ import { NotFoundComponent } from './not-found/not-found.component';
 import { Cs2tsComponent } from './cs2ts/cs2ts.component';
 import { HomeComponent } from './home/home.component';
 import { Md2htmlComponent } from './md2html/md2html.component';
+import { SerializedToolComponent } from './serialized-tool/serialized-tool.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: "home", pathMatch: "full" },
 
     { path: 'home', title: "Home • CodeChef", component: HomeComponent },
     { path: 'cs2ts', title: "C# to TS • CodeChef", component: Cs2tsComponent },
     { path: 'md2html', title: "MD to HTML • CodeChef", component: Md2htmlComponent },
+    { path: 'serialized', title: "Serialized Tool • CodeChef", component: SerializedToolComponent },
 
     { path: '**', title: "Not Found • CodeChef", component: NotFoundComponent },
 ];

src/app/app.routes.ts

@@ -21,11 +21,11 @@ import { copyButton } from "prism-code-editor/copy-button";
 import "prism-code-editor/prism/languages/json";
 import "prism-code-editor/prism/languages/yaml";
 import "prism-code-editor/prism/languages/toml";
-import "prism-code-editor/prism/languages/java";
 import "prism-code-editor/prism/languages/xml";
 import "prism-code-editor/prism/languages/csharp";
 import "prism-code-editor/prism/languages/typescript";
 import "prism-code-editor/prism/languages/markup";
+import "prism-code-editor/prism/languages/markdown";
 
 @Component({
   selector: 'code-area',
@@ -62,9 +62,13 @@ export class CodeAreaComponent implements AfterViewInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes["code"].previousValue !== changes["code"].currentValue) {
-      this.editor?.setOptions({ value: changes["code"].currentValue });
-    }
+    if (changes["code"])
+      if (changes["code"].previousValue !== changes["code"].currentValue)
+        this.editor?.setOptions({ value: changes["code"].currentValue });
+
+    if (changes["language"])
+      if (changes["language"].previousValue !== changes["language"].currentValue)
+        this.editor?.setOptions({ language: changes["language"].currentValue });
   }
 
   initEditor(): PrismEditor {

src/app/code-area/code-area.component.ts

@@ -6,15 +6,15 @@ <h2>C# to TS Converter</h2>
 
     <div class="row">
         <div class="col-md-6">
-            <label for="csharp-code" class="form-label">C# class fields:</label>
+            <label class="form-label">C# class fields:</label>
             <div class="code-border">
                 <code-area innerStyle="min-height:500px;" [(code)]="csCode" (codeChange)="inputDebouncer.next(csCode)"
                     language="csharp" />
             </div>
             <br />
         </div>
         <div class="col-md-6">
-            <label for="ts-code" class="form-label">TS interface fields:</label>
+            <label class="form-label">TS interface fields:</label>
             <div class="code-border" [@valueChangeAnim]="status">
                 <code-area innerStyle="min-height:500px;" [(code)]="tsCode" language="typescript" readonly="true" />
             </div>

src/app/cs2ts/cs2ts.component.html

@@ -13,6 +13,7 @@ <h1>CodeChef</h1>
       <div class="col-12 d-flex flex-wrap gap-2 justify-content-center">
         <a class="btn btn-outline-success" [routerLink]="['/','cs2ts']">C# to TS Converter</a>
         <a class="btn btn-outline-success" [routerLink]="['/','md2html']">Markdown to HTML Converter</a>
+        <a class="btn btn-outline-success" [routerLink]="['/','serialized']">Serialized Tool</a>
       </div>
     </div>
     <br />

src/app/home/home.component.html

@@ -6,15 +6,15 @@ <h2>Markdown to HTML Converter</h2>
 
     <div class="row">
         <div class="col-md-6">
-            <label for="csharp-code" class="form-label">Markdown:</label>
+            <label class="form-label">Markdown:</label>
             <div class="code-border">
                 <code-area innerStyle="min-height:500px;" [(code)]="mdCode" (codeChange)="inputDebouncer.next(mdCode)"
                     language="markdown" />
             </div>
             <br />
         </div>
         <div class="col-md-6">
-            <label for="ts-code" class="form-label">HTML:</label>
+            <label class="form-label">HTML:</label>
             <div class="code-border" [@valueChangeAnim]="status">
                 <code-area innerStyle="min-height:500px;" [(code)]="htmlCode" language="markup" readonly="true" />
             </div>