feat: add type args and params (#48)

* feat: add type args and params * test: more coverage * fix: use default prettier formatting
marko-js · Nov 22, 2023 · 8f2ea07 · 8f2ea07
1 parent 266d2eb
commit 8f2ea07
Show file tree

Hide file tree

Showing 8 changed files with 1,210 additions and 1,488 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "fixpack": "^4.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "marko": "^5.31.11",
+    "marko": "^5.32.0",
     "mocha": "^10.2.0",
     "mocha-snap": "^5.0.0",
     "nyc": "^15.1.0",

diff --git a/src/__tests__/__snapshots__/generic-tag.expected/auto.marko b/src/__tests__/__snapshots__/generic-tag.expected/auto.marko
@@ -0,0 +1,45 @@
+<my-tag<MyType, MyOtherType> my-attr="my-string"/>
+<my-tag <MyType, MyOtherType>|x|/>
+<my-tag <MyType>|x| my-attr="my-string"/>
+<my-tag<MyType>|x|/>
+<my-tag<MyType1><MyOtherType>|x|/>
+<my-tag<
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Attribute,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line
+><
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Parameter,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line,
+>|x|/>
+<my-tag <
+  T extends
+    keyof (typeof SuperLongImportedVariableName)["member1"]["member2"]["member3"],
+  K extends T extends string
+    ? MyType["member1"]["member2"]["member3"]
+    : MyOtherType,
+>|x|/>
diff --git a/src/__tests__/__snapshots__/generic-tag.expected/concise.marko b/src/__tests__/__snapshots__/generic-tag.expected/concise.marko
@@ -0,0 +1,45 @@
+my-tag<MyType, MyOtherType> my-attr="my-string"
+my-tag <MyType, MyOtherType>|x|
+my-tag <MyType>|x| my-attr="my-string"
+my-tag<MyType>|x|
+my-tag<MyType1><MyOtherType>|x|
+my-tag<
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Attribute,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line
+><
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Parameter,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line,
+>|x|
+my-tag <
+  T extends
+    keyof (typeof SuperLongImportedVariableName)["member1"]["member2"]["member3"],
+  K extends T extends string
+    ? MyType["member1"]["member2"]["member3"]
+    : MyOtherType,
+>|x|
diff --git a/src/__tests__/__snapshots__/generic-tag.expected/html.marko b/src/__tests__/__snapshots__/generic-tag.expected/html.marko
@@ -0,0 +1,45 @@
+<my-tag<MyType, MyOtherType> my-attr="my-string"/>
+<my-tag <MyType, MyOtherType>|x|/>
+<my-tag <MyType>|x| my-attr="my-string"/>
+<my-tag<MyType>|x|/>
+<my-tag<MyType1><MyOtherType>|x|/>
+<my-tag<
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Attribute,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line
+><
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Parameter,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line,
+>|x|/>
+<my-tag <
+  T extends
+    keyof (typeof SuperLongImportedVariableName)["member1"]["member2"]["member3"],
+  K extends T extends string
+    ? MyType["member1"]["member2"]["member3"]
+    : MyOtherType,
+>|x|/>
diff --git a/src/__tests__/__snapshots__/generic-tag.expected/with-parens.marko b/src/__tests__/__snapshots__/generic-tag.expected/with-parens.marko
@@ -0,0 +1,45 @@
+<my-tag<MyType, MyOtherType> my-attr="my-string"/>
+<my-tag <MyType, MyOtherType>|x|/>
+<my-tag <MyType>|x| my-attr="my-string"/>
+<my-tag<MyType>|x|/>
+<my-tag<MyType1><MyOtherType>|x|/>
+<my-tag<
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Attribute,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line
+><
+  A,
+  Whole,
+  Bunch,
+  Of,
+  Tag,
+  Parameter,
+  Types,
+  That,
+  Need,
+  To,
+  Wrap,
+  To,
+  The,
+  Next,
+  Line,
+>|x|/>
+<my-tag <
+  T extends
+    keyof (typeof SuperLongImportedVariableName)["member1"]["member2"]["member3"],
+  K extends T extends string
+    ? MyType["member1"]["member2"]["member3"]
+    : MyOtherType,
+>|x|/>
diff --git a/src/__tests__/fixtures/generic-tag.marko b/src/__tests__/fixtures/generic-tag.marko
@@ -0,0 +1,11 @@
+<my-tag<MyType, MyOtherType> my-attr="my-string" />
+<my-tag <MyType, MyOtherType>|x| />
+<my-tag
+  <MyType>|x|
+  my-attr="my-string"
+/>
+<my-tag<MyType>|x|/>
+<my-tag<MyType1><MyOtherType>|x| />
+<my-tag<A, Whole, Bunch, Of, Tag, Attribute, Types, That, Need, To, Wrap, To, The, Next, Line>
+  <A, Whole, Bunch, Of, Tag, Parameter, Types, That, Need, To, Wrap, To, The, Next, Line>|x| />
+<my-tag <T extends keyof (typeof SuperLongImportedVariableName)["member1"]["member2"]["member3"], K extends (T extends string ? MyType["member1"]["member2"]["member3"] : MyOtherType)>|x| />
diff --git a/src/index.ts b/src/index.ts
@@ -30,6 +30,10 @@ import {
 } from "./utils/with-parens-if-needed";
 import asLiteralTextContent from "./utils/as-literal-text-content";
 import { getOriginalCodeForNode } from "./utils/get-original-code";
+import {
+  TSTypeParameterDeclaration,
+  TSTypeParameterInstantiation,
+} from "@marko/compiler/babel-types";
 type Node = types.Node;
 const defaultFilePath = resolve("index.marko");
 const rootRequire = createRequire(defaultFilePath);
@@ -310,6 +314,34 @@ export const printers: Record<string, Printer<types.Node>> = {
             );
           }
 
+          if (node.typeArguments) {
+            doc.push(
+              (
+                tagPath as AstPath<
+                  types.MarkoTag & {
+                    typeArguments: TSTypeParameterInstantiation;
+                  }
+                >
+              ).call(print, "typeArguments"),
+            );
+          }
+          if (node.body.typeParameters) {
+            if (!node.typeArguments) {
+              doc.push(" ");
+            }
+            doc.push(
+              (
+                tagPath as AstPath<
+                  types.MarkoTag & {
+                    body: {
+                      typeParameters: TSTypeParameterDeclaration;
+                    };
+                  }
+                >
+              ).call(print, "body", "typeParameters"),
+            );
+          }
+
           const shorthandIndex = doc.push("") - 1;
 
           if (node.var) {
@@ -434,13 +466,13 @@ export const printers: Record<string, Printer<types.Node>> = {
                       opts.markoSyntax === "html"
                         ? ""
                         : isFirst
-                        ? b.ifBreak("--", " --", { groupId })
-                        : "--",
+                          ? b.ifBreak("--", " --", { groupId })
+                          : "--",
                       opts.markoSyntax === "html"
                         ? ""
                         : preserveSpace
-                        ? b.hardline
-                        : b.line,
+                          ? b.hardline
+                          : b.line,
                       preserveSpace ? textDocs : b.fill(textDocs),
                       opts.markoSyntax === "html"
                         ? ""
@@ -466,8 +498,8 @@ export const printers: Record<string, Printer<types.Node>> = {
                 node.body.body.some((child) => child.type === "MarkoScriptlet"))
                 ? b.hardline
                 : preserveSpace
-                ? ""
-                : b.softline;
+                  ? ""
+                  : b.softline;
             const wrapSep =
               !preserveSpace &&
               opts.markoSyntax === "html" &&
@@ -741,11 +773,11 @@ export const printers: Record<string, Printer<types.Node>> = {
                         ))
                         ? b.hardline
                         : opts.markoSyntax === "concise" ||
-                          node.body.body.some(
-                            (child) => child.type === "MarkoScriptlet",
-                          )
-                        ? b.hardline
-                        : b.softline;
+                            node.body.body.some(
+                              (child) => child.type === "MarkoScriptlet",
+                            )
+                          ? b.hardline
+                          : b.softline;
 
                     if (opts.markoSyntax === "html") {
                       doc.push(">");
@@ -895,11 +927,11 @@ export const printers: Record<string, Printer<types.Node>> = {
                           ))
                           ? b.hardline
                           : opts.markoSyntax === "concise" ||
-                            node.body.body.some(
-                              (child) => child.type === "MarkoScriptlet",
-                            )
-                          ? b.hardline
-                          : b.softline;
+                              node.body.body.some(
+                                (child) => child.type === "MarkoScriptlet",
+                              )
+                            ? b.hardline
+                            : b.softline;
 
                       if (opts.markoSyntax === "html") {
                         doc.push(">");
@@ -992,7 +1024,28 @@ export const printers: Record<string, Printer<types.Node>> = {
         } else {
           const parent = path.getParentNode() as types.Node | undefined;
           const parentType = parent?.type;
-          if (
+          if (parentType === "MarkoTag" && path.key === "typeArguments") {
+            return tryPrintEmbed(
+              `_${code}`,
+              scriptParser,
+              (doc: any) => {
+                return doc[1].contents;
+              },
+              code,
+            );
+          } else if (
+            parentType === "MarkoTagBody" &&
+            path.key === "typeParameters"
+          ) {
+            return tryPrintEmbed(
+              `function _${code}() {}`,
+              scriptParser,
+              (doc: any) => {
+                return doc[1].contents;
+              },
+              code,
+            );
+          } else if (
             parentType === "MarkoTagBody" ||
             (parentType === "VariableDeclarator" && path.key === "id") ||
             (parentType === "MarkoTag" && path.key === "var")