Apply oxc_formatter for embedded JS/TS part inside of Prettier's default supported files. So, xxx should be any of html, vue, markdown and mdx.

Things like:

• Format consistency
• oxfmt-ignore comment and experimentalSortImports

will be available.

TODOs

Vue

• vue: <script>...</script>
  • babel / typescript w/ __embeddedInHtml
  • No special handling
• vue: <script generic="...">
  • babel-ts w/ __isEmbeddedTypescriptGenericParameters
  • Extract type T<${value}> = any
  • Force ' for StringLiteral (singleQuote: true is not enough) by __isInHtmlAttribute
  • shouldHugJsExpression w/ __onHtmlBindingRoot?
• vue: v-slot="..." / #default="..."
  • babel(-ts) w/ __isVueBindings
  • Extract function _(${text}) {}
  • Force ' for StringLiteral (singleQuote: true is not enough) by __isInHtmlAttribute
• vue: v-for="... in ..." (LHS)
  • babel(-ts) w/ __isVueForBindingLeft+__isInHtmlAttribute+__embeddedInHtml
  • Extract function _(${left}) {}
  • Add ( and ) if multiple params
  • Force ' for StringLiteral (singleQuote: true is not enough) by __isInHtmlAttribute
• Enable for vue
  • Blocked by js-in-vue
• vue: v-for="... in ..." (RHS)
  • __(js|ts)_expression(= babel(-ts):isExpr)
• vue: v-on="..." / @click="..." (EXPR)
  • __(js|ts)_expression(= babel(-ts):isExpr)
• vue: v-on="..." / @click="..." (STATEMENT)
  • __vue_(ts_)event_binding(= babel(-ts))
• vue: {{ ... }}
  • __vue_(ts_)expression(= babel(-ts):isExpr)
• vue: v-bind="..." / :class="..."
  • __vue_(ts_)expression(= babel(-ts):isExpr)
• vue: v-if="...", v-show="...", etc
  • __(js/ts)_expression(= babel(-ts):isExpr)

HTML

• html: <script>...</script>
  • babel / typescript w/ __babelSourceType+__embeddedInHtml
  • No special handling
• html: onclick="..."
  • babel w/ __isHtmlInlineEventHandler+__isInHtmlAttribute
  • Remove last ; if single ExpressionStatement
  • Force ' for StringLiteral (singleQuote: true is not enough) by __isInHtmlAttribute
• Enable for html
  • Blocked by js-in-html

Markdown/MDX

• markdown|mdx: code block
  • inferParser() -> babel / typescript
  • Remove first and last ; if single JSXElement in ExpressionStatement
• mdx: import/export
  • babel
  • Do not support validation with __onHtmlBindingRoot
• mdx: jsx
  • __(js|ts)_expression(= babel(-ts):isExpr)
• Enable for markdown / mdx
  • Blocked by js(-in-(html|vue))-in-markdown

Svelte

• svelte: <script>...</script>
  • typescript / babel-ts
  • No special handling
• svelte: {...}
  • svelteExpressionParser / svelteTSExpressionParser w/ _svelte_asFunction: undefined
  • Extract ExpressionStatement: (${statement}\n)
• svelte: {#snippet ...}
  • svelteExpressionParser / svelteTSExpressionParser w/ _svelte_asFunction: true
  • Extract FunctionDeclaration: function ${statement} {}

Astro

• TODO: Research

NOTE

• to_prettier_doc.rs implementation is not complete
  • There are still some difference pure oxc_formatter result vs <script> in vue result
  • Convert Prettier Doc -> oxc_formatter IR is not enough, need to handle Printer's behaviors
• tsx-in-vue is NOT supported
  • There is no signal to detect TSX or TS when called from Prettier
  • Only options is maybeJSXRe.test(sourceText), but makes all ts-in-vue path slow
• Force single quote for __isInHtmlAttribute cases are not yet implemented
  • Just set QuoteStyle::Single for now
  • Strictly speaking, this is not enough since this options is just a preference
• js-in-angular is out of scope for now
  • May be possible to support __ng_action, __ng_binding and __ng_interpolation
  • But __ng_directive is not a valid JS/TS syntax at all
• options.__embeddedInHtml should be handled for html-in-js-in-html?
  • https://github.com/prettier/prettier/blob/6e85d4a7850f8a23c3c4b0030cc8cf94b5e503f7/src/language-js/embed/html.js#L61
• options.__babelSourceType should be handled for js-in-html?
  • https://github.com/prettier/prettier/blob/6e85d4a7850f8a23c3c4b0030cc8cf94b5e503f7/src/language-js/parse/babel.js#L123