WIP

vardario · Dec 13, 2024 · 0304145 · 0304145
1 parent 2c55956
commit 0304145
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 144 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,8 @@
     "@types/node": "^20.2.5",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "astring": "^1.8.5",
+    "@vardario/astring-ts-generator": "^1.1.0",
+    "astring": "^1.9.0",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/print-html.ts b/src/print-html.ts
@@ -3,49 +3,9 @@ import _ from 'lodash';
 import { walk } from 'estree-walker';
 import { AST } from 'svelte/compiler';
 import { DefaultPrinterIdentOptions, PrinterIdentOptions } from './index.js';
-import { Node } from 'estree';
-export type Write = (text: string) => void;
+import { ElementLike, printAttributes, SvelteNode } from './utils.js';
 
-type ElementLike =
-  | AST.Component
-  | AST.TitleElement
-  | AST.SlotElement
-  | AST.RegularElement
-  | AST.SvelteBody
-  | AST.SvelteComponent
-  | AST.SvelteDocument
-  | AST.SvelteElement
-  | AST.SvelteFragment
-  | AST.SvelteHead
-  | AST.SvelteOptionsRaw
-  | AST.SvelteSelf
-  | AST.SvelteWindow;
-
-type Directive =
-  | AST.AnimateDirective
-  | AST.BindDirective
-  | AST.ClassDirective
-  | AST.LetDirective
-  | AST.OnDirective
-  | AST.StyleDirective
-  | AST.TransitionDirective
-  | AST.UseDirective;
-
-type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
-type Block = AST.EachBlock | AST.IfBlock | AST.AwaitBlock | AST.KeyBlock | AST.SnippetBlock;
-
-type TemplateNode =
-  | AST.Root
-  | AST.Text
-  | Tag
-  | ElementLike
-  | AST.Attribute
-  | AST.SpreadAttribute
-  | Directive
-  | AST.Comment
-  | Block;
-
-type SvelteNode = Node | TemplateNode | AST.Fragment | any;
+export type Write = (text: string) => void;
 
 const HTML_VOID_ELEMENTS = new Set([
   'area',
@@ -97,93 +57,6 @@ class ExpressionTagPrinter extends BaseHtmlNodePrinter {
 }
 
 class ElementPrinter extends BaseHtmlNodePrinter {
-  private printAttributes(attribute: AST.Attribute | AST.SpreadAttribute | Directive, context: PrinterContext) {
-    const { write } = context;
-
-    if (attribute.type === 'Attribute') {
-      if (attribute.value === true) {
-        return;
-      }
-
-      if (_.isArray(attribute.value)) {
-        const [value] = attribute.value;
-
-        if (value.type === 'Text') {
-          write(` ${attribute.name}="${value.data}"`);
-        }
-
-        if (value.type === 'ExpressionTag') {
-          write(` ${attribute.name}={${generate(value.expression, context.indent)}}`);
-        }
-      } else {
-        write(` ${attribute.name}={${generate(attribute.value.expression, context.indent)}}`);
-      }
-    } else if (attribute.type === 'SpreadAttribute') {
-      write(` {...${generate(attribute.expression, context.indent)}}`);
-    } else if (attribute.type === 'AnimateDirective') {
-      if (attribute.expression) {
-        write(` animate:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-      } else {
-        write(` animate:${attribute.name}`);
-      }
-    } else if (attribute.type === 'BindDirective') {
-      write(` bind:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-    } else if (attribute.type === 'ClassDirective') {
-      write(` class:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-    } else if (attribute.type === 'LetDirective') {
-      if (attribute.expression) {
-        write(` let:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-      } else {
-        write(` let:${attribute.name}`);
-      }
-    } else if (attribute.type === 'OnDirective') {
-      if (attribute.expression) {
-        write(` on:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-      } else {
-        write(` on:${attribute.name}`);
-      }
-    } else if (attribute.type === 'StyleDirective') {
-      if (attribute.value === true) {
-        write(` style:${attribute.name}`);
-      } else {
-        if (_.isArray(attribute.value)) {
-          const [value] = attribute.value;
-          if (value.type === 'Text') {
-            write(` style:${attribute.name}="${value.data}"`);
-          } else {
-            write(` style:${attribute.name}={${generate(value, context.indent)}}`);
-          }
-        } else {
-          write(` style:${attribute.name}={${generate(attribute.value.expression, context.indent)}}`);
-        }
-      }
-    } else if (attribute.type === 'TransitionDirective') {
-      const transition = () => {
-        if (attribute.intro && !attribute.outro) {
-          return 'in';
-        }
-
-        if (attribute.outro && !attribute.intro) {
-          return 'out';
-        }
-
-        return 'transition';
-      };
-
-      if (attribute.expression) {
-        write(` ${transition()}:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-      } else {
-        write(` ${transition()}:${attribute.name}`);
-      }
-    } else if (attribute.type === 'UseDirective') {
-      if (attribute.expression) {
-        write(` use:${attribute.name}={${generate(attribute.expression, context.indent)}}`);
-      } else {
-        write(` use:${attribute.name}`);
-      }
-    }
-  }
-
   enter(node: ElementLike, _: SvelteNode, context: PrinterContext) {
     const { write } = context;
 
@@ -207,7 +80,7 @@ class ElementPrinter extends BaseHtmlNodePrinter {
       });
     }
 
-    node.attributes.forEach(attribute => this.printAttributes(attribute, context));
+    node.attributes.forEach(attribute => printAttributes(attribute, context));
 
     if (
       (node.type === 'Component' ||

diff --git a/src/print-script.ts b/src/print-script.ts
@@ -1,23 +1,26 @@
 import { generate } from 'astring';
 import type { AST } from 'svelte/compiler';
 import { DefaultPrinterIdentOptions, PrinterIdentOptions } from './index.js';
+import generator from '@vardario/astring-ts-generator';
+import { attributeToString } from './utils.js';
 
 export default function printScript(root: AST.Root, indent: PrinterIdentOptions = DefaultPrinterIdentOptions): string {
   let result = '';
 
   if (root.instance) {
     result += '<script';
-    if (root.instance.context !== 'default') {
-      result += ` context="${root.instance.context}"`;
-    }
+    result += root.instance.attributes.map(attributeToString).join(' ');
     result += '>';
-    result += generate(root.instance.content, indent);
+    result += generate(root.instance.content, { ...indent, generator });
     result += '</script>';
   }
 
   if (root.module) {
-    result += '<script context="module">';
-    result += generate(root.module.content, indent);
+    result += '<script';
+    result += root.module.attributes.map(attributeToString).join(' ');
+    result += '>';
+
+    result += generate(root.module.content, { ...indent, generator });
     result += '</script>';
   }
 

diff --git a/src/tests/print-script.test.ts b/src/tests/print-script.test.ts
@@ -3,12 +3,12 @@ import { describe, expect, test } from 'vitest';
 import printScript from '../print-script';
 
 function testScriptPrinter(code: string, expectedResult?: string) {
-  const root = parse(code);
+  const root = parse(code, { modern: true });
   const result = printScript(root, {
     indent: '',
     lineEnd: ''
   });
-  expect(result, expectedResult ?? code);
+  expect(result).toBe(expectedResult ?? code);
 }
 
 describe('<script>', () => {
@@ -23,4 +23,8 @@ describe('<script>', () => {
   test('instance && module', () => {
     testScriptPrinter('<script>let a;</script><script context="module">let a;</script>');
   });
+
+  test('typescript instance', () => {
+    testScriptPrinter('<script lang="ts">interface A {}const a: number = 0;</script>');
+  });
 });