Add support for importSource in TSX

.babelrc.js

@@ -81,13 +81,15 @@ module.exports = {
             modules,
           },
         ],
+        ['@babel/preset-typescript'],
         [
           '@babel/preset-react',
           {
-            pragma: 'h',
-            pragmaFrag: 'Fragment',
+            importSource: 'preact',
+            runtime: 'automatic',
           },
         ],
+        '@babel/preset-flow',
       ],
       env: { test: withTests },
     },

examples/preact-kitchen-sink/.storybook/main.js

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

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 /**
  * The button component will render a clickable button
  */

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import React from 'react';
 import PropTypes from 'prop-types';
 

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

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 const Main = (props) => (
   <article
     {...props}

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

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

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

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

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { linkTo } from '@storybook/addon-links';
 import Button from '../Button';
 

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
 import Button from '../Button';
 

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

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

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

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 const TestComponent = () => <div>This component should render OK.</div>;
 
 export default TestComponent;

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import TestComponent from './no-pragma';
 
 export default {

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { linkTo } from '@storybook/addon-links';
 import Welcome from '../Welcome';
 

examples/preact-kitchen-sink/tsconfig.json

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