Lazy load plugins in playground (#17119)

website/static/service-worker.js

@@ -1,20 +1,20 @@
-/* global toolbox prettierPackageManifest */
-
 "use strict";
 
-importScripts("lib/package-manifest.js");
 importScripts(
+  "lib/package-manifest.js",
   "https://cdnjs.cloudflare.com/ajax/libs/sw-toolbox/3.6.0/sw-toolbox.js",
 );
 
-const plugins = prettierPackageManifest.builtinPlugins.map(
+const { toolbox, prettierPackageManifest } = self;
+const pluginFiles = prettierPackageManifest.builtinPlugins.map(
   ({ file }) => `lib/${file}`,
 );
 
 toolbox.precache([
   // Scripts
   "lib/standalone.js",
-  ...plugins,
+  "lib/package-manifest.js",
+  ...pluginFiles,
   "playground.js",
   "https://cdnjs.cloudflare.com/ajax/libs/sw-toolbox/3.6.0/sw-toolbox.js",
 

website/static/worker.js

@@ -1,13 +1,49 @@
-/* globals prettier prettierPlugins prettierPackageManifest */
-
 "use strict";
 
-importScripts("lib/package-manifest.js");
-importScripts("lib/standalone.js");
+importScripts("lib/package-manifest.js", "lib/standalone.js");
 
-// TODO[@fisker]: Lazy load plugins
-for (const { file } of prettierPackageManifest.builtinPlugins) {
-  importScripts(`lib/${file}`);
+const { prettier, prettierPackageManifest } = self;
+
+const importedPlugins = new Map();
+function importPlugin(plugin) {
+  if (!importedPlugins.has(plugin)) {
+    importScripts(`lib/${plugin.file}`);
+
+    const module = globalThis.prettierPlugins[plugin.name];
+
+    if (!module) {
+      throw new Error(`Load plugin '${plugin.file}' failed.`);
+    }
+
+    importedPlugins.set(plugin, module);
+  }
+
+  return importedPlugins.get(plugin);
+}
+
+function createPlugin(pluginManifest) {
+  const { languages, options, defaultOptions } = pluginManifest;
+  const [parsers, printers] = ["parsers", "printers"].map((property) =>
+    Array.isArray(pluginManifest[property])
+      ? Object.defineProperties(
+          Object.create(null),
+          Object.fromEntries(
+            pluginManifest[property].map((parserName) => [
+              parserName,
+              {
+                configurable: true,
+                enumerable: true,
+                get() {
+                  return importPlugin(pluginManifest)[property][parserName];
+                },
+              },
+            ]),
+          ),
+        )
+      : undefined,
+  );
+
+  return { languages, options, defaultOptions, parsers, printers };
 }
 
 const docExplorerPlugin = {
@@ -29,7 +65,12 @@ const docExplorerPlugin = {
   languages: [{ name: "doc-explorer", parsers: ["doc-explorer"] }],
 };
 
-const plugins = [...Object.values(prettierPlugins), docExplorerPlugin];
+const plugins = [
+  ...prettierPackageManifest.builtinPlugins.map((plugin) =>
+    createPlugin(plugin),
+  ),
+  docExplorerPlugin,
+];
 
 self.onmessage = async function (event) {
   self.postMessage({