Convert transform package to TypeScript

packages/react/src/context.ts

@@ -14,11 +14,6 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import type { Context } from 'react';
-
 export { createContext, useContext } from 'use-context-selector';
 
-export const identity = <T>(state: Context<T>) => state;
+export const identity = <T>(state: T) => state;

packages/transform/package.json

@@ -26,12 +26,13 @@
   },
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },

packages/transform/src/context.js → packages/transform/src/context.ts

@@ -19,4 +19,8 @@
  */
 import { createContext } from '@googleforcreators/react';
 
-export default createContext({ actions: {}, state: {} });
+/**
+ * Internal dependencies
+ */
+import type { State } from './types';
+export default createContext<State>({ actions: {}, state: {} });

packages/transform/src/transformProvider.js → packages/transform/src/transformProvider.tsx

@@ -17,29 +17,38 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useCallback, useRef, useState } from '@googleforcreators/react';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
 import Context from './context';
+import type {
+  HandlersList,
+  TransformsList,
+  Transform,
+  TransformHandler,
+} from './types';
 
-function TransformProvider({ children }) {
-  const transformHandlersRef = useRef({});
-  const lastTransformsRef = useRef({});
+function TransformProvider({ children }: { children: ReactNode }) {
+  const transformHandlersRef = useRef<HandlersList>({});
+  const lastTransformsRef = useRef<TransformsList>({});
   const [isAnythingTransforming, setIsAnythingTransforming] = useState(false);
 
-  const registerTransformHandler = useCallback((id, handler) => {
-    const handlerListMap = transformHandlersRef.current;
-    const handlerList = handlerListMap[id] || (handlerListMap[id] = []);
-    handlerList.push(handler);
-    return () => {
-      handlerList.splice(handlerList.indexOf(handler), 1);
-    };
-  }, []);
+  const registerTransformHandler = useCallback(
+    (id: string, handler: TransformHandler) => {
+      const handlerListMap = transformHandlersRef.current;
+      const handlerList = handlerListMap[id] || (handlerListMap[id] = []);
+      handlerList.push(handler);
+      return () => {
+        handlerList.splice(handlerList.indexOf(handler), 1);
+      };
+    },
+    []
+  );
 
-  const pushTransform = useCallback((id, transform) => {
+  const pushTransform = useCallback((id: string, transform: Transform) => {
     const handlerListMap = transformHandlersRef.current;
     const lastTransforms = lastTransformsRef.current;
     const handlerList = handlerListMap[id];
@@ -87,11 +96,7 @@ function TransformProvider({ children }) {
   return <Context.Provider value={state}>{children}</Context.Provider>;
 }
 
-TransformProvider.propTypes = {
-  children: PropTypes.node,
-};
-
-const isDoneTransform = (transform) => {
+const isDoneTransform = (transform: null | object) => {
   if (transform === null) {
     return true;
   }

packages/transform/src/types.ts

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+export type TransformHandler = (frame: object | null) => void;
+export type HandlerRegister = (
+  id: string,
+  handler: TransformHandler
+) => () => void;
+
+export type HandlersList = Record<string, TransformHandler[]>;
+
+export type TransformsList = Record<string, Record<string, unknown> | null>;
+
+export interface Transform {
+  staticTransformation: boolean;
+}
+
+export type PushTransform = (id: string, transform: Transform) => void;
+export type ClearTransform = () => void;
+
+export interface State {
+  actions: {
+    registerTransformHandler?: HandlerRegister;
+    pushTransform?: PushTransform;
+    clearTransforms?: ClearTransform;
+  };
+  state: {
+    isAnythingTransforming?: boolean;
+  };
+}

packages/transform/src/useTransform.js → packages/transform/src/useTransform.ts

@@ -22,8 +22,9 @@ import { identity, useContextSelector } from '@googleforcreators/react';
  * Internal dependencies
  */
 import Context from './context';
+import type { State } from './types';
 
-function useTransform(selector) {
+function useTransform<T>(selector: (state: State) => T) {
   return useContextSelector(Context, selector ?? identity);
 }
 

packages/transform/src/useTransformHandler.js → packages/transform/src/useTransformHandler.ts

@@ -18,30 +18,31 @@
  * External dependencies
  */
 import { useEffect } from '@googleforcreators/react';
+import type { DependencyList } from 'react';
 
 /**
  * Internal dependencies
  */
 import useTransform from './useTransform';
+import type { TransformHandler } from './types';
 
 /**
- * @callback TransformHandler
- * @param {?Object} frameObject
- */
-
-/**
- * @param {string} id Target element's id.
- * @param {TransformHandler} handler The transform handler. The argument is
+ * @param id Target element's id.
+ * @param handler The transform handler. The argument is
  * the frame object. The `null` value resets the transform.
- * @param {Array} [deps] The effect's dependencies.
+ * @param [deps] The effect's dependencies.
  */
-function useTransformHandler(id, handler, deps = undefined) {
+function useTransformHandler(
+  id: string,
+  handler: TransformHandler,
+  deps: DependencyList | undefined = undefined
+) {
   const registerTransformHandler = useTransform(
     ({ actions }) => actions.registerTransformHandler
   );
 
   useEffect(
-    () => registerTransformHandler(id, handler),
+    () => registerTransformHandler?.(id, handler),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We want to pass through provided deps.
     deps
   );

packages/transform/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "references": [{ "path": "../react" }],
+  "include": ["src/**/*"]
+}

tsconfig.json

@@ -7,6 +7,7 @@
     { "path": "packages/react" },
     { "path": "packages/stickers" },
     { "path": "packages/tracking" },
+    { "path": "packages/transform" },
     { "path": "packages/units" },
     { "path": "packages/url" }
   ],