Merge pull request #11936 from blake-newman/patch-1

Vue: Add support for tsx
storybookjs · Jul 19, 2021 · 1932d62 · 1932d62
2 parents 67ab465 + 618fc1c
commit 1932d62
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/addons/docs/src/frameworks/react/jsxDecorator.tsx b/addons/docs/src/frameworks/react/jsxDecorator.tsx
@@ -118,11 +118,11 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
 
     if (string.indexOf('&quot;') > -1) {
       const matches = string.match(/\S+=\\"([^"]*)\\"/g);
-        if (matches) {
-          matches.forEach((match) => {
-            string = string.replace(match, match.replace(/&quot;/g, "'"));
-          });
-        }
+      if (matches) {
+        matches.forEach((match) => {
+          string = string.replace(match, match.replace(/&quot;/g, "'"));
+        });
+      }
     }
 
     return string;

diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts
@@ -14,7 +14,7 @@ export async function webpack(config: Configuration, { presets }: Options) {
     options: {},
   });
   config.module.rules.push({
-    test: /\.tsx?$/,
+    test: /\.ts$/,
     use: [
       {
         loader: require.resolve('ts-loader'),
@@ -25,6 +25,18 @@ export async function webpack(config: Configuration, { presets }: Options) {
       },
     ],
   });
+  config.module.rules.push({
+    test: /\.tsx$/,
+    use: [
+      {
+        loader: require.resolve('ts-loader'),
+        options: {
+          transpileOnly: true,
+          appendTsxSuffixTo: [/\.vue$/],
+        },
+      },
+    ],
+  });
 
   config.resolve.extensions.push('.vue');
   config.resolve.alias = { ...config.resolve.alias, vue$: require.resolve('vue/dist/vue.esm.js') };

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
@@ -81,7 +81,7 @@ const SwatchColors = styled.div(({ theme }) => ({
   overflow: 'hidden',
   backgroundColor: 'white',
   backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
-  backgroundClip: 'padding-box'
+  backgroundClip: 'padding-box',
 }));
 
 const SwatchSpecimen = styled.div({