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.stories.js

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

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],
   };