feat(stories) implement type documentation loader (#84166)

This PR adds a webpack loader that extracts type information which will
allow us to add automatic component documentation.

The reason we have to use a custom defined loader is because adding this
to all .ts imports absolutely cripples the dev experience as all modules
are evaluated, not just the ones we have stories for, which balloons dev
startup times to a point where it becomes unusable. An alternative
approach is to use non ts based inference, which is what storybook does,
however given the definition of some of our types like `ButtonProps |
ButtonPropsWithAriaLabel` the results are pretty poor.

I will follow up with a PR to flag this loader and implement the actual
rendering of the type documentation

Author: JonasBa

package.json

@@ -147,6 +147,7 @@
     "query-string": "7.0.1",
     "react": "18.2.0",
     "react-date-range": "^1.4.0",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "18.2.0",
     "react-grid-layout": "^1.3.4",
     "react-lazyload": "^3.2.1",

static/app/types/type-loader.d.ts

@@ -0,0 +1,4 @@
+declare module '!!type-loader!*' {
+  const content: Record<string, import('react-docgen-typescript').ComponentDoc>;
+  export default content;
+}

static/app/views/stories/type-loader.ts

@@ -0,0 +1,20 @@
+import * as docgen from 'react-docgen-typescript';
+import type {LoaderContext} from 'webpack';
+
+/**
+ * Extracts documentation from the modules by running the TS compiler and serializing the types
+ *
+ * @param {LoaderContext<any>} this loader context
+ * @param {string} source source file as string
+ * @returns {docgen.ComponentDoc}
+ */
+export default function typeloader(this: LoaderContext<any>, _source: string) {
+  const callback = this.async();
+  const entries = docgen.parse(this.resourcePath, {});
+
+  if (!entries) {
+    return callback(null, 'export default {}');
+  }
+
+  return callback(null, `export default ${JSON.stringify(entries)}`);
+}

webpack.config.ts

@@ -417,6 +417,12 @@ const appConfig: webpack.Configuration = {
     }),
   ],
 
+  resolveLoader: {
+    alias: {
+      'type-loader': path.resolve(__dirname, 'static/app/views/stories/type-loader.ts'),
+    },
+  },
+
   resolve: {
     alias: {
       sentry: path.join(staticPrefix, 'app'),

yarn.lock

@@ -10399,6 +10399,11 @@ react-date-range@^1.4.0:
     react-list "^0.8.13"
     shallow-equal "^1.2.1"
 
+react-docgen-typescript@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
+  integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"