fix: lexer fix for {{ breaking not needed

treatyjs · Sep 18, 2024 · 42700c2 · 42700c2
1 parent 4d75cee
commit 42700c2
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 24 deletions.
diff --git a/apps/repl/src/app/app.treaty b/apps/repl/src/app/app.treaty
@@ -36,17 +36,17 @@ const editor = viewChild('editor');
 const viewer = viewChild('viewer');
 
 const defaultDoc = formatAngularTemplate(`<style>
-    #logo { display: flex; justify-content: center; cursor: pointer; color: white; text-decoration: inherit; }
-  #logo > img { margin-right: .5em; }
+    .name { display: flex; justify-content: center; cursor: pointer; color: purple; text-decoration: inherit; }
 </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>`)
+
+import { input } from '@angular/core';
+const name = input('name')
+<div class="name"> {{ name }} </div>
+console.log('hello')
+`)
 
 effect(async () => {
   if (editor()?.nativeElement) {
-    debugger;
     window.view = new EditorView({
       doc: await defaultDoc,
       extensions: [

diff --git a/apps/repl/src/tools/treaty-sfc/treat-to-ivy.ts b/apps/repl/src/tools/treaty-sfc/treat-to-ivy.ts
@@ -3,7 +3,7 @@ import ts from 'typescript';
 import { Printer } from './printer';
 import { Lexer } from './treaty/lexer';
 import { Parser } from './treaty/parser';
-import { TokenType } from './treaty/token';
+import { Token, TokenType } from './treaty/token';
 
 function toPascalCase(fileName: string): string {
     return fileName
@@ -255,7 +255,6 @@ export const treatyToIvy = async (code: string, id: string, compiler: typeof imp
     const javascriptChunks: string[] = [];
     const htmlChunks: string[] = [];
     const cssChunks: string[] = [];
-    let htmlContent: string[] = []
     const parser = new Parser(tokens)
     const ast = parser.parse();
     ast
@@ -279,7 +278,7 @@ export const treatyToIvy = async (code: string, id: string, compiler: typeof imp
           (token)
             .replaceAll('\n', '')
             .replaceAll('\t', '') as string)
-    const jsTsContent = javascriptChunks.join('\n')
+    const jsTsContent = javascriptChunks.join('')
     console.log('jsTsContent', jsTsContent)
     console.log('html', htmlChunks)
     const importRegex = /import\s+(?:\{\s*([^}]+)\s*\}|\* as (\w+)|(\w+))(?:\s+from\s+)?(?:".*?"|'.*?')[\s]*?(?:;|$)/g;
@@ -292,6 +291,8 @@ export const treatyToIvy = async (code: string, id: string, compiler: typeof imp
 
     let modifiedCode = code;
 
+    let htmlContent = htmlChunks;
+
     const addToDeclatoration: any[] = []
     if (imports.length) {
         imports.forEach(importName => {
@@ -301,13 +302,9 @@ export const treatyToIvy = async (code: string, id: string, compiler: typeof imp
                 if (!addToDeclatoration.includes(importName)) {
                     addToDeclatoration.push(importName)
                 }
-                htmlContent = htmlChunks.map((code) => code.replace(tagStartRegex, `<${toHyphenCase(importName)} `).replace(tagEndRegex, `</${toHyphenCase(importName)}>`).replaceAll('\n', '')
-                        .replaceAll('\t', '') as string);
+                htmlContent = htmlContent.map((code) => code.replace(tagStartRegex, `<${toHyphenCase(importName)} `).replace(tagEndRegex, `</${toHyphenCase(importName)}>`))
             }
         });
-    } else {
-        htmlContent = htmlChunks.map((code) => code.replaceAll('\n', '')
-                        .replaceAll('\t', '') as string);
     }
 
     const fileName = extractFileName!(id);
@@ -324,9 +321,12 @@ export const treatyToIvy = async (code: string, id: string, compiler: typeof imp
         }
     });
 
+    htmlContent = htmlContent.map((code) => code.replaceAll('\n', '').replaceAll('\r', '')
+                        .replaceAll('\t', '').toString());
+
     const CMP_NAME = toCamelCase(fileName)
     console.log(updatedHtmlStrings, updatedHtmlStrings)
-    const angularTemplate = compiler.parseTemplate(updatedHtmlStrings.join('\n'), id)
+    const angularTemplate = compiler.parseTemplate(updatedHtmlStrings.join(''), id)
     const { inputs, outputs } = await findInputAndOutputAssignments(jsTsContent)
     const { viewQueries, contentQueries, constantDeclarations } = await findViewChildAndContentQueries(jsTsContent)
 

diff --git a/apps/repl/src/tools/treaty-sfc/treaty/lexer.ts b/apps/repl/src/tools/treaty-sfc/treaty/lexer.ts
@@ -74,7 +74,6 @@ class Lexer {
                 return this.parseHTML();
             }
         } else if (this.currentChar === '{' && this.startsWith('{{')) {
-            this.advanceBy(2);
             this.pushState(LexerState.TemplateExpression);
             return this.parseTemplateExpression();
         } else if (this.currentChar === '@') {
@@ -144,6 +143,7 @@ class Lexer {
     private parseHTML(): Token {
         const startPos = this.pos;
         const tagStack: string[] = [];
+
         while (this.currentChar !== null) {
             this.consumeWhitespace();
             if (this.currentChar === '<') {
@@ -154,6 +154,7 @@ class Lexer {
                     const tagName = this.consumeTagName();
                     const expectedTag = tagStack.pop();
                     if (expectedTag !== undefined && tagName !== expectedTag) {
+                      debugger;
                         // Handle mismatched tag (optional)
                     }
                     this.consumeUntil('>');
@@ -165,14 +166,23 @@ class Lexer {
                     this.advance();
                     const tagName = this.consumeTagName();
                     tagStack.push(tagName);
-                    this.consumeAttributes();
+                    if (this.consumeAttributes()) {
+                      tagStack.pop();
+                      if (tagStack.length === 0) {
+                        break;
+                    }
+
+                    }
                     // this.advance();
                 } else {
                     this.advance();
                 }
-            } else if (this.currentChar === '{' && this.startsWith('{{')) {
-                break;
-            } else {
+            } 
+            // for now deal with only top level so it doesnt just skip break the html check and we dont care about this for now
+            // else if (this.currentChar === '{' && this.startsWith('{{')) {
+            //     break;
+            // }
+            else {
                 this.advance();
             }
         }
@@ -311,6 +321,17 @@ class Lexer {
         }
     }
 
+    private consumeTemplateExpression(): void {
+        this.advanceBy('{{'.length);
+        while (this.currentChar !== null) {
+            if (this.startsWith('}}')) {
+                this.advanceBy('}}'.length);
+                break;
+            }
+            this.advance();
+        }
+    }
+
     private consumeTagName(): string {
         return this.consumeWhile(ch => /[a-zA-Z0-9]/.test(ch));
     }

diff --git a/apps/rust/authoring/src/treaty/lexer.rs b/apps/rust/authoring/src/treaty/lexer.rs
@@ -207,9 +207,12 @@ impl<'a> Lexer<'a> {
                 } else {
                     self.advance();
                 }
-            } else if ch == '{' && self.starts_with("{{") {
-                break;
-            } else {
+            }
+            // lets deal with html as we only have top level support for break down on lexer
+            // else if ch == '{' && self.starts_with("{{") {
+            //     break;
+            // }
+             else {
                 self.advance();
             }
         }