Lazy load Prettier in Vue and Angular docs

The initial size of addon-controlsmdx--rounded in vue-kitchen-sink went to 1.8/7.54MB from 2.08/8.5MB (gzipped/original).

If docs.source.type is set to `CODE`, prettier will never load at all.

addons/docs/src/frameworks/angular/sourceDecorator.ts

@@ -2,8 +2,6 @@ import { addons, useEffect } from '@storybook/addons';
 import { PartialStoryFn } from '@storybook/csf';
 import { StoryContext, AngularFramework } from '@storybook/angular';
 import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
-import prettierHtml from 'prettier/parser-html';
-import prettier from 'prettier/standalone';
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 
 export const skipSourceRender = (context: StoryContext) => {
@@ -18,16 +16,20 @@ export const skipSourceRender = (context: StoryContext) => {
   return sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 
-const prettyUp = (source: string) => {
-  return prettier.format(source, {
-    parser: 'angular',
-    plugins: [prettierHtml],
-    htmlWhitespaceSensitivity: 'ignore',
-  });
+const makePrettyUp = async () => {
+  const prettierHtml = await import('prettier/parser-html');
+  const prettier = await import('prettier/standalone');
+  return (source: string) => {
+    return prettier.format(source, {
+      parser: 'angular',
+      plugins: [prettierHtml],
+      htmlWhitespaceSensitivity: 'ignore',
+    });
+  };
 };
 
 /**
- * Svelte source decorator.
+ * Angular source decorator.
  * @param storyFn Fn
  * @param context  StoryContext
  */
@@ -45,21 +47,27 @@ export const sourceDecorator = (
   const { component, argTypes } = context;
 
   let toEmit: string;
+  const prettyUpPromise = makePrettyUp();
+
   useEffect(() => {
-    if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
+    prettyUpPromise.then((prettyUp) => {
+      if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
+    });
   });
 
-  if (component && !userDefinedTemplate) {
-    const source = computesTemplateSourceFromComponent(component, props, argTypes);
+  prettyUpPromise.then((prettyUp) => {
+    if (component && !userDefinedTemplate) {
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
 
-    // We might have a story with a Directive or Service defined as the component
-    // In these cases there might exist a template, even if we aren't able to create source from component
-    if (source || template) {
-      toEmit = prettyUp(source || template);
+      // We might have a story with a Directive or Service defined as the component
+      // In these cases there might exist a template, even if we aren't able to create source from component
+      if (source || template) {
+        toEmit = prettyUp(source || template);
+      }
+    } else if (template) {
+      toEmit = prettyUp(template);
     }
-  } else if (template) {
-    toEmit = prettyUp(template);
-  }
+  });
 
   return story;
 };

addons/docs/src/frameworks/vue/sourceDecorator.ts

@@ -3,8 +3,6 @@
 import { StoryContext } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
-import prettier from 'prettier/standalone';
-import prettierHtml from 'prettier/parser-html';
 import type Vue from 'vue';
 import { VueFramework } from '@storybook/vue';
 
@@ -54,17 +52,24 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework
 
         const code = vnodeToString(storyNode._vnode);
 
-        channel.emit(
-          SNIPPET_RENDERED,
-          (context || {}).id,
-          prettier.format(`<template>${code}</template>`, {
-            parser: 'vue',
-            plugins: [prettierHtml],
-            // Because the parsed vnode missing spaces right before/after the surround tag,
-            // we always get weird wrapped code without this option.
-            htmlWhitespaceSensitivity: 'ignore',
-          })
-        );
+        const emitFormattedTemplate = async () => {
+          const prettier = await import('prettier/standalone');
+          const prettierHtml = await import('prettier/parser-html');
+
+          channel.emit(
+            SNIPPET_RENDERED,
+            (context || {}).id,
+            prettier.format(`<template>${code}</template>`, {
+              parser: 'vue',
+              plugins: [prettierHtml],
+              // Because the parsed vnode missing spaces right before/after the surround tag,
+              // we always get weird wrapped code without this option.
+              htmlWhitespaceSensitivity: 'ignore',
+            })
+          );
+        };
+
+        emitFormattedTemplate();
       } catch (e) {
         logger.warn(`Failed to generate dynamic story source: ${e}`);
       }

examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
 import MyButton from './Button.vue';
 import InfoButton from './components/InfoButton.vue';
 
@@ -35,6 +35,8 @@ Controls can also be defined and used in MDX stories.
   </Story>
 </Canvas>
 
+<Source story="Rounded" />
+
 <ArgsTable story="Rounded" />
 
 ## Square