From c7c3798c78c6cbc2285da29207d8752f9f03ae9e Mon Sep 17 00:00:00 2001
From: Sahin Vardar <sahin@vardar.io>
Date: Sat, 26 Oct 2024 16:00:11 +0200
Subject: [PATCH] WIP

---
 src/print-html.ts            | 77 ++++++++++++++++++++++++++----------
 src/tests/print-html.test.ts | 76 +++++++++++++++++------------------
 2 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/src/print-html.ts b/src/print-html.ts
index 7f2e51c..6a012ac 100644
--- a/src/print-html.ts
+++ b/src/print-html.ts
@@ -36,8 +36,8 @@ export abstract class BaseHtmlNodePrinter {
 }
 
 class FragmentPrinter extends BaseHtmlNodePrinter {
-  enter(_: TemplateNode, __: TemplateNode, ___: PrinterContext) {}
-  leave(_: TemplateNode, __: TemplateNode, ___: PrinterContext) {}
+  enter(_: any, __: any, ___: PrinterContext) {}
+  leave(_: any, __: any, ___: PrinterContext) {}
 }
 
 class ElementPrinter extends BaseHtmlNodePrinter {
@@ -122,6 +122,44 @@ class ElementPrinter extends BaseHtmlNodePrinter {
             return `{...${generate(attribute.expression, context.indent)}}`;
           }
 
+          if (attribute.type === 'EventHandler') {
+            if (attribute.expression) {
+              return `on:${attribute.name}={${generate(attribute.expression, context.indent)}}`;
+            }
+
+            return `${attribute.name}`;
+          }
+
+          if (attribute.type === 'Binding') {
+            return `bind:${attribute.name}={${generate(attribute.expression, context.indent)}}`;
+          }
+
+          if (attribute.type === 'Class') {
+            return `class:${attribute.name}={${generate(attribute.expression, context.indent)}}`;
+          }
+
+          if (attribute.type === 'StyleDirective') {
+            if (attribute.value === true) {
+              return `style:${attribute.name}`;
+            }
+
+            const [value] = attribute.value;
+
+            if (value.type === 'Text') {
+              return `style:${attribute.name}="${value.data}"`;
+            }
+
+            if (value.type === 'ExpressionTag') {
+              return `style:${attribute.name}={${generate(value.expression, context.indent)}}`;
+            }
+
+            if(value.type === 'MustacheTag') {
+              return `style:${attribute.name}={${generate(value.expression, context.indent)}}`;
+            }
+
+           
+          }
+
           // if (attribute?.expression) {
           //   return `${attributeName}={${generate(attribute.expression, context.indent)}}`;
           // }
@@ -171,13 +209,6 @@ class ElementPrinter extends BaseHtmlNodePrinter {
   }
 }
 
-class AttributePrinter extends BaseHtmlNodePrinter {
-  enter(node: TemplateNode, parent: TemplateNode, context: PrinterContext) {
-    context._this.skip();
-  }
-  leave(_: TemplateNode, __: TemplateNode, ___: PrinterContext) {}
-}
-
 class TextPrinter extends BaseHtmlNodePrinter {
   enter(node: AST.Text, _: any, context: PrinterContext) {
     const { write } = context;
@@ -402,7 +433,7 @@ const PRINTERS: PrinterCollection = {
   Text: new TextPrinter(),
   MustacheTag: new MustacheTagPrinter(),
   Comment: new CommentPrinter(),
-  Slot: new ElementPrinter()
+  Slot: new ElementPrinter(),
   // SlotTemplate: new ElementPrinter(),
   // Title: new ElementPrinter(),
   // Slot: new ElementPrinter(),
@@ -411,18 +442,16 @@ const PRINTERS: PrinterCollection = {
   // Window: new ElementPrinter(),
   // Document: new ElementPrinter(),
   // Body: new ElementPrinter(),
-
-  // Attribute: new AttributePrinter(),
-
   // Text: new TextPrinter(),
-  // EventHandler: NoOp,
-  // Identifier: NoOp,
-  // Binding: NoOp,
-  // Class: NoOp,
-  // StyleDirective: NoOp,
-  // Action: NoOp,
-  // Transition: NoOp,
-  // Animation: NoOp,
+  Attribute: NoOp,
+  EventHandler: NoOp,
+  Identifier: NoOp,
+  Binding: NoOp,
+  Class: NoOp,
+  StyleDirective: NoOp,
+  Action: NoOp,
+  Transition: NoOp,
+  Animation: NoOp
   // Comment: new CommentPrinter(),
   // IfBlock: new IfBlockPrinter(),
   // ElseBlock: new ElseBlockPrinter(),
@@ -470,6 +499,9 @@ export default function printHtml(params: PrintHtmlParams) {
 
   walk(copy, {
     enter: function (node: SvelteNode | LegacySvelteNode, parent: SvelteNode | LegacySvelteNode) {
+      if (node.skip === true) {
+        return;
+      }
       const printer = printers[node.type];
       if (printer === undefined) {
         throw new Error(`Could not find printer for ${node.type}`);
@@ -484,6 +516,9 @@ export default function printHtml(params: PrintHtmlParams) {
       nestingLevel++;
     },
     leave: function (node: any, parent: any) {
+      if (node.skip === true) {
+        return;
+      }
       const printer = printers[node.type];
       printer.leave(node, parent, {
         _this: this,
diff --git a/src/tests/print-html.test.ts b/src/tests/print-html.test.ts
index 062a462..216f292 100644
--- a/src/tests/print-html.test.ts
+++ b/src/tests/print-html.test.ts
@@ -43,48 +43,48 @@ describe('Attributes', () => {
   test('inline component element with attribute', () => testHtmlPrinter('<Input class="flex"/>'));
 });
 
-// describe('Element directives', () => {
-//   test('on:eventname', () => testHtmlPrinter('<input on:change={onChange}/>'));
-//   test('bind:property', () => testHtmlPrinter('<input bind:value/>', '<input bind:value={value}/>'));
-//   test('bind:group', () => testHtmlPrinter('<input type="radio" bind:group={tortilla} value="Plain"/>'));
+describe('Element directives', () => {
+  test('on:eventname', () => testHtmlPrinter('<input on:change={onChange}/>'));
+  test('bind:property', () => testHtmlPrinter('<input bind:value/>', '<input bind:value={value}/>'));
+  test('bind:group', () => testHtmlPrinter('<input type="radio" bind:group={tortilla} value="Plain"/>'));
 
-//   test('bind:this', () => testHtmlPrinter('<canvas bind:this={canvasElement}/>'));
+  test('bind:this', () => testHtmlPrinter('<canvas bind:this={canvasElement}/>'));
 
-//   test('class:name', () => {
-//     testHtmlPrinter('<div class:active={active}/>');
-//     testHtmlPrinter('<div class:active/>', '<div class:active={active}/>');
-//   });
-
-//   test('style:property', () => {
-//     testHtmlPrinter('<div style:color/>');
-//     testHtmlPrinter('<div style:color="red"/>');
-//     testHtmlPrinter('<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}/>');
-//   });
-
-//   test('use:action', () => {
-//     testHtmlPrinter('<div use:foo={bar}/>');
-//     testHtmlPrinter('<div use:foo/>');
-//   });
-
-//   test('transition:fn', () => {
-//     testHtmlPrinter('<div transition:fade/>');
-//     testHtmlPrinter('<div transition:fade={{duration: 2000}}/>');
-//   });
-
-//   test('in/out:fn', () => {
-//     testHtmlPrinter('<div in:fly out:fade>flies in, fades out</div>');
-//     testHtmlPrinter('<div in:fly={{duration: 2000}} out:fade{{duration: 2000}}>flies in, fades out</div>');
-//   });
+  test('class:name', () => {
+    testHtmlPrinter('<div class:active={active}/>');
+    testHtmlPrinter('<div class:active/>', '<div class:active={active}/>');
+  });
 
-//   test('animate:fn', () => {
-//     testHtmlPrinter('<li animate:flip={{delay: 500}}>{item}</li>');
-//     testHtmlPrinter('<div animate:whizz>{item}</div>');
-//   });
+  test('style:property', () => {
+    testHtmlPrinter('<div style:color/>');
+    testHtmlPrinter('<div style:color="red"/>');
+    testHtmlPrinter('<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}/>');
+  });
 
-//   test('let:variable', () => {
-//     testHtmlPrinter('<checkbox let:isChecked/>');
-//   });
-// });
+  // test('use:action', () => {
+  //   testHtmlPrinter('<div use:foo={bar}/>');
+  //   testHtmlPrinter('<div use:foo/>');
+  // });
+
+  // test('transition:fn', () => {
+  //   testHtmlPrinter('<div transition:fade/>');
+  //   testHtmlPrinter('<div transition:fade={{duration: 2000}}/>');
+  // });
+
+  // test('in/out:fn', () => {
+  //   testHtmlPrinter('<div in:fly out:fade>flies in, fades out</div>');
+  //   testHtmlPrinter('<div in:fly={{duration: 2000}} out:fade{{duration: 2000}}>flies in, fades out</div>');
+  // });
+
+  // test('animate:fn', () => {
+  //   testHtmlPrinter('<li animate:flip={{delay: 500}}>{item}</li>');
+  //   testHtmlPrinter('<div animate:whizz>{item}</div>');
+  // });
+
+  // test('let:variable', () => {
+  //   testHtmlPrinter('<checkbox let:isChecked/>');
+  // });
+});
 
 // describe('Template', () => {
 //   test('{#if ...}', () => {