Preact typescript pragma fix

code/examples/preact-kitchen-sink/.eslintrc.js

@@ -2,6 +2,11 @@ module.exports = {
   settings: {
     react: {
       pragma: 'h',
+      pragmaFrag: 'Fragment',
     },
   },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+  },
 };

code/examples/preact-kitchen-sink/.storybook/main.ts

@@ -18,7 +18,7 @@ const mainConfig: StorybookConfig = {
   webpackFinal: (config) => {
     const rules = config.module?.rules || [];
     rules.push({
-      test: [/\.stories\.js$/],
+      test: [/\.stories\.(js|ts|jsx|tsx)$/],
       use: [require.resolve('@storybook/source-loader')],
       include: [path.resolve(__dirname, '../src')],
       enforce: 'pre',

code/examples/preact-kitchen-sink/src/Button.js

@@ -1,11 +1,7 @@
-/** @jsx h */
-/* eslint-disable react/prop-types */
-
-import { h } from 'preact';
-
 /**
  * The button component will render a clickable button
  */
+
 const Button = ({ children, href, ...props }) => {
   const TagName = href ? 'a' : 'button';
 

code/examples/preact-kitchen-sink/src/React.js

@@ -1,4 +1,3 @@
-/** @jsx React.createElement */
 import React from 'react';
 import PropTypes from 'prop-types';
 

code/examples/preact-kitchen-sink/src/Welcome.js

@@ -1,7 +1,3 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
 const Main = (props) => (
   <article
     {...props}
@@ -14,7 +10,6 @@ const Main = (props) => (
   />
 );
 
-// eslint-disable-next-line react/prop-types
 const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
 
 const Note = (props) => (
@@ -41,7 +36,6 @@ const InlineCode = (props) => (
   />
 );
 
-// eslint-disable-next-line react/prop-types
 const Link = ({ children, href, ...props }) => (
   <a
     href={href}
@@ -57,7 +51,6 @@ const Link = ({ children, href, ...props }) => (
   </a>
 );
 
-// eslint-disable-next-line react/prop-types
 const NavButton = ({ children, ...props }) => (
   <button
     {...props}
@@ -80,7 +73,6 @@ const NavButton = ({ children, ...props }) => (
   </button>
 );
 
-/* eslint-disable-next-line react/prop-types */
 const Welcome = ({ showApp }) => (
   <Main>
     <Title>Welcome to storybook for Preact</Title>

code/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js

@@ -1,8 +1,4 @@
-/** @jsx h */
-
-import { h } from 'preact';
 import { useState } from 'preact/hooks';
-
 import { action, actions } from '@storybook/addon-actions';
 import Button from '../Button';
 

code/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -1,7 +1,3 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
 import Button from '../Button';
 
 export default {

code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js

@@ -1,9 +1,4 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
 import { linkTo } from '@storybook/addon-links';
-
 import Button from '../Button';
 
 export default {

code/examples/preact-kitchen-sink/src/stories/button.stories.js

@@ -1,8 +1,4 @@
-/** @jsx h */
-
-import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-
 import Button from '../Button';
 
 export default {

code/examples/preact-kitchen-sink/src/stories/react-compat.stories.js

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import { ReactFunctionalComponent, ReactClassComponent } from '../React';
 
 export default {

code/examples/preact-kitchen-sink/src/stories/test-cases/__snapshots__/test-component.stories.storyshot

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Pragma test Default 1`] = `"<div>This component should render OK.</div>"`;

code/examples/preact-kitchen-sink/src/stories/test-cases/no-pragma.tsx

@@ -0,0 +1,3 @@
+const TestComponent = () => <div>This component should render OK.</div>;
+
+export default TestComponent;

code/examples/preact-kitchen-sink/src/stories/test-cases/test-component.stories.tsx

@@ -0,0 +1,7 @@
+import TestComponent from './no-pragma';
+
+export default {
+  title: 'Pragma test',
+};
+
+export const Default = () => <TestComponent />;

code/examples/preact-kitchen-sink/src/stories/welcome.stories.js

@@ -1,8 +1,4 @@
-/** @jsx h */
-
-import { h } from 'preact';
 import { linkTo } from '@storybook/addon-links';
-
 import Welcome from '../Welcome';
 
 export default {

code/examples/preact-kitchen-sink/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "jsxImportSource": "preact"
+  }
+}

code/presets/preact-webpack/src/index.ts

@@ -7,13 +7,30 @@ export const babelDefault: StorybookConfig['babelDefault'] = (config) => {
   return {
     ...config,
     plugins: [
+      [
+        require.resolve('@babel/plugin-transform-react-jsx'),
+        { importSource: 'preact', runtime: 'automatic' },
+      ],
       ...(config.plugins || []),
-      [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }, 'preset'],
     ],
   };
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
+  const rules = config.module?.rules || [];
+  const tsxRule = rules.find((rule) => (rule.test as RegExp).test?.('main.tsx'));
+  tsxRule.use = (tsxRule.use as any).map((entry: any) => {
+    let newPlugins = entry.options.plugins;
+    if (entry.loader?.includes('babel-loader')) {
+      newPlugins = (entry.options as any).plugins.map((plugin: any) => {
+        if (plugin[0]?.includes?.('@babel/plugin-transform-react-jsx')) {
+          return [plugin[0], { importSource: 'preact', runtime: 'automatic' }];
+        }
+        return plugin;
+      });
+    }
+    return { ...entry, options: { ...entry.options, plugins: newPlugins } };
+  });
   return {
     ...config,
     resolve: {
@@ -23,6 +40,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
         react: path.dirname(require.resolve('preact/compat/package.json')),
         'react-dom/test-utils': path.dirname(require.resolve('preact/test-utils/package.json')),
         'react-dom': path.dirname(require.resolve('preact/compat/package.json')),
+        'react/jsx-runtime': path.dirname(require.resolve('preact/jsx-runtime/package.json')),
       },
     },
   };

scripts/.babelrc.js

@@ -74,6 +74,31 @@ module.exports = {
         test: withTests,
       },
     },
+    {
+      test: './examples/preact-kitchen-sink',
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            corejs: '3',
+            targets,
+            modules,
+          },
+        ],
+        ['@babel/preset-typescript'],
+        [
+          '@babel/preset-react',
+          {
+            importSource: 'preact',
+            runtime: 'automatic',
+          },
+        ],
+        '@babel/preset-flow',
+      ],
+      env: { test: withTests },
+    },
     {
       test: './lib',
       presets: [