fixL better styling

apps/repl/src/app/app.config.ts

@@ -1,15 +1,21 @@
 import {
+  APP_INITIALIZER,
   ApplicationConfig,
   ɵprovideZonelessChangeDetection as provideZonelessChangeDetection,
 } from '@angular/core';
 
 import { provideHttpClient, withFetch } from '@angular/common/http';
+import { initHightlighter } from './utils/highlighter';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZonelessChangeDetection(),
     provideHttpClient(withFetch()),
-
+    {
+      provide: APP_INITIALIZER,
+      useValue: async () => await initHightlighter(),
+      multi: true,
+    },
   ],
 };
 

apps/repl/src/app/app.treaty

@@ -28,22 +28,27 @@ import { viewChild, ElementRef, effect } from '@angular/core';
 import {EditorView, basicSetup} from "codemirror"
 import {javascript} from "@codemirror/lang-javascript"
 import { treaty } from './lang-treaty/treatyjs'
+import { formatAngularTemplate, formatJs } from './utils/prettier'
+import { highlighter } from './utils/highlighter';
+
 
 const editor = viewChild('editor');
 const viewer = viewChild('viewer');
 
-
-effect(() => {
-  if (editor()?.nativeElement) {
-    window.view = new EditorView({
-      doc: `<style>
+const defaultDoc = formatAngularTemplate(`<style>
     #logo { display: flex; justify-content: center; cursor: pointer; color: white; text-decoration: inherit; }
   #logo > img { margin-right: .5em; }
 </style>
 <a id="logo" href="https://treaty.github.io">
     <img height="100%" width="20" src="https://avatars.githubusercontent.com/u/164577633?s=400&u=ea01b5a6a19737bdfe3f597f2c406456210c3058&v=4" alt="logo" />
     <span>TreatyJs</span>
-</a>`,
+</a>`)
+
+effect(async () => {
+  if (editor()?.nativeElement) {
+    debugger;
+    window.view = new EditorView({
+      doc: await defaultDoc,
       extensions: [
         basicSetup,
         javascript(),
@@ -89,6 +94,11 @@ import * as ng from '@angular/compiler';
 
 const onClick = async (viwer) => {
   const result = await treatyToIvy(window.view.state.doc.toLocaleString(), 'example.treat', ng, () => 'example')
-  viwer.innerHTML = result;
+  const formatted = await formatJs(result);
+  const highlighted = highlighter.codeToHtml(formatted, {
+    lang: 'javascript',
+    theme: 'github-dark',
+  });
+  viwer.innerHTML = highlighted;
   console.log(result);
 }

apps/repl/src/app/utils/highlighter.ts

@@ -0,0 +1,11 @@
+//credit https://github.com/JeanMeche/angular-compiler-output
+import { createHighlighter, HighlighterGeneric } from "shiki";
+
+export let highlighter: HighlighterGeneric<any, any> | null = null;
+
+export async function initHightlighter() {
+    highlighter = await createHighlighter({
+    themes: ['github-dark'],
+    langs: ['javascript'],
+  });
+}

apps/repl/src/app/utils/prettier.ts

@@ -0,0 +1,22 @@
+/* full create https://github.com/JeanMeche/angular-compiler-output/blob/main/src/app/prettier.ts */
+
+import parserBabel from 'prettier/plugins/babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import parserHtml from 'prettier/plugins/html';
+import prettier from 'prettier/standalone';
+
+
+export async function formatJs(code: string): Promise<string> {
+  return prettier.format(code, {
+    parser: 'babel',
+    plugins: [parserBabel, prettierPluginEstree],
+    singleQuote: true,
+  });
+}
+
+export async function formatAngularTemplate(template: string): Promise<string> {
+  return prettier.format(template, {
+    parser: 'angular',
+    plugins: [parserHtml],
+  });
+}

package.json

@@ -24,6 +24,7 @@
     "@swc/core": "1.4.1",
     "codemirror": "^6.0.1",
     "rxjs": "~7.8.0",
+    "shiki": "^1.17.7",
     "swc-ast-helpers": "^0.3.1",
     "tslib": "^2.3.0",
     "unplugin-lezer": "^1.0.0",
@@ -79,7 +80,7 @@
     "nx": "18.0.6",
     "postcss": "^8.4.5",
     "postcss-url": "~10.1.3",
-    "prettier": "^2.6.2",
+    "prettier": "^3.3.3",
     "swc-loader": "0.1.15",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",