Fix toast ESM build and SSR support (#4124)

Author: devongovett

examples/rsp-next-ts/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@adobe/react-spectrum": "^3.22.0",
     "@react-spectrum/color": "^3.0.0-beta.16",
+    "@react-spectrum/toast": "^3.0.0-alpha.0",
     "@spectrum-icons/illustrations": "^3.5.0",
     "@spectrum-icons/workflow": "^4.0.3",
     "next": "^13.1.1",

examples/rsp-next-ts/pages/_app.tsx

@@ -13,6 +13,7 @@ import { ColorScheme } from "@react-types/provider";
 import { useState } from "react";
 import Moon from "@spectrum-icons/workflow/Moon";
 import Light from "@spectrum-icons/workflow/Light";
+import { ToastContainer } from "@react-spectrum/toast";
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [theme, setTheme] = useState<ColorScheme>("light");
@@ -46,6 +47,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             <Component {...pageProps} />
           </View>
         </Grid>
+        <ToastContainer />
       </Provider>
     </SSRProvider>
   );

examples/rsp-next-ts/pages/index.tsx

@@ -80,6 +80,7 @@ import {
   ColorWheel,
 } from "@react-spectrum/color";
 import ReorderableListView from "../components/ReorderableListView";
+import {ToastQueue} from '@react-spectrum/toast';
 
 export default function Home() {
   let [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -138,7 +139,7 @@ export default function Home() {
             <ReorderableListView />
             <MenuTrigger>
               <ActionButton>Menu</ActionButton>
-              <Menu onAction={(key) => alert(key)}>
+              <Menu onAction={(key) => ToastQueue.positive(key)}>
                 <Item key="cut">Cut</Item>
                 <Item key="copy">Copy</Item>
                 <Item key="paste">Paste</Item>

packages/@react-aria/landmark/src/useLandmark.ts

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/shared';
 import {MutableRefObject, useCallback, useEffect, useState} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
-import {useSyncExternalStore} from 'use-sync-external-store/shim';
+import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export type AriaLandmarkRole = 'main' | 'region' | 'search' | 'navigation' | 'form' | 'banner' | 'contentinfo' | 'complementary';
 
@@ -85,7 +85,11 @@ function subscribe(fn: () => void) {
   return () => document.removeEventListener('react-aria-landmark-manager-change', fn);
 }
 
-function getLandmarkManager(): LandmarkManagerApi {
+function getLandmarkManager(): LandmarkManagerApi | null {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
   // Reuse an existing instance if it has the same or greater version.
   let instance = document[landmarkSymbol];
   if (instance && instance.version >= LANDMARK_API_VERSION) {
@@ -100,8 +104,8 @@ function getLandmarkManager(): LandmarkManagerApi {
 }
 
 // Subscribes a React component to the current landmark manager instance.
-function useLandmarkManager(): LandmarkManagerApi {
-  return useSyncExternalStore(subscribe, getLandmarkManager);
+function useLandmarkManager(): LandmarkManagerApi | null {
+  return useSyncExternalStore(subscribe, getLandmarkManager, getLandmarkManager);
 }
 
 class LandmarkManager implements LandmarkManagerApi {

packages/@react-aria/landmark/test/useLandmark.ssr.test.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you 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 http://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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {testSSR} from '@react-spectrum/test-utils';
+
+describe('useLandmark SSR', function () {
+  it('should render without errors', async function () {
+    await testSSR(__filename, `
+      import {useLandmark} from '../';
+
+      function Main(props) {
+        let ref = React.useRef();
+        let {landmarkProps} = useLandmark({...props, role: 'main'}, ref);
+        return <main ref={ref} {...landmarkProps}>{props.children}</main>;
+      }
+
+      <Main />
+    `);
+  });
+});

packages/@react-spectrum/toast/src/ToastContainer.tsx

@@ -15,7 +15,7 @@ import React, {ReactElement, ReactNode, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
 import {Toaster} from './Toaster';
 import {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';
-import {useSyncExternalStore} from 'use-sync-external-store/shim';
+import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
 
@@ -60,7 +60,7 @@ function getActiveToastContainer() {
 }
 
 function useActiveToastContainer() {
-  return useSyncExternalStore(subscribe, getActiveToastContainer);
+  return useSyncExternalStore(subscribe, getActiveToastContainer, getActiveToastContainer);
 }
 
 /**

packages/@react-spectrum/toast/test/ToastContainer.ssr.test.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you 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 http://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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {testSSR} from '@react-spectrum/test-utils';
+
+describe('ToastContainer SSR', function () {
+  it('should render without errors', async function () {
+    await testSSR(__filename, `
+      import {Provider} from '@react-spectrum/provider';
+      import {theme} from '@react-spectrum/theme-default';
+      import {ToastContainer} from '../';
+
+      <Provider theme={theme}>
+        <ToastContainer />
+      </Provider>
+    `);
+  });
+});

packages/@react-stately/toast/src/useToastState.ts

@@ -12,7 +12,7 @@
 
 import {useCallback, useMemo} from 'react';
 // Shim to support React 17 and below.
-import {useSyncExternalStore} from 'use-sync-external-store/shim';
+import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export interface ToastStateProps {
   /** The maximum number of toasts to display at a time. */
@@ -79,7 +79,7 @@ export function useToastState<T>(props: ToastStateProps = {}): ToastState<T> {
 export function useToastQueue<T>(queue: ToastQueue<T>): ToastState<T> {
   let subscribe = useCallback(fn => queue.subscribe(fn), [queue]);
   let getSnapshot = useCallback(() => queue.visibleToasts, [queue]);
-  let visibleToasts = useSyncExternalStore(subscribe, getSnapshot);
+  let visibleToasts = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
   return {
     visibleToasts,