TypeScript: Convert pageDataUrls provider

packages/design-system/tsconfig.json

@@ -19,6 +19,7 @@
     "src/types/*",
     "src/types.ts",
     "src/utils/*.ts",
+    "src/utils/*.tsx",
     "src/utils/constants.ts",
     "src/utils/localStore.ts",
     "src/utils/sessionStore.ts"

packages/story-editor/src/app/pageDataUrls/context.js → packages/story-editor/src/app/pageDataUrls/context.ts

@@ -18,4 +18,17 @@
  */
 import { createContext } from '@googleforcreators/react';
 
-export default createContext({ actions: {}, state: {} });
+/**
+ * Internal dependencies
+ */
+import type { PageDataUrlsContext } from '../../types';
+import { noop } from '../../utils/noop';
+
+export default createContext<PageDataUrlsContext>({
+  state: {
+    dataUrls: {},
+  },
+  actions: {
+    queuePageImageGeneration: noop,
+  },
+});

packages/story-editor/src/app/pageDataUrls/pageDataUrlsProvider.js → packages/story-editor/src/app/pageDataUrls/pageDataUrlsProvider.tsx

@@ -16,52 +16,48 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import type { Page } from '@googleforcreators/elements';
 import { useMemo, useCallback, useState } from '@googleforcreators/react';
+import type { PropsWithChildren } from 'react';
 
 /**
  * Internal dependencies
  */
 import useIdleTaskQueue from '../../utils/useIdleTaskQueue';
 import storyPageToDataUrl from '../pageCanvas/utils/storyPageToDataUrl';
+import type { PageDataUrlsState, PageDataUrlsActions } from '../../types';
 import Context from './context';
 
-/**
- * @typedef {import('@googleforcreators/elements').Page} Page
- */
-
-function PageDataUrlProvider({ children }) {
-  const [dataUrls, setDataUrls] = useState({});
+function PageDataUrlProvider({ children }: PropsWithChildren<unknown>) {
+  const [dataUrls, setDataUrls] = useState<PageDataUrlsState['dataUrls']>({});
   const queueIdleTask = useIdleTaskQueue();
 
   /**
    * Add page image generation task to a idle task
    * queue.
-   *
-   * @param {Page} storyPage Page object.
-   * @return {Function} function to cancel image generation request
    */
-  const queuePageImageGeneration = useCallback(
-    (storyPage) => {
-      const idleTaskUid = storyPage.id;
-      const idleTask = async () => {
-        const dataUrl = await storyPageToDataUrl(storyPage, {});
-        setDataUrls((state) => ({
-          ...state,
-          [storyPage.id]: dataUrl,
-        }));
-      };
+  const queuePageImageGeneration: PageDataUrlsActions['queuePageImageGeneration'] =
+    useCallback(
+      (storyPage: Page) => {
+        const idleTaskUid: string = storyPage.id;
+        const idleTask: () => Promise<void> = async () => {
+          const dataUrl = await storyPageToDataUrl(storyPage, {});
+          setDataUrls((state) => ({
+            ...state,
+            [storyPage?.id]: dataUrl,
+          }));
+        };
 
-      const clearQueueOfPageTask = queueIdleTask({
-        taskId: idleTaskUid,
-        task: idleTask,
-      });
-      return () => {
-        clearQueueOfPageTask();
-      };
-    },
-    [queueIdleTask]
-  );
+        const clearQueueOfPageTask = queueIdleTask({
+          taskId: idleTaskUid,
+          task: idleTask,
+        });
+        return () => {
+          clearQueueOfPageTask();
+        };
+      },
+      [queueIdleTask]
+    );
 
   const value = useMemo(
     () => ({
@@ -77,8 +73,5 @@ function PageDataUrlProvider({ children }) {
 
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
-PageDataUrlProvider.propTypes = {
-  children: PropTypes.node,
-};
 
 export default PageDataUrlProvider;

packages/story-editor/src/app/pageDataUrls/usePageDataUrls.js → packages/story-editor/src/app/pageDataUrls/usePageDataUrls.ts

@@ -21,10 +21,14 @@ import { useContextSelector, identity } from '@googleforcreators/react';
 /**
  * Internal dependencies
  */
+import type { PageDataUrlsContext } from '../../types';
 import Context from './context';
 
-function usePageDataUrls(selector) {
-  return useContextSelector(Context, selector ?? identity);
+function usePageDataUrls(): PageDataUrlsContext;
+function usePageDataUrls<T>(
+  selector: (state: PageDataUrlsContext) => T | PageDataUrlsContext = identity
+) {
+  return useContextSelector(Context, selector);
 }
 
 export default usePageDataUrls;

packages/story-editor/src/types/index.ts

@@ -19,6 +19,7 @@ export * from './currentUserProvider';
 export * from './historyProvider';
 export * from './layoutProvider';
 export * from './pageCanvas';
+export * from './pageDataUrls';
 export * from './story';
 export * from './storyEditor';
 export * from './storyProvider';

packages/story-editor/src/types/pageDataUrls.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { Page } from '@googleforcreators/elements';
+
+export interface PageDataUrlsState {
+  dataUrls: Record<string, string>;
+}
+
+export interface PageDataUrlsActions {
+  queuePageImageGeneration: (Page: Page) => void;
+}
+
+export interface PageDataUrlsContext {
+  state: PageDataUrlsState;
+  actions: PageDataUrlsActions;
+}

packages/story-editor/src/utils/idleCallback.ts

@@ -24,7 +24,7 @@ const requestIdleCallback =
     return setTimeout(() => {
       callback({
         get didTimeout() {
-          return options.timeout
+          return typeof options.timeout !== 'undefined'
             ? false
             : performance.now() - start - relaxation > timeout;
         },

packages/story-editor/tsconfig.json

@@ -33,6 +33,7 @@
     "src/app/media/media3p/*.tsx",
     "src/app/media/utils/*.ts",
     "src/app/pageCanvas",
+    "src/app/pageDataUrls",
     "src/app/story",
     "src/constants/*",
     "src/utils/**/*.ts",

tests/js/jest.config.js

@@ -44,7 +44,7 @@ export default {
   // See https://jestjs.io/docs/configuration#transformignorepatterns-arraystring
   transformIgnorePatterns: ['/node_modules/(?!(use-reduction)/)'],
   testEnvironment: 'jsdom',
-  testMatch: ['**/test/**/*.[jt]s'],
+  testMatch: ['**/test/**/*.[jt]s?(x)'],
   globals: {
     WEB_STORIES_ENV: 'development',
     WEB_STORIES_DISABLE_ERROR_BOUNDARIES: true,