Use explicit import() expressions in plugin load arrays for bundler compatibility (#450)

Author: Dunqing

knip.json

@@ -5,6 +5,7 @@
   "ignore": ["src/**/*.d.ts", "tests/fixtures/**"],
   "ignoreDependencies": [
     "@ianvs/prettier-plugin-sort-imports",
+    "@prettier/plugin-oxc",
     "@prettier/plugin-hermes",
     "@prettier/plugin-pug",
     "@shopify/prettier-plugin-liquid",

src/create-plugin.ts

@@ -1,10 +1,10 @@
+import { isAbsolute } from 'path'
 import type { Parser, ParserOptions, Plugin, Printer } from 'prettier'
 import { getTailwindConfig } from './config'
 import { createMatcher } from './options'
 import { loadIfExists, maybeResolve } from './resolve'
-import type { TransformOptions } from './transform'
+import type { PluginLoad, TransformOptions } from './transform'
 import type { TransformerEnv } from './types'
-import { isAbsolute } from 'path'
 
 export function createPlugin(transforms: TransformOptions<any>[]) {
   // Prettier parsers and printers may be async functions at definition time.
@@ -142,8 +142,6 @@ function createPrinter({
   return printer
 }
 
-type PluginLoad = string | Plugin<any>
-
 async function loadPlugins<T>(fns: PluginLoad[]) {
   let plugin: Plugin<T> = {
     parsers: Object.create(null),
@@ -153,8 +151,8 @@ async function loadPlugins<T>(fns: PluginLoad[]) {
     languages: [],
   }
 
-  for (let moduleName of fns) {
-    let loaded = typeof moduleName === 'string' ? await loadIfExistsESM(moduleName) : moduleName
+  for (let source of fns) {
+    let loaded = await loadPlugin(source)
     Object.assign(plugin.parsers!, loaded.parsers ?? {})
     Object.assign(plugin.printers!, loaded.printers ?? {})
     Object.assign(plugin.options!, loaded.options ?? {})
@@ -166,39 +164,50 @@ async function loadPlugins<T>(fns: PluginLoad[]) {
   return plugin
 }
 
-async function loadIfExistsESM(name: string): Promise<Plugin<any>> {
-  let mod = await loadIfExists<Plugin<any>>(name)
+const EMPTY_PLUGIN: Plugin<any> = {
+  parsers: {},
+  printers: {},
+  languages: [],
+  options: {},
+  defaultOptions: {},
+}
 
-  return (
-    mod ?? {
-      parsers: {},
-      printers: {},
-      languages: [],
-      options: {},
-      defaultOptions: {},
-    }
-  )
+async function loadPlugin(source: PluginLoad): Promise<Plugin<any>> {
+  if ('importer' in source && typeof source.importer === 'function') {
+    return normalizePlugin(await source.importer())
+  }
+
+  return source
 }
 
-function findEnabledPlugin(options: ParserOptions<any>, name: string) {
+function normalizePlugin(source: unknown): Plugin<any> {
+  if (source === null || typeof source !== 'object') return EMPTY_PLUGIN
+  let maybeModule = source as { default?: unknown }
+  let plugin = maybeModule.default
+  return (plugin && typeof plugin === 'object' ? plugin : source) as Plugin<any>
+}
 
+function findEnabledPlugin(options: ParserOptions<any>, name: string) {
   for (let plugin of options.plugins) {
     if (plugin instanceof URL) {
       if (plugin.protocol !== 'file:') continue
       if (plugin.hostname !== '') continue
 
       plugin = plugin.pathname
-    } if (typeof plugin !== 'string') {
+    }
+
+    if (typeof plugin !== 'string') {
       if (!plugin.name) {
         continue
       }
       plugin = plugin.name
     }
 
-
-    if (plugin === name || (isAbsolute(plugin) && plugin.includes(name) && maybeResolve(name) === plugin)) {
-      return loadIfExistsESM(name)
-
+    if (
+      plugin === name ||
+      (isAbsolute(plugin) && plugin.includes(name) && maybeResolve(name) === plugin)
+    ) {
+      return loadIfExists<Plugin<any>>(name)
     }
   }
 }

src/index.ts

@@ -106,7 +106,11 @@ function transformDynamicJsAttribute(attr: any, env: TransformerEnv) {
     )
   }
 
-  function addChange(start: number | null | undefined, end: number | null | undefined, after: string) {
+  function addChange(
+    start: number | null | undefined,
+    end: number | null | undefined,
+    after: string,
+  ) {
     if (start == null || end == null) return
 
     let offsetStart = start - expressionPrefix.length
@@ -1038,7 +1042,7 @@ type HtmlNode =
 let html = defineTransform<HtmlNode>({
   staticAttrs: ['class'],
 
-  load: ['prettier/plugins/html'],
+  load: [{ name: 'prettier/plugins/html', importer: () => import('prettier/plugins/html') }],
   compatible: ['prettier-plugin-organize-attributes'],
 
   parsers: {
@@ -1060,7 +1064,7 @@ type GlimmerNode =
 
 let glimmer = defineTransform<GlimmerNode>({
   staticAttrs: ['class'],
-  load: ['prettier/plugins/glimmer'],
+  load: [{ name: 'prettier/plugins/glimmer', importer: () => import('prettier/plugins/glimmer') }],
 
   parsers: {
     glimmer: {},
@@ -1110,15 +1114,46 @@ let js = defineTransform<import('@babel/types').Node>({
     'babel-flow': { load: [prettierParserBabel] },
     'babel-ts': { load: [prettierParserBabel] },
     __js_expression: { load: [prettierParserBabel] },
-    typescript: { load: ['prettier/plugins/typescript'] },
-    meriyah: { load: ['prettier/plugins/meriyah'] },
-    acorn: { load: ['prettier/plugins/acorn'] },
-    flow: { load: ['prettier/plugins/flow'] },
-    oxc: { load: ['@prettier/plugin-oxc'] },
-    'oxc-ts': { load: ['@prettier/plugin-oxc'] },
-    hermes: { load: ['@prettier/plugin-hermes'] },
+    typescript: {
+      load: [
+        {
+          name: 'prettier/plugins/typescript',
+          importer: () => import('prettier/plugins/typescript'),
+        },
+      ],
+    },
+    meriyah: {
+      load: [
+        { name: 'prettier/plugins/meriyah', importer: () => import('prettier/plugins/meriyah') },
+      ],
+    },
+    acorn: {
+      load: [{ name: 'prettier/plugins/acorn', importer: () => import('prettier/plugins/acorn') }],
+    },
+    flow: {
+      load: [{ name: 'prettier/plugins/flow', importer: () => import('prettier/plugins/flow') }],
+    },
+    oxc: {
+      load: [{ name: '@prettier/plugin-oxc', importer: () => import('@prettier/plugin-oxc') }],
+    },
+    'oxc-ts': {
+      load: [{ name: '@prettier/plugin-oxc', importer: () => import('@prettier/plugin-oxc') }],
+    },
+    hermes: {
+      load: [
+        { name: '@prettier/plugin-hermes', importer: () => import('@prettier/plugin-hermes') },
+      ],
+    },
     astroExpressionParser: {
-      load: ['prettier-plugin-astro'],
+      load: [
+        {
+          name: 'prettier-plugin-astro',
+          importer: () => {
+            // @ts-expect-error - This plugin doesn't have types
+            return import('prettier-plugin-astro')
+          },
+        },
+      ],
       staticAttrs: ['class'],
       dynamicAttrs: ['class:list'],
     },
@@ -1133,7 +1168,7 @@ type SvelteNode = import('svelte/compiler').AST.SvelteNode & {
 
 let svelte = defineTransform<SvelteNode>({
   staticAttrs: ['class'],
-  load: ['prettier-plugin-svelte'],
+  load: [{ name: 'prettier-plugin-svelte', importer: () => import('prettier-plugin-svelte') }],
 
   parsers: {
     svelte: {},
@@ -1179,7 +1214,15 @@ type AstroNode =
 let astro = defineTransform<AstroNode>({
   staticAttrs: ['class', 'className'],
   dynamicAttrs: ['class:list', 'className'],
-  load: ['prettier-plugin-astro'],
+  load: [
+    {
+      name: 'prettier-plugin-astro',
+      importer: () => {
+        // @ts-expect-error - This plugin doesn't have types
+        return import('prettier-plugin-astro')
+      },
+    },
+  ],
 
   parsers: {
     astro: {},
@@ -1192,7 +1235,7 @@ type MarkoNode = import('@marko/compiler').types.Node
 
 let marko = defineTransform<MarkoNode>({
   staticAttrs: ['class'],
-  load: ['prettier-plugin-marko'],
+  load: [{ name: 'prettier-plugin-marko', importer: () => import('prettier-plugin-marko') }],
 
   parsers: {
     marko: {},
@@ -1224,7 +1267,15 @@ type TwigNode =
 
 let twig = defineTransform<TwigNode>({
   staticAttrs: ['class'],
-  load: ['@zackad/prettier-plugin-twig'],
+  load: [
+    {
+      name: '@zackad/prettier-plugin-twig',
+      importer: () => {
+        // @ts-expect-error - This plugin doesn't have types
+        return import('@zackad/prettier-plugin-twig')
+      },
+    },
+  ],
 
   parsers: {
     twig: {},
@@ -1240,7 +1291,7 @@ interface PugNode {
 
 let pug = defineTransform<PugNode>({
   staticAttrs: ['class'],
-  load: ['@prettier/plugin-pug'],
+  load: [{ name: '@prettier/plugin-pug', importer: () => import('@prettier/plugin-pug') }],
 
   parsers: {
     pug: {},
@@ -1259,7 +1310,12 @@ type LiquidNode =
 
 let liquid = defineTransform<LiquidNode>({
   staticAttrs: ['class'],
-  load: ['@shopify/prettier-plugin-liquid'],
+  load: [
+    {
+      name: '@shopify/prettier-plugin-liquid',
+      importer: () => import('@shopify/prettier-plugin-liquid'),
+    },
+  ],
 
   parsers: { 'liquid-html': {} },
 

src/transform.ts

@@ -5,6 +5,13 @@ export function defineTransform<T>(opts: TransformOptions<T>) {
   return opts
 }
 
+export interface LazyPluginLoad {
+  name: string
+  importer: () => Promise<unknown>
+}
+
+export type PluginLoad = LazyPluginLoad | Plugin<any>
+
 export interface TransformOptions<T> {
   /**
    * Static attributes that are supported by default
@@ -19,7 +26,7 @@ export interface TransformOptions<T> {
   /**
    * Load the given plugins for the parsers and printers
    */
-  load?: Array<string | Plugin<any>>
+  load?: PluginLoad[]
 
   /**
    * A list of compatible, third-party plugins for this transformation step
@@ -39,7 +46,7 @@ export interface TransformOptions<T> {
       /**
        * Load the given plugins for the parsers and printers
        */
-      load?: Array<string | Plugin<any>>
+      load?: PluginLoad[]
 
       /**
        * Static attributes that are supported by default