refactor(oxfmt): Split oxfmt-plugin files

apps/oxfmt/src-js/libs/apis.ts

@@ -198,7 +198,7 @@ let oxfmtPluginCache: Plugin;
 async function loadOxfmtPlugin(): Promise<Plugin> {
   if (oxfmtPluginCache) return oxfmtPluginCache;
 
-  oxfmtPluginCache = (await import("./prettier-plugin-oxfmt")) as Plugin;
+  oxfmtPluginCache = (await import("./prettier-plugin-oxfmt/index")) as Plugin;
   return oxfmtPluginCache;
 }
 

apps/oxfmt/src-js/libs/prettier-plugin-oxfmt/index.ts

@@ -0,0 +1,42 @@
+/**
+ * Prettier plugin that uses `oxc_formatter` for (j|t)s-in-xxx part.
+ *
+ * When Prettier formats Vue/HTML (which can embed JS/TS code inside) files,
+ * it calls the `embed()` function for each block.
+ *
+ * By default, it uses the `babel` or `typescript` parser and `estree` printer.
+ * Therefore, by overriding these internally, we can use `oxc_formatter` instead.
+ * e.g. Now it's possible to apply our builtin sort-imports for JS/TS code inside Vue `<script>`.
+ */
+
+import { textToDoc } from "./text-to-doc";
+import type { Parser, Printer, Doc, SupportOptions } from "prettier";
+
+export const options: SupportOptions = {
+  _oxfmtPluginOptionsJson: {
+    category: "JavaScript",
+    type: "string",
+    default: "{}",
+    description: "Bundled JSON string for oxfmt-plugin options",
+  },
+};
+
+const oxfmtParser: Parser<Doc> = {
+  parse: textToDoc,
+  astFormat: "OXFMT",
+  // Not used but required
+  locStart: () => -1,
+  locEnd: () => -1,
+};
+
+export const parsers: Record<string, Parser> = {
+  // Override default JS/TS parsers
+  babel: oxfmtParser,
+  typescript: oxfmtParser,
+};
+
+export const printers: Record<string, Printer<Doc>> = {
+  OXFMT: {
+    print: ({ node }) => node,
+  },
+};

apps/oxfmt/src-js/libs/prettier-plugin-oxfmt/text-to-doc.ts

@@ -0,0 +1,35 @@
+import { doc } from "prettier";
+import { format } from "../../index";
+import type { Parser, Doc } from "prettier";
+
+const { hardline, join } = doc.builders;
+const LINE_BREAK_RE = /\r?\n/;
+
+export const textToDoc: Parser<Doc>["parse"] = async (embeddedSourceText, textToDocOptions) => {
+  // NOTE: For (j|t)s-in-xxx, default `parser` is either `babel` or `typescript`
+  const parser = textToDocOptions.parser as string;
+  // In case of ts-in-md, `filepath` is overridden to distinguish TSX or TS
+  const filepath = textToDocOptions.filepath as string;
+  // We need to infer `SourceType` for `oxc_formatter`
+  const filename =
+    parser === "typescript"
+      ? filepath.endsWith(".tsx")
+        ? "dummy.tsx" // tsx-in-md
+        : "dummy.ts" // ts-in-md / ts-in-xxx
+      : "dummy.jsx"; // Otherwise, always enable JSX for js-in-xxx, it's safe
+
+  // NOTE: Ultimately, this should be `textToDoc()` like Prettier originally does
+  const { code, errors } = await format(
+    filename,
+    embeddedSourceText,
+    // SAFETY: This is generated by Rust side and only available if plugin is used
+    JSON.parse(textToDocOptions._oxfmtPluginOptionsJson as string),
+  );
+
+  if (0 < errors.length) throw new Error(errors[0].message);
+
+  // NOTE: This is required for the parent ((j|t)s-in-xxx) printer
+  // to handle line breaks correctly,
+  // not only for `options.vueIndentScriptAndStyle` but also for basic printing.
+  return join(hardline, code.split(LINE_BREAK_RE));
+};