🎉 src/preact: convert first file to tsx (#37524)

* src/preact: convert first file to tsx * fix storybook
ampproject · Jan 31, 2022 · 5ed4b81 · 5ed4b81
1 parent 472aec3
commit 5ed4b81
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 39 deletions.
diff --git a/build-system/tasks/storybook/env/amp/webpack.config.js b/build-system/tasks/storybook/env/amp/webpack.config.js
@@ -18,15 +18,20 @@ module.exports = ({config}) => {
   config.resolve = {
     modules,
     alias: getRelativeAliasMap(rootDir),
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
   };
   config.module = {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.jsx?|tsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
           presets: [
+            [
+              '@babel/preset-typescript',
+              {jsxPragma: 'Preact', jsxPragmaFrag: 'Preact.Fragment'},
+            ],
             [
               '@babel/preset-env',
               {

diff --git a/build-system/tasks/storybook/env/preact/webpack.config.js b/build-system/tasks/storybook/env/preact/webpack.config.js
@@ -19,6 +19,7 @@ module.exports = ({config}) => {
   };
   config.resolve = {
     modules,
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     alias: {
       'react': 'preact/compat',
       'react-dom': 'preact/compat',
@@ -28,11 +29,15 @@ module.exports = ({config}) => {
   config.module = {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.jsx?|tsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
           presets: [
+            [
+              '@babel/preset-typescript',
+              {jsxPragma: 'Preact', jsxPragmaFrag: 'Preact.Fragment'},
+            ],
             [
               '@babel/preset-env',
               {

diff --git a/build-system/tasks/storybook/env/react/webpack.config.js b/build-system/tasks/storybook/env/react/webpack.config.js
@@ -70,6 +70,7 @@ module.exports = ({config}) => {
   config.resolve = {
     modules,
     plugins: [new ReactBuildImportResolver()],
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     alias: {
       ...getRelativeAliasMap(rootDir),
       // Alias preact to react
@@ -82,7 +83,7 @@ module.exports = ({config}) => {
   config.module = {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.jsx?|tsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: mergeReactBabelConfig({

diff --git a/src/preact/context.js → src/preact/context.tsx b/src/preact/context.js → src/preact/context.tsx
@@ -1,3 +1,5 @@
+import type {ComponentChildren, Context, VNode} from 'preact';
+
 import {
   Loading_Enum,
   reducer as loadingReducer,
@@ -6,27 +8,22 @@ import {
 import * as Preact from '#preact';
 import {createContext, useContext, useMemo} from '#preact';
 
-/**
- * @typedef {{
- *   renderable: boolean;
- *   playable: boolean;
- *   loading: Loading_Enum;
- *   notify?: () => {};
- * }} AmpContext
- */
+export interface AmpContext {
+  renderable: boolean;
+  playable: boolean;
+  loading: Loading_Enum;
+  notify?: () => {};
+}
 
-/**
- * @typedef {{
- *   renderable: boolean | undefined;
- *   playable: boolean | undefined;
- *   loading: string | undefined;
- *   notify?: () => {} | undefined;
- *   children?: import('preact').ComponentChildren;
- * }} ProviderProps
- */
+export interface ProviderProps {
+  renderable: boolean | undefined;
+  playable: boolean | undefined;
+  loading: string | undefined;
+  notify?: () => {} | undefined;
+  children?: ComponentChildren;
+}
 
-/** @type {import('preact').Context<AmpContext>} */
-let context;
+let context: Context<AmpContext>;
 
 /**
  * The external context given to React components to control whether they can
@@ -36,10 +33,8 @@ let context;
  *   `display-locking` CSS.
  * - playable: whether the playback is allowed in this vDOM area. If playback
  *   is not allow, the component must immediately stop the playback.
- *
- * @return {import('preact').Context<AmpContext>}
  */
-function getAmpContext() {
+function getAmpContext(): Context<AmpContext> {
   return (
     context ||
     (context = createContext({
@@ -52,17 +47,14 @@ function getAmpContext() {
 
 /**
  * A wrapper-component that recalculates and propagates AmpContext properties.
- *
- * @param {ProviderProps} props
- * @return {import('preact').VNode}
  */
 export function WithAmpContext({
   children,
   loading: loadingProp = 'auto',
   notify: notifyProp,
   playable: playableProp = true,
   renderable: renderableProp = true,
-}) {
+}: ProviderProps): VNode {
   const parent = useAmpContext();
   const renderable = renderableProp && parent.renderable;
   const playable = renderable && playableProp && parent.playable;
@@ -73,33 +65,27 @@ export function WithAmpContext({
   const notify = notifyProp || parent.notify;
   const current = useMemo(
     () =>
-      /** @type {AmpContext} */ ({
+      ({
         renderable,
         playable,
         loading,
         notify,
-      }),
+      } as AmpContext),
     [renderable, playable, loading, notify]
   );
   const AmpContext = getAmpContext();
   return <AmpContext.Provider children={children} value={current} />;
 }
 
-/**
- * @return {AmpContext}
- */
-export function useAmpContext() {
+export function useAmpContext(): AmpContext {
   const AmpContext = getAmpContext();
   return useContext(AmpContext);
 }
 
 /**
  * Whether the calling component should currently be in the loaded state.
- *
- * @param {Loading_Enum|string} loadingProp
- * @return {Loading_Enum}
  */
-export function useLoading(loadingProp) {
+export function useLoading(loadingProp: Loading_Enum | string): Loading_Enum {
   const {loading: loadingContext} = useAmpContext();
   return loadingReducer(loadingProp, loadingContext);
 }