Docs: Raw support for mjs, jsx, and tsx files

code/addons/docs/template/stories/stories-mdx/RawSource.jsx

@@ -0,0 +1,7 @@
+import React, { Fragment } from 'react';
+
+export const MY_VALUE_I_WANT_TO_SHOW_IN_STORY = 'Hello World!';
+
+export const RawSource = () => {
+  return <Fragment>{MY_VALUE_I_WANT_TO_SHOW_IN_STORY}</Fragment>;
+};

code/addons/docs/template/stories/stories-mdx/raw-source.non-stories.js

@@ -0,0 +1,15 @@
+import { RawSource as RawSourceComponent } from './RawSource.jsx';
+// eslint-disable-next-line import/no-unresolved
+import RawSourceCode from './RawSource.jsx?raw';
+
+export const RawSource = RawSourceComponent.bind({});
+
+RawSource.parameters = {
+  docs: {
+    source: {
+      code: RawSourceCode,
+      language: 'tsx',
+      type: 'code',
+    },
+  },
+};

code/addons/docs/template/stories/stories-mdx/raw-source.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import * as stories from './raw-source.non-stories';
+import { RawSource } from './RawSource';
+
+<Meta component={RawSource} />
+
+<Canvas>
+  <Story story={stories.RawSource} />
+</Canvas>

code/builders/builder-webpack5/src/preview/loaders.ts

@@ -20,6 +20,7 @@ export const createBabelLoader = async (
         options: babelOptions,
       },
     ],
+    resourceQuery: { not: [/raw/] },
     include: [getProjectRoot()],
     exclude: [/node_modules/, ...excludes],
   };