🏗 Update Preact and TypeScript dependencies (ampproject#39252)

* Bump Preact to v10.16.0

* Change how Preact's `render`/`hydrate` functions are re-export via the `preact/dom` namespace to match changes in upstream

* Bump Typescript to v4.9.5

* Fix typing issues

* Revert change in build-system/tasks/build-story-localization.js and replace it with type casting

Author: danielrozenberg

build-system/common/update-packages.js

@@ -179,14 +179,6 @@ function patchShadowDom() {
 
   writeIfUpdated(patchedName, file);
 }
-/**
- * Adds a missing export statement to the preact module.
- */
-function patchPreact() {
-  fs.ensureDirSync('node_modules/preact/dom');
-  const file = `export { render, hydrate } from 'preact';`;
-  writeIfUpdated('node_modules/preact/dom/index.js', file);
-}
 
 /**
  * Deletes the map file for rrule, which breaks closure compiler.
@@ -235,7 +227,6 @@ function updatePackages() {
   patchIntersectionObserver();
   patchResizeObserver();
   patchShadowDom();
-  patchPreact();
   removeRruleSourcemap();
   if (isCiBuild()) {
     runNpmChecks();

build-system/tasks/build-story-localization.js

@@ -23,6 +23,8 @@ function getLanguageCodeFallbacks(languageCode) {
   if (!languageCode) {
     return [FALLBACK_LANGUAGE_CODE];
   }
+
+  /** @type {string[]} */
   const matches = languageCode.match(LANGUAGE_CODE_CHUNK_REGEX) || [];
   return matches.reduce(
     (fallbackLanguageCodeList, _, index) => {

build-system/tasks/e2e/amp-driver.js

@@ -119,7 +119,7 @@ const EnvironmentBehaviorMap = {
 
 /**
  * @param {string} url
- * @param {{isEmail: boolean}=} opts
+ * @param {{isEmail: boolean}} opts
  * @return {string}
  */
 function getViewerUrl(url, {isEmail} = {isEmail: false}) {

package-lock.json

@@ -30,7 +30,7 @@
     "jss-preset-default": "10.8.2",
     "moment": "2.29.4",
     "obj-str": "1.1.0",
-    "preact": "10.5.15",
+    "preact": "10.16.0",
     "react-day-picker": "8.0.0-beta.37",
     "react-jss": "10.8.2",
     "resize-observer-polyfill": "1.5.1",
@@ -180,7 +180,7 @@
     "tempy": "1.0.1",
     "terser": "5.14.2",
     "traverse": "0.6.6",
-    "typescript": "4.5.4",
+    "typescript": "4.9.5",
     "util": "0.12.4"
   }
 }

package.json

@@ -18,17 +18,11 @@ declare global {
   }
 
   interface ShadowRoot {
-    adoptedStyleSheets?: CSSStyleSheet[];
+    adoptedStyleSheets: CSSStyleSheet[];
   }
 
   interface CSSStyleSheet {
-    replaceSync?: (text: string) => void;
-  }
-
-  interface Event {
-    // We assign an `Object` at times, though Typescript's dom lib supports
-    // string or null, so here we allow all three (plus unedfined).
-    data?: Object | string | null;
+    replaceSync: (text: string) => void;
   }
 
   // Fullscreen proprties

src/core/dom/globals.d.ts

@@ -507,11 +507,9 @@ export function dispatchCustomEvent(node, name, opt_data, opt_options) {
   const data = opt_data || {};
   // Constructors of events need to come from the correct window. Sigh.
   devAssert(node.ownerDocument);
-  const event = node.ownerDocument.createEvent('Event');
-  event.data = data;
 
   const {bubbles, cancelable} = opt_options || DEFAULT_CUSTOM_EVENT_OPTIONS;
-  event.initEvent(name, bubbles, cancelable);
+  const event = new MessageEvent(name, {data, bubbles, cancelable});
   node.dispatchEvent(event);
 }
 

src/core/dom/index.js

@@ -82,7 +82,10 @@ let win;
  * @param {typeof import('./base-element').PreactBaseElement} BaseElement
  * @param {typeof globalThis} _win
  * @return {typeof HTMLElement}
- */
+ * @template {{
+ *   readyState?: string | undefined;
+ *   pause?: (() => void) | undefined;
+ * }} T */
 function createBentoElementClass(BaseElement, _win = self) {
   if (!ExtendableHTMLElement || win !== _win) {
     win = _win;
@@ -96,7 +99,6 @@ function createBentoElementClass(BaseElement, _win = self) {
 
       /**
        * @type {import('./base-element').PreactBaseElement<T>}
-       * @template T
        */
       this.implementation = new BaseElement(
         /** @type {AmpElement} */ (/** @type {?} */ (this))

src/preact/bento-ce.js

@@ -64,7 +64,10 @@ function ProxyIframeEmbedWithRef(
     );
   }
 
+  /** @type {import('preact/hooks').MutableRef<any>} */
   const contentRef = useRef(null);
+  // TODO: this should be IFrameEmbedApi, but it causes some minor type issues.
+  /** @type {import('preact/hooks').MutableRef<any>} */
   const iframeRef = useRef(null);
   const count = useMemo(() => {
     if (!countGenerators[type]) {
@@ -75,6 +78,7 @@ function ProxyIframeEmbedWithRef(
 
   const [nameAndSrc, setNameAndSrc] = useState({name: nameProp, src: srcProp});
   const {name, src} = nameAndSrc;
+  /** @type {import('preact/hooks').MutableRef<string?>} */
   const sentinelRef = useRef(null);
 
   useLayoutEffect(() => {

src/preact/component/3p-frame.js

@@ -71,6 +71,7 @@ export function IframeEmbedWithRef(
     [onReadyStateRef]
   );
 
+  /** @type {import('preact/hooks').MutableRef<HTMLIFrameElement?>} */
   const iframeRef = useRef(null);
 
   // Component API: IframeEmbedDef.Api.
@@ -112,7 +113,7 @@ export function IframeEmbedWithRef(
         iframe.src = iframe.src;
       } else {
         const parent = iframe.parentNode;
-        parent.insertBefore(iframe, iframe.nextSibling);
+        parent?.insertBefore(iframe, iframe.nextSibling);
       }
     }
   }, [playable]);
@@ -137,8 +138,8 @@ export function IframeEmbedWithRef(
     };
 
     const {defaultView} = iframe.ownerDocument;
-    defaultView.addEventListener('message', handler);
-    return () => defaultView.removeEventListener('message', handler);
+    defaultView?.addEventListener('message', handler);
+    return () => defaultView?.removeEventListener('message', handler);
   }, [matchesMessagingOrigin, messageHandler, mount, ready]);
 
   return (

src/preact/component/iframe.js

@@ -10,6 +10,7 @@ import {useCallback, useEffect, useRef, useState} from '#preact';
  * @return {function(Element):void}
  */
 export function useIntersectionObserver(callback, ioOptions) {
+  /** @type {import('preact/hooks').MutableRef<import('#core/types/function/types').UnlistenCallback?>} */
   const unobserveRef = useRef(null);
   const refCb = useCallback(
     /** @param {Element} node */

src/preact/component/intersection-observer.js

@@ -0,0 +1,8 @@
+/**
+ * Re-export the `render`/`hydrate` functions from 'preact' as 'preact/dom' (via
+ * ../../tsconfig.base.json) to make it more consistent with React. This makes
+ * remapping the imports for React builds simple (preact/dom --> react-dom).
+ *
+ * @fileoverview
+ */
+export {hydrate, render} from 'preact';

src/preact/preact-dom.d.ts

@@ -39,7 +39,9 @@
       "#test/*": ["./test/*"],
       "#testing/*": ["./testing/*"],
 
-      "#third_party/*": ["./third_party/*"]
+      "#third_party/*": ["./third_party/*"],
+
+      "preact/dom": ["./src/preact/preact-dom.ts"]
     }
   },