Lazy load compatible plugins

Author: thecrypticace

src/create-plugin.ts

@@ -1,13 +1,11 @@
-import type { AstPath, Parser, ParserOptions, Printer } from 'prettier'
+import type { Parser, ParserOptions, Plugin, Printer } from 'prettier'
 import { getTailwindConfig } from './config'
 import { createMatcher } from './options'
-import type { loadPlugins } from './plugins'
+import { loadIfExists, maybeResolve } from './resolve'
 import type { TransformOptions } from './transform'
-import type { Customizations, TransformerEnv, TransformerMetadata } from './types'
+import type { TransformerEnv } from './types'
 
-type Base = Awaited<ReturnType<typeof loadPlugins>>
-
-export function createPlugin(base: Base, transforms: TransformOptions<any>[]) {
+export function createPlugin(transforms: TransformOptions<any>[]) {
   // Prettier parsers and printers may be async functions at definition time.
   // They'll be awaited when the plugin is loaded but must also be swapped out
   // with the resolved value before returning as later Prettier internals
@@ -20,9 +18,13 @@ export function createPlugin(base: Base, transforms: TransformOptions<any>[]) {
   for (let opts of transforms) {
     for (let [name, meta] of Object.entries(opts.parsers)) {
       parsers[name] = async () => {
+        let plugin = await loadPlugins(meta.load ?? opts.load ?? [])
+        let original = plugin.parsers?.[name]
+        if (!original) return
+
         parsers[name] = createParser({
-          base,
-          parserFormat: name,
+          name,
+          original,
           opts,
         })
 
@@ -32,9 +34,12 @@ export function createPlugin(base: Base, transforms: TransformOptions<any>[]) {
 
     for (let [name, meta] of Object.entries(opts.printers ?? {})) {
       printers[name] = async () => {
+        let plugin = await loadPlugins(opts.load ?? [])
+        let original = plugin.printers?.[name]
+        if (!original) return
+
         printers[name] = createPrinter({
-          base,
-          name,
+          original,
           opts,
         })
 
@@ -46,29 +51,34 @@ export function createPlugin(base: Base, transforms: TransformOptions<any>[]) {
   return { parsers, printers }
 }
 
-function createParser({
-  //
-  base,
-  parserFormat,
-  opts,
-}: {
-  base: Base
-  parserFormat: string
-  opts: TransformOptions<any>
-}) {
-  let original = base.parsers[parserFormat]
+function createParser({ name, original, opts }: { name: string; original: Parser<any>; opts: TransformOptions<any> }) {
   let parser: Parser<any> = { ...original }
 
-  parser.preprocess = (code: string, options: ParserOptions) => {
-    let original = base.originalParser(parserFormat, options)
+  async function load(options: ParserOptions<any>) {
+    let parser: Parser<any> = { ...original }
+
+    for (let pluginName of opts.compatible ?? []) {
+      let mod = await loadIfExistsESM(pluginName)
+      let plugin = findEnabledPlugin(options, pluginName, mod)
+      if (plugin) Object.assign(parser, plugin.parsers[name])
+    }
+
+    return parser
+  }
+
+  parser.preprocess = async (code: string, options: ParserOptions) => {
+    let parser = await load(options)
 
-    return original.preprocess ? original.preprocess(code, options) : code
+    return parser.preprocess ? await parser.preprocess(code, options) : code
   }
 
-  parser.parse = async (code: string, options: ParserOptions) => {
-    let original = base.originalParser(parserFormat, options)
+  parser.parse = async (code, options) => {
+    let original = await load(options)
 
-    // @ts-ignore: We pass three options in the case of plugins that support Prettier 2 _and_ 3.
+    // @ts-expect-error: `options` is passed twice for compat with older plugins that were written
+    // for Prettier v2 but still work with v3.
+    //
+    // Currently only the Twig plugin requires this.
     let ast = await original.parse(code, options, options)
 
     await transformAst({
@@ -83,20 +93,12 @@ function createParser({
   return parser
 }
 
-function createPrinter({
-  //
-  base,
-  name,
-  opts,
-}: {
-  base: Base
-  name: string
-  opts: TransformOptions<any>
-}): Printer<any> {
-  let original = base.printers[name]
-  let printer = { ...original }
+function createPrinter({ original, opts }: { original: Printer<any>; opts: TransformOptions<any> }) {
+  let printer: Printer<any> = { ...original }
+
   let reprint = opts.reprint
 
+  // Hook into the preprocessing phase to load the config
   if (reprint) {
     printer.print = new Proxy(original.print, {
       apply(target, thisArg, args) {
@@ -120,6 +122,83 @@ function createPrinter({
   return printer
 }
 
+async function loadPlugins<T>(fns: string[]) {
+  let plugin: Plugin<T> = {
+    parsers: Object.create(null),
+    printers: Object.create(null),
+    options: Object.create(null),
+    defaultOptions: Object.create(null),
+    languages: [],
+  }
+
+  for (let moduleName of fns) {
+    try {
+      let loaded = await loadIfExistsESM(moduleName)
+      Object.assign(plugin.parsers!, loaded.parsers ?? {})
+      Object.assign(plugin.printers!, loaded.printers ?? {})
+      Object.assign(plugin.options!, loaded.options ?? {})
+      Object.assign(plugin.defaultOptions!, loaded.defaultOptions ?? {})
+
+      plugin.languages = [...(plugin.languages ?? []), ...(loaded.languages ?? [])]
+    } catch (err) {
+      throw err
+    }
+  }
+
+  return plugin
+}
+
+async function loadIfExistsESM(name: string): Promise<Plugin<any>> {
+  let mod = await loadIfExists<Plugin<any>>(name)
+
+  return (
+    mod ?? {
+      parsers: {},
+      printers: {},
+      languages: [],
+      options: {},
+      defaultOptions: {},
+    }
+  )
+}
+
+function findEnabledPlugin(options: ParserOptions<any>, name: string, mod: any) {
+  let path = maybeResolve(name)
+
+  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 (plugin === name || plugin === path) {
+        return mod
+      }
+
+      continue
+    }
+
+    // options.plugins.*.name == name
+    if (plugin.name === name) {
+      return mod
+    }
+
+    // options.plugins.*.name == path
+    if (plugin.name === path) {
+      return mod
+    }
+
+    // basically options.plugins.* == mod
+    // But that can't work because prettier normalizes plugins which destroys top-level object identity
+    if (plugin.parsers && mod.parsers && plugin.parsers == mod.parsers) {
+      return mod
+    }
+  }
+}
+
 async function transformAst<T = any>({
   ast,
   options,

src/index.ts

@@ -7,18 +7,16 @@ import jsesc from 'jsesc'
 import lineColumn from 'line-column'
 import * as prettierParserAngular from 'prettier/plugins/angular'
 import * as prettierParserBabel from 'prettier/plugins/babel'
+import * as prettierParserCss from 'prettier/plugins/postcss'
 // @ts-ignore
 import * as recast from 'recast'
 import { createPlugin } from './create-plugin.js'
 import type { Matcher } from './options.js'
-import { loadPlugins } from './plugins.js'
 import { sortClasses, sortClassList } from './sorting.js'
 import { defineTransform, type TransformOptions } from './transform.js'
 import type { StringChange, TransformerEnv } from './types'
 import { spliceChangesIntoString, visit, type Path } from './utils.js'
 
-let base = await loadPlugins()
-
 const ESCAPE_SEQUENCE_PATTERN = /\\(['"\\nrtbfv0-7xuU])/g
 
 function tryParseAngularAttribute(value: string, env: TransformerEnv) {
@@ -672,7 +670,7 @@ function transformCss(ast: any, env: TransformerEnv) {
     // Otherwise we let prettier re-parse the params into its custom value AST
     // based on postcss-value parser.
     try {
-      let parser = base.parsers.css
+      let parser = prettierParserCss.parsers.css
 
       let root = parser.parse(`@import ${params};`, {
         // We can't pass env.options directly because css.parse overwrites
@@ -1015,6 +1013,9 @@ type HtmlNode = { type: 'attribute'; name: string; value: string } | { kind: 'at
 let html = defineTransform<HtmlNode>({
   staticAttrs: ['class'],
 
+  load: ['prettier/plugins/html'],
+  compatible: ['prettier-plugin-organize-attributes'],
+
   parsers: {
     html: {},
     lwc: {},
@@ -1034,6 +1035,7 @@ type GlimmerNode =
 
 let glimmer = defineTransform<GlimmerNode>({
   staticAttrs: ['class'],
+  load: ['prettier/plugins/glimmer'],
 
   parsers: {
     glimmer: {},
@@ -1050,6 +1052,9 @@ type CssNode = {
 }
 
 let css = defineTransform<CssNode>({
+  load: ['prettier/plugins/postcss'],
+  compatible: ['prettier-plugin-css-order'],
+
   parsers: {
     css: {},
     scss: {},
@@ -1061,28 +1066,37 @@ let css = defineTransform<CssNode>({
 
 let js = defineTransform<import('@babel/types').Node>({
   staticAttrs: ['class', 'className'],
+  compatible: [
+    // The following plugins must come *before* the jsdoc plugin for it to
+    // function correctly. Additionally `multiline-arrays` usually needs to be
+    // placed before import sorting plugins.
+    //
+    // https://github.com/electrovir/prettier-plugin-multiline-arrays#compatibility
+    'prettier-plugin-multiline-arrays',
+    '@ianvs/prettier-plugin-sort-imports',
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-organize-imports',
+    'prettier-plugin-sort-imports',
+    'prettier-plugin-jsdoc',
+  ],
 
   parsers: {
-    babel: {},
-    'babel-flow': {},
-    'babel-ts': {},
-    __js_expression: {},
-    typescript: {},
-    meriyah: {},
-    acorn: {},
-    flow: {},
-    oxc: {},
-    'oxc-ts': {},
-    hermes: {},
-
-    ...(base.parsers.astroExpressionParser
-      ? {
-          astroExpressionParser: {
-            staticAttrs: ['class'],
-            dynamicAttrs: ['class:list'],
-          },
-        }
-      : {}),
+    babel: { load: ['prettier/plugins/babel'] },
+    'babel-flow': { load: ['prettier/plugins/babel'] },
+    'babel-ts': { load: ['prettier/plugins/babel'] },
+    __js_expression: { load: ['prettier/plugins/babel'] },
+    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'] },
+    astroExpressionParser: {
+      load: ['prettier-plugin-astro'],
+      staticAttrs: ['class'],
+      dynamicAttrs: ['class:list'],
+    },
   },
 
   transform: transformJavaScript,
@@ -1094,6 +1108,7 @@ type SvelteNode = import('svelte/compiler').AST.SvelteNode & {
 
 let svelte = defineTransform<SvelteNode>({
   staticAttrs: ['class'],
+  load: ['prettier-plugin-svelte'],
 
   parsers: {
     svelte: {},
@@ -1140,6 +1155,7 @@ type AstroNode =
 let astro = defineTransform<AstroNode>({
   staticAttrs: ['class', 'className'],
   dynamicAttrs: ['class:list', 'className'],
+  load: ['prettier-plugin-astro'],
 
   parsers: {
     astro: {},
@@ -1152,6 +1168,7 @@ type MarkoNode = import('@marko/compiler').types.Node
 
 let marko = defineTransform<MarkoNode>({
   staticAttrs: ['class'],
+  load: ['prettier-plugin-marko'],
 
   parsers: {
     marko: {},
@@ -1183,6 +1200,7 @@ type TwigNode =
 
 let twig = defineTransform<TwigNode>({
   staticAttrs: ['class'],
+  load: ['@zackad/prettier-plugin-twig'],
 
   parsers: {
     twig: {},
@@ -1198,6 +1216,7 @@ interface PugNode {
 
 let pug = defineTransform<PugNode>({
   staticAttrs: ['class'],
+  load: ['@prettier/plugin-pug'],
 
   parsers: {
     pug: {},
@@ -1216,23 +1235,25 @@ type LiquidNode =
 
 let liquid = defineTransform<LiquidNode>({
   staticAttrs: ['class'],
+  load: ['@shopify/prettier-plugin-liquid'],
 
   parsers: { 'liquid-html': {} },
 
   transform: transformLiquid,
 })
 
-export const { parsers, printers } = createPlugin(base, [
+export const { parsers, printers } = createPlugin([
+  //
   html,
   glimmer,
   css,
   js,
-  ...(base.parsers.svelte ? [svelte] : []),
-  ...(base.parsers.astro ? [astro] : []),
-  ...(base.parsers.marko ? [marko] : []),
-  ...(base.parsers.twig ? [twig] : []),
-  ...(base.parsers.pug ? [pug] : []),
-  ...(base.parsers['liquid-html'] ? [liquid] : []),
+  svelte,
+  astro,
+  marko,
+  twig,
+  pug,
+  liquid,
 ])
 
 export interface PluginOptions {