Bundle printers in plugins (#14354)

scripts/build-website.mjs

@@ -50,10 +50,12 @@ async function buildPrettier() {
 }
 
 async function buildPlaygroundFiles() {
-  const patterns = IS_PULL_REQUEST
-    ? ["standalone.js", "plugins/*.js"]
-    : // TODO: Remove this after we release v3
-      ["standalone.js", "parser-*.js"];
+  const patterns = [
+    "standalone.js",
+    "plugins/*.js",
+    // TODO: Remove this after we release v3
+    "parser-*.js",
+  ];
 
   const files = await fastGlob(patterns, {
     cwd: PRETTIER_DIR,

scripts/build/build-javascript-module.js

@@ -175,13 +175,7 @@ function getEsbuildOptions({ file, files, shouldCollectLicenses, cliOptions }) {
 
     // Replace parser getters with `undefined`
     for (const file of [
-      "src/language-css/parsers.js",
-      "src/language-graphql/parsers.js",
-      "src/language-html/parsers.js",
-      "src/language-handlebars/parsers.js",
       "src/language-js/parse/parsers.js",
-      "src/language-markdown/parsers.js",
-      "src/language-yaml/parsers.js",
       // This module requires file access, should not include in universal bundle
       "src/utils/get-interpreter.js",
     ]) {

scripts/build/config.mjs

@@ -267,7 +267,8 @@ const pluginFiles = [
     ],
   },
   {
-    input: "src/language-css/parser-postcss.js",
+    input: "src/language-css/index.js",
+    outputBaseName: "postcss",
     replaceModule: [
       // The following two replacements prevent load `source-map` module
       {
@@ -307,9 +308,9 @@ const pluginFiles = [
       },
     ],
   },
-  "src/language-graphql/parser-graphql.js",
+  "src/language-graphql/index.js",
   {
-    input: "src/language-markdown/parser-markdown.js",
+    input: "src/language-markdown/index.js",
     replaceModule: [
       {
         module: getPackageFile("parse-entities/decode-entity.browser.js"),
@@ -318,7 +319,8 @@ const pluginFiles = [
     ],
   },
   {
-    input: "src/language-handlebars/parser-glimmer.js",
+    input: "src/language-handlebars/index.js",
+    outputBaseName: "glimmer",
     replaceModule: [
       // See comment in `src/language-handlebars/parser-glimmer.js` file
       {
@@ -343,8 +345,8 @@ const pluginFiles = [
       },
     ],
   },
-  "src/language-html/parser-html.js",
-  "src/language-yaml/parser-yaml.js",
+  "src/language-html/index.js",
+  "src/language-yaml/index.js",
 ].map((file) => {
   if (typeof file === "string") {
     file = { input: file };
@@ -352,8 +354,9 @@ const pluginFiles = [
 
   let { input, umdPropertyName, outputBaseName, ...buildOptions } = file;
 
-  outputBaseName ??= input.match(
-    /(?:parser-|parse\/)(?<outputBaseName>.*?)\.js$/
+  outputBaseName ??= (
+    input.match(/\/(?:parser-|parse\/)(?<outputBaseName>.*?)\.js$/) ??
+    input.match(/\/language-(?<outputBaseName>.*?)\/index\.js$/)
   ).groups.outputBaseName;
 
   const umdVariableName = `prettierPlugins.${

src/standalone.js

@@ -1,8 +1,9 @@
 import * as core from "./main/core.js";
 import { getSupportInfo as getSupportInfoWithoutPlugins } from "./main/support.js";
-import * as languages from "./languages.js";
+import * as prettierPluginJs from "./language-js/index.js";
+import * as prettierPluginJson from "./language-json/index.js";
 
-const builtinPlugins = Object.values(languages);
+const builtinPlugins = [prettierPluginJs, prettierPluginJson];
 
 function withPlugins(
   fn,

src/utils/create-parsers.js

@@ -1,21 +1,24 @@
-const createParsers =
-  process.env.PRETTIER_TARGET === "universal"
-    ? () => {}
-    : function (modules) {
-        const parsers = Object.create(null);
+function createParsers(modules) {
+  /* c8 ignore start */
+  if (!modules) {
+    return;
+  }
+  /* c8 ignore end */
 
-        for (const { importPlugin, parserNames } of modules) {
-          for (const parserName of parserNames) {
-            parsers[parserName] = async () => {
-              const {
-                default: { parsers: pluginParsers },
-              } = await importPlugin();
-              return Object.assign(parsers, pluginParsers)[parserName];
-            };
-          }
-        }
+  const parsers = Object.create(null);
 
-        return parsers;
+  for (const { importPlugin, parserNames } of modules) {
+    for (const parserName of parserNames) {
+      parsers[parserName] = async () => {
+        const {
+          default: { parsers: pluginParsers },
+        } = await importPlugin();
+        return Object.assign(parsers, pluginParsers)[parserName];
       };
+    }
+  }
+
+  return parsers;
+}
 
 export default createParsers;

tests/integration/__tests__/bundle.js

@@ -48,7 +48,10 @@ describe("standalone", () => {
     esmPlugins = await Promise.all(
       fastGlob
         .sync(["plugins/*.mjs"], { cwd: distDirectory, absolute: true })
-        .map(async (file) => (await importModule(file)).default)
+        .map(async (file) => {
+          const plugin = await importModule(file);
+          return plugin.default ?? plugin;
+        })
     );
   });
 

website/static/worker.js

@@ -2,29 +2,12 @@
 
 "use strict";
 
-const imported = Object.create(null);
-function importScriptOnce(url) {
-  if (!imported[url]) {
-    imported[url] = true;
-    importScripts(url);
-  }
-}
-
 importScripts("lib/parsers-location.js");
 importScripts("lib/standalone.js");
 
-// this is required to only load parsers when we need them
-const parsers = Object.create(null);
-for (const [parser, file] of Object.entries(parsersLocation)) {
-  Object.defineProperty(parsers, parser, {
-    get() {
-      const url = `lib/${file}`;
-      importScriptOnce(url);
-      return Object.values(prettierPlugins).find((plugin) =>
-        Object.hasOwn(plugin.parsers, parser)
-      ).parsers[parser];
-    },
-  });
+// TODO[@fisker]: Lazy load plugins
+for (const file of new Set(Object.values(parsersLocation))) {
+  importScripts(`lib/${file}`);
 }
 
 const docExplorerPlugin = {
@@ -46,6 +29,8 @@ const docExplorerPlugin = {
   languages: [{ name: "doc-explorer", parsers: ["doc-explorer"] }],
 };
 
+const plugins = [...Object.values(prettierPlugins), docExplorerPlugin];
+
 self.onmessage = async function (event) {
   self.postMessage({
     uid: event.data.uid,
@@ -78,9 +63,7 @@ function handleMessage(message) {
 }
 
 async function handleMetaMessage() {
-  const supportInfo = await prettier.getSupportInfo({
-    plugins: [docExplorerPlugin],
-  });
+  const supportInfo = await prettier.getSupportInfo({ plugins });
 
   return {
     type: "meta",
@@ -90,7 +73,6 @@ async function handleMetaMessage() {
 }
 
 async function handleFormatMessage(message) {
-  const plugins = [{ parsers }, docExplorerPlugin];
   const options = { ...message.options, plugins };
 
   delete options.ast;