feat(module): devtools integration (#2196)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/plugins/prettier.ts

@@ -43,27 +43,25 @@ function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   }
 }
 
-export default defineNuxtPlugin({
-  async setup() {
-    let prettier: SimplePrettier
-    if (import.meta.server) {
-      const prettierModule = await import('prettier')
-      prettier = {
-        format(source, options = {}) {
-          return prettierModule.format(source, defu(options, {
-            parser: 'markdown'
-          }))
-        }
+export default defineNuxtPlugin(async () => {
+  let prettier: SimplePrettier
+  if (import.meta.server) {
+    const prettierModule = await import('prettier')
+    prettier = {
+      format(source, options = {}) {
+        return prettierModule.format(source, defu(options, {
+          parser: 'markdown'
+        }))
       }
-    } else {
-      const worker = new PrettierWorker()
-      prettier = createPrettierWorkerApi(worker)
     }
+  } else {
+    const worker = new PrettierWorker()
+    prettier = createPrettierWorkerApi(worker)
+  }
 
-    return {
-      provide: {
-        prettier
-      }
+  return {
+    provide: {
+      prettier
     }
   }
 })

docs/app/workers/prettier.js

@@ -1,11 +1,4 @@
 /* eslint-disable no-undef */
-import('https://unpkg.com/prettier@3.3.3/standalone.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/babel.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/estree.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/html.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/markdown.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/typescript.js')
-
 self.onmessage = async function (event) {
   self.postMessage({
     uid: event.data.uid,
@@ -21,8 +14,18 @@ function handleMessage(message) {
 }
 
 async function handleFormatMessage(message) {
-  const { options, source } = message
+  if (!globalThis.prettier) {
+    await Promise.all([
+      import('https://unpkg.com/prettier@3.3.3/standalone.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/babel.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/estree.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/html.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/markdown.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/typescript.js')
+    ])
+  }
 
+  const { options, source } = message
   const formatted = await prettier.format(source, {
     parser: 'markdown',
     plugins: prettierPlugins,