oxfmt: Resolve prettier dependency at `npx oxfmt`

[leaysgur]

Related: #15210

• apps/oxfmt now depends on @prettier/sync and prettier
• npm/oxfmt does not dependencies field in package.json
• (After published oxfmt@v0.10, )npx oxfmt will fail because these deps are not resolved
• oxlint fixes this issue by bundling @eslint/scope-manager

oxfmt should also follow this strategy somehow.

[leaysgur]

Try 1

Adding:

+  shims: true,
+  noExternal: ['prettier', '@prettier/sync'],

to tsdown.config.ts. But it does not work.

@prettier/sync is the simple code just doing:

"use strict";

const { makeModuleSynchronized } = require("make-synchronized");

function createSynchronizedPrettier({ prettierEntry }) {
  return makeModuleSynchronized(prettierEntry);
}

module.exports = createSynchronizedPrettier({ prettierEntry: "prettier" });
module.exports.createSynchronizedPrettier = createSynchronizedPrettier;

The key is makeModuleSynchronized("module-name"), this seemed to prevent bundling?

Try 2

Use make-synchronized directly like:

+export const formatEmbeddedCode = makeSynchronized(async (tagName, code) => {
+  const prettier = await import("prettier");

But also had no luck. The CLI itself hung and stopped responding.

[leaysgur]

For now, I've just ended up adding dependencies for npm/oxfmt too...

#15261

[fisker]

Try 2

Use make-synchronized directly like:

+export const formatEmbeddedCode = makeSynchronized(async (tagName, code) => {

• const prettier = await import("prettier");
  But also had no luck. The CLI itself hung and stopped responding.

Are you trying to bundle prettier? I think it won't work since in this usage, the function is isolated, it can't read variables outside (not sure what import("prettier") bundled as.)

You can try

export default makeSynchronized(import.mata, async () => {})

or

export const {
  formatEmbeddedCode,
} = makeSynchronized(import.mata, {
  async formatEmbeddedCode() {}
})

[fisker]

Or use two files,

/* a.js for bundler */
export default async () => {}
// or 
export const foo = async () => {}
// whatever you prefer


/* b.js */
const {
  default: defaultExport,
  foo
} = 
// just like `await import()`
makeSynchronized(new URL("url-to-a.js"))

[leaysgur]

Are you trying to bundle prettier?

Yes, thank you — this helps me a lot!

Finally, the bundle itself was successfully created with this change.

Details

diff --git a/apps/oxfmt/package.json b/apps/oxfmt/package.json
index 71ccdec6f..b913d6189 100644
--- a/apps/oxfmt/package.json
+++ b/apps/oxfmt/package.json
@@ -30,8 +30,8 @@
   },
   "description": "Local project to build and publish `npm/oxfmt`. Be sure to sync dependencies!",
   "dependencies": {
-    "prettier": "3.6.2",
-    "@prettier/sync": "0.6.1"
+    "make-synchronized": "^0.8.0",
+    "prettier": "3.6.2"
   },
   "devDependencies": {
     "@types/node": "catalog:",
diff --git a/apps/oxfmt/src-js/cli.ts b/apps/oxfmt/src-js/cli.ts
index 3ed34e50c..9ce327a78 100644
--- a/apps/oxfmt/src-js/cli.ts
+++ b/apps/oxfmt/src-js/cli.ts
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { format } from './bindings.js';
-import { formatEmbeddedCode } from './embedded.js';
+import  formatEmbeddedCode  from './embedded.js';
 
 const args = process.argv.slice(2);
 
diff --git a/apps/oxfmt/src-js/embedded.ts b/apps/oxfmt/src-js/embedded.ts
index 6ad60c5dc..25ff35013 100644
--- a/apps/oxfmt/src-js/embedded.ts
+++ b/apps/oxfmt/src-js/embedded.ts
@@ -1,51 +1,47 @@
-import prettier from '@prettier/sync';
+import { makeSynchronized } from "make-synchronized";
 
-// Map template tag names to Prettier parsers
-const TAG_TO_PARSER: Record<string, string> = {
-  // CSS
-  css: 'css',
-  styled: 'css',
+export default makeSynchronized(
+  import.meta,
+  async (tagName: string, code: string) => {
+    // Map template tag names to Prettier parsers
+    const TAG_TO_PARSER: Record<string, string> = {
+      // CSS
+      css: "css",
+      styled: "css",
 
-  // GraphQL
-  gql: 'graphql',
-  graphql: 'graphql',
+      // GraphQL
+      gql: "graphql",
+      graphql: "graphql",
 
-  // HTML
-  html: 'html',
+      // HTML
+      html: "html",
 
-  // Markdown
-  md: 'markdown',
-  markdown: 'markdown',
-};
+      // Markdown
+      md: "markdown",
+      markdown: "markdown",
+    };
+    const parser = TAG_TO_PARSER[tagName];
 
-/**
- * Format embedded code using Prettier (synchronous).
- * Note: Called from Rust via NAPI ThreadsafeFunction with FnArgs
- * @param tagName - The template tag name (e.g., "css", "gql", "html")
- * @param code - The code to format
- * @returns Formatted code
- */
-export function formatEmbeddedCode(tagName: string, code: string): string {
-  const parser = TAG_TO_PARSER[tagName];
+    if (!parser) {
+      // Unknown tag, return original code
+      return code;
+    }
 
-  if (!parser) {
-    // Unknown tag, return original code
-    return code;
-  }
+    const prettier = await import("prettier");
+    try {
+      const formatted = await prettier.format(code, {
+        parser,
+        printWidth: 80,
+        tabWidth: 2,
+        semi: true,
+        singleQuote: false,
+      });
 
-  try {
-    const formatted = prettier.format(code, {
-      parser,
-      printWidth: 80,
-      tabWidth: 2,
-      semi: true,
-      singleQuote: false,
-    });
-
-    // Remove trailing newline that Prettier adds
-    return formatted.trimEnd();
-  } catch {
-    // If Prettier fails to format, return original code
-    return code;
-  }
-}
+      // Remove trailing newline that Prettier adds
+      return formatted.trimEnd();
+    } catch {
+      // If Prettier fails to format, return original code
+      return code;
+    }
+  },
+);
diff --git a/apps/oxfmt/src-js/index.ts b/apps/oxfmt/src-js/index.ts
index 0d50a4694..217e9affc 100644
--- a/apps/oxfmt/src-js/index.ts
+++ b/apps/oxfmt/src-js/index.ts
@@ -1,2 +1,2 @@
 export * from './bindings.js';
-export { formatEmbeddedCode } from './embedded.js';
+export * from './embedded.js';
diff --git a/apps/oxfmt/tsdown.config.ts b/apps/oxfmt/tsdown.config.ts
index 376ea973c..e1833be5f 100644
--- a/apps/oxfmt/tsdown.config.ts
+++ b/apps/oxfmt/tsdown.config.ts
@@ -9,4 +9,5 @@ export default defineConfig({
   clean: true,
   outDir: 'dist',
   shims: false,
+  noExternal: ['prettier', 'make-synchronized']
 });

But for some reason the synchronized code itself no longer seemed to be called. 😅

[fisker]

export * from './embedded.js';

this? it's a default export now.

[leaysgur]

No, it was like this... Sorry if that's confusing. 😓

//#region src-js/embedded.ts
const S = makeSynchronized(import.meta, async (tagName, code) => {
	console.log("🔥 BUT NOT CALLED");
	const parser = {
		css: "css",
		styled: "css",
		gql: "graphql",
		graphql: "graphql",
		html: "html",
		md: "markdown",
		markdown: "markdown"
	}[tagName];
	if (!parser) return code;
	const prettier = await import("./prettier-B1391Qph.js");
	try {
		return (await prettier.format(code, {
			parser,
			printWidth: 80,
			tabWidth: 2,
			semi: true,
			singleQuote: false
		})).trimEnd();
	} catch {
		return code;
	}
});
var embedded_default = (a,b) => {
	console.log("⭐️ CALLED");
	return S(a,b);
}

//#endregion
export { format as n, embedded_default as t };

[fisker]

You can't rename specifiers..

makeSynchronized need locate original async function, in this case, it will look for default export in this file.

makeSynchronized is doing too many magics.

[fisker]

Don't have the full picture, but you can verify what I posted by changing const S to const {t: S}. Since it's exported as t. sorry, wrong.

You need better understanding how makeSynchronized works

[fisker]

remove makeSynchronized call from embedded.js,

in the entry file

import the async version

export const {formatEmbeddedCode} = makeSynchronized(import.meta.url, {formatEmbeddedCode: asyncVersion})

this should work.