feat: print concise text with backticks

.changeset/concise-backtick-text.md

@@ -0,0 +1,7 @@
+---
+"prettier-plugin-marko": minor
+---
+
+Print concise text with backticks instead of `--`, leaving off the optional closing backticks. Leading and trailing whitespace is written between the backticks instead of as `${" "}`, and trailing whitespace on a single line is kept by closing backticks. Text on several lines beside sibling tags is closed by a line of the same backticks, as is a comment after text. The opening fence is longer than any run of backticks in the text, and text that starts with a backtick is printed as a block.
+
+Keep the syntax each tag was written in with `markoSyntax: "auto"`, instead of formatting the whole file in the syntax of its first tag. An HTML tag inside concise text, like ``p `concise mode is <em>sort of</em> concise` ``, stays inline in the text.

README.md

@@ -70,7 +70,7 @@ On top of [Prettier's options](https://prettier.io/docs/en/options.html), there
 ## `markoSyntax: "auto" | "html" | "concise"`
 
 Marko supports both an [html like](https://markojs.com/docs/syntax/) and [concise](https://markojs.com/docs/concise/) syntaxes.
-By default this plugin will try to detect the syntax you are already using and output a formatted document in that syntax.
+By default this plugin keeps the syntax each tag was written in, so a template can mix them, such as an HTML `<em>` tag inside concise text.
 
 You can overide the default (`"auto"`) to enforce that all templates are formatted to the syntax of your choosing.
 

src/__tests__/fixtures/argument-attr/__snapshots__/auto.expected.marko

@@ -5,5 +5,5 @@
   bbbbbbbbbb,
   cccccccccc,
 )/>
--- ${test}
+`${test}
 <div>${Hello}</div>

src/__tests__/fixtures/argument-attr/__snapshots__/concise.expected.marko

@@ -5,5 +5,5 @@ div foo(
   bbbbbbbbbb,
   cccccccccc,
 )
--- ${test}
-div -- ${Hello}
+`${test}
+div `${Hello}

src/__tests__/fixtures/argument-attr/__snapshots__/html.expected.marko

@@ -5,5 +5,5 @@
   bbbbbbbbbb,
   cccccccccc,
 )/>
--- ${test}
+`${test}
 <div>${Hello}</div>

src/__tests__/fixtures/attr-method-async/__snapshots__/concise.expected.marko

@@ -1,10 +1,10 @@
 button async onClick() {
   await save();
-} -- x
+} `x
 
 button async onClick<T extends Event>(event: T) {
   await save(event);
-} -- x
+} `x
 
 custom-tag async (value) {
   await save(value);
@@ -20,11 +20,11 @@ custom-tag async <T>(value: T) {
 
 button async on-click() {
   await save();
-} -- x
+} `x
 
 button async onClick() {
   await save();
-} -- x
+} `x
 
 custom-tag
   @item async on-select(value) {

src/__tests__/fixtures/attr-method-shorthand-multiline/__snapshots__/concise.expected.marko

@@ -2,4 +2,4 @@ let/count=0
 button onClick() {
   count++;
   console.log("hello");
-} -- ${count}
+} `${count}

src/__tests__/fixtures/attr-tag-in-while/__snapshots__/concise.expected.marko

@@ -1,11 +1,11 @@
 my-component
   while(x > 0)
-    @body -- Content
+    @body `Content
   for|item| of=list
-    @item -- ${item}
+    @item `${item}
   if(show)
-    @header -- Header
+    @header `Header
   else-if(other)
-    @footer -- Footer
+    @footer `Footer
   else
-    @fallback -- Default
+    @fallback `Default

src/__tests__/fixtures/attr-tag-nested/__snapshots__/concise.expected.marko

@@ -1,4 +1,4 @@
 my-component
   @section
-    @header -- Title
-    @content -- Body
+    @header `Title
+    @content `Body

src/__tests__/fixtures/attr-tags/__snapshots__/concise.expected.marko

@@ -1,9 +1,9 @@
 my-select
-  @option -- One
-  @option -- Two
-  @option -- Three
+  @option `One
+  @option `Two
+  @option `Three
 
 my-dialog
-  @header -- Head
-  -- Body
-  @footer -- Foot
+  @header `Head
+  `Body
+  @footer `Foot

src/__tests__/fixtures/attrs-multiline-nested/__snapshots__/concise.expected.marko

@@ -11,4 +11,4 @@ div
     ,data-hello="hello"
     ,data-world="world"
     ,class="my-class"
-    ,data-widget="my-really-awesome-widget" -- Hello World
+    ,data-widget="my-really-awesome-widget" `Hello World

src/__tests__/fixtures/attrs-multiline/__snapshots__/concise.expected.marko

@@ -4,13 +4,13 @@ div
   ,data-hello="hello"
   ,data-world="world"
   ,class="my-class"
-  ,data-widget="my-really-awesome-widget" -- Hello World
+  ,data-widget="my-really-awesome-widget" `Hello World
 
 div
   ,data-foo="foo"
   ,data-bar="bar"
   ,data-hello="hello"
   ,data-world="world"
   ,class="my-class"
-  ,data-widget="my-really-awesome-widget-that-breaks-the-line-because-its-long" --
+  ,data-widget="my-really-awesome-widget-that-breaks-the-line-because-its-long" `
   Hello World

src/__tests__/fixtures/attrs-over-80-chars/__snapshots__/concise.expected.marko

@@ -2,5 +2,5 @@ div
   ,data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
   ,data-widget2="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
   ,another-attribute="foo"
-  div data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END" --
+  div data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END" `
     Hello World

src/__tests__/fixtures/avoid-whitespace/__snapshots__/concise.expected.marko

@@ -1,4 +1,4 @@
 div
-  -- ${foo} (
-  span -- ${bar}
-  -- )
+  `${foo} (
+  span `${bar}
+  `)

src/__tests__/fixtures/comment-before-static/__snapshots__/concise.expected.marko

@@ -4,4 +4,4 @@ export interface Input {
 }
 
 // This is another top level JS style comment.
-div -- Hello ${input.name}
+div `Hello ${input.name}

src/__tests__/fixtures/comments-block-after-inline-sibling/__snapshots__/auto.expected.marko

@@ -0,0 +1,9 @@
+<div><span/><!-- after a tag --></div>
+<p>${value}<!-- after a placeholder --></p>
+<p>text <b>bold</b><!-- between --> more</p>
+<p>
+  /* first */
+  /* second */
+  text
+</p>
+<p>text /* already separated */ more</p>

src/__tests__/fixtures/comments-block-after-inline-sibling/__snapshots__/concise.expected.marko

@@ -0,0 +1,14 @@
+div
+  span
+  /* after a tag */
+p `${value}<!-- after a placeholder -->
+p
+  `text `
+  b `bold
+  /* between */
+  ` more
+p
+  /* first */
+  /* second */
+  `text
+p `text /* already separated */ more

src/__tests__/fixtures/comments-block-after-inline-sibling/__snapshots__/html.expected.marko

@@ -0,0 +1,9 @@
+<div><span/><!-- after a tag --></div>
+<p>${value}<!-- after a placeholder --></p>
+<p>text <b>bold</b><!-- between --> more</p>
+<p>
+  /* first */
+  /* second */
+  text
+</p>
+<p>text /* already separated */ more</p>

src/__tests__/fixtures/comments-block-after-inline-sibling/template.marko

@@ -0,0 +1,21 @@
+<div>
+  <span/>
+  /* after a tag */
+</div>
+<p>
+  ${value}
+  /* after a placeholder */
+</p>
+<p>
+  text <b>bold</b>
+  /* between */
+  more
+</p>
+<p>
+  /* first */
+  /* second */
+  text
+</p>
+<p>
+  text /* already separated */ more
+</p>

src/__tests__/fixtures/comments-inline-complex/__snapshots__/auto.expected.marko

@@ -1,13 +1,10 @@
 div class="hello"
   // This is a line comment
-  span
-    -- Welcome to${" "}
-    b -- Marko
-  ---
-  Foo<!--
+  `
+  <span>Welcome to <b>Marko</b></span>Foo<!--
   This is a multiline HTML comment
     This is indented further
   Line 3
   -->Bar<!-- This is another comment -->Test<!-- This
   is an odd comment -->Hello <!-- This is an inline comment --> World
-  ---
+  `

src/__tests__/fixtures/comments-inline-complex/__snapshots__/concise.expected.marko

@@ -1,13 +1,13 @@
 div class="hello"
   // This is a line comment
   span
-    -- Welcome to${" "}
-    b -- Marko
-  ---
+    `Welcome to `
+    b `Marko
+  `
   Foo<!--
   This is a multiline HTML comment
     This is indented further
   Line 3
   -->Bar<!-- This is another comment -->Test<!-- This
   is an odd comment -->Hello <!-- This is an inline comment --> World
-  ---
+  `

src/__tests__/fixtures/comments-inline-nested/__snapshots__/concise.expected.marko

@@ -1 +1 @@
-div -- Hello <!-- This is an inline comment --> World
+div `Hello <!-- This is an inline comment --> World

src/__tests__/fixtures/comments-inline-simpler-todo/__snapshots__/auto.expected.marko

@@ -1,3 +1,3 @@
-div --
+div `
   Foo<!-- a
   -->Bar

src/__tests__/fixtures/comments-inline-simpler-todo/__snapshots__/concise.expected.marko

@@ -1,3 +1,3 @@
-div --
+div `
   Foo<!-- a
   -->Bar

src/__tests__/fixtures/comments-inline/__snapshots__/auto.expected.marko

@@ -1 +1 @@
--- Hello <!-- This is an inline comment --> World
+`Hello <!-- This is an inline comment --> World

src/__tests__/fixtures/comments-inline/__snapshots__/concise.expected.marko

@@ -1 +1 @@
--- Hello <!-- This is an inline comment --> World
+`Hello <!-- This is an inline comment --> World

src/__tests__/fixtures/comments-inline/__snapshots__/html.expected.marko

@@ -1 +1 @@
--- Hello <!-- This is an inline comment --> World
+`Hello <!-- This is an inline comment --> World

src/__tests__/fixtures/comments-multiple-lines-as-text/__snapshots__/auto.expected.marko

@@ -1,4 +1,4 @@
 // this is
 // multiple lines
 // of comments
--- Hi!
+`Hi!

src/__tests__/fixtures/comments-multiple-lines-as-text/__snapshots__/concise.expected.marko

@@ -1,4 +1,4 @@
 // this is
 // multiple lines
 // of comments
--- Hi!
+`Hi!

src/__tests__/fixtures/comments-multiple-lines-as-text/__snapshots__/html.expected.marko

@@ -1,4 +1,4 @@
 // this is
 // multiple lines
 // of comments
--- Hi!
+`Hi!

src/__tests__/fixtures/comments/__snapshots__/auto.expected.marko

@@ -1,13 +1,10 @@
 div class="hello"
   // This is a line comment
-  span
-    -- Welcome to${" "}
-    b -- Marko
-  ---
-  Foo<!--
+  `
+  <span>Welcome to <b>Marko</b></span>Foo<!--
   This is a multiline HTML comment
     This is indented further
   Line 3
   -->Bar<!-- This is another comment -->Test<!-- This
   is an odd comment -->Hello World
-  ---
+  `

src/__tests__/fixtures/comments/__snapshots__/concise.expected.marko

@@ -1,13 +1,13 @@
 div class="hello"
   // This is a line comment
   span
-    -- Welcome to${" "}
-    b -- Marko
-  ---
+    `Welcome to `
+    b `Marko
+  `
   Foo<!--
   This is a multiline HTML comment
     This is indented further
   Line 3
   -->Bar<!-- This is another comment -->Test<!-- This
   is an odd comment -->Hello World
-  ---
+  `

src/__tests__/fixtures/component/__snapshots__/concise.expected.marko

@@ -9,5 +9,5 @@ class {
   }
 }
 
-div -- The current count is ${state.count}
-button on-click("increment") -- +1
+div `The current count is ${state.count}
+button on-click("increment") `+1

src/__tests__/fixtures/concise-backtick-text-comment/__snapshots__/auto.expected.marko

@@ -0,0 +1,22 @@
+div
+  `hello` // note
+div
+  `hello` /* note */
+div `hello /* note */ world
+div
+  `
+  a very long line of text that will need to be wrapped because it is wider than
+  eighty columns in total
+  `
+  // note
+ul
+  li
+    `first` // one
+  li `second
+`top level` // top
+div
+  `
+  a very long line of text that will need to be wrapped because it is wider than
+  eighty columns in total
+  `
+  /* note */

src/__tests__/fixtures/concise-backtick-text-comment/__snapshots__/concise.expected.marko

@@ -0,0 +1,22 @@
+div
+  `hello` // note
+div
+  `hello` /* note */
+div `hello /* note */ world
+div
+  `
+  a very long line of text that will need to be wrapped because it is wider than
+  eighty columns in total
+  `
+  // note
+ul
+  li
+    `first` // one
+  li `second
+`top level` // top
+div
+  `
+  a very long line of text that will need to be wrapped because it is wider than
+  eighty columns in total
+  `
+  /* note */